2021-09-13 09:49 武汉大学前端工程师

关注

常用数组处理方法与数组去重

后端传过来的那么多数据我们怎么处理

归类:

常见改变原数组的:

splice() 添加/删除
sort() 数组排序
pop()删除数组中的最后一个元素,返回这个元素
push() 向数组的末尾添加一个元素,返回数组长度
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序
fill() 填充数组
常见不改变原数组的
slice() 截取数组
join() 数组转字符串
toString() 数组转字符串
cancat 拼接数组
indexOf() 查找数组是否存在某个元素，返回下标
includes() 查找数组是否包含某个元素返回布尔
数组常用遍历
forEach()
every() 检测数组所有元素是否都符合判断条件,返回布尔值
some() 数组中的是否有满足判断条件的元素
map() 对数组中的每个元素进行处理，返回新的数组
filter() 根据条件筛选数组
reduce() 为数组提供累加器，合并为一个值
find()& findIndex() 根据条件找到数组成员

1. 数组添加值

利用数组的索引添加

let color = ["red", "blue", "green"]
// 数组中增加值
// color[1] = "yellow"
color[3] = "yellow"
console.log (color)//[ 'red', 'blue', 'green', 'yellow' ]
color[5] = "yellow"//[ 'red', 'blue', 'green', <2 empty items>, 'yellow' ]

2. 获取数组最后一个元素

let color = ["red", "blue", "green",'red', 'blue', 'green']
color[color.length-1]

3.将数组转换成字符串

*1. toString() (不改变原数组)

返回将数组转换成用数组值以逗号分割开的字符串

let color = ["red", "blue", "green"]
color.toString()
let color = ["red", "blue", "green"]
let _color = color.toString()
console.log (color)//[ 'red', 'blue', 'green' ]
console.log (_color)//"red,blue,green"

根据打印结果可以看出来toString方法不会改变原数组,arrayObject 的字符串表示
*2. join()

返回一个自定义分隔符的以数组元素组成的字符串,不传值默认是以","分隔

let color = ["red", "blue", "green"]
console.log (color.join( ))//red,blue,green
console.log (color.join(":"))//red:blue:green

4.数组添加元素

unshift() (改变)

在数组的开头添加元素,根据答应结果可以看出,unshift()改变了原数组,返回值是改变后数组的长度

let color = ['a', 'b', 'c']
console.log(color.unshift('w')) //4
console.log(color)//[ 'w', 'a', 'b', 'c' ]

push()

在数组的结尾添加元素,根据打印结果可以看出,push()方法改变了原数组,返回值是改变后数组的长度

let color = ['a', 'b', 'c']

console.log(color.push('w'))//4
console.log (color)//[ 'a', 'b', 'c', 'w' ]

5. 数组删除元素

pop()(改变)

删除数组中最后一个元素改变了原数组,返回的是删除的元素

let color = ['a', 'b', 'c']
console.log(color.pop())//'c'
console.log(color)//['a,'b']

shift()(改变)

删除数组中首个元素,并把所有其他元素移到更低的索引,改变了原数组,返回的是删除的元素

  let color = ['a', 'b', 'c']
  console.log (color.shift())//'a'
  console.log (color)//[ 'b', 'c' ]

5. 修改数组

splice(index,howmany,item1,…,itemX) 方法向/从数组中添加/删除项目，

改变了原数组,返回被删除的项目。
index:整数，规定添加/删除项目的位置
howmany:要删除的项目数量。如果设置为 0，则不会删除项目
可选。向数组添加的新项目。

/*删除数组*/
let color = ['a', 'b', 'c']
console.log(color.splice(1,1))//['b']
console.log(color)//[ 'a', 'c' ]
/*增加数组*/
let _color = ['a', 'b', 'c']
console.log(_color.splice(1,0,'pz'))//[],没有删除元素所以为空
console.log(_color)//[ 'a', 'pz', 'b', 'c' ]

slice(start,end)“截取”

不改变原数组,返回一个新的数组，包含从 start 到 end （不包括该元素）的原数组中的元素。
start 规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

