提示

本文主要介绍 ES6 的语法。@ermo

# ES6

ECMAScript 2015 也成为 ECMAScript 6 或者 ES6。

主流浏览器对 ES6 的支持：

Chrome	Edge	FireFox	Safari	Opera
Chrome 58	Edge 14	Firefox 54	Safari 10	Opera 55
2017.1	2016.8	2017.3	2016.7	2018.8

# let

可以使用 let 关键字在代码块内申明变量，作用域也只在该代码块内。

var x = 10
console.log(x) // 10
{
    let x = 2
    console.log(x) // 2
}
console.log(x) // 10

# const

const 关键字与 let 关键字意义相同，也可以在代码块中声明变量，区别是 const 声明的变量不能重新赋值。一般用定义常量字段。

var x = 2
console.log(x) // 2
{
    const x = 10
    console.log(x) // 10
}
console.log(x) // 2

# 箭头函数

箭头函数是函数表达式的简写语法。

使用箭头函数无需原来的 function 和 return 关键字，也不需要包裹代码块的花括号 {}。

// ES5 语法
var add = function(x, y) {
    return x + y
}

var num = add(1, 2)
console.log(num)

// ES6 语法
var addPro = (x, y) => x + y
var num1 = addPro(1, 2)
console.log(num1)

箭头函数没有自己的 this 变量，因此这种简写对对象方法（getter/setter）不适用。

箭头函数必须先定义，后使用。

推荐使用 const 关键字声明箭头函数，比 var 更加安全，函数一般都是一个常量值。

定义箭头函数时，在函数代码块只有一行的情况下可以省略花括号 {} 和 return 关键字。

const a = (a, b) => { return a + b }
// 等同于
// const a = (a, b) => a + b
console.log(a(2, 2)) // 4

# 扩展运算符（...）

扩展运算符就是取出参数对象中的所有可遍历属性，拷贝到当前对象中。

const a1 = ['a', 'b', 'c']
const a2 = ['e', 'f', ...a1]
console.log(a2.length) // 5

let b1 = {a : 1, b: 2}
let b2 = {...b1}
console.log(b2.a)
console.log(b2.b)

# for/of 循环

for/of 语句可以变量任何可迭代对象的值，比如有 Arrays、Strings、Maps、NodeLists 等。

语法为：

for(变量名 of 迭代对象) {
    // 循环代码块
}

迭代对象为数组，参考示例：

const languages = ['java', 'js', 'php', 'python']
let str = ''
for (const lan of languages) {
    str = str + ',' + lan
}
console.log(str) // ,java,js,php,python

迭代对象为数组，参考示例：

const js = "JavaScript"
let text = ''
for (const s of js) {
    text += s + ''
}
console.log(js) // JavaScript

# Map

可以使用对象作为 Map 的 key。

const codeMap = new Map([
    ["js", 1],
    ["java", 2],
    ["c++", 3]
])
console.log(codeMap)

# Set

Set 是一组不重复的集合。

const letters = new Set()
letters.add('a')
letters.add('a')
letters.add('b')
letters.add('c')
console.log(letters)

# 类 class

使用关键字 class 创建一个类的模板。并且需要在模板中添加一个名为 constructor 的方法。

class User {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

上例中创建一个名为 User 的类，并且这个类有 name 和 age 2个属性。

类定义完成后可以进行使用：

const user1 = new User('Lily', 18)
const user2 = new User('Tom', 19)
console.log("name: " + user1.name + ", age: " + user1.age)

# Promise

Promise 是 ES6 的一个内置类，用于解耦回调函数，可以将多个串联的异步函数链式的串联起来。

下例中，将当前页面在浏览器打开，3秒后页面将出现内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo"></div>
    <script>
        const p = new Promise(function(myResolve, myReject) {
            setTimeout(function() {
                myResolve('等待3秒后执行完成')
            }, 3000)
        })

