使用解構賦值與擴充套件運算子，讓你的程式碼更優雅

gitttttq發表於2019-01-10
賦值套件

解構賦值

解構的作用是可以快速取得陣列或物件當中的元素或屬性，而無需使用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’
複製程式碼

相關文章