不会ES6 你还不学！！！

前言

• 今天一起来学习es6知识

数组新增方法

• 扩展运算符

  • 通过扩展运算符... 将数组转化为用逗号分隔的参数序列

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

  • 实现数组的复制

  let arr = [1,2,3]
  let [...arr1] = arr
  console.log(arr1) // [1,2,3]
  

  • 扩展运算符与解构结合
    • 用于生成数组
    • 扩展运算符只能放在最后一位 不然就会报错

  let [arr,...arr1] = [1,2,3]
  console.log(arr) // 1
  console.log(arr1) // [2,3]
  
  let [...arr, arr1] = [1,2,3] // 报错
  

  • 将字符串转化为真正的数组

  let str = 'vike'
  console.log([...str]) // ['v','i','k','e']
  

• 构造函数新增方法

  • Array.from

    • 将类数组转换为数组 类似数组的对象和遍历的对象

    let obj = {
        '0':'a',
        '1':'b',
        length:2
    }
    let arr = Array.from(obj)
    console.log(arr)  // ['a','b']
    

    • 该方法接收第二个参数
    • 用来对每个元素进行处理 处理完成后放入原数组

    Array.from([1,2,3],(x)=>x*x)) // [1,4,9]
    

  • Array.of

    • 将一组值 转化为数组
    • 没有参数的时候返回一个空数组

    Array.of(1,2,3)  // [1,2,3]
    

    • 当参数只有一个的时候为数组长度

    Array.of(2) // [,]
    

    • 当参数不少于两个时 才会返回新数组

• 数组实例对象新增方法

  • copyWithin

    • 将指定位置的成员复制到其他位置 返回当前数组
    • 所需参数
      • target (必要参数) 从该位置开始替换数据 如果为负值表示倒数
      • start (可选) 从该位置开始读取数据
      • end(可选) 到该位置前停止读取数据

    [1,2,3].copyWithin(0,1) //[2,3,3]
    

  • find

    • 用于找出第一个符合条件的数组元素
    • 参数接收一个回调函数,第二个参数绑定回调函数的this
    • 参数分别为 value 当前值 index 当前位置 arr原数组

    [1,2,3].find((value,index,arr)=>{
        return value > 2 // 3
    })
    

  • findIndex

    • 返回第一个符合条件数组元素的位置

    [1,2,3].findIndex((value,index,arr)=>{
        return value > 2 // 2
    })
    

  • fill

    • 使用定值，填充数组
    • 如果填充类型是对象则是浅拷贝

    [1,2,3].fill(3) // [3,3,3]
    

    • 接收第二个参数和第三个参数 用于指定填充的起始位置和结束位置

    [1,2,3].fill(4,0,1) // [4,2,3]
    

  • entries

    • 是对键值对的遍历

    for(let [index, ele] of ['a','b'].entries()){
        console.log(index,ele) // 0'a' 1'b'
    }
    

  • keys

    • 对键名遍历

    for(let index of ['a','b'].keys()){
        console.log(index) //0 1
    } 
    

  • values

    • 对键值遍历

    for(let ele of ['a','b'].values()){
        console.log(ele) // 'a'  'b'
    }
    

  • includes

    • 用于判断数组是否包含给定值

    [1,2,3].includes(1) // true
    [NaN,2,3].includes(NaN)// true
    

    • 方法第二个参数表示搜索的起始位置 负数则为倒数

    [1,2,3].includes(2,2) // false
    

  • flat

    • 将数组扁平化处理
    • 返回一个新数组
    • 对原数组没有影响

    [1,2,3,[3,4]].flat() // [1,2,3,3,4]
    

    • 默认只会拉平一层 如果有多层嵌套 可加参数

    // 拉平两层
    [1,2,3,[1,2,[1,2],],].flat(2) //[1,2,3,1,2,1,2]
    

  • flatMap

    • 对数组每个元素执行map,然后对返回数组进行flat()
    • 第二个参数用来绑定遍历函数里的this

    [1,2,3].flatMap((x)=>[x,x*2]) // [1,2,2,4,3,6]
    

对象新增方法

• 属性的简写

  • 当键名与值相等的时候可以简写

  let a = {apple:apple}
  
  // 简写
  let a = {apple}
  

• 方法简写

  • 简写对象方法不能作为构造函数

  let fn = {
      method(){
          // do something
      }
  }
  
  // 等同于
  let fn = {
      method:function(){
          // do something
      }
  }
  

• 属性名表达式

  • 允许字面量定义对象时 将表达式放入括号内
  • 如果是对象 会将对象转化成[object object] 类型

  let a = 1
  let o = {
  'b':2,
   a:3
  }
  o[a] // 3
  o['a'] //3
  

  • 还可用于定义方法名

  let fn = {
      ['v'+'ike']() {
          // do something
      }
  }
  
  fn.vike()
  

• 对象新增方法

  • Object.is
    • 严格判断两个值是否相等

  Object.is(NaN,NaN) // true
  Object.is(+0,-0) // false
  

  • Object.assign
    • 用于对象的合并 属于浅拷贝
    • 第一个参数为结果数组 其余参数为合并数组

  let obj = {a:1,b:2}
  let obj2 = {c:3,d:4}
  let obj3
  Object.assign(obj3,obj,obj2) // {a:1,b:2,c:3,d:4}
  

  • Object.getOwnPropertyDescriptors
    • 返回指定对象自身属性的描述对象

  let obj = {a:1,vike(){return 2}}
  Object.getOwnPropertyDescriptors(obj)
  
  /*
  a: {value: 1, writable: true, enumerable: true, configurable: true}
  vike: {writable: true, enumerable: true, configurable: true, value: ƒ}
  */
  

  • Object.setPrototypeOf
    • 用来为对象设置一个原型对象

  Object.setPrototypeOf(object, prototype)
  

  • Object.getPrototypeOf
    • 用来读取一个对象的原型对象

  Object.getPrototypeOf(obj)
  

  • Object.keys
    • 返回所有可遍历属性的键名的数组

  let obj = {a:1,b:2}
  Object.keys(obj) // ['a','b']
  

  • Object.values
    • 返回所有可遍历属性的键值的数组

  let obj = {a:1,b:2}
  Object.values(obj) // [1,2]
  

  • Object.entries
    • 返回所有可遍历属性的键值对的数组

  let obj = {a:1,b:2}
  Object.entries(obj) // [['a',1],['b',2]]
  

  • Object.fromEntries
    • 将一个键值对数组转换为对象

  let  arr = [['a',1],['b',2]]
  Object.fromEntries(arr) // {a:1,b:2}
  ``
  

结语

• ES6语法还有很多 一时更不完 下期再更
• 今日份小知识get~