第3章 ECMAScript6语法简介

ES6与ES2015等价，ES6也泛指ES5.1之后的下一代javascript标准。

3.1 块作用域构造let和const

全局声名的属性，将成为window对象一部分。

let：块级声明，块内有效果，重复声明会报错。

const：声明常量，声明时需要赋值，后续不能更改。（如果是对象，引用不能改，但对象本身可以改）

var：变量提升，全局有效。在全局作声明时，将成为浏览器window对象的一部分，可能会覆盖原windows字段，而let、const不会。

3.2 模板字面量

多行字符串

反引号 ` 替代单引号、双引号，单引号、双引号不用转义，另外支持真正的多行字符串，但内容中反引号本身需要加 \ 转义一下。

字符串占位符

console.log(`hello, ${name}`);

3.3 默认参数 & 3.4 rest参数

// 示例中，name为默认参数；restdata是rest参数，传入后是一个数组。
function test1(name = 'lichengbei', ...restdata) {
    console.log(`hello, ${name}`);
    console.log(restdata);
}

3.5 展开运算符

// 可以用来复制数组、合并数组、合并对象等
let arr1 = ['a', 'b', 'c'];
let obj1 = {
    name: 'lichengbei',
    age: 28
}

let arr2 = [...arr1, 'd']
console.log(arr1);
console.log(arr2);
let obj2 = { ...obj1, school: 'DLU'}
console.log(obj1)
console.log(obj2)

3.6 对象字面量语法扩展

let obj3 = {
    name, // 同名属性的简写
    name2: name,
    print() { // 方法的简写
        console.log('obj3 print executed.')
    }
};

obj3.a1 = 1;
obj3['a2'] = 2;
obj3['a' + 3] = 3; // 可计算的属性名
console.log(obj3);
obj3.print();

3.7 解构赋值

对象解构

let {
    name: name2, // 使用与对象属性名不同的局部变量名
    age, // 普通对象解构
    school, // 普通对象解构
    info = 'No thing' // 默认值
} = obj2;

console.log(`My name is ${name2}, My school is ${school}, I am ${age} years old.Info: ${info}`)

// 已声明变量的解构赋值
let name3;
({
    name3
} = obj3);
console.log(`name3=${name3}`);

数组解构

// 数组解构
let [d, e, f, g = 888] = arr1; // 普通数组解构
let [...def] = arr1; // 复用数组解构复制数组
console.log(`d=${d},e=${e},f=${f},g=${g}`);
console.log(def);

3.8 箭头函数

let getmsg = (msg) => `[INFO] ${msg}`; // 普通箭头函数 
let getmsg2 = ({
    level,
    msg
}) => `[${level}] ${msg}`; // 箭头函数与对象解构结合

function test3() {
    console.log(getmsg('abc'));
    console.log(getmsg2({
        level: 'WARNING',
        msg: 'warning to do something.'
    }));
}

this

javascript中的this指向上下文，随着上下文改变。

• 全局声明的方法，方法中的this指向windows对象。

• 对象中声明的方法，方法中this指向对象本身。

• 但如果把对象中声明的方法，赋值给全局声明的变量，则方法中的this又会指向window对象。

• 匿名函数的上下文是window对象。可以通过bind绑定对象，实际上会创建一个新的函数，称作绑定函数。

• 箭头函数没有this绑定，如果被非箭头函数包含，则this绑定的是最近一层非箭头函数的this，否则是全局对象。

3.9 Symbol

let s1 = Symbol('s3');
let s2 = Symbol('s3');
console.log(typeof s1);
console.log(s1 == s2);
console.log(s1);

3.10 类

ES6引入了类的概念，之前只能用构造函数与原型模拟类。

涉及知识点：类的定义、只读属性、静态方法、类的继承

class Car {
    constructor(sColor, sDoors) {
        // 对象属性
        this.color = sColor;
        this.doors = sDoors;
    }

    // 只读属性
    get desc() {
        return `color=${this.color}, doors=${this.doors}`;
    }

    // 对象方法
    showColor() {
        console.log(this.color);
    }

    // 类方法
    static showDoors() {
        console.log('static method');
    }
}

// 类的继承
class Honda extends Car{
    constructor(sColor, sDoors, sBrand){
        super(sColor, sDoors);
        this.brand = sBrand;
    }

    showBrand(){
        console.log(`brand is ${this.brand}`);
    }
}

let car = new Car('red', 4);
car.showColor();
console.log(car.desc);
console.log(car.doors);
Car.showDoors();

// car.showDoors(); 方法只能通过类名调用，不能通过对象调用
let honda = new Honda('1','2','3');
console.log(honda);
honda.showBrand();

3.11 模块

ES6引入模块，一个模块通常为一个JS，JS内定义的变量与函数只有被export，才可以被外部使用。

资料：

Uncaught SyntaxError Cannot use import statement outside a module的解决方法 https://blog.csdn.net/m0_67392409/article/details/123352598

ES6 模块：导入后未定义的 on click 函数 https://segmentfault.com/q/1010000043039947

3.12 Promise

待学习

3.13 async函数

待学习