<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中的解构赋值:可以同时对一组变量进行赋值</title>
</head>
<body>
<script type="text/javascript">
// 先看下传统的赋值:把一个数组的元素分别赋值给几个变量
var array = ['hello', 'JavaScript', 'ES6'];
var x = array[0];
var y = array[1];
var z = array[2];
// es6之后可以使用解构赋值,直接对多个变量同时赋值
// var [a, b, c] = ['hello', 'JavaScript', 'ES6'];
var [a, b, c] = array;
// 注意,左边不是数组
console.log(a, b, c); // hello JavaScript ES6
// 如果要从对象中取出若干属性,也可以使用解构赋值,便于快速获取对象的指定属性
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);
//使用解构赋值的时候,若对应的属性不存在,变量将被赋值为undefined
// 另外对于
var myName = {
name: "hehe",
gender: 1,
passport: "123456",
}
var {
name,
passport: id
} = myName; // 注意这里,passport不是变量,而是为了让id获得passport的属性
console.log(name, id);
// 另外解构赋值还可以使用默认值,这样就避免了不存在的属性返回undefined的问题
var newApp = {
name: "hehe",
gender: 1,
passport: "123456",
}
var {
name,
age = 23
} = newApp; // 注意,这里对age给了一个默认值
console.log(name, age);
// 注意是会报错的,下面这种写法
// {x,y} = {name:23,x:123,y:456};// 因为js会{开头的当做块处理,可以添加一个()
({x,y} = {name:23,x:123,y:456});
//解构赋值的使用场景: 简化代码
// 1.两个值进行交换
var [x,y] = [11,22];
console.log(x,y);
[x,y] = [y,x];
console.log(x,y);
</script>
</body>
</html>
