js数组的操作汇总

发表于 更新于 阅读次数： 阅读次数：

经常操作数组，统一做一次整理吧

entries、keys、values

示例

ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。

keys

1
2
3
4
5
for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

values

1
2
3
4
5
for (let item of ['a', 'b'].values()) {
  console.log(item);
}
// 'a'
// 'b'

entries

1
2
3
4
for (let [index, value] of ['a', 'b'].entries()) {
  console.log(index, value);
}
// 0 "a"

fromEntries

一般结合Object.fromEntries数组转对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 对象转数组
const obj = {
    a: '1',
    b: 2
}
const arr = Object.entries(obj)
console.log(arr) // [ [ 'a', '1' ], [ 'b', 2 ] ]

// 数组转对象
const obj = Object.fromEntries([
    ['a', '1'],
    ['b', 2]
])
console.log(obj) //{ a: '1', b: 2 }

concat

合并多个数组，返回合并后的新数组，原数组没有变化。

1
2
const array = [1,2].concat(['a', 'b'], ['name']);
// [1, 2, "a", "b", "name"]

另外也可以通过

1
2
3
const arr1 = [1, 2]
const arr2 = ['a', 'b']
const array = [...arr2, arr2]

indexOf

indexOf()方法返回在该数组中第一个找到的元素位置，如果它不存在则返回-1。

语法

1
array.indexOf(item,start)
  • item 必须。查找的元素。
  • start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

示例

1
2
var arr = ['apple','orange','pear'];
console.log("found:", arr.indexOf("orange") != -1);

forEach

只要是for循环能够遍历的数组，forEach都可以实现。

语法

1
array.forEach(function(currentValue, index, arr), thisValue)
  • currentValue 必需。当前元素
  • index 可选。当前元素的索引值。
  • arr 可选。当前元素所属的数组对象。

示例

1
2
3
4
5
6
7
8
let arr1 = [1, 5, 7, 8, 9, 6]
let str = ''

arr1.forEach((item, index, array) => {
  console.log(item, index, array)
  str += `<li>${item}</li>`
})
console.log(str)

some every

  • some方法 如果数组中有一个元素满足条件，返回true 否则返回false
  • every方法 如果数组中所有元素都满足条件则返回true 否则返回false

语法

1
2
array.some(function(currentValue,index,arr),thisValue)
array.every(function(currentValue,index,arr), thisValue)
  • currentValue 必须。当前元素的值
  • index 可选。当前元素的索引值
  • arr 可选。当前元素属于的数组对象

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let arr = [5, 7, 8, 9, 6, ]
const v = arr.some(item => {
    return item < 6
})
const x = arr.every(item => {
    return item < 9
})

console.log(v) //true
console.log(x) //false

const obj = [{
        name: '小明',
        age: 9,
        sex: '男'
    },
    {
        name: '小红',
        age: 10,
        sex: '女'
    }
]
const a = obj.some(item => {
    return item.name == '小红'
})
const b = obj.every(item => {
    return item.age == 9
})
console.log(a) //true
console.log(b) //false

filter

  • 将数组中符合条件的元素留下来组成一个新的数组
  • filter() 不会改变原始数组。

语法

1
array.filter(function(currentValue,index,arr), thisValue)
  • currentValue 必须。当前元素的值
  • index 可选。当前元素的索引值
  • arr 可选。当前元素属于的数组对象

示例

filter简单过滤

1
2
3
4
5
let arr = [1, 5, 6, 3, 4, 2, 8, 7];
const a = arr.filter(item => {
    return item < 5
});
console.log(a) //[1,3,4,2]

filter数组去重

1
2
3
4
5
6
7
8
9
10
var array = [1, 2, 1, 2, 4, 5, 3, 5, 6, 7, 6];
// 检测数组下标，是否等于当前项的下标，不相等则认为有重复
var result = array.filter((item, index, arr) => {
    // item : 数组每一项的值
    // index: 每一项的下标
    // arr: 原始数组
    return index === arr.indexOf(item);
})

console.log(result); //[1, 2, 4, 5,3, 6, 7]

