有关数组操作的26种方法附举例说明

qq_43710066

已于 2023-05-04 14:03:09 修改

阅读量3.4k

点赞数 3

文章标签： javascript 前端 vue.js

于 2023-04-28 15:36:26 首次发布

本文链接：https://blog.csdn.net/qq_43710066/article/details/130425937

版权

一、取最值

1.Math.min最小值

const arr = [1, 2, 3, 4, 5, 6]
console.log(Math.min(...arr)) //1

2.Math.max最大值

const arr = [1, 2, 3, 4, 5, 6]
console.log(Math.max(...arr)) //6

二、.length 获取当前数组的长度

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.length) // 6
console.log(arr[0])  // 1

三、includes 用来判断一个数组是否包含一个指定的值

includes（searchElement，fromIndex）

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

const arr = [1, 2, 3, 4, 2, 6]
console.log(arr.includes(1)) // true

四、join 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串默认用“,” 分隔

join()可以将一个数组转为字符串,并将新的数组作为函数返回值返回,不会改变原数组

const arr = [1, 2, 3, 4, 2, 6]
console.log(arr.join()) // 1,2,3,4,2,6
console.log(arr.join('')) // 123426
console.log(arr.join(' ')) // 1 2 3 4 2 6
console.log(arr.join('-')) // 1-2-3-4-2-6

五、slice 可以截取某一个片段浅拷贝

定义：方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。(如果是复杂数据类型因为是浅拷贝，拷贝的只是指向原数组的指针，会修改原数组)

注意：字符串也有一个slice() 方法是用来提取字符串的，参数给0 ，表示什么都不截取，拷贝一份

begin(可选): 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。

end(可选):索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.slice(1, 3)) // [ 2, 3 ]
console.log(arr.slice(0)) // [ 1, 2, 3, 4, 5, 6 ]

六、indexOf 获取某个元素在数组当中第一次出现的位置

定义
        返回指定字符在原字符串中的第一个匹配项的索引。如省略第二个参数，则将从字符串的首字符开始检索。
        可指定字符开始检索位置和指定长度的字符，若没有找到该字符，则返回 -1。
        也可以判断数组中是否包含某个值。

const arr = [1, 2, 3, 4, 2, 6]
console.log(arr.indexOf(4)) // 3

七、lastIndexOf 获取某个字符最后出现在字符串的位置

语法格式如下：

stringObject.lastIndexOf(substring,startindex)
startindex：可选参数，用于指定在字符串中开始查找的位置，在这个位置从后向前查找。它的取值范围是0~stringObject.length-1。如果省略该参数，则从字符串的最后一个字符开始查找。如果要查找的子字符串没有出现，则返回-1。

const arr = [1, 2, 3, 4, 2, 6]
console.log(arr.lastIndexOf(2)) // 4

八、contact 做合并，拼接

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = [8, 9, 10]
console.log([...arr, ...arr1]) // 建议
console.log(arr.concat(arr1))

九、push 表示向数组末尾进行追加 [会更改原数组]

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.push(7))
console.log(arr)

十、unshift 表示向数组最前面进行追加 [会更改原数组]

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.unshift(0, 100))
console.log(arr)

十一、shift 删除数组的第一个元素，并返回这个元素。 [会更改原数组]

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.shift()) // 1
console.log(arr) // [ 2, 3, 4, 5, 6 ]

十二、pop 可以从数组的末尾开始删除并且返回这个元素 [会更改原数组]

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.pop()) //6
console.log(arr) //[ 1, 2, 3, 4, 5 ]

十三、sort 排序 [会更改原数组]

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.sort((a, b) => a - b)) // 正序
console.log(arr.sort((a, b) => b - a)) // 倒序

1.数组多条件排序

var array = [
  { id: 2, age: 12 },
  { id: 11, age: 42 },
  { id: 2, age: 0 },
  { id: 6, age: 9 },
  { id: 20, age: 3 },
  { id: 12, age: 23 }
]
array.sort(function (a, b) {
  if (a.id === b.id) {
    // 如果id的值相等，按照age的值降序
    return b.age - a.age
  } else {
    // 如果id的值不相等，按照id的值升序
    return a.id - b.id
  }
})
console.log(array) 
// [ { id: 2, age: 12 }, { id: 2, age: 0 }, { id: 6, age: 9 },
//   { id: 11, age: 42 }, { id: 12, age: 23 },{ id: 20, age: 3 }]

十四、forEach 对数组进行遍历循环，这个方法没有返回值

