可能是最全的项目中常用的js数组方法总结,建议收藏~

367 阅读6分钟

Array.map()

必须有返回值;不会对空数组进行检查;不会改变原始数组

(1)错误示例
    let arr = [1,2,3,4,5]
    let newArr = arr.map((item)=>{
        if(item>3) return item;
    })
    
    console.log(newArr); // [undefined, undefined, undefined, 4, 5]
    注:使用map方法会产生一个新的数组,数组的每一项就是我们return出去的值(所以map方法必须有返回值,如果没有return,那么新数组的每一项都为undefined),数组的个数与原数组一样
    
(2)正确示例
    const configs = {
      umdDev: {
        format: 'umd',
        env: 'development'
      },
      umdProd: {
        format: 'umd',
        env: 'production'
      }
    }
    
    const obj = Object.keys(configs); // ["umdDev", "umdProd"]
    const m = obj.map(key => configs[key]); // [{format: ,env: },{format: ,env: }]
    
(3)正确示例:重组数组为[{"":""},{"":""}]key-value格式
    const arr = [{key: 1, value: 10}];
    
    const arr1 = arr.map(obj=>{
      let newObj = {};
      newObj[obj.key] = obj.value;
      
      return newObj;
    });
    
    console.log(arr1); // [{1:10}]

Array.forEach()

没有返回值,针对每个元素调用回调,会直接改变原始数组

(1)正确示例,直接改变原数组
    const array1 = [1,2,3,4,5];
    array1.forEach((item,index,arr) => arr[index] = item+1);
    
    console.log(array1); // [2,3,4,5,6]
    
(2)正确示例,常用,针对每个元素调用回调
    const array1 = [1,2,3,4,5];
    let sum = 0;
    
    array1.forEach(item => sum += item);
    console.log(sum); // 15
    
(3)正确示例,跳出forEach循环,不能用continuebreak,可以用ifreturn
    arryAll.forEach((item) => {
        if(item % 2 === 0) {  
            arrySpecial.push(item);  
            
            return;  
        }
    })
    
(4)正确示例:根据数组的某一项进行分类,如例根据type分类
    const update = [
        {"type":"DM-1","content":"90"},
    	{"type":"DM-2","content":"90"},
    	{"type":"DM-2","content":"90"},
    	{"type":"DM-3","content":"90"},
    	{"type":"DM-3","content":"90"}
    ];
    const arr = [];
    const obj = {};
    
    update.forEach((item,index) => {
      if (arr.includes(item.type)) {
      	obj[item.type].push(item);
      } else {
        arr.push(item.type);
        obj[item.type] = [item];
      }
    })
    
    console.log(arr); // ["DM-1","DM-2","DM-3"]
    console.log(obj); 
    
(5) 对数据进行二次分类
    let obj = {};
    dataSource.forEach((item) => {
        const {address} = item;
        if (obj[address]) {
            obj[address].push(item);
        } else {
            obj[address] = [item];
        }
    });
    
    Object.keys(obj).forEach((address) => {
        const addressData = obj[address];
    
        const typeObj = {};
        addressData.forEach((item) => {
            const {type} = item;
            if (typeObj[type]) {
                typeObj[type].push(item);
            } else {
                typeObj[type] = [item];
            }
        });
    
        obj[address] = typeObj;
    })

Array.filter()

对所有元素进行判断,将满足条件的元素作为一个新的数组返回

(1)正确示例,不会改变原数组
    let array1 = [1,2,3,4,5];
    let arr = array1.filter(item => item>2);
    
    console.log(array1); // [1,2,3,4,5]
    console.log(arr); // [3,4,5]
    
(2)正确示例,也可以直接原数组接,这样就改变原数组,例如做删除操作时常常直接改变原数组
    let array1 = [1,2,3,4,5];
    
    array1 = array1.filter(item => item>2);
    console.log(array1); // [3,4,5]
    
(3)数组去重,但只限普通数组去重,对象数组去重不可用
    let arr = [1,2,4,2,3,4,5];
    
    arr = arr.filter((item,index,self)=>self.indexOf(item)===index);
    console.log(arr); // [1,2,3,4,5];
    
(4)求两个数组的交集和并集
    const arr = [1,2,6];
    const brr = [1,2,5,6];
    
    let intersection = arr.filter(v => brr.includes(v)) //交集
    console.log(intersection); // [1,2,6]
    
    let difference = arr.concat(brr).filter(v => !arr.includes(v) || !brr.includes(v)) // 差集
    console.log(difference); // [5] 

Array.reduce()

函数累加器,将前一次的函数结果,和下一次的数据再次执行此回调函数

参数 必须 描述
func 接受4个参数得函数,previous, current, index, array,之前值,当前值,索引,数组本身。func的返回值,会作为下一次迭代时previous的值
initialValue 表示初始值,如果指定initialValue,则作为初始时previous的值,如果缺省,数组得第一个元素为previous值,第二个元素为current
(1)正确示例
    let brr = [[0, 1], [2, 3], [4, 5]]
    
    brr = brr.reduce((a,b) => a.concat(b));
    console.log(brr); // [0,1,2,3,4,5]
    
(2)正确示例,对象数组去重,reduce中第一个参数为回调函数,第二个参数即空数组为item的初始值
    let arr = [{
      key: '01',
      value: '乐乐'
    }, {
      key: '02',
      value: '博博'
    }, {
      key: '01',
      value: '乐乐'
    }];
    let obj = {};
    
    arr = arr.reduce((item,next)=>{
      obj[next.key] ? '' : obj[next.key]=true && item.push(next);
    
      return item;
    },[])

Array.some(),Array.every()

some: 所有元素

every: 有一个元素满足判断条件就返回true;

