ES6学习笔记（3）——变量的解构赋值

朱雀 2022-11-26 08:42 123阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]

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

## 1. 数组解构赋值 ##

let [a, b, c] = [1, 2, 3];
    
    let [foo, [[bar], baz]] = [1, [[2], 3]];
    foo // 1
    bar // 2
    baz // 3
    
    let [ , , third] = ["foo", "bar", "baz"];
    third // "baz"
    
    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 // []

### 默认值 ###

let [foo = true] = [];
    let [x, y = 'b'] = ['a']; // x='a', y='b'
    let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

## 2. 对象解构赋值 ##

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

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

对象的解构赋值是下面形式的简写。对象的解构赋值的内部机制，是**先找到同名属性，然后再赋给对应的变量**。真正被赋值的是后者，而不是前者。前面的foo和bar是匹配模式，后面的才是变量，即冒号前面的都是匹配模式

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

**变量的声明和解构赋值的变量是一体的**

let foo;
    let { foo} = { foo: 1}; // SyntaxError: Duplicate declaration "foo"

圆括号可以理解成一个代码块

let foo;
    ({ foo} = { foo: 1}); // 成功

### 默认值 ###

var { x = 3} = { };	x // 3
    var { x, y = 5} = { x: 1};	x // 1 y // 5
    var {  message: msg = 'Something went wrong' } = { };		msg // "Something went wrong"
    var { x = 3} = { x: undefined};	x // 3
    var { x = 3} = { x: null};	x // null

## 3. 字符串的解构赋值 ##

const [a, b, c, d, e] = 'hello';
    a // "h"
    b // "e"
    c // "l"
    d // "l"
    e // "o"

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

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

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

如果等号右边是数值和布尔值，则会先转为对象。数值和布尔值的包装对象都有`toString`属性

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

**解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象**

## 5. 函数参数 ##

[[1, 2], [3, 4]].map(([a, b]) => a + b);
    // [ 3, 7 ]

### 默认值 ###

function hello(text="hello world"){ }
    //等价于
    function hello(text){ 
        text=text||"hello world"
    }

`undefined`就会触发函数参数的默认值

[1, undefined, 3].map((x = 'yes') => x);
    // [ 1, 'yes', 3 ]

## 6. 用途 ##

*  交换变量的值
    
        let x = 1;
        let y = 2;
        
        [x, y] = [y, x];
 *  从函数返回多个值
    
        // 返回一个数组
        function example() { 
          return [1, 2, 3];
        }
        let [a, b, c] = example();
    
        // 返回一个对象
        function example() { 
          return { 
            foo: 1,
            bar: 2
          };
        }
        let {  foo, bar } = example();
 *  函数参数的定义
    
        // 参数是一组有次序的值
        function f([x, y, z]) {  ... }
        f([1, 2, 3]);
    
        // 参数是一组无次序的值
        function f({ x, y, z}) {  ... }
        f({ z: 3, y: 2, x: 1});
 *  提取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]
 *  遍历Map结构
    
    任何部署了Iterator接口的对象，都可以用`for...of`循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。
    
        var 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) { 
          // ...
        }
 *  输入模块的指定方法
    
        //加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰
        const {  SourceMapConsumer, SourceNode } = require("source-map")

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/b98ef4dbeb7e44a99942896c9af474a5.png