【ES6】新语法入门篇

布满荆棘的人生 2022-11-21 11:28 310阅读 0赞

## 【ES6】新语法 ##

### let关键字 ###

*  新加入了**块级作用域**（即在大括号中的就是块级作用域，例如**if**中）
 *  **没有变量提升了**
 *  **不能从新定义了**
 *  就算在全局中生成let变量，他也不会存在在window对象中
 *  在es6中函数的**形参**就是相当于**用let定义的变量**，不能重复声明
    
     *      function fun(a) {
                    
                console.log(a)
                let a = 1//报错
            }
            fun(12)
     *  
 *  **如果在一个作用域中定义了一个变量，这个作用域内的这个变量就被封闭了**，就不能再访问到外界的这个变量了
    
     *      let v = 100
            function fn() {
                    
                console.log(v)//报错，因为下面的块级作用域已经有了v这个变量，所以这个作用域就会被锁死了，然后也不能访问全局的v所以报错
                let v = 200
                console.log(v)
            }
            fn()

### 字符串新增方法 ###

*  判断是否存在于指定字符串中
    
     *  \*\*str.inclueds(string,\[num\])\*\*第一个参数为要查找的字符串，第二个参数为从那个索引开始找
        
         *  返回值为：true/false
 *  判断是否以某个字符开头
    
     *  \*\*str.startsWith(string,\[num\])\*\*第一个参数为要查找的字符串，第二个参数为从那个索引开始找
        
         *  返回值：true/false
 *  判断是否以某个字符结尾
    
     *  \*\*endsWith(string,\[num\])\*\*类上述
 *  重复一个字符串
    
     *  \*\*str.repeat(num)\*\*期中num为重复几次，返回的是一个新的字符串不会改变原有的字符串
 *  模板字符串
    
        `${
                值}`

### 扩展运算符 ###

扩展运算符 (…) 允许一个表达式在原地展开，当需要多个参数（比如函数调用时）或者多个值（比如字面量数组）。

console,log(...[1,2,3]); // 1 2 3
    console,log(1, ...[2,3,4],5); // 1 2 3 4 5

扩展运算符主要用于函数调用的参数（形参与实参）。

function f(x,y,z){
        
        closole.log(x+y+z); // 3
    }
    var args = [0,1,2];
    f(...args);

#### 替代 apply() 方法 ####

由于扩展运算符可以展开数组所以不再需要 apply() 方法将数组转为函数的参数。

function f(x,y,z){
        }
    var args = [0,1,2];
    
    f.apply(null, args); // ES5的写法
    f(...args); // ES6的写法

#### 扩展运算符的应用 ####

*  复制数组
    
        // 扩展运算符复制数组 - 深复制
        // let arr2 = [...arr1];
        let [...arr2] = arr1;
        console.log(arr2);
        arr2[2] = 6;
        console.log(arr2, arr1);
 *  合并数组
    
        let arr1 = [1, 2, 3];
        let arr2 = [4, 5, 6];
        // ES5合并数组的方法
        console.log(arr1.concat(arr2)); // [ 1, 2, 3, 4, 5, 6 ]
        // ES6合并数组的方法(利用扩展运算符)
        console.log([...arr1, ...arr2]); // [ 1, 2, 3, 4, 5, 6 ]
 *  与解构赋值结合
    
        const list = [1,2,3,4,5];
        // ES5
        console.log(a = list[0], rest = list.slice(1));
        // ES6
        console.log([a, ...rest] = list)
    
    如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
 *  字符串转换为数组
    
        console.log([..."hello"]); // [ 'h', 'e', 'l', 'l', 'o' ]

### 数组新增方法 ###

#### Array.from() ####

`Array.from`方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象

let arrayLike = {
        
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };
    
    // ES5的写法
    var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
    
    // ES6的写法
    let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

任何有`length`属性的对象，都可以通过`Array.from`方法转为数组

Array.from({
         length: 3 });
    // [ undefined, undefined, undefined ]

**`Array.from`还可以接受第二个参数，作用类似于数组的`map`方法**，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
    // 等同于
    Array.from(arrayLike).map(x => x * x);
    
    Array.from([1, 2, 3], (x) => x * x)
    // [1, 4, 9]

`Array.from()`的另一个应用是，将字符串转为数组，然后返回字符串的长度

function countSymbols(string) {
        
      return Array.from(string).length;
    }

#### Array.of() ####

`Array.of`方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
    Array.of(3) // [3]
    Array.of(3).length // 1
    Array.of() // []
    Array.of(undefined) // [undefined]
    Array.of(1, 2) // [1, 2]

