ES6快速入门

时间 2021-08-14 标签 es6 编程数组 app 异步 ide 函数 this es5 spa

一、变量声明let和constes6

　　在es6以前，声明变量都是用var关键字，不管声明在何处，都会被视为声明在函数的最顶部，或者是在全局做用域的最顶部，这就是变量提高，例如：编程

    function fun(bool) {
      if (bool) {
        var test = 'hello man'
        console.log(test)
      } else {
        console.log(test)
      }
    }
    fun() // undefined
    fun(true) // hello man

　　以上代码实际为：数组

    function fun1(bool) {
      var test // 变量提高
      if (bool) {
        test = 'hello man'
        console.log(test)
      } else {
        //此处访问test 值为undefined
        console.log(test)
      }
      //此处访问test 值为undefined
    }
    fun1() // undefined
    fun1(true) // hello man

　　因此，无论bool是否为true或false，test都会被声明。若是用了var关键字，那就是局部变量；若是没有用var关键字，就是全局变量，特么的这就是所谓的变量提高。app

　　接下来，es6的let和const登场，let表示变量，const表示常量，let和const都是块级做用域。怎么理解这个块级做用域？异步

在一个函数内部
在一个代码块内部

　　其实就是 {} 内的代码块就是let和const的做用域ide

    function fun(bool) {
      if (bool) {
        let test = 'hello man'
        console.log(test)
      } else {
        //test 在此处访问不到
        console.log(test) // 报错：test is not defined
      }
    }
    fun(true)
    fun()

　　const就是一旦定义过的变量不能够再次赋值：函数

    const name = '吴小明'
    console.log(name)
    name = '孙艺珍'
    console.log(name) // 报错：Assignment to constant variable

　　可是要注意：const定义的变量，若是是引用类型的话，这个变量的值是能够改变的，可是这个变量的引用不能够改变，例如：this

    const person = {
      name: '吴小明',
      age: 18
    }
    console.log(person) // {name: "吴小明", age: 18}
    person.name = '孙艺珍'
    console.log(person) // {name: "孙艺珍", age: 18}
    person = { name: '孙艺珍' }
    console.log(person) // 报错：Assignment to constant variable

    const arr = [1, 2, 3]
    console.log(arr) // [1, 2, 3]
    arr[1] = 20
    console.log(arr) // [1, 20, 3]
    arr = [10, 20, 30]
    console.log(arr) // 报错：Assignment to constant variable

二、模板字符串es5

　　这个语法很好的解决了es5在字符串功能上的痛点，并且写法更简单了。spa

　　第一个用途：基本的字符串格式化，将表达式嵌入字符串中进行拼接，用 ${} 来界定

    // es5
    let name = '吴小明'
    console.log('姓名：' + name)
    // es6
    let age = 18
    console.log(`年龄：${age}岁`)

　　第二个用途，多行字符串拼接：

    const template = `<div>
        <span>hello world</span>
        <span>hello world</span>
        <span>hello world</span>
        <span>hello world</span>
    </div>`

　　es6还有一些其余的经常使用的字符串的方法，例如：

    let name = '吴小明'
    console.log(name.includes('吴')) // true
    console.log(name.includes('孙')) // false

    console.log(name.repeat(3)) // 吴小明吴小明吴小明

三、函数

　　函数默认参数的定义：

　　es5中，当传了num时，取传入的值，没有传入时取默认值200。可是传入0时，由于0==false，因此不是咱们要的效果，须要单独作判断

    function fun(num) {
      num = num || 200
      return num
    }

    console.log(fun()) // 200
    console.log(fun(100)) // 100
    console.log(fun(0)) // 200

　　es6为参数提供了默认值，在定义函数时就能够初始化这个参数：

    function fun(num = 200) {
      return num
    }

    console.log(fun()) // 200
    console.log(fun(100)) // 100
    console.log(fun(0)) // 0

　　箭头函数：

　　三个特色：

　　　　不须要function关键字来建立函数

