ES6-ES2020前端JS知识点总结

1. 使用const或者let定义的变量需要先声明，不允许重复声明 。

const  // 定义静态变量 --> 定义之后不允许修改
let // 定义局部变量 只有在局部作用域中才有作用，如{}、function、for循环（比较特殊）、while循环
// let const 好处：防止变量污染
var 定义变量，变量提升。

用const定义对象和数组，可以随意添加，不会报错。

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

2. 闭包的作用，保护内部变量。
3. 字符串相关方法

let str = "I love JS";
str.includes("I"); // --> true 字符串中是否包含该字符。 
str.startsWith("I") // --> true 字符串是否以I开头
str.endsWith("JS")// --> true 字符串是否以JS结尾
str.repeat(3) // 字符串重复三次 返回新字符串
str.padStart(10,'0'); // 字符串的长度最少为两位，不够的话在字符串的前面加0 返回新字符串

4. 解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

let [a,b,c]=[1,2,3];
a // 1
b // 2
c // 3
let [a,...b]=[1,2,[12,34]];
// ...b是前面声明过的变量之后、所有变量的集合，在之后声明的变量会报错，（同一个数组内）
// 报错如下
let [a,...b,c] = [1,2,3,4,5];
VM253:1 Uncaught SyntaxError: Rest element must be last element
// 如果两边不相等，左边的会被赋值undefined,如果有...都会赋给...后面的变量
let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

如果解构不成功，变量的值就等于undefined。

4.1 不完全解构

即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

如果等号的右边不是数组（可以是字符串）（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {
     };

解构赋值允许制定默认值。注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

null===undefined. // --> false

注意：

1. 如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。
2. 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

4.2 对象的解构赋值

对象的解构与数组有一个重要的不同：数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let {
      bar, foo } = {
      foo: "aaa", bar: "bbb" };

如果变量名与属性名不一致，必须写成下面这样。

let {
      foo: baz } = {
      foo: 'aaa', bar: 'bbb' };
baz // "aaa"

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let {
      foo: baz } = {
      foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

// 报错
let {
     foo: {
     bar}} = {
     baz: 'baz'};

5. 数值的扩展

let num = 12;
Number.isNaN(num) // --> false
let str = "12";
Number.isNaN(str) // --> false
let na = NaN;
Number.isNaN(na) // --> true
// 此方法只能校验是否为NaN

6. ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。
7. 形参是定义的参数，实参是使用的参数
8. 箭头函数 :只有一个参数可以省略小括号

let b = b=>{
     
}

箭头函数指向this是定义时候的上级，而不是调用时决定的。

9. 数组的扩展方法

find

let arr = [1,2,3];
// find方法 用于找出第一个符合条件的数组成员，并返回。参数为一个回调函数，所有数组成员依次执行该回调，直到找出第一个返回值为true的成员并返回，如果没有符合条件的成员则返回undefined.
arr.find(num=>num===1); // ->1 
arr.find(num=>num>1); // ->2

findIndex

let arr = [1,2,3];
// findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
arr.findIndex((value,index,arr)=>value>2); // ->2
// 与find方法的区别是，此方法返回的是下标，而find方法返回的是元素本身。

Array.from

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]
// Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。还可以接受第二个参数（一个函数），作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.of

Array.of(12,34,32)//把括号内的参数转换为数组。
// 如果不传参数，返回空数组。

some

let arr = [1,2,3];
arr.some(item=>item>2); // 如果数组内有一个符合结果就返回true,

every

let arr = [1,2,3];
arr.every(item=>item>2); // 如果数组内都符合结果就返回true,

includes

let arr = [1,2,3];
arr.includes(2); // arr.includes方法返回一个布尔值，表示某个数组是否包含给定的值，
//该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，
//如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

10. 对象的扩展方法
    Object.is

Object.is(NaN,NaN) // ->true 返回值为布尔值，判断两个值是否全等
Object.is(undefined,null) // ->false
Object.is(null,null) // ->true 

11. 可选链调用

let nestedProp = obj&&obj.first&&obj.first.second; // 旧语法
let nestedProp = obj?.first?.second; // 新语法

12. 空位合并操作符
    用??表示，如果表达式??左侧的值为undefined或者null，则返回右侧的内容，否则返回左侧的内容

let c = a !== undefined && a !== null ? a : b; // 旧语法
let c = a ?? b; // 新语法

13. Promise.allSettled
    解决Promise.all任意一个promise为reject整个promise立刻终止的问题。
14. BigInt
    JS第7个原始类型，可安全的进行大数整型计算，解决了js大数精准度丢失的问题。BigInt类型和Number类型不能相加，只能比较。

const aBigInt = BigInt(1234324);
typeof aBigInt === 'bigint'; // true

15. globalThis
    解决全局对象的兼容问题，浏览器上为window,node环境为global。不需要考虑不同环境的问题。