`Array.of`方法可以用下面的代码模拟实现。

function ArrayOf(){
        
      return [].slice.call(arguments);
    }

#### copyWithin() ####

将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

`数组.copyWithin(target,[start,ebd])`

*  target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
 *  start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
 *  end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算

[1, 2, 3, 4, 5].copyWithin(0, 3)
    // [4, 5, 3, 4, 5]
    
    // 将3号位复制到0号位
    [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
    // [4, 2, 3, 4, 5]
    
    // -2相当于3号位，-1相当于4号位
    [1, 2, 3, 4, 5].copyWithin(0, -2, -1)
    // [4, 2, 3, 4, 5]
    
    // 将3号位复制到0号位
    [].copyWithin.call({
        length: 5, 3: 1}, 0, 3)
    // {0: 1, 3: 1, length: 5}
    
    // 对于没有部署 TypedArray 的 copyWithin 方法的平台
    // 需要采用下面的写法
    [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
    // Int32Array [4, 2, 3, 4, 5]

#### find()和findIndex() ####

**find()**

用于找出第一个符合条件的数组成员。它的**参数是一个回调函数**，所有数组成员依次执行该回调函数，直到找出第一个返回值为`true`的成员，然后**返回该成员**。如果没有符合条件的成员，则返回`undefined`。

`find`方法的回调函数可以接受三个参数，依次为**当前的值、当前的位置和原数组**。

[1, 4, -5, 10].find((n) => n < 0)
    //-5
    
    [1, 5, 10, 15].find(function(value, index, arr) {
        
      return value > 9;
    }) // 10

**findIndex()**

数组实例的`findIndex`方法的用法与`find`方法非常类似\*\*，返回第一个符合条件的数组成员的位置\*\*，如果所有成员都不符合条件，则返回`-1`。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
        
      return value > 9;
    }) // 2

**这两个方法都可以接受第二个参数，用来绑定回调函数的`this`对象。**

function f(v){
        
      return v > this.age;
    }
    let person = {
        name: 'John', age: 20};
    [10, 12, 26, 15].find(f, person);    // 26

#### fill() ####

`fill`方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)
    // [7, 7, 7]
    
    new Array(3).fill(7)
    // [7, 7, 7]

`fill`方法还可以接受**第二个和第三个参数，用于指定填充的起始位置和结束位置。**

['a', 'b', 'c'].fill(7, 1, 2)
    // ['a', 7, 'c']

如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而**不是深拷贝对象。**

#### includes() ####

表示某个数组是否包含给定的值，与字符串的`includes`方法类似,第二个参数为从第几位开始查找

[1, 2, 3].includes(2)     // true
    [1, 2, 3].includes(4)     // false
    [1, 2, NaN].includes(NaN) // true

### 函数扩展 ###

**函数默认值**

function fun(arg=0){
        
        console.log(arg)//0
    }
    fun()

**函数参数设置默认值时的作用域**

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

var x = 1;
    function f(x, y = x) {
        //这里的x用的是第一个参数得到x的值
      console.log(y);
    }
    f(2) // 2
    --------------------------
    let x = 1;
    function f(y = x) {
        
      let x = 2;//正常的情况下这里报错。。在这没有作用。也不报错
      console.log(y);
    }
    
    f() // 1

**获取函数多余的参数**

接受函数多余的参数并存到数组中

语法：function(…变量名)\{\}

//第一个为接受多余参数的写法
    function fun(a,...arge){
        
        //第二个为数组结构
        console.log(a,...arge)
    }
    fun(1,2,3,4,5,'a')
    ---------------
    1 2 3 4 5 "a"

### 箭头函数 ###

箭头函数相比于es5的区别是，箭头函数的语法更加简洁，而且箭头函数的this只取决于定义时的上线文环境，不会随着调用的对象不同而改变的。

*  特性：

**箭头函数不能作为构造函数使用**

**箭头函数可以作为对象的方法使用**

**箭头函数中不存在arguments，所以要用rest(接受多余的参数)参数代替**

var fn = () => {
         console.log(this) }
    fn()//{}
    ------------------------
    var obj = {
        
        sayMe: fn
    }
    obj.sayMe()//{}
    ------------------------
    let fun=(...args)=>{
        
        //报错-为定义
        //console.log(arguments)
        console.log(args)
    }
    fun(1,2,3,4,5)

#### 箭头函数的this ####

> 箭头函数，也可以说没有this，他的this用的是上下文中的this

*  箭头函数的this指向的原理
    
     *  把箭头函数上下文环境的this用\_ this来保存了， 那箭头函数中用的this其实就是这个\_ this.

