ES6新特性-解構指派

ES6新特性的學習

• 一.解構指派的了解
• 二.數組的解構
• 三.對象的解構
• 四.字元串的解構指派
• 五.解構指派的主要用途
• • • （1）交換變量的值
    • （2）提取 JSON 資料
    • （3）從函數傳回多個值

一.解構指派的了解

解構指派文法是一種 Javascript 表達式，它使得将值從數組，或屬性從對象，提取到不同的變量中，成為可能。ES6 允許按照一定模式，從數組和對象中提取值，對變量進行指派，這被稱為解構（Destructuring）。

二.數組的解構

以前，為變量指派，隻能直接指定值。

let a = 1;
let b = 2;
let c = 3;
           

ES6 允許寫成下面這樣。

let [a, b, c] = [1, 2, 3];
           

不僅友善而且簡潔

本質上，這種寫法屬于“模式比對”，隻要等号兩邊的模式相同，左邊的變量就會被賦予對應的值。下面是一些使用嵌套數組進行解構的例子。

let [a, [[b], c]] = [1, [[2], 3]];
           

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

console.log(x);//2

var [x,y,m]=[3,4];

console.log(m);//undefind

var [x,y]=[80,90,100];//100擷取不到
           

小技巧（不用臨時變量也能交換變量）：

var a = 1;
var b = 3;
//等價于[a,b]=[3,1]
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
           

三.對象的解構

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

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true
           

let { a, b } = { a: 'aa', b: 'bb' };
a // "aa"
b // "bb"
let { c } = { a: 'aa', b: 'bb' };
c // undefined
           

上面代碼的第一個例子，等号左邊的兩個變量的次序，與等号右邊兩個同名屬性的次序不一緻，但是對取值完全沒有影響。第二個例子的變量沒有對應的同名屬性，導緻取不到值，最後等于undefined。

注意：如果解構失敗，變量的值等于undefined。

四.字元串的解構指派

字元串也可以解構指派。這是因為此時，字元串被轉換成了一個類似數組的對象。

const [a, b, c, d, e,f] = 'xiaohu';
a // "x"
b // "i"
c // "a"
d // "o"
e // "h"
f // "u"
           

五.解構指派的主要用途

（1）交換變量的值

var a = 1;
var b = 3;
//等價于[a,b]=[3,1]
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
           

面試題：

請用一句代碼，實作兩個資料值互換？答案也就是上方解構交換指派的内容。

（2）提取 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]
           

（3）從函數傳回多個值

// 傳回一個數組

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 傳回一個對象

function example() {
  return {
    a: 1,
    b: 2
  };
}
let { a, b } = example();
           

還有其他多種用途，部落客目前遇到的隻有以上類似的相關情況，有其他想法的也可以評論告訴一下我！！！