ES6-变量的解构赋值

变量的解构赋值

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

基本用法

数组的解构赋值

• 如果解构不成功，变量的值就等于undefined。

var [a, b, c, d] = [1, 2, 3];
// var a = 1;
// var b = 2;
// var c = 3;
// var d = undefined;

let [foo, [[bar], baz]] = [1, [[2], 3]];
// var a = 1;
// var b = 2;
// var c = 3;

let [ , , third] = ["foo", "bar", "baz"];
// var third = "baz";

let [head, ...tail] = [1, 2, 3, 4];
// var head // 1
// var tail // [2, 3, 4]

• 解构赋值允许指定默认值。内部使用严格相等运算符（===），判断一个位置是否有值。

var [foo = true] = []; // true
var [x = 1] = [undefined]; // 1
var [x = 1] = [null]; // null

• 如果等号的右边不是数组（不是可遍历的结构），将会报错。

let [foo] = 1;

var { foo: baz } = { foo: "aaa", bar: "bbb" };
const [a, b, c, d, e] = 'hello';

对象的解构赋值

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

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

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

• 如果要将一个已经声明的变量用于解构赋值，必须非常小心。

var x;
{x} = {x: 1}; // error，大括号被解析成代码块
({x} = {x: 1}); // right

字符串的解构赋值

const [a, b, c, d, e] = 'hello';
// const a = 'h';
// const b = 'e';
// ...

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

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

数值和布尔值的解构赋值

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

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

• undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

函数参数的解构赋值

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

• 函数参数的解构也可以使用默认值。

function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

用途

交换变量的值

[x, y] = [y, x];

从函数返回多个值

import React, {
    Component,
    Dimensions,
    Image,
    View,
    Platform,
    StyleSheet,
    Text,
} from 'react-native';

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

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

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

提取JSON数据

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

函数参数的默认值

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