ES6 - 解構賦值

hey ~ 我是肥陽，後期會持續更新，請記得點贊支持喲

解構賦值 是一種 Javascript 表達式，指的是將值從數組（或將屬性從對象）提取到不一樣的變量中
即：等號的左邊與等號的右邊相等
主要分爲 數組，對象，字符串 的解構

一、對象解構賦值

未進行解構賦值時，請看下面這段代碼：

var object = {
    name： '肥陽',
    age: '18',
    kg: '45',
    love: '代碼',
}
複製代碼

若是鍵值對特別多，一個個去獲取的話代碼就會變得很長

var name = object.name;
var age = object.age;
var kg = object.kg;
console.log(name, age, kg); // 肥陽 18 45
複製代碼

因此就有了對象的 解構賦值
能夠簡單理解爲：等號的左邊和右邊的結構相同

var {name, age, kg} = object;
console.log(name, age, kg);  // 肥陽 18 45
複製代碼

是否是簡單多了呢 ？嘻嘻嘻
這種寫法是 在聲明的同時進行解構賦值
也能夠 在聲明以後進行解構賦值，以下：

var name = '';
({name} = object);
console.log(name); // 肥陽
複製代碼

當個人變量名和對象的鍵名 不一致 時，就涉及到了 解構賦值的 變量重命名

var { name: Str } = object;
console.log(Str); // 肥陽
複製代碼

若是有新的變量，會顯示爲 undefined

var { c } = object;
console.log(c); // undefined
複製代碼

若是要給新的變量賦值，就用到了 ' = ', 重命名用的是 ' : '

var { c = 'hello' } = object;
console.log(c);  // hello
複製代碼

若是object有c值：

var object = {
    name： '肥陽',
    age: '18',
    kg: '45',
    love: '代碼',
    c: 'hey'
}
var { c = 'hello' } = object;
console.log(c);  // hey
複製代碼

若是object有c值：undefined

var object = {
    name： '肥陽',
    age: '18',
    kg: '45',
    love: '代碼',
    c: undefined
}
var { c = 'hello' } = object;
console.log(c);  // hello
複製代碼

二、數組解構賦值

let x = 1;
let y = 2;
let z = 3;
console.log(x, y, z); // 1 2 3
複製代碼

ES6能夠這樣寫：

let [x, y, z] = [1, 2, 3];
console.log(x, y, z); // 1 2 3
複製代碼

假設有一個數組 arr

var arr = ['x', 'y', 'z'];
var [a, b, c] = arr;
console.log(a, b, c); // x y z
複製代碼

若是arr裏的某一項的值爲undefined

arr[0] = undefined;
var [a, b, c] = arr;
console.log(a,b,c); // undefined y z
複製代碼

咱們能夠設一個默認值

var [a = '100', b, c] = arr;
console.log(a, b, c); // 100 y z
複製代碼

詳情請前往官網文檔：developer.mozilla.org/zh-CN/docs/…