let color = ['a', 'b', 'c']
console.log(color.slice( -3,-1))//[ 'a', 'b' ]
console.log(color)//[ 'a', 'b', 'c' ]

let color = ['a', 'b', 'c']
console.log(color.slice( 1,2))//[ 'b' ]
console.log(color)//[ 'a', 'b', 'c' ]

concat()方法用于连接两个或多个数组

不会改变原数组
返回拼接的数组

let man = ['a', 'b']
let woman = ['b', 'd']
let child = man.concat(woman)
console.log(child)//[ 'a', 'b', 'b', 'd' ]

6.数组循环遍历

foEach 为数组中的每个元素执行一次回调函数。回调函数的参数,数组当前项的值,数组当前项的索引,数组对象本身,不会改变原数组,返回值是undefined

let arr = ['a', 'b', 'c']
arr.forEach((item,index) => {
   
  console.log (item,index)
} )
console.log (arr)

map 返回一个由回调函数的返回值组成的新数组。不会改变原数组,回调函数传递三个参数(数组中正在处理的当前元素,数组中正在处理的当前元素的索引)

 let arr = [1, 2, 3] 
let _arr = arr.map((item,index) =>item*2)
console.log(arr) //[ 1, 2, 3 ]
console.log(_arr)//[ 2, 4, 6 ]

every 如果数组中的每个元素都满足测试函数，则返回 true，否则返回 false。(与some重点对比),不会改变原数组

let arr = [1, 2, 3] 
console.log(arr.every((item,index) => item > 2))//false

some 如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。不会改变原数组

let arr = [1, 2, 3] 
console.log(arr.some((item,index) => item > 2))//true

for…of循环：keys/value/entries

values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值
entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
keys() 方法返回一个包含数组中每个索引键的Array Iterator对象

let arr=['a','b','c']

for (let item of arr){
   
    console.log(item);
}
 var arr = ["abc", "bcd", "234", , , , 54, 2, 1];
        for (var key of arr.keys()) {
   
            console.log (key)//0,1,2,3,4,5,6,7,8
        }
        for (var value of arr.values()){
   
            console.log(value)//abc bcd 234 undefined undefined undefined 54 2 1
        }
        for (var entry of arr.entries()){
   
            console.log(entry)
        }
// [ 0, 'abc' ]
// [ 1, 'bcd' ]
// [ 2, '234' ]
// [ 3, undefined ]
// [ 4, undefined ]
// [ 5, undefined ]
// [ 6, 54 ]
// [ 7, 2 ]
// [ 8, 1 ]

filter 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。不会改变原数组

let name = ['pz', 'yjl','kobe','James']
let _name = name.filter((item,index)=> item.length > 3)
console.log(name)//[ 'pz', 'yjl', 'kobe', 'James' ]
console.log(_name)//[ 'kobe', 'James' ]

find 找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 undefined。不会改变原数组

let name = ['pz', 'yjl','kobe','James']
let _name = name.find((item,index)=> item.length > 3)
let _name2 = name.find((item,index)=> item.length > 5)
console.log(name)//[ 'pz', 'yjl', 'kobe', 'James' ]
console.log(_name)//kobe
console.log(_name2)//undefined

7. 转换数据格式

of() 它负责把一堆文本或者变量转换成数组,方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型

let arr =Array.of(3,4,5,6);
console.log(arr);//[ 3, 4, 5, 6 ]
let arr =Array.of('pz', 'yjl','kobe','James');
console.log(arr);//[ 'pz', 'yjl', 'kobe', 'James' ]

from 法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例,JSON数组格式转换成数组,JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式，

let  json = {
   
    '0': 'a',
    '1': 'bb',
    '2': 'ccc',
    length:3
}
let arr=Array.from(json);
console.log(arr)//[ 'a', 'bb', 'ccc' ]

console.log(Array.from([1, 2, 3], x => x + x));

数组去重 ***

数组去重在工作中真的是很常见的业务处理,那么总结一下常用方法义不容辞,实际上有两种业务情况,第一种是在一个数组中有重复项,需要去除重复项,另一种是对比另一个数组,去掉跟另一个数组重复的项

