ES6复习——解构赋值

解构赋值

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

数组解构赋值

•格式

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

•报错

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

•添加默认值

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

•数组成员严格等于===undefined,默认值才会生效

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

•默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

let [x = 1, y = x] = [];     // x=1; 
y=1let [x = 1, y = x] = [2];    // x=2; 
y=2let [x = 1, y = x] = [1, 2]; // x=1; 
y=2let [x = y, y = 1] = [];     // ReferenceError: y is not defined

对象的解构赋值

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

•格式

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

•对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。
// 例一let { log, sin, cos } = Math;
// 例二const { log } = console;log('hello') // hello

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

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'l // 'world'

用途

（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]

上面代码可以快速提取 JSON 数据的值。
（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 结构
任何部署了 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");

•下面三次分别是对loc、start、line结构赋值

点击查看代码

const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }};
let { loc, loc: { start }, loc: { start: { line }} } = node;
loc  // Object {start: Object}
start // Object {line: 1, column: 5}
line // 1

•

var a = { x: y = 3 } = { x: 5 }
console.log(a.x);//5
console.log(a);//对象｛x:3｝
console.log(x);//undefined
console.log(y);//5

•默认值

var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null

•对数组进行对象属性解构，[]写法属于属性名表达式

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3