ES6-ES2020前端JS知识点总结

淩亂°似流年 2022-12-17 07:27 265阅读 0赞

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

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

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

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

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

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 返回新字符串

1.  解构

> 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'};

1.  数值的扩展

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

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

let b = b=>{ 
    }

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

1.  数组的扩展方法

**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开始。

1.  对象的扩展方法  
    **Object.is**

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

1.  可选链调用

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

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

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

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

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

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