ECMASCript 6 的解构赋值

  解构赋值是ECMASCript 6 「简称ES6」中新增加的特性之一。MDN 上面是这样定义的:The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. 翻译过来就是:解构赋值可以将数组元素或对象属性赋值给不同的变量「这个范围其实不太准确」。个人觉得一般情况下解构赋值对于数组来说没有多大的意义,因为并没有减少多少代码。当然,如果你要赋值多个数组值的话,使用解构赋值是比较简洁。

var array = [1, 2];
var pickedItem = array[0];
var [pickedItem] = array;

  对数组的解构赋值还有一个特殊用法:交换变量。

var title4header = 'header';
var title4content = 'content';
[title4header, title4content] = [title4content, title4header];

  在没有解构赋值这个特性之前,我们访问对象属性的时候一般都需要带上对象名(with 不算)。有了解构赋值后,基本上就可以不用带对象名了。

var company = {
    name: 'Alpha',
    address: 'xxxxx'
};

const { name } = company;

  如果你对象的属性名,可以在解构的时候使用另外的名字哦!

var company = {
    name: 'Alpha',
    address: 'xxxxx'
};
// 解构赋值了一个新变量companyName,它的值是company.name
const { name: companyName } = company;

  当然解构赋值不仅仅支持解构扁平的对象结构,也支持嵌套对象。

var company = {
    name: 'Alpha',
    coordinate: {
        latitude: 'xxx',
        longitude: 'xxx'
    }
};
// 解构赋值了一个新变量latitude,它的值是company.coordinate.latitude
const { coordinate:{ latitude } } = company;

  在开头提到了,MDN 对解构赋值的可用范围其实不同准确;因为在迭代协议「Iteration protocols
」里面提到:Some statements and expressions expect iterables, for example the for-of loops, spread syntax, yield*, and destructuring assignment。也就是说,只要是可迭代对象就可以解构赋值。所以,StringMap 以及Set 都可以解构赋值的。

var testString = 'Cool';
var testMap = new Map();
testMap.set('str', 123);
var testSet = new Set([1, 2, 3, 4, 5]);

const [firstLetter] = testString;
const [firstPair] = testMap;
const [firstSet] = testSet;

参考

您的浏览器已过时

要正常浏览本网站请升级您的浏览器。现在升级

×