使用解構賦值與擴展運算符，讓你的代碼更優雅

解構賦值

解構的做用是能夠快速取得數組或對象當中的元素或屬性，而無需使用arr[x]或者obj[key]等傳統方式進行賦值

字符串的解構

字符串也能夠解構賦值。這是由於此時，字符串被轉換成了一個相似數組的對象

const [a,b,c,d,e] = hello;
a //"h"
b //"e"
c //"l"
d //"l"
e //"o"
複製代碼

相似數組的對象都有一個length對象，所以還能夠對這個對象進行解構賦值

let {length:len} = "hello";
len  //5
複製代碼

變量的解構賦值

用途

（1）交換變量的值

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

這樣的寫法不只簡潔，語義很是清晰。

（2）從函數返回多個值

函數只能反悔哦一個值，若是要返回多個值，只能將他們放在數組或對象中返回，有了解構賦值，取出這些值就很是方便

//返回一個數組
funlction example(){
    return [1,2,3]
}
let [a.b,c] = example（)
複製代碼

（3）函數參數的定義

解構賦值能夠方便的將一組參數與變量名對應起來

//參數是一組有次序的值
function f([x,y,z]){
    ...
}
f([1,2,3])
//參數是一組無次序的值
function f({x,y,z}){
    ...
}
f({Z:3,y:2,X:1})
複製代碼

(4)提取JSON數據

解構賦值對提取JSON中的數據尤爲有用

let jsonData ={
    id :42,
    status:"Ok",
    data:[874,125]
}
let {id,status,data:number0} = jsonData；
複製代碼

(5）函數參數的默認值

JQuery.ajax = function(url,{
  async = true ,
  before = funkction(){},
  cache = true
})
{
    
}
複製代碼

指定參數的默認值，就避免了在函數體內部再寫var foo = config.foo || "default foo"這樣的語句了

（6）遍歷Map結構

任何部署了Iterator接口的對象，均可以用for..of循環遍歷，Map結構原生支持Iterator接口，配合變量的解構賦值，獲取鍵名和鍵值就很是的方便

let map = new Map();
map.set('first','hello');
map.set('second','world');
for ( let [key,value] of map){
    console.log(key,value)
}
複製代碼

若是隻想獲取鍵值或者鍵名能夠寫成下面這樣

//獲取鍵名
for( let [key] of map){
    
}
//獲取鍵值
for(let [,value] of map){
    
}
複製代碼

（7）輸入模塊的指定方法

加載模塊時，每每須要指定輸入哪些方法，解構賦值是的輸入語句很是清晰

import {Title，Link} from ‘antd’
複製代碼