iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

ES666系列 第 3

ES6 解構賦值-下 Day3

解構賦值 除了陣列與物件可以使用外,字串、數值與參數也可以使用,
由於在JavaScript中函數的參數可以是任何型別,
讓我們可以很隨興的把讓何型別的資料當作參數傳入函數,

字串的解構賦值

陣列裡的每個成員會按照順序對應字串裡個每個字元, 他們是依據索引值去對應的,

const [a, b, c, d] = "good";
console.log(a); // "g"
console.log(b); // "o"
console.log(c); // "o"
console.log(d); // "d"

使用物件的形式宣告變數,變數的值會是字串的長度, 物件與陣列都有length屬性可以查詢長度,

let {length : len} = 'good';
console.log(len); // 4

函數的解構賦值

函數的參數[a, b] 是以陣列的型式傳入,但在傳入的那一刻就被解構成變數 a 與 b

function add([a, b]){
  return a + b;
}

add([6, 66]); // 72

這邊是把物件當作參數傳入的情況:

可以給予變數默認值,
在函數裡可以透過查詢 argument 得知各個參數的值,

function move({a = 6, b = 6} = {}) {
  return [a, b];
}

move({a: 1, b: 2}); // [1, 2]
move({a: 1}); // [1, 6]
move({}); // [6, 6]
move(); // [6, 6]

等號左邊有使用 ES6 物件簡寫的方式來作解構,
等號左邊的物件可以看成這樣{a: a, b: b},
這種情況變數a b所對應的會是等號右邊的物件裡的屬性值,

function move({a, b} = { a: 6, b: 6 }) {
  return [a, b];
}

move({a: 1, b: 2}); // [1, 2]
move({a: 1}); // [1, undefined]
move({}); // [undefined, undefined]
move(); // [6, 6]

解構賦值替我們在創建變數上給與了其他的替代方案,
讓宣告變數變的非常多元化。


上一篇
ES6 解構賦值-上 Day2
下一篇
ES6 模板字符串 Day4
系列文
ES66624

尚未有邦友留言

立即登入留言