find

  • 遍历数组，当找到第一个符合条件的元素的时候，就会停止遍历，并返回这个元素，如果没找到符合条件的数组就输出undefined
    实例：

语法

1
array.find(function(currentValue, index, arr),thisValue)
  • currentValue 必需。当前元素
  • index 可选。当前元素的索引值
  • arr 可选。当前元素所属的数组对象

示例

1
2
3
4
5
6
7
8
9
let arr = [1, 5, 6, 3, 4, 2, 8, 7];
  const b = arr.find(item => {
      return item > 9
  });
  const c = arr.find(item => {
      return item < 9
  });
  console.log(b) //undefined
  console.log(c) //1

includes

  • 只要对应数组中包含这个元素，就返回true, 否则返回false

语法

1
2
3
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

  • searchElement必须。需要查找的元素值。
  • fromIndex可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

示例：

1
2
3
4
5
let arr = [1, 5, 6, 3, 4, 2, 8, 7];
const d = arr.includes(7)
const x = arr.includes(9)
console.log(d) //true
console.log(x) //false

map

  • 根据已知数组把已知数组作为元素生成新的的数组，新数组的长度与已知数组长度一致

语法

1
array.map(function(currentValue,index,arr), thisValue)
  • currentValue 必须。当前元素的值
  • index 可选。当前元素的索引值
  • arr 可选。当前元素属于的数组对象

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let arr = [1, 5, 6, 3, 4, 2, 8, 7];
 const y = arr.map((item, index, array) => {
     return item, array
 })
 console.log(y)
 //   (8)[Array(8), Array(8), Array(8), Array(8), Array(8), Array(8), Array(8), Array(8)]
 //   0: (8)[1, 5, 6, 3, 4, 2, 8, 7]
 //   1: (8)[1, 5, 6, 3, 4, 2, 8, 7]
 //   2: (8)[1, 5, 6, 3, 4, 2, 8, 7]
 //   3: (8)[1, 5, 6, 3, 4, 2, 8, 7]
 //   4: (8)[1, 5, 6, 3, 4, 2, 8, 7]
 //   5: (8)[1, 5, 6, 3, 4, 2, 8, 7]
 //   6: (8)[1, 5, 6, 3, 4, 2, 8, 7]
 //   7: (8)[1, 5, 6, 3, 4, 2, 8, 7]

reduce

定义和用法

  • reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
  • reduce() 可以作为一个高阶函数，用于函数的 compose。
    注意: reduce() 对于空数组是不会执行回调函数的。

语法

1
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
  • total 必需。初始值, 或者计算结束后的返回值。
  • currentValue 必需。当前元素
  • currentIndex 可选。当前元素的索引
  • arr 可选。当前元素所属的数组对象。

示例

reduce累加求和

1
2
3
4
5
6
const arr = [3,9,4,3,6,0,9]
const sum = arr.reduce((pre, item) => {
    return pre + item
}, 0)
console.log(sum) // 34

reduce数组最大值

1
2
3
4
5
const arr = [3,9,4,3,6,0,9]
var max = arr.reduce((prev, cur) => {
    return Math.max(prev,cur)
})
console.log(max) // 9

reduce数组去重

1
2
3
4
5
6
const arr = [3,9,4,3,6,0,9]
var newArr = arr.reduce((prev, cur) => {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);
console.log(newArr) // [ 3, 9, 4, 6, 0 ]

reduce数组对象去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let person = [
     {id: 0, name: "小明"},
     {id: 1, name: "小张"},
     {id: 2, name: "小李"},
     {id: 3, name: "小孙"},
     {id: 1, name: "小周"},
     {id: 2, name: "小陈"},  
];
 
let obj = {};
 
let peon = person.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
},[]) //设置cur默认类型为数组，并且初始值为空的数组
console.log(peon);

sort

语法

1
array.sort(sortfunction)

示例

1
2
3
4
var points = [40, 100, 1, 5, 25, 10]
points.sort( (a, b) => {
    return a - b
})

Set

示例

Set数组去重

1
2
3
4
const arr = [3,9,4,3,6,0,9]
let set = new Set(arr)
const newArr = Array.from(set)
console.log(newArr) // [ 3, 9, 4, 6, 0 ]