ES6的常用特性

一、let关键字

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

  1. 不允许重复声明
  2. 块儿级作用域
  3. 不存在变量提升

二、const关键字

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

  1. 声明一定要赋初始值
  2. 不允许重复声明
  3. 值不允许修改
  4. 块儿级作用域

声明对象类型使用const,非对象类型声明选择let

三、变量的解构赋值

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} 形式输出变量
/ 定义字符串
let str = `<ul>
        <li>沈腾</li>
        <li>玛丽</li>
        <li>魏翔</li>
        <li>艾伦</li>
    </ul>`;

// 变量拼接
let star = '王宁';
let result = `${star}在前几年离开了开心麻花`;

五、简化对象写法

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

let name = 'dongdong';
let slogon = '永远追求行业更高标准';
let improve = function () {
    console.log('可以提高你的技能');
}
//属性和方法简写
let atguigu = {
    name,
    slogon,
    improve,
    change() {
        console.log('可以改变你')
    }
};

五、箭头函数

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

/**
 * 1. 通用写法
 */
let fn = (arg1, arg2, arg3) => {
    return arg1 + arg2 + arg3;
}
/**
 * 2. 省略小括号的情况
 */
let fn2 = num => {
    return num * 10;
};

/**
 * 3. 省略花括号的情况
 */
let fn3 = score => score * 20;

/**
 * 4. this指向声明时所在作用域中 this 的值
 */
let fn4 = () => {
    console.log(this);
}

let school = {
    name: 'dongdong',
    getName(){
        let fn5 = () => {
            console.log(this);
        }
        fn5();
    }
};

箭头函数的注意点:

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

箭头函数不会更改this指向,所以非常适合设置与this无关的回调,比如数组回调、定时器回调,不适合事件回调与对象方法。