语法：array.forEach(function(currentValue , index , arr){//do something}, thisValue)

currentValue : 必需。当前元素

index：可选。当前元素的索引值。

arr : 可选。当前元素所属的数组对象。

thisValue：可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

const arr = ['red', 'green', 'blue']
const result = arr.forEach(function (item, index) {
    console.log(item);  // 数组元素  red   green  blue
    console.log(index); // 索引号
  })
    //console.log(result);   //不会返回数组
    // 1. forEach 主要是遍历数组
    // 2. 参数当前数组元素是必须要写的， 索引号可选。

十五、reverse 可以将数组进行翻转 [会更改原数组]

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.reverse())

十六、splice 删除，替换，插入 [会更改原数组]

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。

语法
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
参数

start 指定修改的开始位置（从0计数）。

如果超出了数组的长度，则从数组末尾开始添加内容；

如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。

deleteCount （可选）

整数，表示要移除的数组元素的个数。

如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。

如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。

如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

item1, item2, ... （可选）要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

返回值

由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

const arr = [1, 2, 3, 4, 5, 6]
// 删除：第一个参数表示你要删除的索引，第二个参数删多少个 返回被删除的元素数组
console.log(arr.splice(2, 1)) // [ 3 ]
console.log(arr) // [ 1, 2, 4, 5, 6 ]
// 替换：4, 5 -> x
// 第一个参数，开始替换的索引位置;第二个参数要替换多少个;第三个参数要替换的值
arr.splice(2, 2, 'x') 
console.log(arr) // [ 1, 2, 'x', 6 ]
// 插入：6 -> y, 插入是在开始的元素前面添加的
arr.splice(3, 0, 'y') // [ 1, 2, 'x', 'y', 6 ]
console.log(arr)

十七、every 可以根据一个条件，判断当前数组是不是都满足这个条件

const groups = [
     { id: 1, name: 'red' },
     { id: 2, name: 'Yellow' },
     { id: 3, name: 'Green' }
]
// 判断当前数组中的每一项的id是不是都是2
const flag = groups.every(function (group) {
     return group.id === 2
})
// const flag = groups.every(group => group.id === 2)
console.log(flag) // false

十八、some 只要有一个即可，可以根据一个条件，判断当前数组是不是有一个满足这个条件

const groups = [
     { id: 1, name: 'red' },
     { id: 2, name: 'Yellow' },
     { id: 3, name: 'Green' }
]
const flag = groups.some(group => group.id === 3)
console.log(flag) // true

十九、map 表示映射对数组中的每个元素进行处理，返回新的数组数组中的元素为原始数组元素调用函数处理后的值。

回调函数的参数

1. currentValue(必须),数组当前元素的值

2. index(可选), 当前元素的索引值

3. arr(可选),数组对象本身

const groups = [
     { id: 1, name: 'red' },
     { id: 2, name: 'Yellow' },
     { id: 3, name: 'Green' }
]
const ids = groups.map(group => {
     return {
          'xx': group.id + 100
     }
})
console.log(ids) // [ { xx: 101 }, { xx: 102 }, { xx: 103 } ]
console.log(groups) // 不会改变原数组

// 对原数组元素进行平方后再赋值给新的数组
let array = [1, 2, 3, 4, 5];
let newArray = array.map((item) => {
    return item * item;
})
console.log(newArray)  // [1, 4, 9, 16, 25]

二十、filter 过滤

const groups = [
     { id: 1, name: 'red' },
     { id: 3, name: 'Yellow' },
     { id: 3, name: 'Green' }
]
// 把所有id为3的全部拿出来
const ids3 = groups.filter(group => group.id === 3 && group.name === 'Yellow')
console.log(ids3) // [ { id: 3, name: 'Yellow' } ]

二十一、find 找 -> 需要一个条件

const groups = [
     { id: 1, name: 'red' },
     { id: 2, name: 'Yellow' },
     { id: 3, name: 'Green' },
     { id: 3, name: 'blue' },
]
// 只要找到一个符合立马返回
const group = groups.find(item => item.id === 3)
console.log(group) // { id: 3, name: 'Green' }

二十二、findIndex 找某一个符合条件的索引

代码如下（示例）：

const groups = [
     { id: 1, name: 'red' },
     { id: 2, name: 'Yellow' },
     { id: 3, name: 'Green' }
]
const index = groups.findIndex(group => group.name === 'Yellow')
console.log(index) // 1

二十三、reduce 为数组提供累加器，合并为一个值

定义：reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，最终合并为一个值。

语法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数：

function(必须): 数组中每个元素需要调用的函数。

回调函数的参数

1. total(必须)，初始值, 或者上一次调用回调返回的值

2. currentValue(必须),数组当前元素的值

3. index(可选), 当前元素的索引值

4. arr(可选),数组对象本身

initialValue(可选): 指定第一次回调的第一个参数。

回调第一次执行时:

如果 initialValue 在调用 reduce 时被提供，那么第一个 total 将等于 initialValue，此时 currentValue 等于数组中的第一个值；

如果 initialValue 未被提供，那么 total 等于数组中的第一个值，currentValue 等于数组中的第二个值。此时如果数组为空，那么将抛出 TypeError。

如果数组仅有一个元素，并且没有提供 initialValue，或提供了 initialValue 但数组为空，那么回调不会被执行，数组的唯一值将被返回。

   // 数组求和 
    let sum = [0, 1, 2, 3].reduce(function (a, b) {
      return a + b;
    }, 0);
    // 6
    // 将二维数组转化为一维 将数组元素展开
    let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
      (a, b) => a.concat(b),
      []
    );
     // [0, 1, 2, 3, 4, 5]

const calendarTypeOptions = [
     { key: 'CN', display_name: 'China' },
     { key: 'US', display_name: 'USA' },
     { key: 'JP', display_name: 'Japan' },
     { key: 'EU', display_name: 'Eurozone' }
]
let obj={}
calendarTypeOptions.forEach(item=>[
     obj[item.key]=item.display_name
])
console.log(obj);
// console.log(calendarTypeOptions.reduce((prev,next)=>{
//      prev[next.key]=next.display_name
//      return prev
// },{}));

二十四、flat 数组扁平化处理

方法创建一个新数组，其中所有子数组元素以递归方式连接到特定深度。

const arr = [[1, 2], [3, 4], 5];
console.log(arr.flat()); // [ 1, 2, 3, 4, 5 ]

总结：

部分方法详细说明待续。