ES6中变量的解构与赋值
程序员文章站
2022-07-02 12:14:28
...
今天来总结一下es6 为我们提供的变量的结构赋值。这个能在我们大量的去声明变量和遍历数组是很实用。es6提供的这种方法也很简单,很容易理解。
一、数组的赋值与解析
1.我们以前赋值变量这样赋值
var b = 1;
var c = 2;
var d = 3;
var e = 4;
而现在我们可以这样赋值:
let [a,b,c,d] = [1,2,3,4];
console.log(a,b,c,d) // 1,2,3,4
2.数组赋值我们还可以这样
let [a,b=2] = [1];
console.log(a,b) // 1,2
如果我们这样:
let [a,b=2] = [1,4];
console.log(a,b) // 1,4 b的值就会变成4,原来的2会被覆盖
重点内容 这种匹配的方式在es6中属于模式匹配,即作用两边结构相同就可以进行赋值。
二、对象的赋值与解析
1.对象的赋值与解析和数组有一个重要的不同点,数组赋值是根据位置去判断并赋值的,而对象是根据变量和属性对比去赋值的,例如:
let obj = {
name:"Jhone",
age:"23",
sex:"man"
}
let obja = {name,age,sex} = obj;
console.log(obja.name)
对象中的变量 name,age,sex 和对象obj中的属性 name,age,sex 去对比赋值。可能这样说你有些迷惑,那咱们看下面的这个例子:
let a= {name:"jhon"} = {name: 1};
console.log(a) // 报错 Invalid destructuring assignment target
上面报错是 无效的解构的任务目标, 这是因为 {name:"jhon"}
中的 jhon不是变量,而是个字符串,也就是name 本身是有固定值得,我们不能再去赋值了。
2.另外我们还可以这样赋值
let a= {name:jhon,age:ba} = {name:1,jhon:3,};
console.log(a) // {name:1,jhon:3}
这说明前面对象在赋值时,某些属性在后面的对象中没有,那么结果会删除该属性,如果后面的对象中含有某些前面对象不包含的属性,那么结果会将该属性添加进去。
3.如果我们事先用let声明了某些变量,像下面一样
let jhon;
let {name:jhon} = {name:"King"}
// 会报错 'jhon' has already been declared
这是因为解析器将大括号理解成了一个代码块,而不是一个赋值语句。 let声明的变量是不可以更改的(只能改变变量的值)
我们可以这样这做:
let jhon;
let ({name:jhon} = {name:"King"}); // 加一个大括号
如果声明的变量有冲突,加一个大括号是必须的。
三.数组和对象混合赋值
1.数组里面嵌套对象
let obj = [
name,
{age:"30"}
]
var ary = [a,{b}] = obj;
console.log(ary)
2.对象里面嵌套数组
let obj = {
ar:[
"name",
"age"
]
}
var ary = {ar:[a,b]} = obj;
console.log(ary)
3.对象里面嵌套对象
let obj = {
name:"jhon",
age:{one:1,two:2}
}
var ary = {name,age:{one,two}} = obj;
console.log(ary)
四.解构并赋值
1.字符串解构
let [a,b,c]="123"
// a = 1
// b = 2
// c = 3
let {length : len} = 'come';
//length = 5
2.数组解构
var ary = [1, 2, 3];
var {0 : one, 1 : two} = ary;
one // 1
two // 2
3.函数参数的解构赋值
function add([x, y]){
alert(x + y);
}
add([5, 5]); // 弹出10