JavaScript知识点整理之Array

初始化

new

// 新建一个n行n列的二维数组
 const dp = new Array(n).fill(0).map(() => new Array(n).fill(0));

Array.from

• 示例:

const data = Array.from({ length: 100 * 1024 }, () => Math.floor(Math.random() * 256))

• 格式

Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

参考

• 将 Base64 编码的数据快速转换为 Uint8Array
• Array.from() - JavaScript | MDN

遍历数组

forEach

• Array.prototype.forEach(function(value, index, arr), thisValue)
• 对数组的每个元素执行一次给定的函数。
• forEach() 期望的是一个同步函数，它不会等待 Promise 兑现
• 除了抛出异常之外，没有其他方法可以停止或中断 forEach() 循环,也就是说不能在 forEach 中使用 break、continue 或 return
• callbackFn 仅对已赋值的数组索引调用。对于稀疏数组中的空槽，它不会被调用。
• forEach() 不会改变其调用的数组，但是，作为 callbackFn 的函数可以更改数组。请注意，在第一次调用 callbackFn 之前，数组的长度已经被保存。因此：
  1. 当调用 forEach() 时，callbackFn 不会访问超出数组初始长度的任何元素。
  2. 已经访问过的索引的更改不会导致 callbackFn 再次调用它们。
  3. 如果 callbackFn 更改了数组中已经存在但尚未访问的元素，则传递给 callbackFn 的值将是在访问该元素时的值。已经被删除的元素不会被访问。

every

  const arr = [0, 1, 2, 3, 4, 5, 6, 7]
  let a = arr.every((value) => value > -1)//判断数组元素是否都大于-1
  console.log(a);//true

some()

wip

filter()

  const arr = [0, 1, 2, 3, 4, 5, 6, 7]
  let newArr = arr.filter((value) => value > 3) //判断数组元素是否大于3
  console.log(newArr); //[ 4, 5, 6, 7 ]

map()

• 不改变原数组
  • 指的是不改变数组内部元素的个数和顺序，而不是元素本身的属性

  const arr = [0, 1, 2, 3, 4, 5, 6, 7]
  let newArr = arr.map((value) => value * 2) //将数组中每一个元素都乘以2
  console.log(newArr); //[0,  2,  4,  6, 8, 10, 12, 14]

reduce()

  const array = [1,2,3,4,5]

  const sumWithInitial = array.reduce(
    (previousValue,currentValue,currentIndex) => 
        previousValue*2 + currentValue - currentIndex,1);

  console.log(sumWithInitial) // 63

for...in 和 for...of

• 对于数组: for in遍历的是index，for of遍历的是"value"
  • 示例

    const arr = [1, 2, 3];
    
    // for...in循环遍历数组的索引
    for (let index in arr) {
      console.log(index); // 输出 0, 1, 2
    }
    
    // for...of循环遍历数组的值
    for (let value of arr) {
      console.log(value); // 输出 1, 2, 3
    }
    

• for..in的缺陷
  1. 会迭代继承的属性,可以使用obj.hasOwnProperty(key)进一步判断

     Array.prototype.customMethod = function() {};
     const arr = [10, 20, 30];
     for (let index in arr) {
       console.log(index);  // 输出 0, 1, 2 , customMethod
     }
     

  2. 遍历的是字符串类型的索引

     const arr = [10, 20, 30];
     for (let index in arr) {
       console.log(typeof index);  // 输出 "string"
     }
     

  3. 不适合遍历稀疏数组

     const arr = [10, , 30];  // 稀疏数组
     for (let index in arr) {
       console.log(index);  // 输出 0, 2 （不会跳过稀疏部分）
     }
     

参考

• js遍历数组的10种方法 - 掘金
• javascript - for…in和for…of的用法与区别 - 前端开发随笔 - SegmentFault 思否
• Array.prototype.reduce() - JavaScript | MDN
• 为什么不能在forEach中使用break、continue或return？ - js技术_卡卡网

实现forEach, map, filter

• forEach
• wip: Array.prototype.forEach() - JavaScript | MDN

Array.protype.forEach = function(){
  const array = this; // 调用 forEach 方法的数组实例
  const [callbackFn,thisArg] = [].slice.call(arguments);
  if (typeof callbackFn !== 'function'){
    throw new TypeError(callbackFn + 'is not a function')
  }
  for (let i =0;i<ary.length;i++){
    callbackFn.call(thisArg,array[i],i,array);
  }
}

• map

function map(arr,fn) {
  const res = [];
  arr.forEach((item,i)=>{
    res[i] = fn(item,i);
  })
  return res;
}

• filter

function filter(arr,fn){
  const res =[];
  arr.forEach((item,i)=>{
    const isOk = fn(item,i);
    if(isOk){
      res.push[item];
    }
  })
  return res;
}

数组去重

set

Array.from(new Set(arr))

reduce()

const myArray = ["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"];
const myArrayWithNoDuplicates = myArray.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    return [...accumulator, currentValue];
  }
  return accumulator;
}, []);

console.log(myArrayWithNoDuplicates);

参考

• JavaScript 数组去重的方法（12 种方法，史上最全） - 前端开发随笔 - SegmentFault 思否

常用API

slice

• 语法: slice(start, end)
• 返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引
• 原始数组不会被改变。
• Array.prototype.slice() - JavaScript | MDN

flatten

• 实现

  function myFlatten(arr,depth=1){
    if(depth>0){
      return arr.reduct((pre,cur)=>
        pre.concat(Array.isArray(cur)?myFlatten(cur,depth-1):cur))
    }else{
      return arr.slice()
    }
  }
  

• 参考: ES6 flat 与数组扁平化前言   flat 用于将多维数组拉平（扁平化），不影响原数组，返回新的数组。   仅有一 - 掘金

shift与pop

• shift：从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度
• pop: 从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度

indexof

• 语法: indexOf(searchElement, fromIndex)

• 比较: ===， 将 searchElement 与数组中的元素进行比较。NaN 值永远不会被比较为相等，因此当 searchElement 为 NaN 时 indexOf() 总是返回 -1

• indexOf() 方法会跳过稀疏数组中的空槽。

• 找出指定元素出现的所有位置:

  const indices = [];
  const array = ["a", "b", "a", "c", "a", "d"];
  const element = "a";
  let idx = array.indexOf(element);
  while (idx !== -1) {
    indices.push(idx);
    idx = array.indexOf(element, idx + 1);
  }
  console.log(indices);
  // [0, 2, 4]
  

• 参考: Array.prototype.indexOf() - JavaScript | MDN

concat

• 语法: concat(value0, value1, /* … ,*/ valueN)
• 如果省略了所有 valueN 参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝
• 创建一个新数组。该数组将首先由调用它的对象中的元素填充。然后，对于每个参数，它的值将被连接到数组中
• 如果任何源数组是稀疏数组，concat() 方法会保留空槽
• 参考: Array.prototype.concat() - JavaScript | MDN

reduceRight

• 对累加器（accumulator）和数组的每个值（按从右到左的顺序）应用一个函数，并使其成为单个值。
• 参考: Array.prototype.reduceRight() - JavaScript | MDN

参考

• Array.from() - JavaScript | MDN
• JavaScript 数组去重的方法（12 种方法，史上最全） - 前端开发随笔 - SegmentFault 思否