ES6

ECMAScript 概述

ECMAScript 只是提供了最基本的语法
Javascript 在语言基础上进行了扩展

发展历程.png

ES2015 概述

很多开发者喜欢用ES6来泛指所有的新标准

• 解决原有语法上的一些问题或者缺陷
• 对原有语法进行增强
• 全新的对象、全新的方法、全新的功能
• 全新的数据类型和数据结构

准备工作

任何一个支持ES2015的环境都可以
在 VScode软件中使用 Chrome 调试

• Debugger for Chrome
• Live Server
• Browser Preview

let和块级作用域

作用域 - 某个成员能够起作用的范围
在 ES2015 之前，ES只有两种作用域 全局作用域和函数作用域
块，就是{}包裹起来的一个范围
非常适合设置 在 for 循环中的循环变量

let不会进行变量声明提升

const

特点：在 let 的基础上增加来一个【只读】效果
声明的时候必须同时赋初值

最佳实践：不用 var，主用 const，配合 let

数组的结构

    //以前
    const arr = [100, 200, 300]
    const foo = arr[0]
    const bar = arr[1]
    const baz = arr[2]
    console.log(foo, bar, baz)
    //现在
    const arr = [100, 200, 300]
    const [foo, bar, baz] = arr
    console.log(foo, bar, baz)

    const arr = [100, 200, 300]
    const [, , baz] = arr
    console.log(baz)

    const arr = [100, 200, 300]
    const [foo,...rest] = arr
    console.log(rest)

    const path = "foo/bar/baz"
    const [,,a] = path.split("/")
    console.log(a)

对象的解构

    const obj = { name: 'zs', age: 18}

    const name = "tom"
    const {name: newName = "jack"} = obj
    console.log(name)
    console.log(newName)

    const {log} = console
    log("hhh")

模版字符串

    const str = `this is 
    a \`string`
    console.log(str)

    // 插值
    const name = "tom"
    const str = `hey, ${name}`
    console.log(str)  

模版字符串标签函数

    const name = "zs"
    const gender = true
    function myTagFunc(strings,name,gender){
        // console.log(strings,name,gender)
        const sex = gender ? "man" : "woman"
        return strings[0] + name + strings[1] + sex + strings[2]
    }
    const str = myTagFunc`hi, ${name} is a ${gender}`
    console.log(str)

字符串的扩展方法

• includes()
• startsWith()
• endsWith()

    const msg = 'Error: foo is not define'
    console.log(msg.startsWith('Error'))
    console.log(msg.endsWith('.'))
    console.log(msg.includes(foo))

参数默认值

    function foo(enable = true) {

    }
    foo()

剩余操作符

    function fun(...args) {
        console.log(args)
    }
    fun(1,2,3,4)

展开操作符

    const arr = ['foo', 'bar', 'baz']
    console.log(...arr)

剪头函数的this

内部不会改变this的指向

Object.assign 方法

将多个源对象中的属性复制到一个目标中

    const sourse1 = {
        a: 123,
        b: 456
    }

    const target = {
        a: 456,
        c: 789
    }
    const result = Object.assign(target,sourse1)
    // target:目标对象 sourse: 源对象

可以利用他复制对象

Object.is 方法

解决之前 === 不太合理的地方 但是不太使用 还是建议使用 === 运算符

    let a = Object.is(+0,-0)
    let b = Object.is(NaN,NaN)
    console.log(a)
    console.log(b)

class 类

    class Person {
        constructor (name, age) {
            this.name = name;
            this.age = age;
        }
        sayHi () {
            console.log(`hi,my name is ${this.name}`)
        }
    }
    const p1 = new Person("nick",18)
    console.log(p1)
    p1.sayHi()

静态方法 static

    class Person {
        constructor (name, age) {
            this.name = name;
            this.age = age;
        }
        sayHi () {
            console.log(`hi,my name is ${this.name}`)
        }
        static create (name,age) {
            return new Person(name,age)
        }
    }
    const p1 = Person.create("zs",19)

image.png image.png

类的继承

    class Student extends Person{
        constructor (name,age,number) {
            super(name,age);
            this.number = number
        }
        hello () {
            super.sayHi()
            console.log(`学号是 ${this.number}`)
        }
    }
    const s1 = new Student("tom",18,101)
    s1.hello();

Set 数据结构

    const s = new Set()
    s.add(1).add(2).add(3).add(4).add(2)
    console.log(s)

    // es5
    s.forEach(i => console.log(i))
    // es6
    for(let i of s){
        console.log(i)
    }

    console.log(s.size)

    console.log(s.has(4))

    console.log(s.delete(3))

    s.clear() //清除集合中所有项

    // 应用 去重
    const arr = [1.3,4,6,2,4,7,8]
    const b = Array.from(new Set(arr)) 
    // const b = [...new Set(arr)]
    console.log(b)

Map

    // Map
    const map = new Map()
    const a = {a : 1}
    map.set(a,100)
    console.log(map)
    console.log(map.get(a))
    // has delete clear 

    // 遍历
    map.forEach((value,key) => {
        console.log(key,value)
    })

Symbol 数据类型

    // Symbol
    // Symbol 符号，作用就是表示一个独一无二的值
    const s = Symbol()
    console.log(s)
    console.log(typeof s)

    // 添加
    const obj = {
        [Symbol()]:789
    }
    obj[Symbol()] = 123
    obj[Symbol()] = 456
    console.log(obj)
    console.log(obj[Symbol()])  // undefined 外部无法访问

for of 遍历

作为遍历所有数据结构的统一方式

    const arr = [100,200,300,400]

    for (const item of arr){
        console.log(item)
    }

    arr.forEach(item => {
        console.log(item)
    })

for of 内部可以用break打断

    for (const item of arr){
        console.log(item)
        if(item >= 200){
            break
        }
    }

ES2016

    const arr = [1,true,NaN,23,'aaa']

    // includes
    console.log(arr.includes(NaN))

    // 指数运算符 **
    console.log(2 ** 10)