變數的解構賦值

其實是挺好理解的，用一條式子可以很容易明白

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

類似於模式匹配的賦值模式，長得一樣的就可以完美賦值

1、陣列解構

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
 

ps:這裡可以說一下...X,這個符號是什麼意思呢？還是通過式子可以比較清晰的說明：

## 1、展開運算子
let a = [1,2,3];
let b = [0, ...a, 4]; // [0,1,2,3,4]
## 一樣是展開代表元素的意思
let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }
## 2、解構的一種，叫做剩餘操作符
let a = [1,2,3];
let [b, ...c] = a;
b; // 1
c; // [2,3]

// 也可以
let a = [1,2,3];
let [b, ...[c,d,e]] = a;
b; // 1
c; // 2
d; // 3
e; // undefined

// 也可以
function test(a, ...rest){
  console.log(a); // 1
  console.log(rest); // [2,3]
}
test(1,2,3)
 

#### 2、物件解構

下面模式p是一個模式，但這樣寫也是一個物件

let obj = {p: [
'Hello',
{ y: 'World' }
]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

3、字串的解構賦值

const [a,b,c,d,e]='hello',
a //"h"
b //"e"

let {length:len} ='hello';
len //5陣列物件的length屬性

4、函式引數的解析賦值

    function([x,y]){
        return x+y;
    }

    add([1,2]);//3
 

5、對函式引數使用預設值

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

上面的例子可以看到，傳參為空的話就會使用預設值,下面是Chrome的控制檯下打印出來的結果：

function move({x=0,y=0}={}){
return [x,y];
}
undefined
move({s:3,y:8});
(2) [0, 8]
move({x:3,y:8});
(2) [3, 8]
move({x:3});
(2) [3, 0]
move({y:3});
(2) [0, 3]
move({});
(2) [0, 0]

下面是一種跟上面不一樣的操作：

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

這個函式和上面的不同點在於這個函式只有未傳參（傳參為空）的時候才會是用預設值。

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

這裡，map函式會遍歷所有引數，如果沒有引數傳進來，或者傳進來的引數為undefined的時候，會為該引數傳輸一個處理函式吧(下面是Chrome控制檯輸出)

[1,undefined,3].map((x='yes') => x);
(3) [1, "yes", 3]
[1,null,3].map((x='yes') => x);
(3) [1, null, 3]
[1,'',3].map((x='yes') => x);
(3) [1, "", 3]

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、設定函式的預設值，

例子在上面有（ES6規則上面）

6、便利Map結構

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

7、輸入模組的制定方法

其實一直都在用的

 const { SourceMapConsumer, SourceNode } = require("source-map");

上面的是今天檢視阮一峰的ecmaScript6入門的一些筆記吧，挺多新奇的概念和用法，看以後實戰能不能嘗試加上去！起碼在交換和設定預設值，這種用法就相當的整潔。不用寫太多冗餘的程式碼。結