02-数组相关知识点

156 阅读4分钟

数组常用API

增/改:

  • push 将元素追加到数组末尾 unshit 反之
  • splice(起始位置,删除数量,新元素)

删:

  • splice(起始位置,删除数量)
  • pop 删除数组的最后一个元素 shift 删除数组的首元素

查:

  • filter 方法创建一个新数组,其中包含通过指定测试条件的所有元素。如果没有任何元素满足条件,返回一个空数组。
  • find 返回符合条件的第一个元素
  • findIndex 返回符合条件的第一个元素的索引
  • indexOf 返回给定元素在数组中第一次出现的下标,不存在返回-1

迭代方法

image.png

reduce常用于

嵌套数组或对象:例如多维数组、包含对象的数组等。

混合数组和对象:数组中包含对象,或者对象内嵌套数组。

需要复杂条件和聚合的数据:例如对数据进行分组、筛选、排序等。

使用 reduce 来按订单的状态聚合每种状态下的总金额

image.png

还想计算每个状态下的订单数量,可以稍微修改一下 reduce 的逻辑

image.png

使用 reduce 统计每个部门的员工数量

image.png

判断是否是数组

  • Array.isArray(arr)
  • Object.prototype.toString.call(arr) === '[Object Array]'
  • arr instanceof Array
  • array.constructor === Array

["1", "2", "3"].map(parseInt) 答案是多少

  • [1, NaN, NaN]因为 parseInt 需要两个参数 (val, radix),其中radix 表示解析时用的基数。
  • map传了 3个(element, index, array),对应的 radix 不合法导致解析失败。

map与forEach的区别

  • forEach方法,是最基本的方法,就是遍历与循环,默认有3个传参:分别是遍历的数组内容item、数组索引index、和当前遍历数组Array
  • map方法,基本用法与forEach一致,但是不同的,它会返回一个新的数组,所以在callback需要有return值,如果没有,会返回undefined
  • 这里的 forEach回调中两个参数分别为 value,index
  • forEach 无法遍历对象
  • forEach 无法使用 break,continue 跳出循环,且使用 return 是跳过本次循环
  • 总结:forEach 和 map 的对比
功能forEachmap
修改原数组✔ 修改原数组✖ 不修改原数组
返回新数组✖ 需要手动创建和管理新数组✔ 返回新数组
链式调用✖ 不支持链式调用✔ 支持链式调用
适用场景单纯遍历数组,执行副作用数据处理和转换,生成新数组
  • 单纯遍历: 不对数组结构进行修改,仅对每个元素进行操作。

  • 副作用: 操作超出了函数作用域本身,影响了外部变量、对象、DOM 或其他外部系统。

  • 建议:

    尽量使用 mapfilter 等函数式方法来实现新数组的生成和数据操作,而不是用 forEach,除非你的需求明确需要直接修改原数组或执行其他副作用操作。

    forEach 主要用于执行副作用操作,因为它不会返回新数组,也不适合链式调用,而是用来对数组中的每个元素执行某些外部操作。

数组去重方法总结

 1、如果是简单数据类型 [...new Set(arr)]
 
     const arr = [1, 2, 2, 3, 4, 4, 5];
     const uniqueArr = [...new Set(arr)];
     console.log(uniqueArr); // [1, 2, 3, 4, 5]
2、利用indexOf去重:新建一个空的结果数组,for 循环原数组,判断结果数组是否存在当前元素,如果有相同的值则跳过,不相同则push进数组
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
   // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重
   3、在方法二的基础上,将indexOf改成includes也OK。看看当前元素有没有在结果数组中
4、利用Map数据结构去重:
    创建一个空Map数据结构,遍历需要去重的数组,
    把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值,所以最终得到的就是去重后的结果

function arrayNonRepeatfy(arr) {
    let map = new Map();
    let array = new Array();  // 数组用于返回结果
    for (let i = 0; i < arr.length; i++) {
            if(map .has(arr[i])) {  // 如果有该key值
            map .set(arr[i], true);
    } else {
            map .set(arr[i], false);   // 如果没有该key值
            array .push(arr[i]);
    }
   }
	return array ;
}
 var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

Array.slice() 与 Array.splice() 的区别

slice

“读取”数组指定的元素,不会对原数组进行修改

  • 语法:arr.slice(start, end)
  • start 指定选取开始位置(含)
  • end 指定选取结束位置(不含)

splice

  • “操作”数组指定的元素,会修改原数组,返回被删除的元素
  • 语法:arr.splice(index, count, [insert Elements])
  • index 是操作的起始位置
  • count = 0 插入元素,count > 0 删除元素
  • [insert Elements] 向数组新插入的元素