解构赋值
解构赋值，顾名思义，将结构解开赋值给变量
ES6 允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，被称为解构
数组解构
- 解构可同时使用
默认值
// 数组解构赋值
// 传统写法
let arr = [1, 2, 3, 4];
let a = arr[0];
let b = arr[1];
let c = arr[2];
let d = arr[3];
console.log(a, b, c, d); // 1,2,3,4
// 解构赋值，按照数组元素顺序，依次赋值给左侧数组里的变量
var [e, f, g, h] = arr;
console.log(e, f, g, h); // 1,2,3,4
var [e, f, g, h, i] = arr;
console.log(i); // undefined 由于数组元素没有第五个值，因此，i 只声明没赋值，所以是 undefined
// 可以使用 es6 的默认值给变量赋默认值
var [e, f, g, h, i="我是默认值"] = arr;
console.log(i); // 我是默认值
代码地址 git repo
commit 5c9642bfdfdc73be20543b8c39bddd58ce308bec
================分割线================
对象解构
- 对象解构需要留意一点，解构出来的变量需要跟对象属性名一致，如
let {name} = {name:'gouku'} - 解构后的方法，this 会指向 window, 如果需要指向原对象，需要使用
bind方法
// 对象解构赋值
// 传统写法
let foo = {
firstName: 'gouku',
sayHello() {
console.log(this.firstName + ' say hello')
}
};
foo.sayHello()
// 对象解构写法
let {
sayHello
} = foo;
// 解构后的方法，this 会指向 window, 如果需要指向原对象，需要使用 bind 方法
sayHello(); // undefined say hello
sayHello.bind(foo)(); // gouku say hello
代码地址 git repo
commit c10781d0011593000e618741db4a6c81bdfd9b19
================分割线================
字符串与函数参数解构赋值解构
// 字符串解构赋值
let [a, b, c, d] = 'hey';
console.log(a, b, c, d); // h e y undefined
// 函数参数解构赋值
// 传统写法
let params = {
name: 'gouku',
age: 20
}
function say(par) {
// 参数是对象，因此里面的属性都需要带上对象
console.log(par.name, par.age)
}
say(params); // gouku 20
// 解构写法
function say({
name,
age
}) {
console.log(name, age)
}
say(params); // gouku 20
代码地址 git repo
commit 34dc49422147f86dfa5ddb0086b7d9a3ac2ee949
================分割线================
模板字符串
- 以前 js 拼接字符串需要使用 +，并且字符串无法换行
let ulStr = '<ul>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'</ul>';
console.log(ulStr); // <ul><li></li><li></li><li></li></ul>
- 或者每行加个转义符(输出不换行格式)
let ulStr1 = '<ul>\
<li></li>\
<li></li>\
<li></li>\
</ul>';
// 输出不换行格式
console.log(ulStr1); // <ul> <li></li> <li></li> <li></li> </ul>
- 模板字符串
- 使用反引号 `
let ulStr3 = `<ul>
<li></li>
<li></li>
<li></li>
</ul>`;
console.log(ulStr3);
- 里面可以放表达式和能拿到返回值得函数，使用${}
- 不能放语句
let name = "goku";
let ulStr4 = `<ul>
<li>${1+2}</li>
<li>${name}</li>
<li>${true?"真":"假"}</li>
<li>${[1,2].push(1)}</li>
</ul>`;
console.log(ulStr4);
代码地址 git repo
commit 4358fcff6917565065ef84419a50a8da458b346d
