1. 程式人生 > >ES6 變量解構用法

ES6 變量解構用法

輸出 ole family 解構 bbb pre turn func status

1、數組解構,可以設置默認值

‘use strict‘;
let [x, y = ‘b‘] = [‘a‘];
//控制臺輸出b
console.log(y);

2、對象解構

‘use strict‘;
let { foo, bar } = { foo: "aaa", bar: "bbb" };
// 控制臺輸出aaa
console.log(foo);
// 控制臺輸出bbb
console.log(bar);

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的,變量的取值由它的位置決定;而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。

對象的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變量。真正被賦值的是後者,而不是前者。

3、字符串的解構

‘use strict‘;
let [a,b,c] = ‘mfg‘;
// 控制臺輸出m
console.log(a);
// 控制臺輸出f
console.log(b);

4、函數參數解構

‘use strict‘;
function add([x, y]){
  return x + y;
}
console.log(add([1, 2]));

5、解構的用途

(1)從函數返回多個值

‘use strict‘;
function example() {
  return [1, 2, 3];
}
let [a, b, c] 
= example(); //控制臺輸出1 console.log(a)

(2)提取 JSON 數據

‘use strict‘;
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);

ES6 變量解構用法