-------------------------------------數組的解構賦值-------------------------------------------
解構:
ES6允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱爲解構(Destructuring).
不完全解構:
等號左邊的模式,只匹配一部分的等號右邊的數組。
指定默認值:
注:ES6內部使用嚴格相等運算符(===)判斷一個位置是否有值。所以,如果一個數組成員不嚴格等於undefined,默認值是不會生效的。
let和const命令:
只要某種數據結構具有lterator接口,都可以採用數組形式的解構賦值。
注:只要是可遍歷的結構或數組都可以被解構。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數組解構</title>
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="text/traceur">
// ES5
/* var a=1;
var b=2;
var c=3; */
// ES6
var [a,b,c]=[1,2,3];
console.log(a); // 1
console.log(b); // 2
console.log(c); //3
</script>
</head>
<body>
</body>
</html>
---------------------------------------------對應位置---------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>對應位置</title>
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="text/traceur">
let [foo,[[bar],base]]=[1,[[2],3]];
console.log(foo); //1
console.log(bar); // 2
console.log(base); // 3
let [,,third]=["first","second","third"];
console.log(third); // third
let [one,,three]=["one","two","three"];
console.log(one); // one
console.log(three); //three
let [head,...tail]=[0,1,2,3,4,5,6,7,8,9];
console.log(head); // 0
console.log(tail); // [1,2,3,4,5,6,7,8,9]
</script>
</head>
<body>
</body>
</html>
--------------------------------------------------------數組解構不成功-------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數組解構不成功</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
var [temp]=[];
console.log(temp); //undefined
var [first,second]=[100];
console.log(first); //100
console.log(second); //undefined
//解構不成功的默認值都是undefined
</script>
</head>
<body>
</body>
</html>
------------------------------------------------不完全解構--------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不完全解構</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
let [x,y]=[1,2,3];
console.log(x); //1
console.log(y); //2
let [a,[b],c]=[1,[2,3],4];
console.log(a); //1
console.log(b); //2
console.log(c); //4
</script>
</head>
<body>
</body>
</html>
----------------------------------------------------指定默認值------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指定默認值</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
var [temp="string"]=[];
console.log(temp); //string
var [temp="string"]=["tempString"];
console.log(temp); //tempString
var [x="aaa",y]=["bbb"];
console.log(x); //bbb
console.log(y); //undefined
var [m,n="aaa"]=["bbb"];
console.log(m); //bbb
console.log(n); //aaa
var [p,q="aaa"]=["bbb",undefined];
console.log(p); //bbb
console.log(q); //aaa
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非遍歷解構----報錯</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
var [temp]=1; // 1[Symbol.iterator] is not a function
var [temp]=false; // false[Symbol.iterator] is not a function
var [temp]=NaN; //NaN[Symbol.iterator] is not a function
var [temp]=undefined; // Cannot read property 'Symbol(Symbol.iterator)' of undefined
var [temp]=null; //Cannot read property 'Symbol(Symbol.iterator)' of null
//以上的都會報錯的
</script>
</head>
<body>
</body>
</html>
------------------------------------------let和const命令----------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lterator接口</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
//let和const命令
//只要某種數據結構具有lterator接口,都可採用數組形式的解構賦值。
let [a,b,c]=new Set(["a","b","c"]);
console.log(a); //a
console.log(b); //b
console.log(c); //c
function* fibs(){ //指針函數具有lterator接口,可遍歷
let a=0;
let b=1;
while(true){
yield a;
[a,b]=[b,a+b];
}
};
var [first,second,third,fourth,fifth,sixth]=fibs();
console.log(sixth); //5
</script>
</head>
<body>
</body>
</html>