ES6知识整理

亦凉 2024-04-18 18:45 79阅读 0赞

**1. 解构赋值**

let obj = {off: bar} = {off: 2};
    console.log(bar) // 2
    
    字符串解构  const [a,b,c,d,e] = 'hello'; 	
    数值和布尔值解构  解构出来的是原型上的方法
    for in 是ES5的标准 遍历key  for of 是ES6的标准 遍历value

**2. 字符串扩展**

新增字符串的方法

includes()  // 返回布尔值 表示找到了参数字符串
    startsWith()   // 返回布尔值 表示参数字符串是否在原字符串头部
    endswith()   // 尾部
    repeat()   // 返回一个新字符串 表示将原字符串重复N次 	
    padStart()   // 头部补全
    padEnd()   // 尾部补全

**3. 函数扩展**

函数的name属性
    
    var f = function () {};
    // ES5
    f.name // ""
    // ES6
    f.name // "f"
    const bar = function baz() {};
    // ES5
    bar.name // "baz"
    // ES6
    bar.name // "baz"

箭头函数  
箭头函数有几个使用注意点

*  函数体内的`this`对象，就是定义时所在的对象，而不是使用时所在的对象。
 *  不可以当作构造函数，也就是说，不可以使用`new`命令，否则会抛出一个错误。
 *  不可以使用`arguments`对象，该对象在函数体内不存在。如果要用，可以用 `rest` 参数代替。
 *  不可以使用`yield`命令，因此箭头函数不能用作 `Generator` 函数。
 *  普通函数里面的this取决于谁调用，箭头函数里面的`this`是固定的
 *  箭头函数里面没有`arguments`
    
        const a = () => () => () {console.log(1)}   调用a()()();
        相当于function a(){return function(){return function(){console.log(1)}}};

**4. 数组的扩展**  
扩展运算符  
`[...'hello'] //['h','e','l','l','o'] 合并数组 arr1.concat(arr2) [...arr1, ...arr2];`  
`Array.from()` 将类似数组转为真正的数组  
`Array.of()` 将一组值转为数组，可以创建一个长度为1的数组，但是Array()不可以  
`copyWithin()` 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组  
`find()` 用于找出第一个符合条件的数组成员。 `[1, 4, -5, 10].find((n) => n < 0) // -5`  
`findIndex()` 返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。  
`fill()` 使用给定值，填充一个数组。  
`keys()`是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。  
`includes()` 返回一个布尔值，表示某个数组是否包含给定的值

数组的空位

ES5
        forEach(), filter(), reduce(), every() 和some()都会跳过空位。
        map()会跳过空位，但会保留这个值
        join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。
    ES6
    	将空位转为undefined  Array.from()   (...)
    	for of 也会遍历空位

**5. 对象的扩展**  
（1） `const obj = { class () {} }; // 等同于 var obj = { 'class': function() {} };`

（2）、`Object.js()` 比较两个字是否相等，ES5 == ES6 更加严谨

（3）、`Object.assign()` 用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）  
如果第一个参数为空 直接扩展 不会改变源对象 实行的是浅拷贝

（4）、属性的遍历  
ES6 一共有 5 种方法可以遍历对象的属性。  
\- `for...in` for…in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。  
\- `Object.keys(obj)` Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含  
Symbol 属性）的键名。  
\- **Object.getOwnPropertyNames(obj)**  
`Object.getOwnPropertyNames`返回一个数组，包含对象自身的所有属性（不含 Symbol  
属性，但是包括不可枚举属性）的键名。  
\- **Object.getOwnPropertySymbols(obj)**  
`Object.getOwnPropertySymbols`返回一个数组，包含对象自身的所有 Symbol 属性的键名。  
\- **Reflect.ownKeys(obj)**  
`Reflect.ownKeys`返回一个数组，包含对象自身的所有键名，不管键名是  
Symbol 或字符串，也不管是否可枚举。 以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。  
首先遍历所有数值键，按照数值升序排列。 其次遍历所有字符串键，按照加入时间升序排列。 最后遍历所有 Symbol  
键，按照加入时间升序排列。

（5）、 **Object.getOwnPropertyDescriptor**方法可以获取该属性的描述对象。

let obj = { foo: 123 };
    Object.getOwnPropertyDescriptor(obj, 'foo')
    //  {
    //    value: 123,
    //    writable: true,
    //    enumerable: true,
    //    configurable: true
    //  }

（6）、**Object.setPrototypeOf**方法的作用与\_\_proto\_\_相同，用来设置一个对象的prototype对象，返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法

（7）、 \*\*Object.setPrototypeOf()\*\*用来设置一个对象的prototype对象，返回参数对象本身。

```
    let obj = { x: 10 };
    Object.setPrototypeOf(obj, {
    	y: 20
    });
    console.log(obj.y); // 20
    Object.getPrototypeOf()用于读取一个对象的原型对象。
    ```

（8）、 **super**关键字  
this关键字总是指向函数所在的当前对象，super指向当前对象的原型对象

（9）、 **Object.values**方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。  
Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名  
Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组

（10）、一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

**6. Set和Map数据结构**  
Set是一个构造函数 用来数组去重 new Set() 接收一个数组作为参数  
Set的四个操作方法  
`add(value)`：添加某个值，返回 Set 结构本身。  
`delete(value)`：删除某个值，返回一个布尔值，表示删除是否成功。  
`has(value)`：返回一个布尔值，表示该值是否为Set的成员。  
`clear()`：清除所有成员，没有返回值。  
Map数据结构 接收数组作为参数 返回数组

**7. Promise对象**  
Promise对象有以下两个特点。  
（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：`pending`（进行中）、`fulfilled`（已成功）和`rejected`（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。  
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从`pending`变为`fulfilled`和从`pending`变为`rejected`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。  
注意，为了行文方便，后面的`resolved`统一只指`fulfilled`状态，不包含`rejected`状态。  
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。  
Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于`pending`状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

const promise = new Promise(function(resolve, reject) {
     // ... some code
    
      if (/* 异步操作成功 */){
    	resolve(value);
      } else {
    	reject(error);
      }
    });

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是`resolve`和`reject`。

`resolve`函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 `pending` 变为 `resolved`），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 `pending` 变为 `rejected`），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。  
Promise实例生成以后，可以用`then`方法分别指定`resolved`状态和`rejected`状态的回调函数。  
`.then()`它的作用是为 Promise 实例添加状态改变时的回调函数。  
`.catch()`方法是`.then(null, rejection)`的别名，用于指定发生错误时的回调函数  
`Promise.all`方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

**8. Iterator 和 for…of 循环**  
`for of`只要有iterator接口都可以用`for of`来遍历

**9. async函数**  
async函数返回一个 Promise 对象，可以使用`then`方法添加回调函数。当函数执行的时候，一旦遇到`await`就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

**10. class**  
Class 可以通过extends关键字实现继承 通过`super`调用父类的方法时，方法内部的this指向子类。