1、交换变量的值
let a = 1;
let b = 2;
[a,b] = [b,a];//提示:a,b已经声明了,这里就不用再添加let等关键字声明了。
console.log(a,b);
交换后 × 的值为 2,y 的值为 1,这样的写法不仅简洁,而且易读,语义非常清晰,参考结果如下:
2、从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回,可以使用解构赋值,非常方便的取出这些值。
1)返回一个数组
function f() {
return [1, 2, 3];
}
let [a, b, c] = f();
console.log(a, b, c) // 1 2 3
函数返回结果一个数组,对该数组进行解构,获取里面的每个值,参考结果如下:
2)返回一个对象
function f() {
return {
foo: 1,
bar: 2
};
}
let { foo,bar} = f();
console.log(foo, bar) // 1 2
函数返回结果一个对象,对该对象进行解构,获取里面的每个值,参考结果如下:
3、从函数返回多个值
可以方便地将一组参数与变量名对应起来
1)参数是一组有次序的值
function f([x, y, z]) {
console.log(x, y, z)
}
f([1, 2, 3]) //1,2,3
传入函数的参数是数组时,可以对参数进行解构,获取数组中每一项的值,参考结果如下:
2)参数是一组无次序的值
function f({x,y,z}) {
console.log(x, y, z)
}
f({z: 1,x: 2,y: 3}) //2,3,1
传入函数的参数是对象时,可以对参数进行解构,获取对象中对应的属性值,参考结果如下:
4、指定函数参数的默认值
指定参数的默认值,就避免了在函数体内部再去判断传入的参数是否有值了
function f({ x, y = 8 }) {
console.log(x, y);
}
f({}) // undefined 8
f({ x: 1 }) // 1 8
f({ x: 1, y: 2 }) // 1 2
5、遍历Map解构
解构赋值,获取键名和键值就非常方便
var map = new Map();
map.set('李红', '10');
map.set('张三', '30');
for (let [key, value] of map) {
console.log(`${key}今年${value}岁`);
}
6、加载模块
这里也是用到了解构,可以让你引入的部分更加明确
import {a,b} from 'xxx';
7、提取JSON数据
解构赋值可以快速提取JSON数据的值
var messageData = {
"name": "小金",
"age": "12",
"data": [one, two, three, four],
"status": "OK"
}
let {
name,
age,
data,
status
} = messageData;
console.log(name, age, data, status);
今日寄语: 不要为了别人而改变自己。做你自己,那个对的人会喜欢那个真正的你。