![在这里插入图片描述][81b0a0c456bff33359aa6e0e5eda9e79.png_pic_center]

### 对象扩展 ###

#### Object.is() ####

Object.is(值1，值2)用来判断两个值是否相等。

// ES5
    console.log(+0 === -0) // true
    console.log(NaN === NaN) // false
    
    // ES6
    console.log(Object.is(+0, -0)) // false
    console.log(Object.is(NaN, NaN)) // true

**复制对象**

这个对象复制实际上是对象得到解构写法，而且是深复制

var obj = {
        
        name: '赵佳乐',
        age: 18
    }
    
    var obj2 = {
        
        ...obj
    }
    obj['name'] = 'xiaosao'
    console.log(obj, obj2)//{ name: 'xiaosao', age: 18 } { name: '赵佳乐', age: 18 }

**把一个对象设置为另一个对象的prototype**

Object.setPrototypeOf(obj, prototype)
    //参数
    obj
    要设置其原型的对象。.
    prototype
    该对象的新原型(一个对象 或 null).

#### surper ####

surper用来指定当前对象的原型对象

var obj1={
        
        age:1
    }
    var obj2={
        
        name:'赵佳乐',
        sayMe(){
        console.log(super.age)}//这里也可以用this达到同样的效果，只不过这个更加语义化一点
    }
    Object.setPrototypeOf(obj2,obj1)
    obj2.sayMe()//1

### Set集合 ###

Set是一个构造函数，它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set也可以接受null、NaN、undefined作为值

Set中存在多个数组，函数，对象，都表示多个值不会被去重

#### 属性和方法 ####

**size属性**：类似于数组中的length属性，返回Set集合的个数

const set = new Set([1, 23, 3, 4, 5])
    console.log(set.size)//5

**遍历可迭代对象Set**

for (let i of s) {
        
      console.log(i);
    }

![image.png][]

![image.png][image.png 1]

/*
        Set集合提供forEach()方法
        * 作用 - 用于遍历当前的Set集合（为Set集合中每个元素调用callback函数）
        * 回调函数
          function (value, key, set) {}
          * value - 表示当前Set集合中每一个值
          * key - 表示当前Set集合中每一个键
          * set - 表示当前遍历的Set集合
    */
    set.forEach(function (value, key, set) {
        
      console.log(value, key, set);
    });
    -----
    1 1 Set {
         1, 2, 3, 4, 5 }
    2 2 Set {
         1, 2, 3, 4, 5 }
    3 3 Set {
         1, 2, 3, 4, 5 }
    4 4 Set {
         1, 2, 3, 4, 5 }
    5 5 Set {
         1, 2, 3, 4, 5 }

#### Set的应用 ####

一种去除数组重复成员的方法。

// 去除数组的重复成员
    [...new Set(array)]

去除字符串里面的重复字符。

[...new Set('ababbc')].join('')
    // "abc"

### Map集合 ###

**Map集合是什么**

Map集合是键值对的集合。任何值都可以作为Map 集合中的键或值。Map 集合可以按照插入的顺序迭代它的元素。

var. myMap = new Map();
    
    var keyObj= {
        },
    keyFunc = function() {
        },
    keyString = "a string";
    
    /添加键
    myMap.set(keyString, "和键'a string'关联的值");
    myMap.set(keyObj, "和键 keyObi关联的值");
    myMap.set(keyFunc,"和键keyEunc关联的值");

#### Map集合的属性与方法 ####

Map对象提供了size属性用于返回Map对象的键值对的个数。  
Map对象提供了用于操作Map 集合的方法和用于遍历Map集合的方法，如下表所示:

<table> 
 <thead> 
  <tr> 
   <th>方法名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>set(key, value)</td> 
   <td>设置Map对象中键的值。返回该Map 对象</td> 
  </tr> 
  <tr> 
   <td>get(key)</td> 
   <td>返回键对应的值。如果不存在，则返回undefined</td> 
  </tr> 
  <tr> 
   <td>delete(key)</td> 
   <td>从 Map集合删除指定的键值对。返回布尔值，表示是否删除成功</td> 
  </tr> 
  <tr> 
   <td>has(key)</td> 
   <td>检索Map集合是否包含指定键对应的值。返回布尔值，表示是否包含</td> 
  </tr> 
  <tr> 
   <td>clear()</td> 
   <td>清除Map集合中所有键值对，没有返回值</td> 
  </tr> 
  <tr> 
   <td>values()</td> 
   <td>返回一个新的迭代器对象，该对象包含Map集合中所有元素的值</td> 
  </tr> 
  <tr> 
   <td>keys()</td> 
   <td>与values()方法相同</td> 
  </tr> 
  <tr> 
   <td>entries()</td> 
   <td>返回一个新的迭代器对象，该对象包含Map 集合中的按插入顺序排列的所有元素的值的[key, value]数组</td> 
  </tr> 
  <tr> 
   <td>forEach()</td> 
   <td>按照插入顺序，为Map集合中的每一个元素调用一次 callback函数</td> 
  </tr> 
 </tbody> 
