解構賦值還有這麼多玩法？

Topqiang發表於2018-03-26
賦值

解構賦值

解構賦值

很多人可能和我一樣，第一次看到這個詞的時候摸不著頭腦。但是冷靜再看一遍好像明白了，“把資料結構分解開分別進行賦值”。

  • 我們先看幾個小例子
let [a,b,c] = [1,2,3];
console.log(a,b,c);//1 2 3

let {name,age} = {name:"jack",age:"18"};
console.log(name,age);//jack 18

let {toString,length} = "hello";
console.log(toString === String.prototype.toString,length);//true 5

let [a,b,c,d,e] = "world";
console.log(a,b,c,d,e);//w o r l d

let {shift,length,key} =[1,2,3];
console.log(shift,length,key);//[Function: shift] 3 undefined

function fo([x,y,z]){
    console.log(x,y,z);
}
fo([3,4,2]);//3,4,2

function fobj({x,y,z}){
    console.log(x,y,z);
}
fobj({z:1,y:4,x:2});//2 4 1

let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x) // "a"

複製程式碼

相信大家不難從上述的幾段程式碼案例總結出來解構賦值的規律，我總結到如下幾點：
1、解構主體為陣列或者物件。
2、解構源必須具備Iterator介面或者經過轉換之後具備Iterator介面。（什麼是Iterator可看我接下來文章）
3、陣列解構是按順序進行解構（有序），物件是通過方法名或者屬性名進行結構（無序）。
4、陣列解構解構源會被轉換為陣列，物件解構解構源會被轉換成物件。
5、解構物件時關鍵詞解構會從當前例項持續向上訪問原型鏈直到查不到返回undefined。

以上總結包含了大部分基礎場景我們會遇到的情況，但還是有更多的細節需要我們注意下：

  • 我們可以巢狀解構
let [a,[b,{name,age}],d] = [1,[4,{name:1,age:1}],6];
console.log(a,b,d,name,age);//1 4 6 1 1
複製程式碼
  • 我們也可以改變解構的變數名
var {b:x,a:y} = {a:1,b:2};
console.log(x,y);//2 1
複製程式碼
  • 解構賦值可以設定預設值
var [x=1,y=2] = [,0];
console.log(x,y);//1 0

var {x=1,y=2] = {y:0};
console.log(x,y);//1 0
複製程式碼
  • 陣列解構賦值對於不可迭代例項將報錯
let [val] = 1;
let [val] = false;
let [val] = NaN;
let [val] = undefined;
let [val] = null;
let [val] = {};
複製程式碼
  • 陣列解構可以跳躍賦值
//取出陣列第三個
var [,,x] = [1,2,4];
console.log(x)//4
複製程式碼
  • 陣列解構可以擷取
let [,...x] = [1,2,4];
console.log(x)//[ 2, 4 ]
複製程式碼

那它有哪些用途呢？

1、交換變數，是一種很酷的玩法

var {x:y,y:x} = {x:1,y:2};
console.log(x,y);//2 1

let x=1;let y = 2;
[y,x] = [x,y];
console.log(x,y);//2 1
複製程式碼

2、接受函式返回的多個值

function test(){
    return [1,2,3];
}
let [a,b,c] = test();
console.log(a,b,c);//1 2 3

function test(){
    return {x:1,y:2,z:3};
}
let {y,z,x} = test();
console.log(y,z,x);//1 2 3
複製程式碼

3、接受不按順序的函式引數

function get({name,age,sex}){
    console.log(name,age,sex);
}
get({name:"Topqiang",age:24,sex:1});//Topqiang 24 1
get({age:24,name:"Topqiang",sex:1});//Topqiang 24 1
get({name:"Topqiang",sex:1,age:24});//Topqiang 24 1
複製程式碼

介面封裝呼叫函式再也不用考慮引數順序了,以後我們在封裝方法提供工具包時就可以讓我們的關注點放在業務本身而無需關注引數傳入的順序上。這是多麼美好的一件事。 4、設定預設值

function get({name="topqiang",age,sex}){
    console.log(name,age,sex);
}
get({age:24,sex:1});//Topqiang 24 1
複製程式碼

5、為模組化程式設計提供優雅的模組引入方式

const {read,write} = require("fs");
複製程式碼

6、函式的引數列表可以自動裝載成陣列

function getarr(...args){
    console.log(args);
}
getarr(1,23,4);//[ 1, 23, 4 ]
複製程式碼

。。。還有我沒有發現的好處。。。

以上就是我對解構賦值的一些總結，希望能對還沒入門的你提供到一些幫助。es6給我們提供了很多優美的語法糖，讓我們編起碼來更優雅，更易讀（前提懂es6），更規範。但是這些語法糖相對es5實現方式效能怎麼樣？要不要來我們現場交流交流呢！

相關文章