ES6学习笔记

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

 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// 扩展运算符
 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}

 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}

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]

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 ]

 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}

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)

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

 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()

 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})

 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)