ES6中的结构赋值

时间: 2023-10-04 admin IT培训

ES6中的结构赋值

ES6中的结构赋值

什么叫做结构赋值

  • . ES6 允许我们按照一定模式,从数组和对象中提取值,对变量进行赋值,这就叫做解构赋值。

对象的解构赋值

  • 格式
变量名与属性名相等,则将属性名对应的值赋值给变量。let {变量1,变量2} = 对象  (默认情况下:变量名必须与属性名相等)如果变量名与属性名不相等,则 属性名:变量名 的格式let {属性名:变量1,变量2} = 对象 如果为复杂的多对象嵌套,需要左右两边的模式相同(结构相同)快速方法:将右边的内容复制到左边,将要取值的属性它的属性值删除。

简单情况的写法

 var obj = {name:"zhangsan",age:20,eat:function(){console.log("干饭人干饭魂");}}let name = obj.name;let age = obj.age;let eat = obj.eat;let {name:username,age,eat} = obj;

复杂情况的写法

 var person = {name: "zhangsan",age: 40,son: {height: 170,gf: {weight: 180}}}let {name,age,son: {height,gf: {weight}}} = person;console.log(name);console.log(age);console.log(height);console.log(weight);

也可以对数组进行解构赋值。
格式

  let [变量1,变量2] = 数组;

【注意】
1.按照索引的顺序进行赋值的,第一个变量的值就是数组的第一个元素,以此类推。
2.数组也可以被当做对象来解构赋值 外面用大括号,索引就是属性名
3.如果左右两边不对称,左边少,则按照顺序赋值,右边少,则左边多出的变量,相当于只声明不赋值。

之前的写法

 let arr = ["亚索","诺手","盲僧","厄加特","曙光女神"];var a = arr[0];var b = arr[1];var c = arr[2];var d = arr[3];var e = arr[4];

es6写法

 let arr = ["亚索","诺手","盲僧","厄加特","曙光女神"];
let [a,b,c,d,e] = arr;

对第一个元素和最后一个元素进行解构赋值

 let arr = ["亚索","诺手","盲僧","厄加特","曙光女神"];let {0:first,[arr.length-1]:last,length} = arr;console.log(arr);    //打印出所有的数组console.log(first);  //第一个console.log(last);  //最后一个console.log(length);  //数组长度

不对称的情况

 let arr = ["亚索","诺手","盲僧","厄加特","曙光女神"];let [a,b,c,d,e,f] = arr;     //这里相当于声明了一个fconsole.log(a);console.log(b);console.log(c);console.log(d);console.log(e);console.log(f);     //会报 undefind

字符串也可以解构赋值,此时,字符串会被转换为一个对象或数组。

当作数组结构

 let str = new String("听君一席话,如听一席话")let [a,b,c] = str; //当做数组来解构console.log(a);console.log(b);console.log(c);

当做对象

 var str = "听君一席话,如听一席话";let {0:first,[str.length-1]:last,length} = str; //当做对象来解构。console.log(first);console.log(last);console.log(length);