基于ES6标準入門（第3版）這本書的筆記要學習angula，vue，react等新的前端框架，必須先熟悉ES6的語法
es6允許按照一定是模式從數組和對象中提取值，然後對變量進行賦值，這個過程稱為解構
{
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('-----------------');
}
上面的代碼其實經過編譯器編譯會出現如下代碼
'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内部執行嚴格的相等于（===）判斷一個位置是否有值，如果賦了默認值，然後後面有有值，會取後面的賦值
對象的結構賦值
解構可以用于數組，也可以用于對象，和數組按照順序賦值不同，對象解構是按照變量名來的
{
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);
}
因為數組本質是特殊的對象，所以可以對數組進行對象屬性解構，控制台會輸出1，3
{
let arr =[1,2,3];
let{0:first,[arr.length-1]:last} = arr;
console.log(first);
console.log(last);
}
字符串解構賦值就是把字符串轉換成一個類似數組的結構，控制台會輸出3
{
let[a,b,c,d] = '1234';
console.log(c);
}
因為數值和布爾值都嘔toString屬性，因此變量都能取到值，解構賦值的規則是，隻要等号右邊的值不是對象或者數組，就先轉換為對象
{
let{toString:s}=123;
console.log(s == Number.prototype.toString);
let{toString:y}=true;
console.log(y == Boolean.prototype.toString);
}
下面代碼控制台會輸出3，因為對于代碼内部來說，在傳入參數的時候，數組就被解構成了變量x,y
function add([x,y]) {
return x y;
}
console.log(add([1,2]));
函數參數同樣可以設置默認值，可以從輸出看出遵循一樣的規則
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];
}
function backArr() {
return [1,2,3];
}
let [a, b, c] = backArr();
function backObj() {
return {
fast:'hello',
last:'word'
}
}
let {fast,last} = backObj();
這樣就可以直接使用name，age
{
let jsonData = {name :'小明',age:12};
let {name,age} = jsonData;
}
前面有舉例，就不重複列舉了
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");
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
