基于ES6標準入門（第3版）這本書的筆記
要學習angula烁登，vue怯屉，react等新的前端框架，必須先熟悉ES6的語法
數(shù)組的結構賦值
基本用法
es6允許按照一定是模式從數(shù)組和對象中提取值饵沧，然后對變量進行賦值，這個過程稱為解構
{
let a = 1;
let b = 2;
let c = 3;
let [d,e,f] = [4,5,6];
console.log(d);
console.log(e);
console.log(f);
console.log('-----------------');
let [a1,[b1,c1]] = [7,[8,9]];
console.log(a1);
console.log(b1);
console.log(c1);
console.log('-----------------');
let [a2, ,c2] = [1,2,3];
console.log(a2);
console.log(c2);
console.log('-----------------');
let [a3,...c3] = [1,2,3];
console.log(a3);
console.log(c3);
console.log('-----------------');
}
上面的代碼其實經(jīng)過編譯器編譯會出現(xiàn)如下代碼
'use strict';
{
var a = 1;
var b = 2;
var c = 3;
var d = 4,
e = 5,
f = 6;
console.log(d);
console.log(e);
console.log(f);
console.log('-----------------');
var a1 = 7,
b1 = 8,
c1 = 9;
console.log(a1);
console.log(b1);
console.log(c1);
console.log('-----------------');
var _ref = [1, 2, 3],
a2 = _ref[0],
c2 = _ref[2];
console.log(a2);
console.log(c2);
console.log('-----------------');
var a3 = 1,
c3 = [2, 3];
console.log(a3);
console.log(c3);
console.log('-----------------');
}
}
控制臺會輸出
如果解構不成功赌躺，變量值就是undefined
{
let [a,b] = [a];
console.log(b);// 輸出undefined
}
默認值
解構賦值允許指定默認值
{
let [a = 1] = [];
console.log(a);
console.log('------------');
let [b,c = 2] =[1];
console.log(b);
console.log(c);
console.log('------------');
let [b1,c1 = 2] =[1,3];
console.log(b1);
console.log(c1);
console.log('------------');
}
es6內(nèi)部執(zhí)行嚴格的相等于（===）判斷一個位置是否有值狼牺，如果賦了默認值，然后后面有有值礼患，會取后面的賦值
對象的結構賦值
基本用法
解構可以用于數(shù)組是钥，也可以用于對象掠归，和數(shù)組按照順序賦值不同，對象解構是按照變量名來的
{
let {a,b} ={b:1,a:2}
console.log(a);
console.log(b);
console.log('------------');
}
如果變量名不一致悄泥，必須取別名才行
{
let obj ={first:'hello',last:'word'}
let {first:f,last:l} = obj;
console.log(f);
console.log(l);
console.log('------------');
}
同樣虏冻，對象也可以嵌套賦值
{
let obj = {
msg:[
'hello',
{m2:'word'}
]
}
let {msg:[m1,{m2}]} = obj;
console.log(m1);
console.log(m2);
}
對象賦值也可以設置默認值，如果設置了默認值后再賦值弹囚，取后面的賦值
{
let {a1 =1} = {}
console.log(a1);
console.log('------');
let {a2,b2 = 2} ={a2:1};
console.log(a2);
console.log(b2);
console.log('------');
let {a3: b3 =3 } = {a3 :10};
console.log(b3);
console.log('------');
}
對象賦值也可通過對象名點屬性名點方式取出來
{
let obj ={first:'hello',last:'word'}
console.log(obj.first);
console.log(obj.last);
console.log('------------');
}
還有就是需要特別注意的是如果一個聲明了的變量還要進行解構賦值厨相，需要特別注意，下面這種寫法是會報錯的鸥鹉，因為會吧{x}識別為代碼塊
{
let x;
{x} = {x:1};
}
正確寫法
{
let x;
({x} = {x:1});
console.log(x);
}
解構賦值也可以將對象的方法屬性賦值到一個變量上面蛮穿，控制臺會輸出2
{
let {a,b,c} = {a:1,b:2,c:3};
let obj = {a,b,c};
console.log(obj.b);
}
因為數(shù)組本質是特殊的對象，所以可以對數(shù)組進行對象屬性解構毁渗，控制臺會輸出1践磅，3
{
let arr =[1,2,3];
let{0:first,[arr.length-1]:last} = arr;
console.log(first);
console.log(last);
}
字符串的解構賦值
字符串解構賦值就是把字符串轉換成一個類似數(shù)組的結構，控制臺會輸出3
{
let[a,b,c,d] = '1234';
console.log(c);
}
數(shù)值和布爾值的解構賦值
因為數(shù)值和布爾值都嘔toString屬性灸异，因此變量都能取到值府适，解構賦值的規(guī)則是，只要等號右邊的值不是對象或者數(shù)組肺樟，就先轉換為對象
{
let{toString:s}=123;
console.log(s == Number.prototype.toString);
let{toString:y}=true;
console.log(y == Boolean.prototype.toString);
}
函數(shù)參數(shù)的解構賦值
下面代碼控制臺會輸出3细溅，因為對于代碼內(nèi)部來說，在傳入?yún)?shù)的時候儡嘶，數(shù)組就被解構成了變量x,y
function add([x,y]) {
return x + y;
}
console.log(add([1,2]));
函數(shù)參數(shù)同樣可以設置默認值喇聊，可以從輸出看出遵循一樣的規(guī)則
function show({x = 0, y = 0} = {}) {
return [x,y];
}
console.log(show({x:1,y:2}));
console.log(show({x:1}));
console.log(show({}));
圓括號的使用
在所有變量的聲明是不能使用圓括號的，只有在賦值語句的非模式部分可以使用圓括號
{
[(a)] = [1];
({p:(d)} = {});
[(parseInt.prop)] = [3];
}
解構的用途
變量值交換
{
let x = 1;
let y = 2;
[x,y] = [y,x];
}
函數(shù)參數(shù)返回對象或者數(shù)組
function backArr() {
return [1,2,3];
}
let [a, b, c] = backArr();
function backObj() {
return {
fast:'hello',
last:'word'
}
}
let {fast,last} = backObj();
解析json對象
這樣就可以直接使用name蹦狂，age
{
let jsonData = {name :'小明',age:12};
let {name,age} = jsonData;
}
函數(shù)參數(shù)默認值
前面有舉例誓篱，就不重復列舉了
遍歷map
key和value就可以直接使用
{
var map = new Map();
map.put('k1','v1');
map.put('k2','v2');
map.put('k3','v3');
for(let [key,value] of map){
console.log(key);
console.log(value)
}
}
模塊加載指定輸入方法
const {SourceMapConsumer,SourceNode } = require("source-map");