</table>

**Map集合键的相等**

Map集合的键的比较是基于“SamevalueZero”算法:

*  判断使用与===相似的规则。
 *  \-0和+0相等。
 *  NaN与自身相等(与===有所不同)。

**Map集合与Object对比**

一般情况下，Object 会被用于将字符串类型映射到数值。Object 允许设置键值对、根据键获取值、删除键、检测某个键是否存在。而Map具有更多的优势:

*  Obiect 的键均为String类型，在Map里键可以是任意类型。
 *  必须手动计算 Object的尺寸，但是可以很容易地获取使用Map的尺寸。
 *  Map的遍历遵循元素的插入顺序。
 *  Obiect有原型，所以映射中有一些缺省的键。

### Promise对象 ###

Promise是为了进行异步操作解决回调地狱而新声明的一个对象。是一个变异步为同步操作

**创建格式**

new Promise( function(resolve, reject){
        ...} /* executor*/ );

**支持链式操作**

Promise支持链式操作

Promise虽然支持链式编程，但是每次返回的都是一个新的Promise对象

#### Promise对象原型的方法 ####

##### then() 方法 #####

then()方法用于为Promise 对象添加状态改变时回调函数。then()方法的第一个参数是 resolved 状态的回调函数，第二个参数（可选）是rejected状态的回调函数。

p.then(function(value){
        /*fulfillment*/}, function(reason){
        /*rejection*/});

*  第一个回调函数:当Promise变成接受状态（ fulfillment )时，该参数作为回调函数被调用。该函数有一个参数，即接受的最终结果。
 *  第二个回调函数:当 Promise 变成拒绝状态( rejection )时，该参数作为回调函数被调用。该函数有一个参数，即拒绝的原因。

var promise = new Promise(function (resolve, reject){
        
    	resolve('Success!');
    });
    promise.then(function (value) {
        
    	console.log(value); // "Success!"
    });

##### catch() 方法 #####

catch)方法返回一个Promise对象，并且处理拒绝的情况。它的行为与调用then()方法相同。

p.catch(function(reason){
        /*拒绝*/});

*  回调函数:当Promise被rejected时，被调用该回调函数。该函数具有一个参数，即rejection的原因。

var promise = new Promise(function (resolve, reject){
        
    	reject('error');
    });
    promise.then(function (value) {
        
    	console.log(value); // "Success!"
    }).catch(function (e) {
        
    	console.log(e); // "error"
    ))

##### finally() 方法 #####

finally()方法返回一个Promise对象，在执行 then()和catch()后，都会执行 finally指定的回调函数。避免同样的语句需要在 then()和catch()中各写一次的情况。

p.finally(function(){
        /*返回状态为(resolved或rejected)*/});

回调函数:Promnise状态改变后的回调函数。

**值得注意的是**，finally()方法是ECMAScript 2018引入标准的。

#### Promise对象的方法 ####

##### Promise.all() 方法 #####

Promise.all()方法用于将多个Promise 对象，包装成一个新的Promise 对象。

//iterable:一个可迭代对象，如Array 或 String 等。
    Promise.all (iterable);

var promise1 = Promise.resolve(3);
    var promise2 = 42;
    var promise3 = new Promise(function (resolve, reject) {
        
    	setTimeout(resolve("foo"), 100);
    });
    //all()方法 - 是以所有Promise对象的状态都改变时，表示整合后的Promise对象成功或失败
    Promise.all([promise1, promise2, promise3]).then(function (values) {
        
    	console.log(values);// Array [3, 42, "foo"]
    });

##### Promise.race() 方法 #####

Promise.race()方法返回一个Promise 对象，一旦迭代器中的某个Promise 解决或拒绝，返回的Promise 就会解决或拒绝。

//itecable:一个可迭代对象，如Array或 String 等。
    Promise.race(iterable);

##### Promise.resolve() 方法 #####

