1.变量声明和赋值

1.1 变量声明

let和const是新增的变量声明关键字， 它们与var的区别是，声明变量没有预解析。

1
2
3
4
5
6
7

// 变量声明
{
    let num1 = 10
    const max_len = 99
    // max_len = 100 // 错误,常量不能修改
}
// console.log(num1) // 错误,超出了作用域

1.2 解构赋值

ES6允许按照一定的模式，从数组和对象中提取值，这被成为解构(Destructuring)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{
    // 数组的解构赋值
    const arr = [2, 4, 6]
    let [num1, num2, num3] = arr
    console.log(num1, num2, num3)

    // 对象的解构赋值
    const rectangle = {length: 100, width: 50}
    let {length, width} = rectangle // 变量名称必须与对象的属性名相同
    console.log(length, width)

    // 函数参数的解构赋值
    function area({length, width}) {
        return length * width
    }
    console.log(area(rectangle))
}

1.3 扩展运算符(…)

扩展运算符...，用于把一个数组转化为逗号分隔的参数序列，常用在不确定参数个数函数调用，数组合并等场景。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// 扩展运算符
{
    let arr1 = [2, 4, 6]
    let arr2 = [...arr1, 8]
    console.log(arr2)

    function sum(num1, num2, num3) {
        return num1 + num2 + num3
    }
    console.log(sum(...arr1))

    function sum2(...nums) {
        let sum = 0
        for (let num of nums) {
            sum += num
        }
        return sum
    }
    console.log(sum2(1, 3, 5))
}

2.字符串相关

2.1 模板字符串

ES6提供了模板字符串，使用反引号标识，使用${}指定变量。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 模板字符串
{
    let name = 'jane'
    let height = 168
    console.log(`${name}'s height is ${height}`)
    // 模板字符串还可作为多行字符串使用
    const str = `<ul>
    <li>es6</li>
    </url`
}

3.数组相关

map()方法: 可以分别处理数组的成员，返回一个新数组

1
2
3
4
5
6

 let arr = [2, 3, 4]
arr.map(ele => {
    console.log(ele)
})
arr = arr.map(ele => ele * 2)
console.log(arr) // [4, 6, 8]

concat()方法: 用于连接数组

1
2
3
4

let arr1 = [1, 3, 5]
let arr2 = [2, 4, 6]
let arr = arr1.concat(arr2).concat(7, 8, 9) 
console.log(arr) // [ 1, 3, 5, 2, 4, 6, 7, 8, 9 ]

4.函数

4.1 箭头函数

箭头函数可理解成是匿名函数的另一种写法，箭头函数可以在对象中绑定this，解决了JavaScript中this指向混乱的问题。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// 箭头函数
{
    let f1 = a => a * 2 // 箭头函数中只有一个return语句，则return关键字和大括号都可以省略
    let f2 = (a, b) => {
        let sum = a + b
        return sum
    }
    console.log(f1(100), f2(100, 200))

    // 使用箭头函数绑定对象中的this
    let user = {
        name: 'jane',
        logout: function() {
            setTimeout(() => {
                console.log(`${this.name} logout`)
            })
        }
    }
    user.logout()
}

5.模块和面向对象

5.1 模块导入和导出

ES6之前JavaScript中并没有内置模块功能，需要借助一些js库来模拟实现。 ES6加入了模块功能，一个js文件就是一个模块，js文件中需要先导出(export)后，才能被其他js文件导入(import)。

ES6的导出分为名称导出和默认导出:

  • 名称导出导入的变量名必须和导出的变量名一致
  • 默认导出(default export)，一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致，适用于导出匿名函数或对象的场景
1
2
3
4
5
6
7
8
9

export default {
    name: 'jane',
    score: 100
}

export let foo = function() {
    console.log('foo')
}
export let bar = 'bar'

1
2
3
4
5
6

import {foo, bar} from './01_04_module1.js'
foo()
console.log(bar)

import student from "./01_04_module1.js"
console.log(student.name)

5.2 对象简写

1
2
3
4
5
6
7
8

var rect = {
    width: 100,
    length: 300,
    area() {
        return this.width * this.length
    }
}
console.log(rect.area())

5.3 类和类的继承

ES6提供了class语法来简化类的创建和继承。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

class Rectangle {
        constructor(length, width) {
            this.length = length
            this.width = width
        }
        area() {
            return this.width * this.length
        }
    }
let rect = new Rectangle(11, 21)
console.log(rect.area())

class Square extends Rectangle {
    constructor(width) {
        super(width, width)
    }
    print() {
        console.log(`width = ${this.width}`)
    }
}
let square = new Square(10)
console.log(square.area())
square.print()

6.Promise对象

Promise是异步编程的一种解决方案。 Promise反映了异步操作的最终值(Promise代表某种承诺，即无论异步操作是否成功，这个对象最终都会返回一个值给你)。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

let p = new Promise((resolve, rejct) => {
    setTimeout(()=>{
        let rand = Math.floor(Math.random()*10)
        if(rand % 2 == 0) {
            resolve(rand)
        }else {
            rejct(new Error("error info"))
        } 
    }, 100)
})
p.then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

Promise.all([p1, p2]).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

7.Proxy

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy可以理解为用它去拦截js操作的方法，从而对这些方法进行代理操作。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const person = {
    name: 'jane',
    age: 13
}

const proxy = new Proxy(person, {
    get(target, key, receiver) {
        if (key === 'name') {
            return "king " + target[key]
        }
        return Reflect.get(target, key, receiver)
    }
})

console.log(proxy.name)
console.log(proxy.age)

在MDN中是这么定义Proxy的: Proxy对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。

语法 const p = new Proxy(target, handler)

  • target 要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
  • handler 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理p的行为。

关于handler对象的方法除了get, set外其他在Proxy在MDN的文档可以找到。

参考