1. 程式人生 > >ES6之解構賦值用途

ES6之解構賦值用途

1.交換變數的值

let x=1;
let y=2;
[x,y] = [y,x];

2.從函式返回多個值
函式只能返回一個值,如果要返回多個值,只能將它們放在陣列或物件裡返回。有了解構賦值,取出這些值就非常方便

//返回一個數組
function example() {
  return [1,2,3];
}
let [a,b,c]= example()

//返回一個物件
function example() {
     return {
         foo: 1,
         bar: 2
     }
}
let {foo,bar} = 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資料

let jsonData = {
     id:42,
     status:"OK",
     data: [867,5309]
};
let { id, status, data: number} = jsonData;
console.log(id,status,number);
//42,"OK",[867,5309]

5.函式引數的預設值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

6.遍歷Map解構

任何部署了 Iterator 介面的物件,都可以用for...of迴圈遍歷。Map 結構原生支援 Iterator 介面,配合變數的解構賦值,獲取鍵名和鍵值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world
如果只想獲取鍵名,或者只想獲取鍵值,可以寫成下面這樣。

// 獲取鍵名
for (let [key] of map) {
  // ...
}

// 獲取鍵值
for (let [,value] of map) {
  // ...
}