es6 list 转 对象 es6 对象转数组

学习要点：1.数组解构 2.对象解构

本节课我们来开始学习 ES6 中数组和对象解构赋值的方法。

一．数组解构

1. ES6 提供了对数组和对象的字面量提取相关数据的方法：解构操作；

2. 为何要使用解构操作？是因为 JSON 格式的普及，导致大量数据提取工作；

3. 而这种提取过程，在 ES6 的解构语法中，带来了极大的便捷性；

4. 数组解构赋值，有两种基本的写法：1.分行解构；2 单行解构；

let info=['Mr.ren',100,'男']; //数组赋值let [name,age,sex]=info; //数组解构赋值

或

let info=['Mr.ren',100,'男'],[name,age,sex]=info;

或

let [name,age,sex]=['Mr.ren',100,'男']; //单行解构console.log(age); //100

5. 从上面的例子分行或单行，都可以确定必须一一完美匹配才可以正确赋值；

#数组层次也需要匹配

let [name,[age,sex]]=['Mr.ren',[100,'男']];console.log(age); //100

#用逗号作为占位符不赋值

let [,,sex]=['Mr.ren',100,'男'];console.log(sex); //男

6. 在变量解构时，可以在数组的元素中设置一个默认值；

#当 gender 没有赋值时，采用默认值

let [name,age,sex='男']=['Mr.ren',100];console.log(sex); //男

7. 还有一种...var 的语法，可以将没有赋值的内容都赋值给这个变量；

#不定元素，将其余都赋值给 other

let [name,...other]=['Mr.ren',100,'男'];console.log(other);

二．对象解构

1. 对象的解构方式和数组大同小异，定义一个对象自变量，然后解构赋值；

//定义对象自变量let obj={  name:'Mr.ren',  age:100    };//解构对象自变量let {name,age}=obj; //或 ({name,age}=obj);//直接输出console.log(name); //Mr.renconsole.log(age); //100

2. 如果说，解构的变量名是已经存在的变量，那会导致如何？

let obj={  name:'Mr.ren',  age:100},name='Mr.bo'; //会被替换({name,age}=obj);console.log(name) //Mr.ren

3. 对象变量解构也可以设置一个默认值，在没有赋值时输出默认值；

let obj={  name:'Mr.ren',  age:100};let {name,age,sex:'男'}=obj;console.log(sex); //男  如果没有默认值则 undefined

4. 如果不想要对象属性名作为解构变量，可以通过键值对的方式更改变量名；

let obj={  name:'Mr.ren',  age:100}let {name:myname,age:myage}=obj; //name 将失效 console.log(myage); //100console.log(myname); //Mr.ren

5. 在对象自变量里，还嵌套了对象，解构时也用相同的方法是解开即可；

let obj={  name:'Mr.ren'  age:100,  info:{    id:1,    sex:'男'  }  }let {name,age,info:{id,sex}}=obj;console.log(name); //Mr.renconsole.log(id); //1

6. 对象的解构也支持单行的简写模式，具体如下：

let {name, age} = {name : 'Mr.ren', age : 100};