ES6+ - 学习总结

1.重点变化

• 解决原有语法上的一些问题或者不足
• 对原有语法进行增强
• 全新的对象、全新的方法、全新的功能
• 全新的数据类型和数据结构

2.let与块级作用域

• 块级作用域简单来说就是用"{}"或括号包裹起来的代码段，在块级作用域中用let声明的变量外部无法调用
• let 声明的变量不会产生变量提升

3.数组的解构

//按位置赋值
const arr = [100, 200, 300];
const [foo, bar, baz] = arr;
console.log(foo);

//...将剩余的值赋给rest，只能在解构位置的最后一个使用
const [f, ...rest] = arr;

//对象解构
const obj = {name: 'lin', age: 12};
const { name } = obj;
const { name: objName } = obj;  //重命名

4.模板字符串

• 字面量

const name = "lin";
const str = `my name is ${name}`;
console.log(str);

• 标签函数 对模板字符串进行加工

const name = "lin";
const gender = true;

function myTagF(string, name, gender){
    // const sex = gender ? 'man' : 'woman';
    // return string[0] + name + string[1] + sex + string[2];
    
    return string[0] + name + string[1] + gender + string[2];
}
//将模板字符串解析返回一个数组['hey,', ' is a ', '.'];
const result = myTagF`hey,${name} is a ${gender}.`;
//返回 hey,lin is a true.
console.log(result);

5.字符串扩展方法

• includes()
  • 判断字符串是否包含某个值，方便字符串查找
• startsWith()
  • 判断字符串开始是否包含某个值
• endsWith()
  • 判断字符串结尾是否包含某个值

let msg = 'this is a message';
console.log(msg.includes('o'));  // false
console.log(msg.startsWith('t'));  // true
console.log(msg.endsWith('t'));  // false

6.函数扩展语法

• 参数默认值，没有传递实参、或者实参为undefined时使用形参默认值；如果有多个形参带有默认值的形参要放到最后。
• …rest，以数组形式接受所有实参，以形参的方式放在最后一位，只可以使用一次
• 展开运算符 …

// 参数默认值
function fun1(a = 100){
    console.log(a)
}

// ...rest 剩余参数
function fun2(...args){
    console.log(args)
}
fun2(1,2,3,4,5)

// 展开运算
let arr = [1,2,3,4,5]
console.log(...arr)

7.箭头函数

• 不存在this，不会改变this指向，始终指向当前作用域的this，箭头函数中不可加new，也就是说箭头函数不能当构造函数进行使用。

const a = (v, a) => v+a;

8.对象字面量的增强

const obj = {
    name: "lin",
    bar,    //key和value值一样可以省略value
    method(){   //函数
        console.log(this.name);
    },
    [2+3]: 1000,    //计算属性名
}

9.object.assign

• 用第二个变量的属性覆盖第一个变量的相同属性并把其他属性合并到第二个对象