ES6新特性详解

回到主文章

ES 6 新特性

let 关键字

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

• 不允许重复声明
• 块儿级作用域
• 不存在变量提升
• 不影响作用域链

以后写js声明变量都用let

const 关键字

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

• 声明必须赋初始值
• 标识符一般为大写（潜规则）
• 不允许重复声明
• 常量值不允许修改
• 块儿级作用域

注意: 对象属性修改和数组元素变化不会出发 const 错误
声明对象类型使用 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）是增强版的字符串，用反引号（`）标识，特点：

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

定义字符串

let str = `<ul>
 <li>沈腾</li>
 <li>玛丽</li>
 <li>魏翔</li>
 <li>艾伦</li>
 </ul>`;

变量拼接

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

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

简化对象写法

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

let name = '刀妹';
let slogon = '艾欧尼亚昂扬不灭！';
let improve = function () {
   
 console.log('我奶奶说过');
}
//属性和方法简写
let atguigu = {
   
 name,     //之前要这样写name：name，
 slogon,
 improve,
 change() {
   
 console.log('切断他们的退路')
 }
};

对象简写形式简化了代码，所以以后用简写会大大提高效率

箭头函数

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

let fn = (arg1, arg2, arg3) => {
   
 return arg1 + arg2 + arg3;
}

箭头函数的注意点:

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

省略小括号的情况

如果形参只有一个，则小括号可以省略

let fn2 = num => {
   
 return num * 10;
};

省略花括号的情况

函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的

let fn3 = score => score * 20;

this 指向声明时所在作用域中 this 的值

箭头函数 this 指向声明时所在作用域下 this 的值