变量的解构赋值

本系列属于阮一峰老师所著的ECMAScript 6 入门学习笔记

---

1.数组的的解构赋值

基本用法

ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
之前为变量赋值只能直接指定值。

let a = 1;let b = 2;let c = 3; 

ES6允许改写成下面这样

let [a,b,c] = [1,2,3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

默认值

解构赋值允许指定默认值。

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

注意，ES6内部使用严格相等运算符(===)，判断一个位置是否有值。一个数组成员不严格等于undefined，默认值是不会生效的。

let [x = 1] = [undefined];x //1let [x = 1] = [null];x //null

2.对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

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

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

如果变量名与属性名不一致，必须写成下面这样

var {foo:baz} = {foo:'aaa',bar:'bbb'};baz //'aaa'let obj = {first:'hello',last:'world'};let {first:f,last:l} = obj;f //'hello'l //'world'

这实际上说明，对象的解构赋值是下面形式的简写

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

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于undefined。

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.数值和布尔值的解构赋值

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

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

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所有对它们进行解构解析，都会报错

5.函数参数的解构赋值

函数的参数也可以使用解构赋值

function add([x,y]){    return x + y;}add([1,2]);//3

6.圆括号问题

解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。

由此带来的问题是，如果模式中出现圆括号怎么处理。ES6的规则是，只要有可能导致解构的歧义，就不得使用圆括号。

但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此，建议只要有可能，就不要在模式中放置圆括号。

7.用途

变量的解构赋值用途很多

(1) 交换变量的值

let x = 1;let y = 2;[x,y] = [y,x]

上面的代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

(2) 从函数返回多个值

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

//返回一个数组function example(){    return [1,2,3];}let [a,b,c] = example();//返回一个对象function example(){    return {        foo:1,        bar:2    };}let {foo,bar} = example();

(3) 函数参数的定义

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

//参数是一组有次序的值function f([x,y,z]){...}f([1,2,3]);//参数是一组无次序的值function f([x,y,z]){...}f([z:3,y:2,x:1]);

(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) 函数参数的默认值

jQuery.ajax = function (url, {  async = true,  beforeSend = function () {},  cache = true,  complete = function () {},  crossDomain = false,  global = true,  // ... more config}) {  // ... do stuff};

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

(6) 遍历Map解构

这个我暂时还没有学到，等学到了再补充

(7) 输入模块的指定方法

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

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

更多原创内容可以访问我的个人博客pengzhixin.com