ES6新特性

September 18, 2021 4434

一、类（class）

​ 面向对象编程，TS语法中大量运用到了class类，单例模式也可以理解为class类的实例化，全局有且只有一个实例

二、模块化(Module)）

​ 导出：export 导出时使用{}

​ 默认导出： export default 导出时不使用{}

​ 导入： import

三、函数优化

  1. 函数默认值：直接给参数写上默认值，没传就会自动使用默认值

    1
    2
    3
    4
    function add(a, b = 1) {
       return a + b;
    }
    console.log(add(10)) //11

  2. 不定参数：不定参数用了表示不确定的参数个数，形如…变量名，由…加上要给具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数

    1
    2
    3
    4
    5
    function fun(...params) {
         console.log(params.length)
       }
       fun(1, 2) // 2
       fun(1, 2, 3, 4) //4

  3. 箭头函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 箭头函数的例子
    ()=>1
    v=>v+1
    (a,b)=>a+b
    ()=>{
        alert("foo");
    }
    e=>{
        if (e == 0){
            return 0;
        }
        return 1000/e;
    }

    	1.如果只有一个参数，()可以省略。

    	2.如果只有一个return，{}可以省略

  4. 箭头函数结合解构表达式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //以前
    function hello(person) {
      console.log("hello" + person.name)
    }
    hello(person); //helloqiyue
    //箭头函数
    let hello2 = params => console.log("hello" + person.name)
    hello2(person) //helloqiyue
    //箭头函数加解构表达式
    var hello3 = ({ name }) => console.log("hello" + name)
    hello3(person) //helloqiyue
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 箭头函数的例子
    ()=>1
    v=>v+1
    (a,b)=>a+b
    ()=>{
        alert("foo");
    }
    e=>{
        if (e == 0){
            return 0;
        }
        return 1000/e;
    }

四、let跟const

  1. let: 声明变量

    ​ (1)、var声明的变量往往会越域；let声明的变量有严格局部作用域

    ​ (2)、var 可以声明多次；let只能声明一次

    ​ (3)、var会变量提升；let不存在变量提升

  2. const: 相当于声明了一个常量

    ​ (1)、声明之后不允许改变

    ​ (2)、一旦声明必须初始化，否则会报错

五、解构表达式

  1. 数组解构

    1
    2
    3
    let arr = [1, 2, 3];
    let [a, b, c] = arr;
    console.log(a, b, c) //1,2,3

  2. 对象解构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const person = {
      name: "qiyue",
      age: 23,
      language: ['java', 'js', 'css']
    }
    const { name, age, language } = person 
    console.log(name, age, language) //qiyue 23 (3) ["java", "js", "css"]
    const person = {
      name: "qiyue",
      age: 23,
      language: ['java', 'js', 'css']
    }
    //从person里解析出name的值在赋值给abc
    const { name:abc, age, language } = person
    console.log(abc, age, language) //qiyue 23 (3) ["java", "js", "css"]

六、字符串扩展

1
2
3
4
5
let str = "hello.vue";
console.log(str.startsWith("hello")) //true
console.log(str.endsWith("vue")) //true
console.log(str.includes("e")) //true
console.log(str.includes("hello")) //true

七、模板字符串

1
2
3
let str = `<span>hello world</span>`
console.log(str) // <span>hello world</span>

八、对象优化

  1. 声明对象简写

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //以前
    const name = 'sanyue'
    const age = 21
    //将属性值name，age分别赋给person1对象的name，age,后面是属性值
    const person1 = { name: name, age: age }
    console.log(person1) //{name: "sanyue", age: 21}
       
    //es6:属性名和属性值变量名一样，可以省略
    const person2 = {name,age}
    console.log(person2) //{name: "sanyue", age: 21}

  2. 对象的函数属性简写

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    let person3 = {
         name: "qiyue",
         //以前
         eat: function (food) {
           console.log(this.name + "在吃" + food);
         },
         //箭头函数中this不能使用，用对象.属性
         eat2: food => console.log(person3.name + "在吃" + food),
         eat3(food) {
           console.log(this.name + "在吃" + food)
         }
       }
       person3.eat("苹果") //qiyue在吃苹果
       person3.eat2("香蕉") // qiyue在吃香蕉
       person3.eat3("西瓜") //qiyue在吃西瓜

  3. 对象的扩展运算符

    扩展运算符（…)用于取出参数对象所有可遍历属性然后拷贝到当前对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //拷贝对象（深拷贝）
    let p1 = { name: "qiyue", age: 23 }
    let obj = { ...p1 }
    console.log(obj)//{name: "qiyue", age: 23}
       
    //合并对象
    let age1 = { age: 24 }
    let name1 = { name: "qiyue" }
    let p2 = {}
    p2 = { ...age1, ...name1 }
    console.log(p2) //{age: 24, name: "qiyue"}
    //如果p2中原本有name,age属性会被覆盖

九、map和reduce方法

1、map():接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回

1
2
3
let arr = ["1", "3", "4", "23"]
   arr = arr.map(item => item * 2)
   console.log(arr) //[2, 6, 8, 46]

2、reduce():为数组中的每一个元素依次执行回调函数，不包括数组中被删除或未被赋值的元素

语法：arr.reduce(callbace,[initialValue])

callback(执行数组中每个值的函数，包含四个参数)

  • previousValue（上一次调用回调返回的值，或者是提供的初始值（initialValue))

  • currentValue(数组中当前被处理的元素)、

  • index(当前元素在数组中的索引)

  • array(调用reduce的数组)

  • initialValue(作为第一次调用callback的第一个参数)

    1
    2
    3
    4
    5
    let arr1 = [2, 40, -10, 6]
    let result = arr1.reduce((a, b) => {
      return a + b
    }, 10)
    console.log(result)//48