本文已参与「新人创作礼」活动，一起开启掘金创作之路。

解构赋值

JavaScript 中最常用的两种数据结构是 Object 和 Array。

对象是一种根据键存储数据的实体。
数组是一种直接存储数据的有序列表。

但是，当我们把它们传递给函数时，函数可能不需要整个对象/数组，而只需要其中一部分。

解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中。

解构操作对那些具有很多参数和默认值等的函数也很奏效。下面有一些例子。

对象解构

在等号右侧是一个已经存在的对象，我们想把它拆分到变量中。
等号左侧包含了对象相应属性的一个类对象“模式（pattern）”。
在最简单的情况下，等号左侧的就是 {...} 中的变量名列表。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
console.log( 'x', x ) // 1
console.log( 'y', y ) // 2
console.log( 'z', z ) // {a: 3, b: 4}

let n = { x, y, ...z }
console.log( 'n', n ) // { x: 1, y: 2, a: 3, b: 4 }

冒号的语法是“从对象中什么属性的值：赋值给哪个变量”。所以，存在下面这种情况：

let { x, y, ...z } = { a: 3, b: 4, c: 5, d: 6 }
console.log( 'x', x ) // undefined
console.log( 'y', y ) // undefined
console.log( 'z', z ) // { a: 3, b: 4, c: 5, d: 6 }

let n = { x, y, ...z }
console.log( 'n', n ) // { undefined, undefined, a: 3, b: 4, c: 5, d: 6 }

数组解构

let [ name1, name2 ] = [ 'Julius', 'Caesar', 'Consul', 'of the Roman Republic' ]
console.log( 'name1:', name1 ) // Julius
console.log( 'name2:', name2 ) // Caesar

默认值

就像数组或函数参数一样，默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。

如果数组比左边的变量列表短，这里不会出现报错。缺少对应值的变量都会被赋 undefined：

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

如果我们想要一个“默认”值给未赋值的变量，我们可以使用 = 来提供：

// 默认值
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius（来自数组的值）
alert(surname); // Anonymous（默认值被使用了）

默认值可以是更加复杂的表达式，甚至可以是函数调用。不过，这些表达式或函数只会在这个变量未被赋值的时候才会被计算。

举个例子，我们使用了 prompt 函数来提供两个默认值：

// 只会提示输入姓氏
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];

alert(name);    // Julius（来自数组）
alert(surname); // 你输入的值

请注意：prompt 将仅针对缺失值（surname）运行。

注意： “解构”并不意味着“破坏”

这种语法被叫做“解构赋值”，是因为它“拆开”了数组或对象，将其中的各元素复制给一些变量。原来的数组或对象自身没有被修改。

换句话说，解构赋值只是写起来简洁一点。

[JavaScript]解构赋值

解构赋值

对象解构

数组解构

默认值

注意： “解构”并不意味着“破坏”