ES6之解构赋值小结

ES6之解构赋值小结

数组的解构赋值

数组的解构赋值是和变量的位置有关的，只有位置相同的变量才会进行赋值，且ES6内部使用严格相等运算符（===），判断一个位置是否有值。所以，当使用默认值时，只有当一个数组成员严格等于undefined，默认值才会生效。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

注意：

• 当使用数组的解构赋值的默认值时，如果默认值是个表达式（如函数）时，这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {
  console.log('aaa');
}

let [x = f()] = [1];
//因为x能取到值，所以函数f根本不会执行

• 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

对象的解构赋值

数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者
如：

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

如果变量名和属性名不一样，要进行解构赋值可参考下面的格式：

//要给变量b赋值
let {foo:b}={foo:'aaa'}
b//'aaa'
//注：这里的b不用单独声明，否则报错

对象的解构赋值也可设置默认值，与数组相同，只有当对象的属性值严格等于undefined时，默认值才生效。

数值和布尔值的结构赋值

当等号右边为数值或布尔值时，都会将其先转换为对象。由于undefined和null无法转换为对象，所以对其进行解构赋值就会报错。

解构赋值项目中的应用举例：

• 公共方法的引入
  在项目中，以单独的文件来写公共方法，每一个方法都用变量名接收并使用expert导出，在使用时，可以直接用import导出想要的方法就行。如：

//common.js
const a=function(){//....各种操作}
expert{a}
//使用的组件a.vue
import {a} form 'common.js'

• 交换两个变量的值

//根据数组的解构赋值跟位置有关
let a=1;let b=2;
[a,b]=[b,a];
a//2
b//1

• 获取函数返回的值中的若干个对象
  因为函数只可以返回一个值，所有要返回多个值时，可以放在对象或者数组中返回。

function c(){
	return { a:1, b:2, c:3, d:4 }
}
let {b,d}=c();
b//2
d//4

• 引入模块
  在进行项目开发时，有时只需要引用框架中的特定模块。

更多用途欢迎补充