ES6——變數的解構賦值
解構賦值:從陣列或物件中提取值為相同格式對應位置的變數賦值。下面這種寫法屬於“模式匹配”,只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值。
一、陣列的解構賦值
//ES5
{
let a = 10;
let b = 20;
let c = 30;
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30
}
{
//ES6
let [a, b, c] = [10, 20, 30];
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30
}
巢狀陣列進行解構,如果解構不成功,變數的值為undefined
let [a, [[b], c]] = [1, [[2], 3]]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 let [, , d] = [1, 2, 3]; console.log(d); // 3 let [e, , f] = [4, 5, 6]; console.log(e); // 4 console.log(f); // 6 let [g, ...h] = [1, 2, 3]; console.log(g); // 1 console.log(h); // [2, 3] let [i, m, ...n] = [1]; console.log(i); // 1 console.log(m); // undefined console.log(n); // []
不完全匹配: 等號左邊的模式,只匹配一部分的等號右邊的陣列,也可以解構成功。
let [a, b, c] = [1, 2, 3, 4, 5];
console.log(a);
console.log(b);
console.log(c);
解構賦值允許指定預設值。預設值也可以是表示式,如果預設值是一個表示式,那麼這個表示式是惰性求值的,即只有在用到的時候,才會求值。預設值可以引用解構賦值的其他變數,但該變數必須已經宣告。
let [a = true] = []; console.log(a); // true let [b, c = 1] = [2]; console.log(b); // 2 console.log(c); // 1 let [d = 4] = [5]; console.log(d); // 5 let [e, f = 3] = [6, undefined]; console.log(e); // 6 console.log(f); // 3 let [g = 8] = [null]; console.log(g); // null function h() { console.log('h'); //不執行 } let [i = h()] = [111]; console.log(i); // 111 let [x = 1, y = x] = []; console.log(x); //1 console.log(y); //1
二、物件的解構賦值
物件的解構賦值和陣列是不一樣的,陣列是按順序解構賦值,物件是按照屬性名解構賦值,變數必須和屬性同名才能取到正確的值。如果沒有對應的屬性名,則變數為undefined
let {name, age} = {name: 'Lilei', age: 30};
console.log(name); // Lilei
console.log(age); // 30
let {sex, hobbies} = {sex: '男'};
console.log(sex); // 男
console.log(hobbies); // undefined
如果變數與屬性名不同,需要如下寫法:其中username是變數。
let {name: username} = {name: 'Lucy', age: 20};
console.log(username); // Lucy
物件解構也可以巢狀賦值
let obj = {
lilei: [
20,
{level: '優'}
]
};
let {lilei} = obj;
let {lilei: [score, {level}]} = obj;
console.log(lilei); // [20, {level: '優'}]
console.log(score); // 20
console.log(level); // 優
let foot = {
noddle: [
20,
{status: 'sale'}
]
}
let {noddle, noddle: [sprice, {status}]} = foot;
console.log(noddle); // [20, {status: 'sale'}]
console.log(sprice); // 20
console.log(status); // sale
let size = {};
let colors = [];
({a: size.prop, b: colors[0]} = {a: 123, b: 456});
console.log(size); // {prop: 123}
console.log(colors); // [456]
物件解構賦初值
let {a = 1} = {};
console.log(a); // 1
let {b, c = 2} = {b: 3};
console.log(b); // 3
console.log(c); // 2
let {d: e = 3} = {};
console.log(e); // 3
let {f = 4} = {f: null};
console.log(f); // null
如果要將一個已經宣告的變數用於解構賦值,那麼一定不要將{}直接放在左面,因為js會講{}作為一個程式碼段而報錯,如果需要這樣賦值,要用()將等式括起來。
// 錯誤的寫法
let a;
{a} = {a: 1}; // 報錯
// 正確的寫法
let a;
({a} = {a: 1});
由於陣列本質是特殊的物件,因此可以對陣列進行物件屬性的解構。方括號這種寫法,屬於“屬性名錶達式”
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
console.log(first); // 1
console.log(last); // 3
三、字串的解構賦值
const [a, b, c, d, e] = 'HelloWorld';
console.log(a); // H
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o
const {length: len} = 'HelloWorld';
console.log(len); // 10
四、數值和布林值的解構賦值
解構賦值時,如果等號右邊是數值和布林值,則會先轉為物件。數值和布林值的包裝物件都有toString
屬性,因此變數s
都能取到值。如果不能轉為物件,則報語法錯誤。
let {toString: s} = 123;
console.log(s === Number.prototype.toString); // true
let {toString: o} = true;
console.log(o === Boolean.prototype.toString); // true
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
五、函式引數的解構賦值
function fn([a, b]){
console.log(a); // 1
console.log(b); // 2
}
fn([1, 2]);
function fn1([c = 10, d = 20]) {
console.log(c); // 1
console.log(d); // 20
}
fn1([1]);
六、解構賦值的用途
1.交換變數的值
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
2.從函式返回多個值
從函式return值只能返回一個值,如果要返回多個值,需要把多個值放在陣列或者物件中,再返回出來。有了解構賦值,取出這些值將會很容易。
function f() {
let a = 1;
let b = 2;
let c = 3;
let d = 4;
return [a, b, c, d];
}
let [a, b, c, d] = f();
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
3.函式引數的定義和設定預設值
function f({x, y, z}) {
console.log(x); // 1
console.log(y); // 2
console.log(z); // 3
}
f({z: 3, y: 2, x: 1});
function f1({x = 0, y = 0, z = 0}) {
console.log(x); // 0
console.log(y); // 2
console.log(z); // 3
}
f1({z: 3, y: 2});
4.提取json資料
let obj = {
name: 'lilei',
age: 20,
sex: '男',
hobbies: ['唱歌', '跳舞']
};
let {name, age, sex, hobbies = []} = obj;
console.log(name); // lilei
console.log(age); // 20
console.log(sex); // 男
console.log(hobbies); // ['唱歌', '跳舞']
5.遍歷map結構
const map = new Map();
map.set('score', 100);
map.set('level', '好');
for (let [key, value] of map) {
console.log(key + ':' + value); // score: 100 level: 好
}
6.require和import時可以按需匯入
import {getJSON, post, ajax} from "jquery";
post('demo.php', {id: 1}, (res) => {
console.log(res);
});