ES6入门总结(持续更新)

1、let 和 const

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1.  不允许重复声明
1.  块级作用域
1.  不存在变量提升
1.  不影响作用域链
> 应用场景：以后声明变量使用 let 就对了

const 关键字用来声明常量，const 声明有以下特点

1.  声明必须赋初始值
1.  标识符一般为大写
1.  不允许重复声明
1.  值不允许修改
1.  块级作用域
> 注意： 对象属性修改和数组元素变化不会触发 const 错误 应用场景：声明对象类型使用 const，非对象类型声明选择 let

2、变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

//数组的解构赋值
const arr = ["张学友", "刘德华", "黎明", "郭富城"];
let [zhang, liu, li, guo] = arr;

//对象的解构赋值
const lin = {
    name: "林志颖",
    tags: ["车手", "歌手", "小旋风", "演员"],
};
let { name, tags } = lin;

//复杂解构
let wangfei = {
    name: "王菲",
    age: 18,
    songs: ["红豆", "流年", "暧昧", "传奇"],
    history: [{ name: "窦唯" }, { name: "李亚鹏" }, { name: "谢霆锋" }],
};
let {songs: [one, two, three],history: [first, second, third],} = wangfei;

模板字符串

模板字符串（template string）是增强版的字符串， 用反引号（`）标识，特点：

1. 字符串中可以出现换行符
2. 可以使用 ${xxx} 形式输出变量

注意：当遇到字符串与变量拼接的情况使用模板字符串

简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

let name = 'Hugh';
let slogon = 'UP UP UP';
let improve = function () {
    console.log('可以提高你的技能');
}
//属性和方法简写
let atguigu = {
    name,
    slogon,
    improve,
    change() {
        console.log('可以改变你')
    }
};

箭头函数

ES6 允许使用「箭头」 （=>）定义函数。

/** 1. 通用写法 */
let fn = (arg1, arg2, arg3) => {
    return arg1 + arg2 + arg3;
}

• 箭头函数的注意点：

  1. 如果形参只有一个，则小括号可以省略
  2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
  3. 箭头函数 this 指向声明时所在作用域下 this 的值
  4. 箭头函数不能作为构造函数实例化
  5. 不能使用 arguments

/**  2. 省略小括号的情况 */
let fn2 = num => {
    return num * 10;
};
/**  3. 省略花括号的情况 */
let fn3 = score => score * 20;
/** 4. this 指向声明时所在作用域中 this 的值 */
let fn4 = () => {
    console.log(this);
}
let school = {
    name: 'ES6',
    getName(){
        let fn5 = () => {
            console.log(this);
        }
        fn5();
    }
};