es6知识总结

太过爱你忘了你带给我的痛 2022-05-08 08:52 289阅读 0赞

# 1.变量的声明 #

# ** let命令** #

** 1. 在同一作用域下声明不可以重复**  
** 2. 声明不会提升**

**3. 具有局部作用域**  
        let a = 0;  
        if(true)\{  
          a++;  //报错  
          let a = 1;  
        \}  
        console.log(a);   //报错  
**  4. 暂时性死区**

***       *** 总之，在代码块内，使用`let`命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead    zone，简称 TDZ）

# const命令   #

###    基本用法 ###

`     const`声明一个只读的常量。一旦声明，常量的值就不能改变。具有let的所有特性，  只能被显示初始化一次。`const`声明的变量不得改变值，这意味着，`const`一旦声明变量，就必须立即初始化，不能留到以后赋值。

### ES6 声明变量的六种方法 ###

ES5 只有两种声明变量的方法：`var`命令和`function`命令。ES6 除了添加`let`和`const`命令，后面章节还会提到，另外两种声明变量的方法：`import`命令和`class`命令。所以，ES6 一共有 6 种声明变量的方法。

# 2.变量的解构赋值 #

###   默认值 ###

解构赋值允许指定默认值。若不存在值时，则将取默认值

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

**    ** 按照对应位置，对变量赋值

let \[a,b,c,d\]=\[1,2,3,\[4,5\],6\]  
       **  应用：**  交换两个数组的值  
            let i=1;  
            let  j=2;  
            \[i,j\]=\[j,i\]

**    2.对象的解构赋值**

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

es5中对象必须是键值对，但es6中对象可以简写

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

**        应用：模块化的引用**

**   **  category.js  
                  module.exports=\{  
                     findAllCategory:function()\{\},  
                     deleteCategoryById:function()\{\}  
                  \}  
              index.js  
                    let category=require('./category');  
                    let \{deleteCategoryById\}=require('./category');//只获取deleteCategoryById中的函数，其他的不导入

**  3.字符串解构**

**   ** 字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

let \[a,b,c...d\]="hello"  lo->d

类似数组的对象都有一个`length`属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
    len // 5

**    **

**4.数值和布尔值的解构赋值**

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
    s === Number.prototype.toString // true
    
    let {toString: s} = true;
    s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有`toString`属性，因此变量`s`都能取到值。

**解构赋值的规则是**，只要等号右边的值不是对象或数组，就先将其转为对象。由于`undefined`和`null`无法转为对象，所以对它们进行解构赋值，都会报错。

# 解构的用途 #

变量的解构赋值用途很多。

**（1）交换变量的值**

**（2）从函数返回多个值**

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

**（3）函数参数的定义**

解构赋值可以方便地将一组参数与变量名对应起来。

**（4）提取 JSON 数据**

解构赋值对提取 JSON 对象中的数据，尤其有用

let jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
    };
    
    let { id, status, data: number } = jsonData;
    
    console.log(id, status, number);
    // 42, "OK", [867, 5309]

**（5）函数参数的默认值**

**（6）遍历 Map 结构**

任何部署了 Iterator 接口的对象，都可以用`for...of`循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

const map = new Map();
    map.set('first', 'hello');
    map.set('second', 'world');
    
    for (let [key, value] of map) {
      console.log(key + " is " + value);
    }
    // first is hello
    // second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

// 获取键名
    for (let [key] of map) {
      // ...
    }
    
    // 获取键值
    for (let [,value] of map) {
      // ...
    }

**（7）输入模块的指定方法**

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

# 3.对象扩展 #

属性简写

function f(x, y) {
      return {x, y};
    }
    
    // 等同于
    
    function f(x, y) {
      return {x: x, y: y};
    }
    
    f(1, 2) // Object {x: 1, y: 2}

对象函数方法的简写，对象的方法简写可用于多处，箭头函数仅用于回调函数

const o = {
      method() {
        return "Hello!";
      }
    };
    
    // 等同于
    
    const o = {
      method: function() {
        return "Hello!";
      }
    };

# 4.函数扩展 #

1) 参数默认值：ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

参数较少的用参数默认，参数比较多时用解构形式