[TOC] >[success] # 数组解构 ~~~ '对象解构'与'数组结构'有一个重要的不同。'数组的元素是按次序排列的，变量的取值由它的位置决定'， 而对象的'属性'没有次序，'变量'必须与'属性同名'，才能取到正确的值。 ~~~ <br/> >[success] ## 初始化时解构 ~~~ let colors = ["red", "green", "blue"] let [firstColor, secondColor] = colors console.log(firstColor) // "red" console.log(secondColor) // "green" 或者只想初始化时候'取某一个' let colors = ["red", "green", "blue"] let [, , thirdColor] = colors console.log(thirdColor) // "blue" ~~~ <br/> >[success] ## 赋值时解构 ~~~ '数组赋值时解构'，与'对象解构'不同，不必将表达式包含在'圆括号'内 ~~~ ~~~ let colors = ["red", "green", "blue"], firstColor = "black", secondColor = "purple"; [firstColor, secondColor] = colors console.log(firstColor) // "red" console.log(secondColor) // "green" ~~~ <br/> >[success] ## 互换变量值 ~~~ '数组解构赋值'有一个非常独特的用例，能轻易地'互换两个变量的值'。'互换变量值'在排序算法中十分常用， 而在'ES5'中需要使用第'三'个变量作为'临时变量'，正如下例： ~~~ <br/> >[success] ### ES5互换变量 ~~~ // 在 ES5 中互换值 let a = 1, b = 2, tmp; // 赋值 tmp = a a = b b = tmp console.log(a) // 2 console.log(b) // 1 ~~~ <br/> >[success] ### ES6互换变量 ~~~ // 在 ES6 中互换值 let a = 1, b = 2; // 赋值 [a, b] = [b, a] console.log(a) // 2 console.log(b) // 1 ~~~ <br/> >[success] ## 默认值 ~~~ '数组解构赋值'同样允许在'数组任意位置'指定'默认值'。当指定位置的项'不存在'、或其值为'undefined'， 那么该默认值就会被使用。例如： ~~~ ~~~ let colors = ["red"] let [firstColor, secondColor = "green"] = colors console.log(firstColor) // "red" console.log(secondColor) // "green" ~~~ <br/> >[success] ## 数组嵌套解构 ~~~ 与'解构嵌套'的'对象'相似，可以用类似的方式来'解构嵌套'的'数组'。在整个'解构模式'中插入另一个 '数组模式'，解构操作就会'下行到嵌套的数组中'，就像这样： ~~~ ~~~ let colors = ["red", ["green", "lightgreen"], "blue"] // 随后 let [firstColor, [secondColor]] = colors console.log(firstColor); // "red" console.log(secondColor); // "green" ~~~ <br/> >[success] ## 剩余项（不定元素） ~~~ let colors = ["red", "green", "blue"] // 剩余项写法 let [firstColor, ...restColors] = colors console.log(firstColor) // "red" console.log(restColors.length) // 2 console.log(restColors[0]) // "green" console.log(restColors[1]) // "blue" ~~~ <br/> >[success] ## 克隆数组 ~~~ 克隆数组在'JS'中是个明显被遗漏的功能。在'ES5'中开发者往往使用的是一个简单的方式，也就是用'concat()' 方法来'克隆数组' ~~~ <br/> >[success] ## ES5克隆数组 ~~~ // 在 ES5 中克隆数组 var colors = [ "red", "green", "blue" ] var clonedColors = colors.concat() console.log(clonedColors) // "[red,green,blue]" ~~~ <br/> >[success] ## ES6克隆数组 ~~~ 尽管'concat()'方法的本意是'合并'两个数组，但不使用任何参数来调用此方法，就会获得'原数组'的一个'克隆品'。 而在'ES6'中，你可以使用''剩余项(...)'的语法来达到同样效果。实现如下： ~~~ ~~~ // 在 ES6 中克隆数组 let colors = ["red", "green", "blue"] let [...clonedColors] = colors console.log(clonedColors) // "[red,green,blue]" ~~~ <br/> >[warning] ## 注意 ~~~ '剩余项(...)'必须是数组解构模式中'最后的部分'，之后不能再有'逗号'，否则就是'语法错误'。 ~~~