21天好习惯 第一期-21

2024-03-22 09:31:52

JavaScript基础

关于<script>

<script>能够将Javascript插入到HTML中

使用<script>的两种方式：

  1. 在网页中嵌入Javascript代码

  2. 使用外部JavaScript文件 <script src = ".js" ></script> 通常将所有JavaScript引用放在<body>元素中

  3. 推迟执行脚本：利用defer属性，脚本会延迟到整个页面都解析完毕后再将脚本按出现次序运行，避免出现找不到对象的情况。<script defer src = ".js" ></script>

  4. 异步执行脚本：async属性指定的<script …/>会启动新线程, 异步执行<script …/>元素导入的脚本文件。也就是说，标记为async的脚本不能保证按照出现的次序执行

变量

js引擎会优先解析var变量和function定义！在预解析完成后从上到下逐步进行！
解析var变量时，会把值存储在“执行环境”中，而不会去赋值，值是存储作用！

var

var关键字：用var定义的变量可以保存任何数据类型的值。var声明的范围是函数作用域。使用var在函数或全局内任何地方声明变量相当于在其内部最顶上声明它，这种行为称为Hoisting（提升）。

let

let关键字：let定义的变量与var一致，也可以保存任何数据类型的值。但与var有所区别的是let的声明范围是块作用域，即只能作用于块内，不能作用域块外。而且let不能像var一样提升，在let声明被执行之前不可引用该变量，也就是“暂时性死区”。

原始值

原始值：存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。

原始值不能有属性，如果是以new关键字对原始类型进行初始化，则将创建一个Object类型的实例

引用值

引用值：存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。是特定引用类型的实例

对于引用值而言，可以随时添加、修改、删除其属性和方法

let person = new Object();
person.name = "Jack";

为了判断对象的类型，可以使用instanceof 操作符

console.log(person instanceof Object);//true,判断变量person是否为bject

（引用类型与类不是一个概念）

数据类型

undefined类型

未定义。声明了变量但为对其进行初始化，数据类型默认为undefined。不要显示将变量值设置为undefined

NULL类型

null值表示一个空对象指针。当变量需保存对象，但临时没有对象要保存，就需要用null填充

Boolen类型

布尔类型。字面量分别为true和false。在某些情况其他数据类型会自动转换成相应的布尔值，像if控制语句

Number类型

数字。能够表示整数和浮点数。

其中浮点数在进行算术运算时精确度不高，为了解决判断0.1+0.2===0.3结果为false，可以用0.1+0.2-0.3<Number.EPSILON代替。

NaN：用于表示本来要返回数值的操作失败了，例如进行0/2计算。isNaN()函数能够通过参数来判断并返回布尔值

数值转换：

  1. Number()：函数能够将任何数据类型转换成数值，例如布尔类型值true转换成1，当将字符串转换时，若字符串找不到对应数值，函数将返回NaN。
  2. parseInt()：函数作用是将字符串转化为数值，主要判断字符串中是否包含数值模式。该函数会从第一个非空格字符开始转换，当碰到非数值字符或到字符串末尾，函数将直接返回数值。（parseint能够识别不同的整数格式，例如"0xA"会被解释为十六进制数。为了区分数值格式，函数能接受第二个参数，用于指定底数，例如识别十六进制数，第二个参数可以传入16）
  3. parFloat()：由于parseint()函数无法识别一个浮点数小数点后的数字，所以可以使用另一个于其类似的函数——parFloat()。这个函数能够识别所有的浮点格式且忽略字符串开头的零。

string 类型

用来表示字符串，使用双引号或单引号标识。

1）字符串一旦创建，值就不能改变，若要修改某个变量中的字符串值，必须先销毁原始的字符串。

2）toString()能够将数值、布尔值、对象和字符串值转化为string类型。当进行数值转化时可以对该函数引入参数，例如toString(2)表示将数值转化为二进制形式再转化为字符串

