ES6

383 阅读5分钟

一、let const

1、没有预解析,提升变量作用域
2、在同一作用域不能重复定义
3、只能再自己的作用域使用
4、定义好的值不能修改(const)

二、解构赋值

1、用于数据的解析
let [a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1, 2, 3

三、模板字符串(``)

1、代替了字符串连接 ' + + '
let name = zhangsan
let age = 20
console.log(`我是${name},今年${age}`) // 我是zhangsan,今年20

补充 str.includes() 检测字符串里包含某个字符,返回true或false
     str.startsWith() 检测以什么字符串开头,返回true或false
     str.endsWith() 检测以什么字符串结尾,返回true或false
     str.padStart(填充后字符串长度,填充内容) 往字符串前填充
     str.padEnd(填充后字符串长度,填充内容) 往字符串前填充

四、函数默认参数,箭头函数,剩余参数

1、 默认参数
    function show(a='欢迎', b='万达') {
        console.log(a,b) // 'welcome', 'wd'
    }
    show('welcome', 'wd')
    show('welcome') // 'welcome', '万达'
    show('welcome', '') // 'welcome', ''
    show('', '') // '', ''
    show(,'') // 报错,第一个参数必传
    注意:函数参数已经默认已经定义了,不能再在函数里面定义与参数同名
    的变量
2、剩余参数(...扩展运算符配合使用)
    [1,2,3,4,5] -> ...[1,2,3,4,5] -> 1,2,3,4,5
    1,2,3,4,5 -> ...1,2,3,4,5 -> [1,2,3,4,5]
    
    function show(a, b, ...c) {
        console.log(a,b,c) // '1', '2', ['3,', '4']
    }
    show('1', '2', '3', '4')
    剩余参数必须放最后
    
3、箭头函数
   
   很少用 (参数)=> 返回值 eg () => 1
   常用 () => {}
   注意: 当前this不再是调用者的this,是定义对象的this,箭头函数里面
   没有arguments(用...a代替arguments),箭头函数不能当构造函数

五、数组循环,数组新增

1、for of
    let arr = ['四川', '北京', '上海']
    for (let val of arr) {
        console.log(val) // '四川'  '北京'  '上海'
    }
    for (let index of arr.keys()) {
        console.log(index) // 0 1 2
    }
    for (let item of arr.entries()) {
        console.log(item) //[0, '四川'] [1, '北京'] [2, '上海']
    }
    for (let item of arr.entries()) {
        console.log(item) //[0, '四川'] [1, '北京'] [2, '上海']
    }
    
    arr.keys() 数组下标
    arr.entries() 数组某一项
    
2、伪数组转化为真数组Array.from或者扩展运算符(...)
   运用:dom节点,非箭头函数里的arguments(一般具备length属性可用)
   
3、Array.of()将几个字符串,数值或其他转为数组
    let a = Array.from(1,2,3)
    console.log(a) [1,2,3]
    
4、find()
  let arr = [100, 55, 22, 66, 77, 101]
  let res = arr.find((item, index, arr) =>{
    return item >100
  })
  console.log(res) // 101
  注意:查找到第一个满足条件的数组元素,如果没有找到返回undefined
  
5、findIndex()
  注意:用法同上,只是返回的是满足条件的数组索引,没找到返回-1
  
6、fill()
    let arr = new Array(5)
    arr.fill('222', 1, 3)
    console.log(arr)  // ['', '222', '222', '', '']
    注意第一个参数为填充内容,第二个参数重哪里开始,第三个参数结束但不包括

六、对象用法新增

1、对象简洁写法
   let name = 'zhnagsan' 
   let age = 18
   obj = {name: 'zhnagsan', age: 18}
   obj = {name, age}
   
2、Object.is() 比较是否相等
   console.log(Object.is(NaN, NAN)) // true
   console.log(Object.is(+0, -0)) // false
   
3、 Object.assign() 合并对象、拷贝
4、 Object.keys()
5、 Object.entries()
6、 Object.values()
7、 对象也可用...扩展运算符

七、promise,解决异步回调问题

new Promise().then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

八、模块化(统一了服务端与客户端模块规范)

注意:模块化需要服务器环境
1、如何定义模块
    export xxxx
    export {
        a, // 可以起别名 a as aaa
        b
    }
2、如何使用
    import {a,b} from './xxxx.js'(如果引入时不要大括号,导出时export后必须加default)
    import 可以是相对路径也可以是绝对路径
    import 只导入一次模块,无论引入多少次
    import 会提升,首先执行
    import 引入模块后,如果模块内发生变化,使用也会发生变化

3、动态引入,按需加载
    import(./xxxx.js).then(res=> {
        console.log(res)
    })

九、类和继承

es5面向对象写法

es6

注意:1、es6 class没有与解析功能

es继承

es6继承

十、symbol与generator

1、symbol新增普通数据类型
    如何定义:
    let symb = Symbol('ccc')
    注意:定义前面没有new,返回一个唯一值

可以作为对象的一个key,但for in 循环不能循环出来

2、generator(解决异步,深度嵌套)

    function * show() {
        
    }

使用:

注意:可用for of 循环g1,但是return 不会被循环出来

十一、async,await(解决异步)

1. await只能放在async函数书中
2. 相对其他解决异步的方法更加语义化
3. 整个async返回也是一个promise对象
4. 如何await后面的promise对象状态返回为reject,那么整个async函数执行会中断
5. try catch 解决第四个问题

十二、Set和WeakSet

1、Set 新增数据结构(类似数组)但是里面不能有重复值

    let setArr = new Set(['a','b','c'])
    console.log(setArr) // {'a', 'b', 'c'}
    
    setArr.add('a') // {'a', 'b', 'c'}
    setArr.add('d') // {'a', 'b', 'c', 'd'}
    setArr.delete('a') // {'b', 'c', 'd'}
    setArr.has('b') // true
    setArr.size()
    setArr.clear()
    
    可用for of循环
    for (item of setArr) {
        console.log(item)
    }
    
    注意:用于数组去重比较方便

2、WeakSet 用法与Set差不多(基本不用)

十三、map和Weakmap

1、map类似于json数据
   
   json数据key只能为字符串,map的key为任意类型
   使用:let map = new Map()
         map.set('a', '1') 设置一个值
         map.get(a) 获取一个值
         map.delete() 删除一项
         map.has()  返回true和false
         map.clear() 情况map
         
    总体用法与Set类似,Weakmap可以不用

十四、数字变化,math新增

1、进制
    二进制:let a = 0b0100101
    八进制:let b = 0o666
    
2、判断数字
    Number.isNAN() 判断是不是一个非数字
    Number.isFinite() 判断是不是一个数字
    Number.isInteger() 判断是不是一个整数
    还有以前的parseInt parseFloat 也集成到了Number上
    
    安全整数 -(2^53 - 1) 到 (2^53 - 1)
    Number.isSaveInteger()
    
3、Math

    Math.trunc() 截取整数部分
    Math.sign() 判断一个数是正数还是负数还是零正数返回1,负数返回-1,+0返回+0,-
    0返回-0,非数字返回NAN
    Math.cbrt() 开立方根
    还有其他的。。。

十五、ES2018新增

1、命名捕获

用法:?<名字>

反向引用

用法:k<>