• ES6、ES7、ES8


    原链接:https://juejin.cn/post/6995334897065787422

    1、var、et、const

    变量提升、暂时性死区

    2、函数参数默认值

    3、扩展运算符

    let   arr1=[1,2,3],

      arr2=[3,4,5],

      arr3=[6,7,8];

    let arr=[...arr1,...arr2,...arr3]

    4、剩余参数

    当函数的参数个数不确定时

    function(name,...params){

      console.log(name);

      console.log(params)

    }

    5、模板字符串

    let name='Amelia'
    console.log(`我的名字叫${name}`)

    6、Object.keys()

    7、箭头函数

    普通函数和箭头函数的区别:

       1)、箭头函数不能作为构造函数,不能使用new;

       2)、箭头函数没有自己的this;

       3)、箭头函数没有arguments对象;

       4)、箭头函数没有原型对象

    8、Array.forEach

    array.forEach((item,index,arr)=>{})

    9、Array.map 返回处理过后的新数组

    array.map((item,index,arr)=>{})

    10、Array.filter

    array.filter((item,index,arr)=>{})

    11、Array.some

    只要有一项为真,则返回true

    12、Array.every

    全部为真返回真,否则返回false

    13、Array.reduce

    第一个参数callback函数,pre为上次return的值,next为本次遍历的项

    第二个参数为初始值,也就是第一个pre

    eg:

    //求和

    const arr=[1,2,3,4]

    const total=arr.reduce((pre,next)=>pre+next,0)

    // 统计元素出现个数
    const str='ahdjfhdjfhdjfhdjf';
    const arr=str.split('');
    const totalObj=arr.reduce((pre,next)=>{
        if(pre[next]){
            pre[next]++
        }else{
            pre[next]=1
        }
        return pre
    },{})
    console.log(totalObj)   //{ a: 1, h: 4, d: 4, j: 4, f: 4 }
    14、对象属性同名简写
      let name="Amelia"
      let age=25
      es5写法:
      let obj={
        name:name,
        age:age
      }
      let obj={name,age}
    15、promise
    16、class 类
    17、结构赋值
    18、find、findIndex
    19、for in 和for of
      for in 可遍历数组和对象
      for of只能遍历数组
    20、Set、Map
    ES7
    21、includes
    22、Math.pow()
    ES8
    23、Objeck.values
    24、async wait
    function fn (time) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(`${time}毫秒后我成功啦!!!`)
        }, time)
      })
    }
    
    async function asyncFn () {
      // 排队
      const data1 = await fn(3000)
      console.log(data1) // 3秒后 3000毫秒后我成功啦!!!
      const data2 = await fn(1000)
      console.log(data2) // 再过1秒 1000毫秒后我成功啦!!!
      const data3 = await fn(2000)
      console.log(data3) // 再过2秒 2000毫秒后我成功啦!!!
    }
    
    function fn (time) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(`${time}毫秒后我成功啦!!!`)
        }, time)
      })
    }
    
    async function asyncFn () {
      const arr = [fn(3000), fn(1000), fn(1000), fn(2000), fn(500)]
      for await (let x of arr) {
        console.log(x)
      }
    }
    
    asyncFn()
    3000毫秒后我成功啦!!!
    1000毫秒后我成功啦!!!
    1000毫秒后我成功啦!!!
    2000毫秒后我成功啦!!!
    500毫秒后我成功啦!!!

    25、?.和??

    const list = null
    // do something
    if (list && list.length) {
      // do something
    }
    
    // 使用可选链
    const list = null
    // do something
    if (list?.length) {
      // do something
    }
    
    const obj = {
      cat: {
        name: '哈哈'
      }
    }
    const dog = obj && obj.dog && obj.dog.name // undefined
    
    // 可选链
    const obj = {
      cat: {
        name: '哈哈'
      }
    }
    const dog = obj?.dog?.name // undefined
    
    
    
    const arr = null
    // do something
    const item = arr && arr[1]
    
    // 可选链
    const arr = null
    // do something
    const item = arr?.[1]
    
    const fn = null
    // do something
    const res = fn && fn()
    
    // 可选链
    const fn = null
    // do something
    const res = fn?.()




  • 相关阅读:
    使用jquery.validate.js实现boostrap3的校验和验证
    MySQL 随机取数据效率问题
    qq在线客服代码
    使用Shell脚本查找程序对应的进程ID,并杀死进程
    Redis-概述
    JVM的类加载机制
    volatile
    java内存相关
    设计模式--模板方法
    设计模式概述
  • 原文地址:https://www.cnblogs.com/junechen/p/15151697.html
Copyright © 2020-2023  润新知