文章出處
View Code
文章列表
本文的Demo的運行環境為nodeJS， 參考：讓nodeJS支持ES6的詞法----babel的安裝和使用 ；
解構賦值是一種表達式， 利用這種新語法， 可以直接從數組或者對象中快速提取值 賦值給不同的變量， 利用這種寫法的好處是減少了代碼量， 一定程度優化了代碼， 也有一點缺點就是閱讀代碼不再那么直觀了。
解構賦值最簡單的例子
<script>
"use strict";
let [a,b,c] = [1,2,3];
console.log( a +"|"+ b +"|"+ c); //輸出 1|2|3
</script>
解構只是新的語法， 學一學應該就好了，甚至可以自己去實現哦：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
{
//加入要在node中執行 ： var [a,b,c] = [1,2,3,4]；
//別打我，只是偷偷實現了一下....沒有去考慮： var [a,b,...args] = [1,2,3,4]， 或者let JSString = "var [a,b,c,d] = [1,2,3,[1,2,3,4]]";
let JSString = "var [a,b,c] = [1,2,3,4]";
let parseFn = (str) => {
let [vary, val] = str.split("=");
if(vary.indexOf("var ")!=-1) {
vary = vary.substr( vary.indexOf("var ")+4);
}
let key = JSON.parse(vary.replace(/(\w+)/g,"\"$1\""));
let value = JSON.parse(val);
return [key, value];
};
runCode = ( key, value ,callback) => {
let i = 0;
do{
if(i>key.length)break;
key[i] = value[i];
}while(i++);
callback();
};
let [key, value] = parseFn(JSString);
runCode(key, value, function() { console.log("done") });
}
</script>
</body>
</html>
對象的解構
每次看代碼都要看對應的 右邊數組的第一個"1"對應的是左邊數組的第一個a, 右邊數組的第一個"2"對應的是左邊數組的第一個b...., 這個是數組的解構賦值， 對象的解構賦值就解決了這個問題;
"use strict";
let {o, b, j } = {
j:2,
b:1,
o:0
};
console.log(o+b+j); //3
let obj = {o:1, b:2, j:3};
let {o,b,j} = obj;
console.log(o, b, j); //1，2，3
字符串和數字的解構
下面代碼的abcde其實被轉化為了字符串對象， 然后再進行解構；
"use strict";
let [a,b,c,d,e ] = "abcde";
console.log(a+b+c+d+e); //abcde
let {valueOf} = "s";
console.log(valueOf); //[Function: valueOf]
null對象和undefined無法被解構， 因為null和undefined沒有構造函數；
解構賦值支持多層嵌套
解構賦值支持多層嵌套， 主要在等號兩邊的結構是一樣的即可， 但是不要套太深， 套路太深， 把自己給套了就掛了：
<script>
var [prehead, [head, ...sub],tail] = [0000,[1,2,3,4,5],6];
console.log(prehead, head, sub, tail);
</script>
...arg這種寫法只能作為最后的參數， 如果在...arg后面加別的參數會報錯：
let [a,...arg,b] = [1,2,3,4,5,6]; //運行到這邊直接報錯了
console.log(a);
console.log(arg);
console.log(b);
解構的結構要對應， 否者編譯的時候會報錯：
"use strict";
let [a,b] = 1;
console.log(a + "————"+ b);
只要某種數據結構具有Iterator接口，都可以采用數組形式的解構賦值， iterator參考：生成器。
function* run() {
let a = 0;
while (true) {
yield a;
a++;
}
}
var [first, second, third, fourth, fifth, sixth] = run();
console.log(first+"_"+second+"_"+third+"_"+fourth+"_"+fifth+"_"+sixth);
函數的解構賦值
"use strict"; let fn = ( {a, b, c} ) => { console.log(a+"_"+b+"_"+c); //輸出：0_1111_22 }; fn({a:0,c:22,d:33,b:1111});
函數的默認值
如果調用函數的時候沒有傳值， 那么從就用函數自己的默認值：
let fn = ({a ,b,c, d = "dddd"}) => {
console.log(a + b + c + d);
}
fn({c:"ccccc",b:"BBBBB",a:"AAAA"}); //把d這個變量給輸出了....
實際編程中的使用：
實際使用的時候可能可能是這樣的：
let fn = ( [a,b,c] ) => {
console.log(a, b, c);
};
fn([1,2,3,4]);
把兩個元素交換：
let [x, y] = [1, 2];
[x, y] = [y, x];
console.log(x, y);
//tip:基本類型的轉換可以這樣：x = [y, y=x][0];
遍歷JSON數據：
let json = {j:[0,1],s:[2,3],o:[4,5],n:[6,7]};
for(let name in json) {
let [key, value] = json[name];
console.log(key + "_" + value);
}
還有一個感覺挺好使的，提取json數據, 假設Json是從服務器返回的數據;
let Json = {responseText: "xxxx", responseXML : "XMLXML", responseHeader : "Header"};
let {responseText, responseXML} = Json;
console.log( responseText); //輸出 xxxx
可以利用解構 ， 快速取值， 比如服務器返回了json數據，快速獲取對應結構的值等處理數據的情況下使用：
function userId({id}) {
return id;
}
function whois({displayName: displayName, fullName: {firstName: name}}) {
console.log(displayName + " is " + name);
}
var user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"
作者： NONO
出處：http://www.cnblogs.com/diligenceday/
QQ：287101329
微信：18101055830
文章列表
全站熱搜
留言列表
