ES6 语法指南

1. ES6 的概念

ES6 就是 ECMAScript 第 6 版标准。

2. ECMAScript 的概念

ECMAScript 是浏览器脚本语言的规范，而各种我们熟知的 js 语言，如 JavaScript 则是规范的具体实现。

3. ES6 新特性

3.1 let 和 const 命令

3.1.1 var

之前，js 定义变量只有一个关键字：var。

但 var 有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量，代码如下：

for (var i = 0; i < 5; i++) {
    console.log(i);
}
console.log("循环外："+i);

3.1.2 let

let 所声明的变量，只在 let 命令所在的代码块内有效。

我们把刚才的 var 改成 let 试试：

for (let i = 0; i < 5; i++) {
    console.log(i);
}
console.log("循环外："+i);

3.1.3 const

const 声明的变量是常量，不能被修改

3.2 字符串拓展

ES6 为字符串扩展了几个新的 API：

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

ES6中提供了 ` 来作为字符串模板标记。

在两个`之间的部分都会被作为字符串的值，不管你任意换行，甚至加入 js 脚本。

3.3 解构表达式

3.3.1 数组解构

比如有一个数组：

let arr = [1,2,3]

我想获取其中的值，只能通过角标。ES6可以这样：

3.3.2 对象结构

比如有个 person 对象：

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}

要获得这个对象的属性值，我们可以这么做：

如过想要用其它变量接收，需要额外指定别名：

{name:n}：name 是 person 中的属性名，冒号后面的 n 是解构后要赋值给的变量。

3.4 函数优化

3.4.1 函数参数默认值

在 ES6 以前，我们无法给一个函数参数设置默认值，只能采用变通写法：

function add(a , b) {
    // 判断 b 是否为空，为空就给默认值 1
    b = b || 1;
    return a + b;
}

现在可以这么写：

function add(a , b = 1) {
    return a + b;
}

3.4.2 箭头函数

ES6 中定义函数的简写方式：

一个参数时：

var print = function (obj) {
    console.log(obj);
}
// 简写为：
var print = obj => console.log(obj);

多个参数时：

var sum = function (a , b) {
    return a + b;
}
// 简写为：
var sum = (a,b) => a+b;

代码不止一行，可以用 {} 括起来

var sum = function(a , b) {
    a = b;
    return a + b;
}
// 简写为：
var sum = (a,b) => {
    a = b;
    return a + b;
}

3.4.3 对象的函数属性简写

比如一个 Person 对象，里面有 eat 方法：

let person = {
    name: "jack",
    // 以前：
    eat1: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // 箭头函数版：
    eat2: food => console.log(person.name + "在吃" + food),
    // 简写版：
    eat3(food){
        console.log(this.name + "在吃" + food);
    }
}

3.4.4 箭头函数结合解构表达式

比如有一个函数：

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}
var hi = function hello(person) {
    console.log("hello," + person.name)
}

如果用箭头函数和解构表达式

var hi = ({name}) =>  console.log("hello," + name);

3.5 map 和 reduce 方法

数组中新增了 map 和 reduce 方法。

3.5.1 map 方法

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

举例：有一个字符串数组，我们希望转为 int 数组

let arr = ['1','20','-5','3'];
// 转为 int 数组
arr = arr.map(s => parseInt(s));

3.5.2 reduce 方法

reduce()：接收一个函数（必须）和一个初始值（可选）。

第一个参数（函数）接收两个参数：

• 第一个参数是上一次 reduce 处理的结果
• 第二个参数是数组中要处理的下一个元素

原理：reduce() 会从左到右依次把数组中的元素用 reduce 处理，并把处理的结果作为下次 reduce 的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数。

举例：

只有第一个参数：

两个参数都有：

3.6 对象扩展

ES6 给 Object 拓展了许多新的方法，如：

• keys(obj)：获取对象的所有 key 形成的数组
• values(obj)：获取对象的所有 value 形成的数组
• entries(obj)：获取对象的所有 key 和 value 形成的二维数组。
• assign(dest, …src) ：将多个 src 对象的值 拷贝到 dest 中（浅拷贝）。

3.7 数组扩展

ES6 给数组新增了许多方法：

• find(callback)：数组实例的 find 方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为 true 的成员，然后返回该成员。如果没有符合条件的成员，则返回 undefined。
• findIndex(callback)：数组实例的 findIndex 方法的用法与 find 方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回 -1。
• includes(数组元素)：与 find 类似，如果匹配到元素，则返回 true，代表找到了。