JS 关于 ES6新增内容

78 阅读4分钟

1、箭头函数

    ES6 新增的一个对以前普通函数的 一个 写法优化
    箭头函数专属的写法优化
        1、箭头函数的形参 如果只有一个,并且没有默认值的时候,可以省略形参的小括号
           => 如果函数的形参有多个,或者说有一个形参并且有默认值,或者没有默认值,这些情况都得书写形参的小括号
        2、如果函数的 调用需执行的代码 只有一段,那么可以省略 大括号,并且 默认自带 return 效果
    与普通函数的区别
        写法不同
        函数内部的 this 不同

函数只有一个 形参

image.png

函数只有一个形参 但是 有默认值

image.png

函数没有默认值

image.png

函数具有多个形参

image.png

函数没有返回值,并且内部代码有多行

image.png

函数没有返回值,而且内部代码 只有一行

image.png

函数 返回 一个 对象

image.png

函数 返回 数组

image.png

函数 返回 一个 新的 箭头函数

image.png

2、解构赋值

1、数组

    1、声明变量的时候 需要使用 [  ] 包裹
    2、[  ] 内部的变量名 只有总符合命名 规范与规则 就OK
    3、= 赋值号右边必须 跟一个 数组
    4、作用 会按照数组内部元素的 排列顺序 ,依次赋值给 = 左边的值

image.png

2、对象

    1、声明变量的时候 需要使用  {  } 包裹
    2、变量的名字 必须和对象内部 的 某一个属性完全相同
    3、 = 右边 必须 书写一个 对象
    4、对象内部属性对应的值 给到 左边的 变量中

image.png

3、展开运算符

1、基本用法

image.png

2、合并数组

image.png

3、将伪数组 转为 真数组

image.png

4、优化 实参传递

    在 函数的形参 前书写一个 ...
    能够将 所有的实参的内容,存储在这个形参中,并且以数组的方式存储的
    
    假如一个实参都没传递,那么这个 形参就是 空数组
    注意 如果 一个形参前 书写了 ... 那么 这个形参 后 就不能写形参了,但是可以写在它 之前

image.png

image.png

4、函数的this 指向

1、在代码中直接调用函数 this === window

image.png

2、将函数放在 对象中 调用 this === 当前对象

image.png

3、将函数 放在 定时器或者倒计时器内部 this === window

image.png

4、将函数放在事件处理中 this === 事件源

image.png

5、将函数放在自执行函数中 目前市场已经不多见 this === window

image.png

5、修改函数内部this指向

    1、call
        语法:函数名.call(将函数内部的this 指向谁,实参1,实参2,实参3....)
        作用:修改函数内部的 this 指向,并将参数传递出去,并执行函数
    2、apply 
        语法:函数名.apply(将函数内部的this指向谁,[实参1,实参2,实参3....])
        作用:修改函数内部的 this 指向,并将参数传递进去,并执行函数
    3、bind
        语法:函数名.bind(将函数内部的this指向谁,实参1,实参2,实参3...)
        作用:修改函数内部的this 指向,并将参数传递进去,然后将处理好的函数 返回
        注意:这个方法不会立即执行函数,而是会将修改好 this 的一个函数返回出来,需要使用的话,可以自己调用
    

call

image.png

apply

image.png

bind

image.png

新增数据结构

Map

    MapES6 新增的一个数据结构,类似于 对象,但不是一个东西
    
    // 创建 一个 空的 Map 集合
    const oMap = new Map()
    
    // 向 map 中 添加数据  set()
    oMap.set('key','value')
    // 获取 map 中的 一些数据
    oMap.get('key')
    // has() 判断数据中是否拥有指定的 key
    oMap.has('name')  //如果有 那么 就返回 true 没有 就返回 false
    
    // delete() 删除数据中的某一个 
    
    oMap.delete('key')
    
    // clear() 删除数据集合
    oMap.clear()
    
    // forEach(function(value,key,origin){})
    oMap.forEach(function(value,key,origin){})

Set

    // 向数据中添加数据
    oSet.add(数据)
    // 判断数据集合中是否拥有这个数据
    oSet.has(数据)
    // delete 删除某一个
    oSet.delete(数据)
    // clear() 清空数据集合
    oSet.clear()
    // 遍历数据
    oSet.forEach(function(item,index,origin){
        console.log(item,index,origin)
        // item 与 index 的数据相同
        // origin 就是这个集合
    })

对象的简写

对象中的属性和属性值相同 并且 属性值是一个 变量

    const username = 'QF001'
    const password = '123456'
    const userInfo = {
        username: username,
        password: password
    }
    // 简写
    const userInfo = {
        username,
        password
    }