写在前面
众所周知，随着JSON数据格式的普及，在JavaScript中对象、数组已经已经是非常常见的数据对象；在日常编码中经常会定义许多对象和数组，然后有规律的提取重要信息。在ES6中为了简化日常对两种数据结构的操作，解构应用而生。
解构是一种打破数据解构，将其拆分为更小部分的过程。 下面就展示如何高效的使用解构
解构的优点
在ES6早期版本如果想要获取对象中的变量可能会需要编写大量同质化的代码，而且难以理解；直接看例子
let options = {
repeat: true,
save: false
}
// 定义变量 repeat save
let repeat = options.repeat, save = options.save;
// 解构的方式
let { repeat, save} = options;
可以清楚的发现 实现对对象中的数据定义，解构用简单的语法清晰的完成了任务。
解构实践
1. 解构赋值
解构可以在定义变量之后修改变量的值；
let obj = { foo: "foo", bar: "bar" };
let foo = "bar", bar = "foo";
console.log(foo, bar);
// bar foo
// 注意添加小括号可以将语句转化为表达式
({ foo, bar} = obj);
console.log(foo, bar);
// foo bar
注意在函数传参数的过程中也可以使用, 跟上面的执行结果一样
let obj = { foo: "foo", bar: "bar" };
let foo = "bar", bar = "foo";
console.log(foo, bar);
// bar foo
function printValue(value) {
console.log(value)
}
printValue({ foo, bar} = obj)
console.log(foo, bar);
// foo bar
2. 默认值与嵌套解构
注意嵌套解构的变量为最内层的变量
// 初始化数据
let userInfo = {
id: 1,
name: 'Bob',
school: {
id: 1,
name: "tsinghua",
address: {
postcode: "100084"
}
}
};
// 嵌套解构
let { school: { address } } = userInfo;
console.log(address);
// {postcode: "100084"}
// 默认值
let {age=18} = userInfo;
console.log(age)
// 18
// 重命名变量 + 默认值
let {age: userAge=18} = userInfo;
console.log(userAge);
// 18
3. 数组解构
有了对象解构的基础 数组解构就简单许多，直接看几个例子
let colors = ['red', 'yellow', 'blue'];
let [first, second] = colors;
console.log(first); // red
console.log(second); // yellow
// 缺省赋值
let [ , , third] = colors;
console.log(third) // blue
// 默认值
let [ , , , fourth = "black"] = colors;
console.log(fourth) // black
// 不定元素
let [first, ...extra] = colors;
console.log(first); // red
console.log(extra); // ["yellow", "blue"]
// ----- 分割线 -----
// 嵌套解构
let colors = ['red', ['white', 'pink'], 'blue'];
let [first, [second]] = colors;
console.log(first); // red
console.log(second); // white
注意不定元素的解构很有用， 比如复制数组：
let colors = ['red', 'yellow', 'blue'];
let newColors = [...colors]
console.log(newColors)
// ["red", "yellow", "blue"]
4. 混合解构
直接在一个复杂的对象中将上述提到的解构方法实践一遍
这段代码主要解析用户信息，提取一些重要的信息并重新语义化变量
let userInfo = {
id: 1,
name: 'Bob',
school: {
id: 1,
name: "tsinghua",
address: {
postcode: "100084"
}
},
subject: ['chinese', 'math', 'english', ]
};
let {
school: {
name: schoolName,
address: { postcode }
},
subject: [firstSubject, , ]
} = userInfo;
console.log(firstSubject) // chinese
console.log(schoolName) // tsinghua
console.log(postcode) // 100084
5. 解构函数参数
下面的代码解决了以下问题
- 参数默认值管理
- 参数默认值统一管理
- 参数支持对象嵌套
let defaultCookies = {
secure: true,
path: '/',
domain: 'domain',
expires: 60
};
function setCookie(name, value, {
secure = defaultCookies.secure,
path = defaultCookies.path,
domain = defaultCookies.domain,
expires = defaultCookies.expires
} = defaultCookies) {
console.log(secure);
console.log(path);
console.log(domain);
console.log(expires);
}
setCookie('id', 'mike', {path: '/default', domain: 'baidu', expires: 30});
// true
// /default
// baidu
// 30
setCookie('id', 'mike');
// true
// /
// domain
// 60
总结
对于解构来说大大的简化对于JavaScript中对象数组的操作，使得看似繁琐的代码变得生动有趣，同时支持无限的嵌套；对于当下JSON对象的处理非常友好，感兴趣的小伙伴赶紧实践起来吧。
最后画个重点，以下是开发高频遇到的写法
// 分别是 对象默认值 对象重命名 数组不定元素
let foo = {
name: 'foo',
colors: ['red', 'yellow', 'blue']
};
let {
id = 1,
name: fooName,
colors: [, ...extraColors]
} = foo;
重复一遍 高频用法： 对象默认值 对象重命名 数组不定元素
