JavaScript 数组常见操作及手写API

Yiler
112 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

常用数组API

  • splice()=>返回一个由被删除元素组成的数组
  • slice()=>返回一个左闭右开的原数组的浅拷贝
  • concat()=>返回一个合并了两个数组的新数组
  • toString()=>返回一个包含数组值的字符串，由逗号隔开
  • join()=>返回一个包含数组值的字符串，默认由逗号隔开，可自定义修改
  • forEach()=>对数组中的元素执行回调函数
  • map()=>对数组中的元素执行回调函数，将对应的结果作为新数组返回。会遍历数组两次
  • filter()=>对数组中的元素执行回调函数，将满足条件的元素作为新数组返回。会遍历数组两次
  • flat()=>返回一个包含原数组及其子数组元素的数组
    • 应用：arr.flat()可以移除数组中的空项；arr.flat(Infinity)可以展开任意深度的嵌套数组
  • reduce()=>对数组中的元素从左到右依次执行回调函数，返回累计的总结果。会遍历数组一次

    • arr.reduce(function(pre,cur,index,arr){},initialValue)

      • 有initialValue时，pre初始值就是initialValue，且循环从index=0开始
      • 无initialValue时，pre初始值是arr[0]，且循环从index=1开始

    • 应用：数组求和；数组去重；数组扁平化；计算元素出现次数；替换map()和filter()

    • reduce能搞定的，for循环或者forEach方法大多时候也能搞定

数组与字符串/对象/类数组的转换

image-20220410104039323

  • 数组转字符串：toString()或join()方法

  • 数组转对象：新建空对象，遍历数组；将需要的值赋给对象键 值

  • 字符串转数组：split()方法或扩展运算符[...str]

  • 对象转数组：新建空数组，遍历对象；将需要的值赋给数组元素

  • 类数组arrLike转数组：[].slice.call(arrLike)方法或[].concat.apply([],arrLike)或Array.from()方法

遍历数组

  • for循环：遍历的是元素的key
  • for...in：遍历的是元素的key
  • for...of：遍历的是元素的value
  • forEach()方法：遍历的是元素的value
  • map()方法：遍历的是元素的value

数组去重

方法1：Set

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

[...new Set(arr)] //[1,2,3]

方法2：遍历

const myArray = function (arr) {
    const res = [];
    for (let i=0;i<arr.length;i++){
        if(res.indexOf(arr[i])===-1){
            res.push(arr[i])
        }
    }
    return res;
}
console.log(myArray(arr)) //[1,2,3]

方法3：reduce

const newArr = arr.reduce(function(acc,cur){
    if(!acc.includes(cur)){
        acc.push(cur);
    }
    return acc
},[])
console.log(newArr); //[1,2,3]

数组扁平化

方法1：for循环遍历+concat+递归

const myArray = function(arr){
    let res = [];
    for (let i = 0; i< arr.length; i++) {
        if(arr[i] instanceof Array) {
            res = res.concat(myArray(arr[i]));
        }else{
            res.push(arr[i]);
        }
    }
    return res;
}
const arr = [1,[2,[3,[4,5]]]];
console.log(myArray(arr));

方法2：reduce遍历+concat+递归

const myArray = function(arr){
    return arr.reduce(function(res,cur){
        return res.concat(cur instanceof Array ? myArray(cur) : cur);
    },[])
}
const arr = [1,[2,[3,[4,5]]]];
console.log(myArray(arr));

方法3：数组→字符串→数组

const myArray = function(arr){
    return arr.join(',').split(',').map(item=>parseInt(item));
}
const arr = [1,[2,[3,[4,5]]]];
console.log(myArray(arr)); //[1,2,3,4,5]

手写reduce方法

💡思路：

  1. reduce函数的输入为callback和initialValue；输出为累计调用callback的结果
  2. 有initialValue时，pre初始值就是initialValue，且从index=0开始调用callback
  3. 无initialValue时，pre初始值是arr[0]，且循环从index=1开始
Array.prototype.myReduce = function(callback,initialValue){
    let res = initialValue ? initialValue : this[0];
    for (i = initialValue ? 0 : 1; i < this.length; i++){
        res = callback(res, this[i]);
    }
    return res;
}

const arr =[1,2,3,2,1];
const res = arr.myReduce(function(pre,cur){return pre+cur},0);
console.log(res) //9

手写flat方法

💡思路：

  • 遍历数组，如果当前元素不是数组，就直接用concat连接上；
  • 如果是数组，就对当前元素进行递归
//reduce+concat+递归
Array.prototype.myFlat = function(dep = 1) {
    let res = [];
    if (dep <=0 ) {
        return this
    }else{
        res = this.reduce(function(acc,cur){
            return acc.concat(cur instanceof Array ? cur.myFlat.call(cur,dep -1 ) : cur)
        },[])
    }
    return res;
}
const arr = [1,[2,[3,[4,5]]]];
console.log(arr.myFlat());
console.log(arr.myFlat(Infinity));
avatar
文章
阅读
粉丝