Promise.resolve()方法返回一个以给定值解析后的Prormise对象。但如果这个值是个thenable(即带有 theh()方法），返回的Promise 会“跟随”这个thenable的对象，采用它的最终状态(指resolved/rejected/pending/settled );如果传入的value本身就是 Promise对象，则该对象作为Promise.cesolve()方法的返回值返回;否则以该值为成功状态返回Promise 对象。

Promise.resolve(value);

*  value:将被Promise对象解析的参数。也可以是一个 Promise 对象，或者是一个 thenable(即带有 then()方法）。

var promise = Promise.resolve(123);
    promise.then(function (value){
        
    	console.log(value);// 123
    });

##### Promise.reject() 方法 #####

Promise.reject()方法返回一个带有拒绝原因reason参数的Promise 对象。

Promise.reiect(reason);

*  reason:表示 Promise被拒绝的原因。

Promise.reject("Testing static reject").then(function (reason) {
        
    //未被调用
    }, function (reason) {
        
    	console.log(reason); l/ "Testing static reject"
    });

#### Promise对象的应用 ####

##### 加载图片 #####

可以将图片加载写成一个Promise，一旦加载完成，Promise的状态就发生变化。

const preloadImage = function(path){
        
        return new Promise(function (resolve, reject) {
        
            const image = new Image();
            image.onload = resolve;
            image.onerror = reject;
            image.src = path;
        });
    }

##### 通过Ajax加载图片 #####

#### Promise的执行流程 ####

我们知道Promise一共有三个状态：初始化状态，成功状态，失败状态。

但是不管是成功状态还是失败状态后，都会返回一个新的Promise对象，即新的一个初始化状态

*  ![image.png][image.png 2]

### async/await解决异步 ###

**async函数的基本用法**

*  要点:
    
     *  await后面可以追加 promise 对象,获取 resolve的值
     *  await必须包裹在 async函数中
     *  async函数执行返回的也是一个promise对象
     *  await后面等待的如果是Promise对象那么他就返回Promise的值(成功/失败)，如果不是Promise对象就直接返回后面跟的值
     *  try-catch 截获 promise中 reject的值
        
         *      async function f(){
                          
                    try{
                          
                        var z=await Promise.reject('报错了~')
                        }catch(e){
                          
                            conole.log(e)//报错了
                        }
                }
         *  当然也可以用Promise对象的catch()方法来捕获异常

### Symbol ###

**一、Symbol类似介绍**

ECMAScript 6新增了第六种原始类型Symbol(符号）类型。S**ymbol类型是唯一的并且是不可修改的，并且也可以用来作为Object 的 key 值**。

Symbol类型的变量是通过调用Symbol()函数生成的:

Symbol([description])

*  description:可选的字符串。Symbol的描述，可用于调试但不能访问Symbol本身。

**值得注意的是**，由于Symbol类型是原始类型，是不能通过new Symbo()来创建对象的

**二、Symbol的使用**

由于每一个 Symbol 值都是不相等的，这意味着 Symbol 值可以作为标识符，**用于对象的属性名**，就能保证不会出现同名的属性。

*  用Symbol类型的值，设置对象的属性名

*  调用获取对象的键对应的值

let s = Symbol();
    
    let obj = {
        
      [s]: function (arg) {
         console.log(arg) }
    };
    
    obj[s](123);//123

但是要注意的是：Symbol 值作为对象属性名时，**不能用点运算符**。

### 迭代器 ###

#### 迭代器是什么 ####

ECMAScript 5规范表示集合的数据结构有数组(Array)和对象(Object ),ECMAScript 6规范又新增了Set和Map 两种集合。这样在 JavaScript 中就具有四种集合，需要一种统一的机制进行操作。

迭代器（ lterator)就是这样的一种机制，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口，就可以完成遍历操作。

迭代器( lterator )具有三种作用:

*  为各种数据结构，提供一个统一的、简便的访问接。
 *  使得数据结构的成员能够按某种次序排列。
 *  ECMAScript 6新增了for…of循环语句，用于遍历迭代器。

#### Iterator接口 ####

在JavaScript 中迭代器(lterator )是一个对象，该对象提供 next()方法用于返回序列中的下一项。该方法返回包含done和 value 两个属性的对象。

/*
        构建迭代器 -> 返回迭代器对象
        * 该迭代器对象必须具备 next() 方法
          * 作用 - 用于返回序列中的下一项
          * 返回值 - 是一个对象
            * done属性 - 表示是否迭代完毕
              * false - 表示当前没有迭代完毕
              * true - 表示当前迭代完毕
            * value属性 - 表示当前迭代的值
    */
    function fn(array) {
        
      var index = 0;
      return {
        
        next: function () {
        
          return index < array.length
            ? {
        
                done: false,
                value: array[index++],
              }
            : {
         done: true };
        },
      };
    }

迭代器对象一旦被创建，就可以反复调用next()方法用于依次访问对象中的键值。

一种数据结构只要部署了lterator接口，就可以称这种数据结构是“可遍历的”。ECMAScript 6规范规定默认的lterator接口部署在数据结构的 Symboliterator属性。换句话讲，一个数据结构只要具有 Symbol.iterator属性，就可以认为是“可遍历的”。  
Symbol.iterator属性本身是一个函数，就是当前数据结构默认的迭代器生成函数。执行这个函数，就会返回一个迭代器。

JavaScript 中原生具有lterator接口的数据结构如下:

*  Array
 *  Map
 *  Set
 *  String
 *  TypedArray
 *  函数的arguments 对象
 *  NodeList 对象

### for…of 语句的用法 ###

ECMAScript 6引入了 for …of语句用于遍历迭代器。一个数据结构只要部署了Symboliterator属性，就被视为具有Iterator 接口，就可以用for…of循环遍历它的成员。

for (variable of iterable) {
        
    	//statements
    }

*  variable:在每次迭代中，将不同属性的值分配给变量。
 *  iterable:被迭代枚举其属性的对象。

let iterable = [10, 20, 30];
    for (let value of iterable){
        
    	console.log(value);//10 20 30
    }

ECMAScript 6中的数组(Array )、Set和Map都具有以下方法，该方法返回一个迭代器对象。

*  entries()方法:返回一个新的迭代器对象，这个对象的元素是用来遍历\[键名,键值\]组成的数组。
 *  keys()方法:返回一个新的迭代器对象，用来遍历所有的键名。
 *  values()方法:返回一个新的迭代器对象，用来遍历所有的键值。

let arr = ['a', 'b', 'c'];
    for (let pair of arr.entries()){
        
    	console.log(pair);
    }
    //[0, 'a']
    //[1, 'b']
    //[2, 'c']

#### 与forEach() 方法的区别 ####

ECMAScript 6中的数组(Array ) 、Set和 Map都具有forEach()方法用于遍历，该方法与for…of语句的区别如下:

*  farEach()方法无法跳出循环。换句话讲，break 语句和continue 语句无效。
 *  for…of语句不仅可以使用break语句和continue 语句，还可以配合使用return语句。

#### 与for…in 语句的区别 ####

for …in语句主要用于遍历对象。与for…of语句对比，for…in语句具有以下几个缺点:

*  for. …i不仅遍历自身，还会遍历手动添加的，甚至包括原型链的。
 *  如果用于遍历数组的话，遍历得到的键名为字符串类型的数字值。

Obiect.prototype.obiCustom = function(){
        };
    Array.prototype.arrCustom = function() {
        };
    
    let iterable = [3,5,7];
    iterable.foo = 'hello';
    
    for (let i in iterable){
        
    	console.log(i); // logs 0,1, 2, "foo", "arrCustom", "obiCustom"
    }
    for(let i of iterable){
        
    	console.log(i); // logs 3,5,7
    }

### 生成器 ###

#### Generator函数是什么 ####

虽然可以自定义一个迭代器，但自定义的迭代器需要显式地维护其内部状态。而生成器提供了另一个强大的选择，其提供了允许定义一个包含自有迭代算法的函数，同时可以自动维护其内部状态。

Generator函数可以作为生成一个迭代器的特殊函数，该函数被调用时返回一个Generator对象，该对象是符合可迭代协议和迭代器协议的。

**Generator函数与普通函数的区别在于:**

*  function\*这种声明方式会定义一个生成器函数，它返回一个 Generator对象。
 *  yield关键字用来暂停和恢复一个生成器函数。

**访问生成器他就自动返回一个ES6定义好的迭代器对象**

//生成器
    function* a() {
        
        var list = [1, 2, 3, 4, 5]
        for (let i = 0; i < list.length; i++) {
        
            yield list[i]//yield是使生成器重启或者暂停使用的
        }
    }
    //访问生成器他就自动返回一个迭代器对象
    //生成器对象就是ES6提供的迭代器
    var f = a()
    console.log(f.next())
    console.log(f.next())
    console.log(f.next())
    console.log(f.next())
    console.log(f.next())
    console.log(f.next())

#### yield\* 表达式 ####

yield\*表达式用于委托给另一个Generator 或可迭代对象。

yield*[[expression]];

expression:返回一个可迭代对象的表达式。

function* g1() {
         yield 2; yield 3; }
    function* g2() {
        
    	yield 1;
        yield* g1();
        yield 4;
    }
    
    var iterator = g2();
    console.log(iterator.next());// { value: 1, done: false }
    console.log(iterator.next());// {'value: 2, done: false }
    console.log(iterator.next());// { value: 3, done: false }
    console.log(iterator.next());// { value: 4, done: false }
    console.log(iterator.next());// { value: undefined, done: true }

#### Generator对象的方法 ####

生成的 Generator 对象具有以下几个原型方法:

<table> 
 <thead> 
  <tr> 
   <th>方法名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>next()方法</td> 
   <td>返回一个包含属性done和value的对象。该方法也可以通过接受一个参数用以向生成器传值</td> 
  </tr> 
  <tr> 
   <td>return()方法</td> 
   <td>返回给定的值并结束生成器</td> 
  </tr> 
  <tr> 
   <td>throw()方法</td> 
   <td>用于向生成器抛出异常，并恢复生成器的执行，返回带有done及 value两个属性的对象</td> 
  </tr> 
 </tbody> 
</table>

next(、throw()、return()这三个方法本质上是同一件事，可以放在一起理解。它们的作用都是让Generator 函数恢复执行，并且使用不同的语句替换yield表达式。

function* gen(){
        
    	yield 'wolongxueyuan';
    }
    var.g = gen();
    
    console.log(g.next());// { value: 'wolongxueyuan', done: false }
    console.log(g.return("卧龙学苑")); // { value: '卧龙学苑', done: true }
    g.throw(new Error("出错啦...")); // Error:出错啦...

### Class(类) ###

**类是什么**

ECMAScript 6提供了更接近传统开发语言的写法，引人了类(Class ）的概念。类作为对象的模板，只是一个语法糖。class关键字只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

// ECMAScript 5使用构造函数定义
    function Point(x, y) {
         this.x = x; this.y = y; }
    Point.prototype.toString = function () {
        
    	return '(' + this.x +', '+this.y + ')";
    };
    // ECMAScript 6使用类的概念定义
    class Point {
        
    	constructor(x, y) {
        
    		this.x = x;
            this.y =y;
        }
        toString(){
        
    		return '(' + this.x + ', ' + this.y + ')";
        }
    }

**类的声明**

声明类具有以下两种方式:

*  类的声明方式
    
        class name [extends] {
              
        	// class body
        }
    
     *  name:表示当前声明的类名。  
        但是不同于类表达式,类声明不允许再次声明已经存在的类，否则将会抛出一个类型错误。
 *  类的表达式方式
    
        const MyClass = class [className][extends]{
              
        	// class body
        };
    
    和函数表达式相同的一点是，类表达式可以是命名也可以是匿名的。如果是命名类表达式，这个名字只能在类体内部才能访问到。

**构造函数**

构造函数(Constructor ）是用于创建和初始化类中创建的一个对象的一种特殊方法。

constructor([arguments]){
        ... }

*  在一个类中只能有一个名为“constructor”的特殊方法。一个类中出现多次构造函数(Constructor)方法将会抛出一个SyntaxError错误。
 *  在一个构造方法中可以使用super关键字来调用一个父类的构造方法。
 *  如果没有显式指定构造方法，则会添加默认的constructor方法。
 *  如果不指定一个构造函数（ constructor )方法,则使用一个默认的构造函数（constructor ) 。

**getter与setter**

与ECMAScript 5一样，在“类”的内部可以使用get和 set 关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class MyClass {
        
    	constructor() {
        
            // ...
        }
        get prop() {
        
        	return 'getter";
        }
        set prop(value) {
        
        	console.log('setter: ' + value);
        }
    let inst = new MyClass();
    
    inst.prop = 123;// setter: 123
    console.log(inst.prop);// 'getter'

**不允许声明提前**

声明类时，是不存在声明提前的现象的。如下示例代码所示:

new Foo(); // ReferenceError: Foo is not defined
    class Foo {
        }

上逑代码示例中，Foo类调用在前，声明在后。由于 ECMAScript 6不允许类的声明提前，结果为报错。

这种规定的原因与继承有关，必须保证子类在父类之后定义。

**不允许重复声明**

声明类时，是不存在重复声明的。如果一个类被重复声明的话，则引起解析错误。如下示例代码所示:

class Foo {
        };
    class Foo {
        };// SyntaxError: ldentifier 'Foo' has already been declared

若之前使用类表达式定义了一个类，则再次声明这个类同样会引起解析错误。

let Foo = class {
        };
    class Foo {
        };// SyntaxError: ldentifier 'Foo' has already been declared

#### 类的静态方法 ####

static关键字为一个类定义了一个静态方法。静态方法不会在类的实例上被调用，相反被类本身调用。

语法：`static fun(){...}`

/**
     * 静态方法不会在类生成的实例中出现。
     * 静态方法的的调用：要用类名调用
     * 
     * */
    
    class Hero {
        
        constructor() {
        
            // 这里的this指的是实例的this
            this.name = '赵佳乐';
            this.sayMe = () => {
        
                console.log(`my name is ${
          this.name}`)
            }
            // 在constructor中调用静态函数
            Hero.sayHe()
            this.constructor.sayHe()
        }
    
        //静态函数--这里的this指的是调用静态方法的类
        static sayYou() {
        
            console.log('我是静态方法')
        }
        static sayHe() {
        
            this.sayYou()
        }
    
        // 这里的函数在ES5中相当于是Prototype中的函数
        fun() {
        
            console.log('这里是普通函数,' + this.name)
        }
    }
    //生成对象调用
    var hero = new Hero()
    console.log(hero.sayMe())
    //用类名调用
     Hero.sayHe()

#### 类的继承 ####

extends关键字用于类声明或者类表达式中，以创建一个类，该类作为另一个类的子类。

class ChildClass extends ParentClass {
         ... }

extends 关键字用来创建一个普通类或者内建对象的子类。

**值得注意的是**，继承的.prototype必须是一个Object或者null

class Parent {
        
        constructor() {
        
            this.name = 'obj01'
        }
        fun() {
        
            console.log('原型方法')
        }
        static Fun() {
        
            console.log('静态方法')
        }
    }
    
    class Child extends Parent {
        
        constructor() {
        
            // 这里的super()指的是父级的构造函数。并且他能继承父级所以的原型,和静态方法。
            //这里虽然继承父级的函数和方法，但是this函数用的child实例的this
            super()
            this.age = 10
            // 这里的super对象指向父级的prototype
            console.log(super.fun())
        }
    }
    var child = new Child()
    // console.log(child)//Child { name: 'obj01', age: 10 }
    // console.log(child.fun())//原型方法
    // console.log(Child.Fun())//静态方法

#### surper ####

在类中使用surper的方式又两种：

一种是**surper当做函数执行–这个函数指向父级的构造函数**

一种是**super当做对象使用–在普通函数中这的对象指向父级的prototype对象，而在静态函数中指向父类**

constructor() {
        
            // 这里的super()指的是父级的构造函数。并且他能继承父级所以的原型,和静态方法。
            //这里虽然继承父级的函数和方法，但是this函数用的child实例的this
            super()
            this.age = 10
            // 这里的super对象指向父级的prototype
            console.log(super.fun())
        }

#### 继承于内置对象 ####

如下示例代码所示，实现了继承了内置的Date 对象。并实现了基于Data的方式实现了自定义的获取时间的函数

class myDate extends Date {
        
      constructor() {
        
        //继承Data方法
        super();
      }
        //封装自己的方法
      getFormattedDate() {
        
        var months = [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ];
        return (
            //运用继承来的Date的函数
          this.getFullYear() + "-" + months[this.getMonth()] + "-" + this.getDate()
        );
      }
    }
    var mydate = new myDate();
    console.log(mydate.getFormattedDate());
    
    
     {
        
            // 这里的super()指的是父级的构造函数。并且他能继承父级所以的原型,和静态方法。
            //这里虽然继承父级的函数和方法，但是this函数用的child实例的this
            super()
            this.age = 10
            // 这里的super对象指向父级的prototype
            console.log(super.fun())
        }
    }
    var child = new Child()
    // console.log(child)//Child { name: 'obj01', age: 10 }
    // console.log(child.fun())//原型方法
    // console.log(Child.Fun())//静态方法

#### surper ####

在类中使用surper的方式又两种：

一种是**surper当做函数执行–这个函数指向父级的构造函数**

一种是**super当做对象使用–在普通函数中这的对象指向父级的prototype对象，而在静态函数中指向父类**

#### 继承于内置对象 ####

如下示例代码所示，实现了继承了内置的Date 对象。并实现了基于Data的方式实现了自定义的获取时间的函数

[81b0a0c456bff33359aa6e0e5eda9e79.png_pic_center]: /images/20221120/23a4c7cdcc15420f9196eb93749158f7.png
[image.png]: /images/20221120/0c7e4277e7e04b2784cc64a4337048c8.png
[image.png 1]: /images/20221120/814e941c93404b029d348caea8e360c9.png
[image.png 2]: /images/20221120/fc69b764acd148d28fcca6feb8e1b759.png