<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中的解構(gòu)賦值:可以同時(shí)對(duì)一組變量進(jìn)行賦值</title>
</head>
<body>
<script type="text/javascript">
// 先看下傳統(tǒng)的賦值:把一個(gè)數(shù)組的元素分別賦值給幾個(gè)變量
var array = ['hello', 'JavaScript', 'ES6'];
var x = array[0];
var y = array[1];
var z = array[2];
// es6之后可以使用解構(gòu)賦值,直接對(duì)多個(gè)變量同時(shí)賦值
// var [a, b, c] = ['hello', 'JavaScript', 'ES6'];
var [a, b, c] = array;
//? 注意,左邊不是數(shù)組
console.log(a, b, c); // hello JavaScript ES6
// 如果要從對(duì)象中取出若干屬性,也可以使用解構(gòu)賦值,便于快速獲取對(duì)象的指定屬性
var person = {
name: '小明',
age: 20,
gender: 'male',
passport: 'G-12345678',
school: 'No.4 middle school'
};
var {
name,
age,
passport
} = person;
console.log(name, age, passport);
//使用解構(gòu)賦值的時(shí)候,若對(duì)應(yīng)的屬性不存在,變量將被賦值為undefined
// 另外對(duì)于
var myName = {
name: "hehe",
gender: 1,
passport: "123456",
}
var {
name,
passport: id
} = myName; // 注意這里,passport不是變量,而是為了讓id獲得passport的屬性
console.log(name, id);
// 另外解構(gòu)賦值還可以使用默認(rèn)值,這樣就避免了不存在的屬性返回undefined的問(wèn)題
var newApp = {
name: "hehe",
gender: 1,
passport: "123456",
}
var {
name,
age = 23
} = newApp; // 注意,這里對(duì)age給了一個(gè)默認(rèn)值
console.log(name, age);
// 注意是會(huì)報(bào)錯(cuò)的,下面這種寫(xiě)法
// {x,y} = {name:23,x:123,y:456};// 因?yàn)閖s會(huì){開(kāi)頭的當(dāng)做塊處理,可以添加一個(gè)()
({x,y} = {name:23,x:123,y:456});
//解構(gòu)賦值的使用場(chǎng)景: 簡(jiǎn)化代碼
// 1.兩個(gè)值進(jìn)行交換
var [x,y] = [11,22];
console.log(x,y);
[x,y] = [y,x];
console.log(x,y);
</script>
</body>
</html>
