ES6——对象、数组解构

---

• 数组的解构

解构数组的方法：

const arr = [100, 200, 300];
const [one, two, three] = arr;
console.log(one);
console.log(two);
console.log(three);

如果只想解构其中的某些元素：

const [, , mo] = arr;
console.log(mo);

• [ ] 构造矩阵

表示提取从当前位置（foo）往后的所有成员，只能在解构的最后一个位置使用，并且以数组的形式返回结果

const [foo, ...rest] = arr;
console.log(rest);

如果解构位置的成员个数小于被解构的数组长度，那么就会按照从前到后的顺序去提取

const [foo] = arr;
console.log(foo);//100

反之，如果结构位置的成员个数大于被解构的数组长度，那么就会返回undefined

const [foo,bar,vaz,more] = arr;
console.log(more);//undefined

如同访问数组中一个不存在的下标

如果没有查询到元素的值，那么就会返回默认值；如果能查询到，那就还是返回原值

const [foo,bar,baz = 123,more = 'default value'] = arr;
console.log(bar,more);//200 default value

值得注意的是：

[,rootdir]//解构的是最后一个
[rootdir,]//解构的是第一个

 

应用场景：

拆分字符串

const path = '/foo/bar/baz';
const [, rootdir] = path.split('/');
console.log(rootdir);  //baz

---

• 对象的解构

大部分性质和数组的解构差不多，但唯独注意一点

当外面定义的变量和对象里的属性名重名时，应该采取这种方法去解决：

const obj = {name:'zce',age:18};
const {name} = obj;
console.log(name);//zce

const name = 'tom';
const {name :objName} = obj;
console.log(objName);

应用场景：（简化代码体积）

const {log} = console;
log('foo');
log('bar');
log('123');