　　　　省略return关键字

　　　　继承当前上下文的this

    let arr = [1, 2, 3, 4, 5]
    // es5
    arr.forEach(function (item) {
      console.log(item)
    })
    // es6
    arr.forEach(item => {
      console.log(item)
    })

四、拓展的对象功能

　　对象初始化简写：

　　es5中对于对象都是以键值对的形式书写，是有可能出现键值对的重名的，es6能够对其简写例如：

    // es5
    function fun(name, age) {
      return {
        name: name,
        age: age
      }
    }
    // es6
    function fun1(name, age) {
      return {
        name,
        age
      }
    }
    console.log(fun('吴小明', 18)) // {name: "吴小明", age: 18}
    console.log(fun1('吴小明', 18)) // {name: "吴小明", age: 18}

　　为对象添加方法：

    // es5
    const people = {
      name: '吴小明',
      getName: function () {
        console.log(this.name)
      }
    }
    // es6
    const people1 = {
      name: '吴小明',
      getName() {
        console.log(this.name)
      }
    }
    people.getName()
    people1.getName()

五、解构-更方便的数据访问

　　es5中提取对象信息：

    let obj = {
      name: '吴小明',
      age: 18
    }
    let name = obj.name
    let age = obj.age
    console.log(name, age)

　　es6中提取对象信息：

    let obj = {
      name: '吴小明',
      age: 18
    }
    let { name, age } = obj
    console.log(name, age)

　　es6中提取数组信息：

    let arr = ['red', 'green', 'blue']
    let [one, two, thre] = arr
    console.log(one, two, thre) // red green blue

    let arr = [
      { name: '吴小明', age: 18 },
      { name: '孙艺珍', age: 17 }
    ]
    let [one, two, thre] = arr
    console.log(one, two, thre) // {name: "吴小明", age: 18} {name: "孙艺珍", age: 17} undefined

六、展开运算符 ...

　　链接数组和对象：

    let arr = [1, 2, 3]
    let newArr = [...arr, 4, 5, 6]
    console.log(newArr) // [1, 2, 3, 4, 5, 6]

    let obj = { one: 'one', two: 'two' }
    let newObj = { ...obj, three: 'three', four: 'four' }
    console.log(newObj) // {one: "one", two: "two", three: "three", four: "four"}

　　...rest的使用：

    let arr = [1, 2, 3, 4, 5]
    let [one, ...rest] = arr
    console.log(one, rest) // 1 [2, 3, 4, 5]

    let obj = {
      name: '吴小明',
      age: 18,
      sex: '男'
    }
    let { name, ...rest1 } = obj
    console.log(name, rest1) // 吴小明 {age: 18, sex: "男"}

　　对于Object而言，还能够用于组合成新的Object，若是有重复的属性名，右边覆盖左边：

    let obj = {
      name: '吴小明',
      age: 18,
      sex: '男',
      love: 'apple'
    }
    let obj1 = {
      love: 'banana',
      color: 'red'
    }
    let newObj = { ...obj, ...obj1 }
    console.log(newObj) // {name: "吴小明", age: 18, sex: "男", love: "banana", color: "red"}

七、import和export

　　import导入模块、export导出模块

　　导入的时候有没有大括号的区别：

　　　　①当使用export default store导出时，就用import store导入

　　　　②一个文件里有且只有一个export default，可是能够有多个export

　　　　③当使用export name导出时，就使用import {name}导入

　　　　④当一个文件里，既有一个export default people，又有多个export name时或者export age时，导入就用import people,{name,age}

　　　　⑤当一个文件里出现n个export，导出了多个模块，导入时除了一个一个导入，也能够用import * as xxx from xxx

八、Promise

　　在Promise以前代码过多的回调或者嵌套，可读性差、耦合性高、扩展性低。经过Promise机制，扁平化的代码机构，大大提升了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的下降了代码耦合性而提升了程序的可扩展性。

　　就是用同步的方法写异步代码。