js参数解构_JS对象解构

什么是解构赋值&＃xff1f;

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁&＃xff0c;同时还比传统的属性访问方法更为清晰。

通常来说&＃xff0c;你很可能这样访问数组中的前三个元素&＃xff1a;

var first &＃61; someArray[0];

var second &＃61; someArray[1];

var third &＃61; someArray[2];

如果使用解构赋值的特性&＃xff0c;将会使等效的代码变得更加简洁并且可读性更高&＃xff1a;

var [first, second, third] &＃61; someArray;

SpiderMonkey(Firefox的Javascript引擎)已经支持解构的大部分功能&＃xff0c;但是仍不健全。你可以通过bug 694100跟踪解构和其它ES6特性在SpiderMonkey中的支持情况。

数组与迭代器的解构

以上是数组解构赋值的一个简单示例&＃xff0c;其语法的一般形式为&＃xff1a;

[ variable1, variable2, ..., variableN ] &＃61; array;

这将为variable1到variableN的变量赋予数组中相应元素项的值。如果你想在赋值的同时声明变量&＃xff0c;可在赋值语句前加入var、let或const关键字&＃xff0c;例如&＃xff1a;

var [ variable1, variable2, ..., variableN ] &＃61; array;

let [ variable1, variable2, ..., variableN ] &＃61; array;

const [ variable1, variable2, ..., variableN ] &＃61; array;

事实上&＃xff0c;用变量来描述并不恰当&＃xff0c;因为你可以对任意深度的嵌套数组进行解构&＃xff1a;

var [foo, [[bar], baz]] &＃61; [1, [[2], 3]];

console.log(foo);

// 1

console.log(bar);

// 2

console.log(baz);

// 3

此外&＃xff0c;你可以在对应位留空来跳过被解构数组中的某些元素&＃xff1a;

var [,,third] &＃61; ["foo", "bar", "baz"];

console.log(third);

// "baz"

而且你还可以通过“不定参数”模式捕获数组中的所有尾随元素&＃xff1a;

var [head, ...tail] &＃61; [1, 2, 3, 4];

console.log(tail);

// [2, 3, 4]

当访问空数组或越界访问数组时&＃xff0c;对其解构与对其索引的行为一致&＃xff0c;最终得到的结果都是&＃xff1a;undefined。

console.log([][0]);

// undefined

var [missing] &＃61; [];

console.log(missing);

// undefined

请注意&＃xff0c;数组解构赋值的模式同样适用于任意迭代器&＃xff1a;

function* fibs() {

var a &＃61; 0;

var b &＃61; 1;

while (true) {

yield a;

[a, b] &＃61; [b, a &＃43; b];

}

}

var [first, second, third, fourth, fifth, sixth] &＃61; fibs();

console.log(sixth);

// 5

对象的解构

通过解构对象&＃xff0c;你可以把它的每个属性与不同的变量绑定&＃xff0c;首先指定被绑定的属性&＃xff0c;然后紧跟一个要解构的变量。

var robotA &＃61; { name: "Bender" };

var robotB &＃61; { name: "Flexo" };

var { name: nameA } &＃61; robotA;

var { name: nameB } &＃61; robotB;

console.log(nameA);

// "Bender"

console.log(nameB);

// "Flexo"

当属性名与变量名一致时&＃xff0c;可以通过一种实用的句法简写&＃xff1a;

var { foo, bar } &＃61; { foo: "lorem", bar: "ipsum" };

console.log(foo);

// "lorem"

console.log(bar);

// "ipsum"

与数组解构一样&＃xff0c;你可以随意嵌套并进一步组合对象解构&＃xff1a;

var complicatedObj &＃61; {

arrayProp: [

"Zapp",

{ second: "Brannigan" }

]

};

var { arrayProp: [first, { second }] } &＃61; complicatedObj;

console.log(first);

// "Zapp"

console.log(second);

// "Brannigan"

当你解构一个未定义的属性时&＃xff0c;得到的值为undefined&＃xff1a;

var { missing } &＃61; {};

console.log(missing);

// undefined

请注意&＃xff0c;当你解构对象并赋值给变量时&＃xff0c;如果你已经声明或不打算声明这些变量(亦即赋值语句前没有let、const或var关键字)&＃xff0c;你应该注意这样一个潜在的语法错误&＃xff1a;

{ blowUp } &＃61; { blowUp: 10 };

// Syntax error 语法错误

为什么会出错&＃xff1f;这是因为Javascript语法通知解析引擎将任何以{开始的语句解析为一个块语句(例如&＃xff0c;{console}是一个合法块语句)。解决方案是将整个表达式用一对小括号包裹&＃xff1a;

({ safe } &＃61; {});

// No errors 没有语法错误

解构值不是对象、数组或迭代器

当你尝试解构null或undefined时&＃xff0c;你会得到一个类型错误&＃xff1a;

var {blowUp} &＃61; null;

// TypeError: null has no properties(null没有属性)

然而&＃xff0c;你可以解构其它原始类型&＃xff0c;例如&＃xff1a;布尔值、数值、字符串&＃xff0c;但是你将得到undefined&＃xff1a;

var {wtf} &＃61; NaN;

console.log(wtf);

// undefined

你可能对此感到意外&＃xff0c;但经过进一步审查你就会发现&＃xff0c;原因其实非常简单。当使用对象赋值模式时&＃xff0c;被解构的值需要被强制转换为对象。大多数类型都可以被转换为对象&＃xff0c;但null和undefined却无法进行转换。当使用数组赋值模式时&＃xff0c;被解构的值一定要包含一个迭代器。

默认值

当你要解构的属性未定义时你可以提供一个默认值&＃xff1a;

var [missing &＃61; true] &＃61; [];

console.log(missing);

// true

var { message: msg &＃61; "Something went wrong" } &＃61; {};

console.log(msg);

// "Something went wrong"

var { x &＃61; 3 } &＃61; {};

console.log(x);

// 3