更新日志

• • 2022-11-4：新增from()，of()，copyWithin()
• • 2022-11-5：新增find()，findIndex()，findLast()，findLastIndex()

目录索引

• from()  |  of()  |  copyWithin()  |  find()  |  findIndex()  |  findLast()  |  findLastIndex()  |  fill()  |  entries()  |  keys()  |  values()  |  includes()

from()

• • from方法可以将类似数组的对象和可遍历的对象转换成数组

• let str = '12345'
  
  // ['1','2','3','4','5']
  console.log(Array.from(str))
  
  let obj = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      length: 3
  };
  
  // ES5 的写法 ['a', 'b', 'c']
  console.log([].slice.call(obj))
  // ES6 的写法 ['a', 'b', 'c']
  console.log(Array.from(obj))

• • from方法还可以接受一个函数作为第二个参数，作用类似于数组的map()方法
• • 用来对每个元素进行处理，将处理后的值放入返回的数组

• Array.from(arrayLike, x => x * x);
  // 等同于
  Array.from(arrayLike).map(x => x * x);

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

• • 也可以用来获取数组对象的某一属性值

• let user = [
      { id: 1, name: "小A" },
      { id: 2, name: "小B" },
      { id: 3, name: "小C" },
      { id: 4, name: "小D" }
  ];
  
  let name = Array.from(user, ({ name }) => name);
  // ['小A','小B','小C','小D']
  console.log(name)

• • from方法的另一个应用是，将字符串转为数组，然后返回字符串的长度
• • 因为它能正确处理各种Unicode字符，可以避免JavaScript将大于\uFFFF的Unicode字符，算作两个字符的bug

• function countSymbols(string) {
     return Array.from(string).length;
  }

of()

• • of方法主要是为了弥补构造函数的不足，Array.of()基本可以代替Array()和new Array()
• • of方法返回由参数构成的数组，如果没有参数，则返回空数组

• // 由于参数不同而导致的重载
  // []
  console.log(Array())
  // [empty × 3]
  console.log(Array(3))
  // [1, 2, 3]
  console.log(Array(1,2,3))

• // []
  console.log(Array.of())
  // [3]
  console.log(Array.of(3))
  // [1, 2, 3]
  console.log(Array.of(1,2,3))
  // [null]
  console.log(Array.of(null))
  // [undefined]
  console.log(Array.of(undefined))

copyWithin()

• • 语法：

• Array.prototype.copyWithin(target, start = 0, end = this.length)

• • copyWithin方法在当前数组内部，将制定位置的数组复制到其他位置，会覆盖原数组项，返回当前数组
• • target（必选）：索引值从该位置开始替换，如果为负数，则从末尾计算
• • start（可选）：索引值从该位置开始读取数组，默认为0，如果为负值，则从末尾计算
• • end（可选）：索引值到该位置停止读取的数组，默认等于数组的长度，如果是负值，则从末尾计算

• // 1号位置开始（234567）被（1234567）替换成（123456）
  // [1,1,2,3,4,5,6]
  console.log([1,2,3,4,5,6,7].copyWithin(1))
  
  // 0号位置开始（1234567）被（34567）替换成（3456767）
  // [3,4,5,6,7,6,7]
  console.log([1,2,3,4,5,6,7].copyWithin(0,2))
  
  // 2号位置开始（34567）被（56）替换成（56567）
  // [1,2,5,6,5,6,7]
  console.log([1,2,3,4,5,6,7].copyWithin(2,4,6))
  
  // 按理来说不会写负数把，谁这么变态
  // -3代表右边第3位开始（567）被-5右边第5位到-3右边第3位（34）替换成(347)
  // [1,2,3,4,3,4,7]
  console.log([1,2,3,4,5,6,7].copyWithin(-3,-5,-3))

find()

• • find方法用于找出第一个符合条件的数组成员，它的参数是个回调函数
• • 所有数组成员依次执行该回调函数，直到找到第一个符合条件的成员并返回该成员，如果所有成员都不符合条件，则返回undefined

• let arr = [1,2,3,4,5]
  
  // 1 因为只返回第一个符合条件的
  console.log(arr.find(n => n > 0))
  // undefined
  console.log(arr.find(n => n < 0))

• • find方法的回调函数接收三个参数，分别是当前的值、当前的位置和原数组

• let num = [1,2,3,4,5].find((value,index,arr) => {
      return value > 3
  })
  
  // 4
  console.log(num)

findIndex()

• • findIndex和find方法差不多，不过返回的并不是数组成员，而是数组成员的位置，找不到则返回-1

• let arr = [1,2,3,4,5]
  // 0 因为只返回第一个符合条件的
  console.log(arr.findIndex(n => n > 0))
  // -1
  console.log(arr.findIndex(n => n < 0))
  
  let num = [1,2,3,4,5].findIndex((value,index,arr) => { return value > 3 })
  // 3
  console.log(num)

findLast()

• • findLast同上面，只不过是从尾部开始找符合条件的数组成员，没找到返回undefined

• let arr = [1,2,3,4,5]
  // 5 从右边开始找
  console.log(arr.findLast(n => n > 0))
  // undefined
  console.log(arr.findLast(n => n < 0))
  
  let num = [1,2,3,4,5].findLast((value,index,arr) => { return value > 3 })
  // 5
  console.log(num)

findLastIndex()

• • findLastIndex返回数组成员的位置，从尾部开始找，没找到返回-1

• let arr = [1,2,3,4,5]
  // 4
  console.log(arr.findLastIndex(n => n > 0))
  // -1
  console.log(arr.findLastIndex(n => n < 0))
  
  let num = [1,2,3,4,5].findLastIndex((value,index,arr) => { return value > 3 })
  // 4
  console.log(num)

fill()

• • 在写了在写了

entries()

• • 在写了在写了

keys()

• • 在写了在写了

values()

• • 在写了在写了

includes()

• • 在写了在写了