es6中的解构赋值

目录

• 数组解构赋值
  • 基本解构
  • 单个解构
  • 获取数组长度
• 对象的结构赋值
  • 基本解构
  • 重命名结构
  • 默认值结构

解构赋值简单的说就是将声明和赋值都放在一起使用。
解构的意思就是等号左右两边的结构要基本一致。

数组解构赋值

基本解构

let [name, age] = ['hello', 7];
console.log(name, age)//hello 7

单个解构

数组的结构赋值变量位置必须一一对应，如果你只想获取一个变量的值那么其余位可以用空表示。

let [, age] = ['hello', 7];
console.log(age)//7

获取数组长度

在之前的es5中我们通常使用下面的代码获取数组的长度：

var arr=['hello','world'];
var len=arr.length;
console.log(len);//2

但是因为JavaScript中一切皆可以看作对象，那么利用解构赋值也可以拿到数组长度.原理就是数组可以arr=new Array()生成。数组上的属性也就是对象上的个属性。

let {length}=['hello','world'];
console.log(length);//2

对象的结构赋值

基本解构

结构方式与数组解构一样，但是变量名必须保持一致。

let { name, age } = { name:  'zhangsan', age:  8 };
console.log(name, age);//zhangsan 8

重命名结构

但是一些因为关键字的原因，有些对象这样结构还是会报错，这时候就要使用别名，也就是换一个名字来进行结构赋值。
重命名使用关键字：

let { name, age, class: className } = { name:  'zhangsan', age:  8, class:  '01班' };
console.log(name, age, className);//zhangsan 8 01班

默认值结构

有些时候在对象上并没有这个属性对应的值，但是我们实际使用时还需要设置一个默认值，就可以有下面的写法
默认值使用关键字 =

let { name, age, className  =  '01班' } = { name:  'zhangsan', age:  8 };
console.log(name, age, className);//zhangsan 8 01班