ES6 解构赋值用途

1.交换变量的值
2.从函数返回多个值
3.函数参数的定义
4.提取json数据
5.函数参数的默认值
6.遍历Map结构
7.输入模块的指定方法

1.交换变量的值

// es5
console.log("es5");
var a = 100;
var b = 200;
var temp;
temp = a;
a = b;
b = temp;
console.log(a, b)

// es6
console.log("es6")
var x = 1000,
y = 2000;
[x, y] = [y, x];
console.log(x, y)

/* es6 解构赋值用途二 从函数返回多个值 */

/* es6 解构赋值用途二  从函数返回多个值 */
// es5
function fun() {
return [1, 2, 3]; // 返回多个值必须返回一个对象或数组
// return {
//     x: 2,
//     y: 3
// }
};
// es6
var [x, y, z] = fun();
console.log(x, y, z); // 1 2 3
// 对象
// es5
function fun1() {
return {
id: 2,
name: 'zasdasd'
}
};
// es6
var {
id,
name
} = fun1();
console.log(id, name); //2 "zasdasd"
var {
id: newId,
name: newName
} = fun1();
console.log(newId, newName); //2 "zasdasd"

3.函数参数的定义

<script>
// 参数是一组有次序的值 如数组
function fun([x, y, z]) {
//x=1
//y=2
//z=6
console.log(x, y, z)
};
fun([2, 4, 6]);

// 参数是一组无次序的值 如对象
function bun({
x,
y,
name
}) {
console.log(x, y, name)
}
bun({
x: 200,
name: "asd",
y: 2
});
</script>

4.提取json数据

var jsonDate = {
id: 7,
name: "sad",
age: 99,
img: {
pic1: 'asd',
pic2: 'sss'
}
};
console.log(jsonDate);
let {
id: num,
name,
age,
img: xxx
} = jsonDate
console.log(num, name, age, xxx.pic1)