【JS 之我不知道系列】ES6 解构赋值与模板字符串

解构赋值

---

解构赋值，顾名思义，将结构解开赋值给变量

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