(1)正确示例
    let arr = [
      {name:'gao',age:22},
      {name:'he',age:0}
    ];
    let all = arr.every(item=>item.age>0);
    let or = arr.some(item=>item.age>0)
    
    console.log(all); // false
    console.log(or); // true

Array.join()

将数组转化为字符串并以特定字符分开

(1)正确示例
    let arr = [1, 2, 3];
    let str1 = arr.toString();
    let str2 = arr.join('');
    let str3 = arr.join('#');
    
    console.log(str1) // 1,2,3
    console.log(str2) // 123
    console.log(str3) // 1#2#3
    
(2)正确示例:String.split()
    let str = '1&b&cc&a';
    
    console.log(str.split('&')); // ['1','b','cc','a']

Array.slice()

参数 必须 描述
下标 索引
下标 索引
(1)正确示例 slice(); substring()同理
    let arr = [1, 2, 3, 4, 5];
    let arr1 = arr.slice(0,2);
    
    console.log(arr1); // [1,2]
    console.log(arr); // [1,2,3,4,5],不会改变原数组
    
(2)获取数组最后几项
    arr.slice(-1); // [5] 最后一项
    arr.slice(-2); // [4, 5] 最后两项

Array.splice()

参数 必须 描述
下标 索引
删除个数 个数
新增元素 元素
(1)正确示例 splice(); substr()同理
    let arr = [1, 2, 3, 4, 5];
    let arr1 = arr.splice(0,2,'aa');
    
    console.log(arr); // ['aa',3,4,5]; 改变了原数组
    console.log(arr1); // [1,2];返回了被删除的元素

Array.push(),Array.pop(),Array.unshift(),Array.shift()

push: 末尾添加

pop: 删除末尾

unshift: 头部添加

shift: 删除头部

都会改变原数组

(1)正确示例 push
    let arr = [1];
    let arr1 = arr.push('aaa');
    
    console.log(arr); // [1,'aaa']
    console.log(arr1); // 2 新数组长度
    
    arr.push('aaa'); 
    console.log(arr) // [1,'aaa'] 可以直接这样写改变原数组
    
(2)正确示例 pop,shift,unshift,和push用法同理,示例忽略

Array.isArray()

判断一个对象是不是数组,返回布尔

(1)正确示例
    console.log(Array.isArray('11')); // false
    console.log(Array.isArray([1,2])); // true

Array.concat()

连接数组,es6可以用拓展操作符

(1)正确示例
    let arr1 = [1, 2, 3],
        arr2 = [4, 5]
    let arr = arr1.concat(arr2)
    
    console.log(arr) // [1, 2, 3, 4, 5]
    
(2)正确示例 es6
    const arr = [...arr1,...arr2]; // 连接数组

Array.indexOf(),Array.lastIndexOf()

检索数组或字符串,返回下标,如果不存在返回-1

(1)正确示例
let arr = ['orange', '2016', '2017'];
 
arr.indexOf('orange'); // 0
arr.indexOf('o'); // -1

Array.find()

参数是回调函数,数组成员依次执行该回调函数,找出第一个返回值为true的成员,并返回该成员

(1)正确示例
    let arr = [
      {id:1, age:10},
      {id:2, age:20},
    ];
    let obj = arr.find(item=>item.id<2);
    let num = arr.findIndex(item=>item.id<2);
    
    console.log(obj); // {id:1, age:10}
    console.log(num); // 0

Array.fill()

使用给定值,填充一个数组,用于空数组的初始化非常方便,如果数组中已有元素则会全部被抹去

参数 必须
填充元素
填充起始位置
结束位置
(1)正确示例
    ['a', 'b', 'c'].fill(7); // [7,7,7]; 
    
(2)正确示例
    ['a', 'b', 'c'].fill(7, 1, 2); // ['a',7,'c']
    
(3)正确示例:如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。
    let arr = new Array(3).fill({name: "Mike"});
    arr[0].name = "Ben";
    
    console.log(arr); // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

Array.entries(),Array.keys(),Array.values()

遍历数组,可以用for...of循环进行遍历,entries()指键值对

(1)正确示例
    let arr = [];
    for (let elem of ['a', 'b'].values()) {
    	arr.push(elem);
    }
    
    console.log(arr); // ['a','b']
    
(2)正确示例
    for (let [index,elem] of ['a', 'b'].entries()) {
	    console.log(index,elem) // 0,a  1,b
    }

Array.includes()

查找元素,可以用includes()代替indexOf(),indexOf方法内部使用(===)进行判断,会导致对NaN的误判,返回布尔值

(1)正确示例,如果用indexOf就导致了对NaN的误判
    [NaN].indexOf(NaN); // -1
    [NaN].includes(NaN); // true

Array.copyWithin()

在当前数组内部,将指定位置的成员复制到其他位置(覆盖原有成员),然后返回当前数组,会修改原数组

(1)正确示例
    [1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
    
    注:从 3 号位直到数组结束的成员(4 和 5),复制到从 0 号位开始的位置,结果覆盖了原来的 1 和 2。

Array.reverse(),Array.sort()

reverse: 反转数组的顺序

sort: 排序

都会直接改变原数组

(1)正确示例
    let arr = [1,2,3,4,5]
    let newArr = arr.reverse();
    
    console.log(newArr)   //[5, 4, 3, 2, 1]
    console.log(arr)    //[5, 4, 3, 2, 1]
    
(2)正确示例
    let arr = [12,33,512,6,38]
    let newArr = arr.sort((a,b) => a-b)
    
    console.log(newArr)  //[6, 12, 33, 38, 512]
    console.log(arr)     //[6, 12, 33, 38, 512]

😊 欢迎留言,一起进步学习。