最近在工作中遇到了es6的解构的语法，这个语法很有意思，虽然让人在第一时间看不懂你的代码在写什么，而且，语法上面也与我们日常理解的右值赋给左值有点不一样。但是这个语法糖用多了之后，不仅代码量上面少了很多，而且还能在别人面前装一笔。。。。。。
在解构之前的写法
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];
在解构之后的写法
const someArr = [1, 2, 3]
const [first, second, third] = someArr
官方的说法
表达式解构(destructuring)
解构允许赋值使用模式匹配,支持数组和对象的匹配.解构是可降级的,类似于标准的对象查找,当匹配失败时返回undefined.
语法
- 数组的解构
const [ 变量1, 变量2, 变量3, .... ] = 数组1
- 对象的解构
({a, b} = {a:1, b:2});
console.log(a); // 1
console.log(b); // 2
简单的说，就是 对象字面量和数组字面量提供了一种简单的定义一个特定的数据组的方法。
初始化： 左值赋给右值
let obj = { first: 'Jane', last: 'Doe' };
let { first: f, last: l } = obj;
如果解析出来的值要赋给一个新的变量，那么这个变量要在右边。如果，要赋值的变量名和变量名一样，那么就可以省略这一条了
let obj = { first: 'Jane', last: 'Doe' };
let { first, last } = obj;
//这是对象解构最基础的用法
使用默认值
如果你要结构出来的变量，万一没有，那么可以设置个默认值
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
使用扩展操作符 ...表达不定参数
如果说，你不知道你要解构的变量接下来还有什么值，你想把这些不确定的值，全部解构在一个变量上，就可以使用...这个黑科技
var [head, ...tail] = [1, 2, 3, 4];
console.log(tail);
let obj = { first: 'Jane', last: 'Doe' }
let { ...xxx } = obj
console.log(xxx)
一个例子，连续赋值
接下来是一个找出一个数组中的第一个偶数，并返回
function findArray(arr, cb) {
const result = []
const indexArray = []
for (let i = 0; i < arr.length; i++) {
if (cb(arr[i])) {
result.push(arr[i])
indexArray.push(i)
}
}
return { result, indexArray }
}
let arrlist = [21, 4, 5, 6, 7],
cb = function(ele) {
return ele % 2 == 0
}
const { result, indexArray } = findArray(
arrlist,
cb,
)
console.log(result)
console.log(indexArray)
反思，应用
- 函数可以有多个返回值，解构的语法解构返回值，忽略某些返回值
- 交换变量
- 正则解析
下面是网上的一个例子
var url =
'https://developer.mozilla.org/en-US/Web/JavaScript'
var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(
url,
)
console.log(parsedURL) // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
var [, protocol, fullhost, fullpath] = parsedURL
console.log(protocol) // "https"
let { length: len } = 'abc' // len = 3
let { toString: s } = 123 // s = Number.prototype.toString
console.log(len)
console.log(s)
