數組解構 · Javascript基礎篇

[TOC] >[success] # 數組解構 ~~~ '對象解構'與'數組結構'有一個重要的不同。'數組的元素是按次序排列的，變量的取值由它的位置決定'，而對象的'屬性'沒有次序，'變量'必須與'屬性同名'，才能取到正確的值。 ~~~ >[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" ~~~ >[success] ## 賦值時解構 ~~~ '數組賦值時解構'，與'對象解構'不同，不必將表達式包含在'圓括號'內 ~~~ ~~~ let colors = ["red", "green", "blue"], firstColor = "black", secondColor = "purple"; [firstColor, secondColor] = colors console.log(firstColor) // "red" console.log(secondColor) // "green" ~~~ >[success] ## 互換變量值 ~~~ '數組解構賦值'有一個非常獨特的用例，能輕易地'互換兩個變量的值'。'互換變量值'在排序算法中十分常用，而在'ES5'中需要使用第'三'個變量作為'臨時變量'，正如下例： ~~~ >[success] ### ES5互換變量 ~~~ // 在 ES5 中互換值 let a = 1, b = 2, tmp; // 賦值 tmp = a a = b b = tmp console.log(a) // 2 console.log(b) // 1 ~~~ >[success] ### ES6互換變量 ~~~ // 在 ES6 中互換值 let a = 1, b = 2; // 賦值 [a, b] = [b, a] console.log(a) // 2 console.log(b) // 1 ~~~ >[success] ## 默認值 ~~~ '數組解構賦值'同樣允許在'數組任意位置'指定'默認值'。當指定位置的項'不存在'、或其值為'undefined'，那么該默認值就會被使用。例如： ~~~ ~~~ let colors = ["red"] let [firstColor, secondColor = "green"] = colors console.log(firstColor) // "red" console.log(secondColor) // "green" ~~~ >[success] ## 數組嵌套解構 ~~~ 與'解構嵌套'的'對象'相似，可以用類似的方式來'解構嵌套'的'數組'。在整個'解構模式'中插入另一個 '數組模式'，解構操作就會'下行到嵌套的數組中'，就像這樣： ~~~ ~~~ let colors = ["red", ["green", "lightgreen"], "blue"] // 隨后 let [firstColor, [secondColor]] = colors console.log(firstColor); // "red" console.log(secondColor); // "green" ~~~ >[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" ~~~ >[success] ## 克隆數組 ~~~ 克隆數組在'JS'中是個明顯被遺漏的功能。在'ES5'中開發者往往使用的是一個簡單的方式，也就是用'concat()' 方法來'克隆數組' ~~~ >[success] ## ES5克隆數組 ~~~ // 在 ES5 中克隆數組 var colors = [ "red", "green", "blue" ] var clonedColors = colors.concat() console.log(clonedColors) // "[red,green,blue]" ~~~ >[success] ## ES6克隆數組 ~~~ 盡管'concat()'方法的本意是'合并'兩個數組，但不使用任何參數來調用此方法，就會獲得'原數組'的一個'克隆品'。而在'ES6'中，你可以使用''剩余項(...)'的語法來達到同樣效果。實現如下： ~~~ ~~~ // 在 ES6 中克隆數組 let colors = ["red", "green", "blue"] let [...clonedColors] = colors console.log(clonedColors) // "[red,green,blue]" ~~~ >[warning] ## 注意 ~~~ '剩余項(...)'必須是數組解構模式中'最后的部分'，之后不能再有'逗號'，否則就是'語法錯誤'。 ~~~