3）模板字面量：`保留换行字符

let A = 'first line\nsecond line'//使用单引号
let B = `first line
second line`

4）字符串插值：模板字面量支持字符串插值，可以在一个连续定义中插入一个或多个值，通过${}来实现

let A = 5;
let B = 4;
let result = `${A} != ${B}`;

5）模板字面量标签函数

用来自定义模板字面量中的插值的行为

function foo(string,aValue,bValue,sumValue){
  console.log(string); // ["", "+", "=", ""]
  console.log(aValue); // 12
  console.log(bValue); // 5
  console.log(sumValue);//17

  return sumValue*2;
}
let res= foo`${a}+${b}=${a+b}`;
console.log(res) //34

对于有n个插值的模板字面量，传给标签函数的表达式参数个数为n。传给标签函数的第一个参数，包含的字符串个数为n+1，是一个由所有普通字符串（插入表达式之间的部分）组成的数组 即["", "+", "=", ""]。

6）原始字符串

使用String.raw能够直接获得原始字符串（所有字符串的原始未处理版本，例如\n）

console.log(`first\nsecond`);
//first
//second
console.log(String.raw`first\nsecond`);//first\nsecond,即不会转化成转义序列的形式

symbol类型

符号（Symbol）是一种新的原始数据类型 ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名（不会发生属性冲突的问题）

符号需要使用Symbol()函数初始化 let sym = Symbol();

let a = Symbol();
let b = Symbol();
console.log(a==b);//false

通过上例可以发现，创建Symbol()实例并将其用作对象的新属性，保证它不会覆盖已有的属性对象

为了避免创建符号包装吨箱，Symbol()函数不能与new关键字一起作为构造函数使用

let A = new Symbol();//错误

全局函数注册表：若运行时不同部分需要共享和重用符号，可以用一个字符串作为键，在全局符号注册表中创建并重用符号，使用Symbol.for()函数

let A = Symbol.for('foo');
let B = Symbol.for('foo');
console.log(A==B);//true
symbol.keyFor(A);//查询全局注册表中的键"foo"

利用符号作为属性

let s1 = Symbol('foo');
let s2 = Symbol('bar');
let s3 = Symbol('baz');

let o = {[s1]:'fool val'};
console.log(o);//Symbol(foo): "fool val"

//Object.defineProperty直接在一个对象上定义新的属性或修改现有属性，并返回该对象。
//Object.defineProperty 需要三个参数（object , propName , descriptor）分别为对象，属性名，属性描述
Object.defineProperty(o, s2, {value: 'bar val'});
console.log(o);//Symbol(bar): "bar val"

//Object.defineProperties定义了o对象上props的可枚举属性相对应的所有属性。
Object.defineProperties(o, {
    [s3]: { value: 'baz val' },
    [s4]: { value: 'qux val'}
})
console.log(o);
//Symbol(baz): "baz val"
//Symbol(qux): "qux val"

Object.getOwnPropertyNames(o);//返回一个由指定对象自身的所有常规属性名(用字符串或数值表示的属性)的数组，例如 let o = {baz: 'baz val'};
Object.getOwnPropertySymbols(o);//返回一个给定对象自身的所有 Symbol属性名的数组。
Object.getOwnPropertyDescriptors(o)//返回同时包含常规和符号属性描述的对象
Reflect.ownKeys();//返回两种类型的属性名数组

Object类型

数据和功能的集合

创建Object类型实例：let o = new Object();

基本引用类型

对象是某个特定引用类型的实例。

Date类型

创建日期对象

let now = new Date();其中new操作符后面是一个构造函数，用来创建新对象的函数。

不对Date进行传参，则创建的对象将保存当前的日期和时间。

日期格式

1、月/日/年：“5/23/2021”

2、月名 日， 年：“May 23, 2021”

3、年, 月, 日：2021， 5， 23（表示6月23日）

4、年-月-日：‘2021-05-23’（国际标准）

1、接收日期的字符串参数Date.parse()

传递2019年5月1日：let someDate = new Date(Date.parse("May 23, 2019"));

Date.UTC()作用与Date.parse()相同，但与Date.parse()不同，Date.UTC()参数是年、零起点月（1月是0）。

传递2019年5月1日：let someDate = new Date(Date.UTC(2019, 4, 1));

getFullYear()//使用 getFullYear() 获取年份。
getMounth()//获取月份
getDate()//获取日期
getDay()//获取星期
getHours()//获取小时
getMinutes()//获取分钟
getSeconds()//获取秒


getTime()//getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

setFullYear()//使用 setFullYear() 设置具体的日期。

toUTCString()//使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

getDay()//使用 getDay() 和数组来显示星期，而不仅仅是数字。

Display a clock//如何在网页上显示一个钟表。

let now = +new Date();返回毫秒数（时间戳）

利用时间戳可以设计倒计时工具

var nowTime = +new Date();//返回当前时间的毫秒级时间戳
var s = parse(nowTime%60);//计算秒数
var m = parse(nowTime/60%60);//计算分钟数
var h = parse(nowTime/3600%24);//计算小时
var d = parse(nowTime/3600/24);//计算天数

RegExp类型

使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换，例如密码的复杂度分析。

let expression = /pattern/flags;正则表达式由两部分构成 ：/正则表达式模式/修饰符(可选)

正则表达式模式

包括字符类、限定符、分组、向前查找和反向引用

//1、字符
let a = /ab/i;//匹配字符串中的第一个ab，不区分大小写
//2、[abc]	查找方括号之间的任何字符。
let a = /[bc]at/i;//匹配第一个"bai"或"cat"，不区分大小写
//3、[1-9]
let b = /[0-9]/i;//查找任何从 0 至 9 的数字。
//4、占位符.
let c = /.at/i;//查找第一个以at为结尾的三字符组合
//5/{n}
let a = /ab{2}c/i;//查找第一个abbc
let b = /ab{2,}c/i;//其中b出现2至2以上次
let c = /ab{2, 6}c/i;//其中b出现2至6次

//(x|y)	查找任何以 | 分隔的选项
//d	查找数字。
//\s	查找空白字符。
//\b	匹配单词边界。
//\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。
//n+	匹配任何包含至少一个 n 的字符串。
//n*	匹配任何包含零个或多个 n 的字符串。
//n?	匹配任何包含零个或一个 n 的字符串。

修饰符

i ignore - 不区分大小写
g global - 全局匹配（表示查找字符串的全部内容，而不是找到第一个就结束）
m multi line - 多行匹配（表示查找到一行文本末尾时会继续查找）
s 表示元字符 **.**匹配任何字符，包含换行符 \n

exec()

RegExp实例的主要方法exec()，主要用于配合捕获组使用。接受一个参数，若找到匹配项，则返回包含第一个匹配信息的数组；否则返回NULL。返回的数组包含两个额外属性：index（字符串匹配起始位置），input（要查找的字符串）

var a = "a dog";
let b = /a (cat|dog)/i;
let match = b.exec(a);
console.log(match.index);//0
console.log(match.input);//'a dog'

当修饰符为g时，模式会设置全局标记，每次调用exec()都会返回字符串的下一个匹配项，直到搜索到字符串末尾。有特殊的属性：lastIndex，反映匹配的最后一个字符的索引

test()

若只想测试模式是否匹配则可使用test()方法。当出现匹配返回true，否则返回false

上一篇：前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的？


下一篇：实验三