/**
* 解构: 使数据访问更健康
*
* 对象和数组字面量是Javascript中最为常见的数据结构,由于JSON数据格式的普及
*
* 一、为何使用解构功能:
* 开发者早期为了从对象和数组中获得特定的数据并赋值给变量,编写了很多同质化的代码
*/
let options = {
repeat: true,
save: false
};
// 从对象中提取数据
let repeat = options.repeat, save = options.save;
// 如果想要获得更多变量,若其中还包含嵌套结构,只能依靠遍历,必须要深挖整个数据结构才能找到所需的数据
// 对象解构
let json = {
age: 1,
address: "上海"
};
let {age, address} = json; // age 和 name都是局部声明的变量,也是用来从 json对象读取相应属性名称
console.log(age); // 1
console.log(address); // 上海
// 我们已经将对象解构使用到了变量的声明中, 同样也可以在赋值时使用解构语法
// 2. 解构赋值
let node = {
type: 1,
name: "张三"
},
type = 2,
name = "李四";
console.log(type); // 2
console.log(name); // 李四
// 使用解构为多个变量赋值, 从node对象读取相应的值重新为这两个变量赋值。请注意一定要使用一对()包裹解构语句
({type, name} = node);
console.log(type); // 1
console.log(name); // 张三
let data = {
age: 10
};
// NOTE 解构赋值表达式(=右侧的表达式)如果为null 或者 为 undefined会使得程序抛出错误
({age} = data);
var songAge = age;
console.log(songAge); // 10
data.address = null;
({age, address, name} = data);
console.log(age + " >> " + address); // 10 >> null
console.log(age + name); // NaN
// 解构使用默认值
let jack = {
age: 21,
name: "song"
};
({age, name, address = '上海'} = jack);
console.log(name + " >> " + age + " >> " + address); // song >> 21 >> 上海
/*
* 在目前的解构赋值使用的都是与对象属性同名的局部变量,例如 node.type的值存储在了type,
* 如果你希望使用非同名的局部变量来存储对象属性的值,ECMAScript6的一个扩展语法可以满足需求
* */
// 3. 为非同名局部变量赋值
let tom = {
num: 1,
sex: "男"
};
let {num: num, sex: typeFlag = 1} = tom;
console.log(num); // 1
console.log(typeFlag); // 男
// 3. 嵌套对象解构
let nodeInfo = {
type: "html",
name: "foo",
loc: {
start: {
line: 1,
column: 2
},
end: {
line: 2,
column: 1,
children: {
id: 1,
name: "song"
}
}
}
};
let {loc: song} = nodeInfo;
console.log(song.start); // {line: 1, column: 2}
console.log(song.start.line); // 1
let {loc: {start}} = nodeInfo;
console.log(start.line); // 1
console.log(start.column); // 2
// 解构模式中使用了花括号,其含义是应当继续深入查找某个属性
let {loc: {end: {children: resData}}} = nodeInfo;
console.log("id: " + resData.id + ", name: " + resData.name); // id: 1, name: song
// 与对象解构的语法的相比,数组解构就简单了,它使用的数组字面量且解构操作全部在数组内完成
// 4. 数组解构
let colors = ['red', 'green', 'blue'];
let [firstColor, secondColor] = colors;
// 在数组解构语法中,我们使用位置来进行选取
console.log(firstColor, secondColor); // red, green
// 如果只想取第三个值
let [, , thirdColor] = colors;
console.log(thirdColor) // blue
console.log(colors[2]); // blue
// 解构赋值
let bgColors = ['red', 'blue', 'blue'];
// 默认值
[first, two = 'pink'] = bgColors;
console.log(first + ">>" + two); // red >> blue
// ES5中变量交换
let a = 1, b = 2, tmp;
tmp = a;
a = b;
b = tmp;
console.log("a:" + a + ", b: " + b); // a: 2, b:1
// ES6中变量交换
[a, b] = [b, a]; // 右侧是一个为交换过程创建的临时数组字面量, 再进行数组解构赋值
console.log("a:" + a + ", b: " + b); // a: 1, b:2
// 5.数组嵌套结构
colors = ["blue", "pink", ["red", "black"]];
let [,,[colorRed]] = colors;
console.log(colorRed); // red
// 不定参数
let [firstValue, ...otherData] = colors;
console.log(firstValue); // blue
console.log(otherData); // ["pink", ["red", "black"]]