关于ES6的一些基础内容

ES6简介

1.ECMAScript6：于2015年6月发布，也称ES2015

2.ECMA：国际化的标准组织

3.ECMAScript：以JavaScript为基础制定的标准，ECMAScript是JavaScript的标准；JavaScript是ECMAScript的具体表现

let和const

let命令

1.作用：声明变量

2.语法格式：let num= 1

3.与var不同：①不存在变量提升：先声明再使用

②块级作用域：{}就是一个作用域，let声明的变量只在当前作用域下生效

③暂时性死区：块级作用+先声明后使用

④同一个作用域内不允许重复声明

const命令

1.作用：声明常量

2.语法格式：const PI = 3.14 -- 建议常量名使用大写

3.与普通变量的区别（特点）：①先声明再使用

②不允许重复声明或赋值

③常量必须在声明的同时赋值 -- 常量不允许重新赋值

④锁栈不锁堆

⑤块级作用域

⑥暂时性死区

globalThis对象

1.let,const,classs声明的变量不属于window

2.各环境下，js顶层对象的统一叫法

变量的解构赋值

1.定义：ES6中允许按照一定的规则，从数组或对象中取值，然后对变量进行赋值

数组的解构赋值

1.语法结构：let [a,b,c] = [1,2,3]

2.规则 ：①判断解构的值是否能被遍历（具备iterator接口），不能则报错

②按照解构后的顺序一一对应，如果解构失败，则值为undefined

3.默认值：let [a = 1] = [2]

生效：解构的值 === undefined

对象的解构赋值

1.语法结构：{x:a，y:b} = {x:1，y:2} -- 当a和x相同时，可以省略

2.规则：①判断解构的值能否被转换为对象（null，undefined）

数组的扩展

扩展运算符

1.格式：...val

2.作用：将具备遍历器接口的对象中的元素转换为使用,分隔得参数序列

3.注意：①扩展运算符后只能跟具备遍历器接口的

②只有在函数调用时才能放在小括号内

4.应用：①函数参数

②简单深拷贝

③合并数组

④将类似数组的对象转换为真数组

5.注意：①应用在数组内，也可以用在小括号内 -- 不能应用在除函数调用以外的括号内

②合并或拷贝数组时，只能实现一层深拷贝

扩展函数

1.Array.from():将具备遍历器接口的对象转换为真数组

2.Array.of():将一数值转换为数组

3.copyWithin(target,start=0,end=arr.length)：将数组从target开始从start开始到end-1的元素替换，然后返回数组

  var arr6 = [1,2,3,4,5,6,7,8];
    arr6.copyWithin(2,0,3); // [1,2,1,2,3,6,7,8]
    console.log(arr6);

4.find():返回数组中第一个符合条件的元素

findIndex():返回数组中第一个符合条件的元素索引

5.fill(val,start=0,end=arr.length):使用val作为元素填充到数组的start到end-1的位置 -- 填充元素如果是引用类型，则会指向同一个地址

6.返回遍历器对象用于遍历：entries():返回的键

keys()：返回的值

values()：返回的键值对

7.flat(n=1):拉平n层数组，可以用infinity实现拉平任意层数组

flatMap():将数组的所有执行一个函数后拉平 -- 只能拉一平

8.at(index)：获取数组中的某一个元素 -- index可以为负数，表示从末尾开始取值

一、构造函数上：①Array.from():将类似数组的对象转换为真对象

②Array.of（）：将一组值声明为数组

二、实例方法：①查找元素：find()， findIndex()，includes()

②遍历相关：entries()，keys()， values()

③拉平数组：flat(n=1)，flatMap()

④其他：copyWithin(target,start=0,end=arr.length)

fill(val,start=0,end=arr.length)，at()

对象的扩展

1.属性简洁表示法

let obj = {
    name,  //name是一个变量，变量名为属性，变量值为属性值
    foo(){}
}

2.属性名表达式

let obj = {
    [attr]:18,   // attr是一个变量，这里取变量的值为属性名
    ["a"+"b"]:"c"  // ab:"c"
}

3.super关键字：表示原型对象 -- 只能用在方法的简洁写法中

对象的扩展方法

应用：①解构赋值 ②简单深拷贝 ③合并对象 ④应用到数组中

1.Object.is(val1,val2):比较两个值是否全等，行为基本与三个===一致

console.log(Object.is(0,-0)); // false
    console.log(0 === -0); // true
    console.log(Object.is(NaN,NaN)); // true
    console.log(NaN === NaN);  // false

2.Object.assign(target,sourrce1...)：将源对象的可枚举属性拷贝到目标对象中 -- 如果属性已存在，会被覆盖 ①合并对象 ②简单深拷贝 ③给对象添加属性

3.Object.setPrototypeOf():给obj设置原型对象

4.Object.getPrototypeOf():获取obj的原型对象

5.Object.values():获取对象自身可枚举属性值组成的数组

6.Object.entries():获取对象自身可枚举属性值和值组成的数组

7.Object.fromEntries():将键值对数转换为对象

数值的扩展

1.Number.isFinite():判断数值是否是数值 -- 不是数值就为false

Number.isNaN():判断是否是NaN-- 不是NaN就返回false

isFinite():先使用Number()转换，然后判断是否是数值

2.Number.parseInt(),Number.parseFloat():将参数转为整数或小数

3.Number.isInteger():判断参数是否是整数

4.BigInt:大整数 -- 新的数据类型

格式：1234n

运算符扩展

1.指数运算符：**

指数赋值运算符：**=

2.链判断运算符：?.

3.null判断运算符：??，只有在左侧的值返回null和undefined时才会返回右边的值 -- 行为类似||

4.逻辑赋值运算符

其他扩展

1.正则表达式：扩展了修饰符； String.prototype.matchAll()

2.数值的扩展：Number.isFinite()，Number.isNaN()

字符串的扩展

模板字符串

1.使用反引号（`）表示字符串

2.作用：①能够表示普通字符串，引号嵌套

②定义多行字符串

③在字符串中嵌入变量：${}

3.嵌入变量：${变量名}

新增方法

1.str.includes()：判断一个字符串是否包含另一个字符串

2.str.startsWith():判断一个字符串是否以另一个字符串开头

3.str.endsWith():判断一个字符串是否以另一个字符串结尾

4.str.repeat():将字符串重复n次后返回

5.str.padStrart(len,str2):使用str2从开头将str补全到len长度

6.str.padEnd(len,str2):使用str2从末尾将str补全到len长度

7.str.trim():去除字符串首位的空格

8.str.trimStart()去除字符串开头的空格

9.str.trimEnd():去除字符串末尾的空格

10.str.replaceAll():字符串的全局替换 -- 如果查找的字符是一个正则表示，则必须加上g修饰符

11.str.at():返回字符串的第n个字符 -- n超出返回undefined，n为负数返回倒数的第n个 --charAt()

重复字符串的方法：str.repeat():不能为负数

函数的扩展

函数参数的默认值

1.有默认值的参数放在末尾

2.与解构赋值一起使用

rest参数

1.格式：...args

function foo([x,y]...args){}  args就是一个存放剩余参数的数组

2.作用：将多余的参数保存成一个数组

3.注意：rest参数必须作为最后一个数组