        p.then(function(value) {
            document.getElementById('demo').innerHTML = value
        })
    </script>
</body>
</html>

# 基本类型 Symbol

Symbol 和 Number、String、Boolean 类型相同，也是一种新增的基本类型。

Symbol 代表其他代码无法访问的隐藏唯一标识。

const person = {
    firstName: 'John',
    lastName: 'Sam',
    age: 18
}

let id = Symbol('id')
person[id] = 12345
console.log(person)
console.log(Symbol('name' === Symbol('name'))) // Symbol(false)

# 参数默认值

ES6 允许参数添加默认值：

function fun(x, y = 12) {
    return x + y
}
let n = fun(1)
console.log(n) // 13

# 可变参数 ...

ES6 可以在函数参数定义中添加可变数组：

function sum(...arr) {
    let n = 0
    for (const i of arr) {
        n += i
    }
    return n
}
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9))

# String.includes()

includes 方法用于判断一个字符串中是否包含另一个字符串：

let website = 'https://ermo.cc'
let isInclude = website.includes('ermo')
console.log(isInclude) // true

# String.startsWith()

startsWith 方法用于判断当前字符串是否以另一个字符串开头：

let str = 'hello world'
console.log(str.startsWith('hello')) // true
console.log(str.startsWith('Hello')) // false

# String.endsWith()

endsWith 用于判断当前字符串是否以另一个字符串结尾：

let str = 'hello world'
console.log(str.endsWith('world')) // true
console.log(str.endsWith('World')) // false

# Array.from()

Array.from 可以将一个可迭代对象转换为一个数组：

let str = 'ABCDEFG'
let strArr = Array.from(str)
console.log(strArr)

# Array.keys()

Array.keys 可以收集可迭代对象的 key 并返回：

// 例1
let languages = ['java', 'js', 'php']
let keys = languages.keys()
let text = ''
for (const x of keys) {
    text += x + ','            
}
console.log(text) // 0,1,2,
// 例2
let letterMap = new Map([
    ['js', 1],
    ['java', 2],
    ['php', 3],
])
let letterKey = letterMap.keys()
let keyStr = ''
for (const l of letterKey) {
    keyStr += l + ','
}
console.log(keyStr) // js,java,php,

# Array.find()

Array.find() 接收一个函数条件，返回数组中符合函数条件的第一个元素，

条件函数有三个参数：

value，数组遍历值
index，数组索引
array，数组本身

let numbers = [10, 20, 30, 40]
let first = numbers.find(fun)

function fun(value, index, array) { 
    return value > 20
}
console.log(first) // 30

# Array.findIndex()

findIndex() 属于一个测试方法，返回数组满足函数条件的第一个元素索引：

let numbers = [1,2,3,4,5,6]
function fun(value, index, array) {
    return value > 2
}
console.log(numbers.findIndex(fun)) // 2

# Math 新增方法

ES6 新增了几个 Math 对应的方法：

Math.trunc() 返回小数对应的整数部分

console.log(Math.trunc(4.2)) // 4
console.log(Math.trunc(0)) // 0
console.log(Math.trunc('abc')) // NaN

Math.sign() 判断是正数还是负数

返回值有5个：

1; // positive number
-1; // negative number
0; // positive zero
-0; // negative zero
NaN; // not a number

console.log(Math.sign(1)) // 1
console.log(Math.sign(-1)) // -1
console.log(Math.sign(0)) // 0
console.log(Math.sign(-0)) // -0
console.log(Math.sign('abc')) // NaN

Math.cbrt() 返回立方根：

console.log(Math.cbrt(8)) // 2
console.log(Math.cbrt(64)) // 4
console.log(Math.cbrt(125)) // 5

Math.log2() 返回以2为底的对数：

console.log(Math.log2(2)) // 1

Math.log10() 返回以10为底的对数：

console.log(Math.log10(10)) // 1

# Number 新增方法

Number.isInteger() 判断是否为整数

Number.isSafeInteger() 判断是否为安全整数，安全整数的范围在 -(2的53次 - 1) ~ (2的53次 - 1)

# 新增全局方法

isFinite() 判断数字是否为有限

isNaN() 判断值是否为 NaN

# entries()

entries() 方法返回一个键值对数组：

    <div id="demo"></div>
    <script>

        let languages = ['java', 'js', 'php']
        let entries = languages.entries()
        for (const e of entries) {
            document.getElementById('demo').innerHTML += e + '<br>'
        }
        // return value
        // 0,java
        // 1,js
        // 2,php
    </script>

# 模块

模块新增两种导入方式。

导入命名模块：

import { name, age } from "./person.js"

导入默认模块：

import message from "./message.js"

← 数学对象