一.在一个数组中有重复项

1.运用Set数据结构和from(ES6常用方法)

前置知识:Set本身是一个构造函数,用来生成Set数据结构,ES6提供了新的数据结构Set,类似于数组,但是成员的值都是唯一的，没有重复的值。

eg1:
const set = new Set()
const arr = [1, 2, 3,3, 4, 4, 5]
arr.forEach(x => set.add(x))
console.log(set)//Set { 1, 2, 3, 4, 5 }
for(let item of set) {
   
  console.log(item)// 1, 2, 3, 4, 5
}
//eg2:Set+扩展运算符(...)数组去重
const set2 = new Set([1, 2, 3,3, 4, 4, 5])
console.log([...set2])//[ 1, 2, 3, 4, 5 ]

封装数组去重方法

const unique = arr => Array.from(new Set(arr))//封装函数
const arr = [1, 2, 3,3, 4, 4, 5]
let uniqueArr = unique(arr)//代用
console.log(uniqueArr)//[ 1, 2, 3, 4, 5 ]

这个是代码量最少的方法

2. for循环+splice (三种写法)

/*循环的元素的后面有没有跟该元素相同的*/
const unique = arr => {
   
  for (let i = 0; i < arr.length; i++) {
   
    for(let j = i+1; j < arr.length-1; j++) {
   
      if (arr[i]===arr[j]) {
   
        arr.splice(i,1)
        i--
      }
    }
  }
  return arr
}
/*另一种写法,循环的元素的前面有没有跟该元素相同的*/
const unique = arr => {
   
  for (let i = 0; i < arr.length; i++) {
   
    for(let j = 0; j < i; j++) {
   
      if (arr[i]===arr[j]) {
   
        arr.splice(i,1)
        i--
      }
    }
  }
  return arr
}
/*不改变原始数组的方法*/
const unique = (arr,uniqueArr )=> {
   
  for (let i = 0; i < arr.length; i++) {
   
    for(let j = i+1; j < arr.length; j++) {
   
      if (arr[i]===arr[j]) {
   
        j=++i
      }
    }
    uniqueArr.push(arr[i])
  }

}
const arr = [1, 2, 3, 3, 4, 4, 5]
let uniqueArr= new Array()
unique(arr,uniqueArr)
console.log(uniqueArr)

3. indexof()+for循环不改边原数组

const unique = (arr,uniqueArr )=> {
   
  if (!Array.isArray(arr)) {
   
        console.log('type error!')
        return
    }
  for (let i = 0; i < arr.length; i++) {
   
    uniqueArr.indexOf (arr[i]) === -1 && uniqueArr.push(arr[i])
  }
}
const arr = [1, 2, 3, 3, 4, 4, 5]
let uniqueArr= new Array()
unique(arr,uniqueArr)
console.log(uniqueArr)

4.filter() +indexOf()

const unique = arr => arr.filter((item,index) => arr.indexOf(item)===index) 
const arr = [1, 2, 3, 3, 4, 4, 5]
let uniqueArr= unique(arr)
console.log(uniqueArr)

5.用对象的属性不能相同的特点减少循环次数(速度快)

const unique = (arr,uniqueArr )=> {
   
  if (!Array.isArray(arr)) {
   
        console.log('type error!')
        return
    }
  let tag = {
   }
  for (let i = 0; i < arr.length; i++) {
   
    if(!tag[arr[i]]) {
   
      uniqueArr.push(arr[i])
      tag[arr[i]]=true
    }

  }
}
const arr = [1, 2, 3, 3, 4, 4, 5]
let uniqueArr= new Array()
unique(arr,uniqueArr)
console.log(uniqueArr)

二.去除两个数组中相同的项(工作常遇到)

主要用filter过滤数组

const a=[1,2,3,4,5]
const b=[2,3,7,8,9]
console.log(a.filter(item=>b.indexOf(item)===-1))
console.log(a.filter(item =>!b.some(e => e === item)))
console.log(a.filter(v => !b.includes(v)))
console.log(a.filter(item => b.every(e => e!== item)))