ES6学习笔记

📅 2017-05-20 | 🖱️

1.变量声明和赋值 #

1.1 变量声明 #

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

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

1.2 解构赋值 #

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

 1{
 2    // 数组的解构赋值
 3    const arr = [2, 4, 6]
 4    let [num1, num2, num3] = arr
 5    console.log(num1, num2, num3)
 6
 7    // 对象的解构赋值
 8    const rectangle = {length: 100, width: 50}
 9    let {length, width} = rectangle // 变量名称必须与对象的属性名相同
10    console.log(length, width)
11
12    // 函数参数的解构赋值
13    function area({length, width}) {
14        return length * width
15    }
16    console.log(area(rectangle))
17}

1.3 扩展运算符(…) #

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

 1// 扩展运算符
 2{
 3    let arr1 = [2, 4, 6]
 4    let arr2 = [...arr1, 8]
 5    console.log(arr2)
 6
 7    function sum(num1, num2, num3) {
 8        return num1 + num2 + num3
 9    }
10    console.log(sum(...arr1))
11
12    function sum2(...nums) {
13        let sum = 0
14        for (let num of nums) {
15            sum += num
16        }
17        return sum
18    }
19    console.log(sum2(1, 3, 5))
20}

2.字符串相关 #

2.1 模板字符串 #

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

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

3.数组相关 #

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

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

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

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

4.函数 #

4.1 箭头函数 #

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

 1// 箭头函数
 2{
 3    let f1 = a => a * 2 // 箭头函数中只有一个return语句，则return关键字和大括号都可以省略
 4    let f2 = (a, b) => {
 5        let sum = a + b
 6        return sum
 7    }
 8    console.log(f1(100), f2(100, 200))
 9
10    // 使用箭头函数绑定对象中的this
11    let user = {
12        name: 'jane',
13        logout: function() {
14            setTimeout(() => {
15                console.log(`${this.name} logout`)
16            })
17        }
18    }
19    user.logout()
20}

5.模块和面向对象 #

5.1 模块导入和导出 #

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

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

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

1export default {
2    name: 'jane',
3    score: 100
4}
5
6export let foo = function() {
7    console.log('foo')
8}
9export let bar = 'bar'

1import {foo, bar} from './01_04_module1.js'
2foo()
3console.log(bar)
4
5import student from "./01_04_module1.js"
6console.log(student.name)

5.2 对象简写 #

1var rect = {
2    width: 100,
3    length: 300,
4    area() {
5        return this.width * this.length
6    }
7}
8console.log(rect.area())

5.3 类和类的继承 #

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

 1class Rectangle {
 2        constructor(length, width) {
 3            this.length = length
 4            this.width = width
 5        }
 6        area() {
 7            return this.width * this.length
 8        }
 9    }
10let rect = new Rectangle(11, 21)
11console.log(rect.area())
12
13class Square extends Rectangle {
14    constructor(width) {
15        super(width, width)
16    }
17    print() {
18        console.log(`width = ${this.width}`)
19    }
20}
21let square = new Square(10)
22console.log(square.area())
23square.print()

6.Promise对象 #

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

 1let p = new Promise((resolve, rejct) => {
 2    setTimeout(()=>{
 3        let rand = Math.floor(Math.random()*10)
 4        if(rand % 2 == 0) {
 5            resolve(rand)
 6        }else {
 7            rejct(new Error("error info"))
 8        } 
 9    }, 100)
10})
11p.then(res => {
12    console.log(res)
13}).catch(err => {
14    console.log(err)
15})
16
17Promise.all([p1, p2]).then(res => {
18    console.log(res)
19}).catch(err => {
20    console.log(err)
21})

7.Proxy #

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

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

 1const person = {
 2    name: 'jane',
 3    age: 13
 4}
 5
 6const proxy = new Proxy(person, {
 7    get(target, key, receiver) {
 8        if (key === 'name') {
 9            return "king " + target[key]
10        }
11        return Reflect.get(target, key, receiver)
12    }
13})
14
15console.log(proxy.name)
16console.log(proxy.age)

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

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

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

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