ES6—-变量的解构赋值
1 什么叫解构赋值?
2.数组的解构赋值。
3.对象的解构赋值
4.字符串的解构赋值
5.数值和布尔值的解构赋值
6.函数参数的解构赋值
7.用途
1.什么叫解构赋值
ES6允许按照一定的模式,从数组和对象中取值,对变量进行赋值,这被称为解构(Destructuring) . –阮一峰
在ES5中,为变量赋值,只能采用直接指定值的方式。例如
var a = 1;
var b = 2;
var c = 3;
在ES6中允许这样写
let [a,b,c] = [1,2,3];
这样写的意思是,可以从数组中提取值,按照相应的位置,对变量赋值
模式匹配是这种写法的本质:只要等号两边的模式相同,两边对应的值也就相同。
let [a,[[b],c]] = [1,[[2],3]];
只要两边的模式相同,对应位置的值也是对应变量的值。
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
2.对象的解构赋值
对象的解构和数组的解构不同之处: **数组是按照相对应的次序来排列取值的;数组的取值由它的位置决定;
对象的属性没有次序,变量必须与属性同名,才能取到正确的值**。
let {b,a} = {
a : '111',
b : '222'
}
a // 111 b // 222
变量名要和属性名一致
如果变量名和属性名没有一致,就必须写成下面这样子:
let {a:foo,b:bar} = {
a : '111'
b : '222'
}
foo // 111 bar // 222
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello' l // 'world'
这说明了对象的解构赋值是一下形式的缩写:
let { a: foo} = { a : '111'}
3.字符串的解构赋值
const [a,b,c,d,e] = 'hello';
a//h
b//e
c//l
d//l
e//o
4.数值和布尔值的解构赋值
不懂
5.函数参数的解构赋值
function add([x,y]){
return x + y;
}
add([1,2]);//3
6.用途
(1)交换变量的值
let x = 1;
let y = 2;
[x,y] = [y,x];
(2) 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
function demo(){
return [1,2,3];
}
//返回三个,就用三个值接收
let [a,b,c] = demo();
function demo2(){
return {
foo:1,
bar:3
}
}
//返回一个对象,用一个对象来接收
let {a,b} = demo2();
(3)提取JSON数据
解构对json对象中 的数据,特别有用。
//解构赋值对JSON对象,提取数据特别有用。
let jsonData = {
id:42,
status:'ok',
data:[874,234]
}
let {id,status,data:number} = jsonData;
console.log(id,status,number);
// 42,ok [874,234],
//使用解构赋值可以快速的提取JSON数据的值