【前端】数组常用的方法

js中的数组是一个重要的数据结构，提供了许多方便的操作方法。工作中用的频次会比较多，特整理以下

Array.isArray()

用来确定传递的值是否是一个数组

console.log(Array.isArray([1,2,3]));//输出👉true
console.log(Array.isArray({name:'tom',age:18}));//输出👉false

一、不会破坏原数组

1、concat()

用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

let arr = ['a','b','c','d']
let arr1 = ['e','f','g']
let newArry = arr.concat(arr1)
console.log(newArry);//输出👉['a', 'b', 'c', 'd', 'e', 'f', 'g']

2、indexOf()

获取元素在数组中第一次出现的索引，如果不存在，则返回-1

let arr = ['a','b','c','d']
console.log(arr.indexOf('a'));//输出👉 0
console.log(arr.indexOf('f'));//输出👉 -1

3、lastIndexOf()

获取元素在数组中最后一次出现的位置

let arr = ['a','b','c','d','a']
console.log(arr.lastIndexOf('a'));//输出👉 4

4、join()

将数组中的元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔

let arr = ['a','b','c','d','a']
console.log(arr.join());//输出👉 a,b,c,d,a
console.log(arr.join(''));//输出👉 abcda
console.log(arr.join('-'));//输出👉 a-b-c-d-a

5、slice()

用来截取数组
参数：①截取的起始位置(包括该位置) ②截取的结束位置(不包括该位置)

let arr = ['a','b','c','d','a']
console.log(arr.slice(1,4));//输出👉 ['b', 'c', 'd']
console.log(arr.slice(-3));//输出👉  ['c', 'd', 'a']

6、includes()

用来判断一个数组是否包含一个指定的值,如果包含则返回true，否则返回false

let arr = [4,5,2,1,6,3]
console.log(arr.includes(2));//输出👉 true
console.log(arr.includes(0));//输出👉 false

二、会破坏原数组

1、push()

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

let arr = ['a','b','c','d','a']
console.log(arr.push('e'));//输出👉 6

2、pop()

从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

let arr = ['a','b','c','d','a']
console.log(arr.pop('a'));//输出👉 a
console.log(arr);//删除后数组的输出👉 ['a', 'b', 'c', 'd']

3、unshift()

将一个或多个元素添加到数组的开头，并返回该数组的新长度。

let arr = ['a','b','c','d','a']
console.log(arr.unshift('e','f'));//输出👉 7

4、shift()

从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

let arr = ['a','b','c','d','a']
console.log(arr.shift())//输出👉 a
console.log(arr);//删除后数组的输出👉 ['b', 'c', 'd', 'a']

5、splice()

可以删除、插入、替换数组中的元素
参数：①删除的起始位置 ②删除的数量 ③要插入的元素

//删除
let arr = ['a','b','c','d','a']
let res = arr.splice(1,2)
console.log(res);//返回被删除的元素 👉 ['b', 'c']
//插入
let arr1 = ['e','f','g']
let res1 = arr1.splice(1,0,'h')
console.log(arr1);//索引为1的位置插入h 👉 ['e', 'h', 'f', 'g']
//替换
let arr2 = ['a','d','c']
let res2 = arr2.splice(1,1,'b')
console.log(arr2);//索引为1的位置删除1并插入b,替换元素 👉  ['a', 'b', 'c']

6、reverse()

将数组中元素的位置颠倒，并返回该数组。

let arr = ['a','b','c','d']
console.log(arr.reverse());//输出👉  ['d', 'c', 'b', 'a']

三、高阶函数数组方法

1、sort()

对数组的元素进行排序，并返回数组

let arr = [4,5,2,1,6,3]
console.log(arr.sort());//输出👉 [1, 2, 3, 4, 5, 6]

需要注意：sort默认会按照Unicode编码进行排序，所以如果直接通过sort对数字进行排序；可能会得到一个不正确的结果，如👇

let arr1 = [4,5,2,1,6,3,11]
console.log(arr1.sort());
//输出👉 [1, 11, 2, 3, 4, 5, 6] -->这里的数字11显然是最大的，应该在末尾

解决以上问题：可以传递一个回调函数作为参数，通过回调函数来指定排序规则
(a, b) => a - b 升序排列
(a, b) => b - a 降序排列

let arr1 = [4,5,2,1,6,3,11]
console.log(arr1.sort((a,b)=>a-b));//输出👉 [1, 2, 3, 4, 5, 6, 11]
console.log(arr1.sort((a,b)=>b-a));//输出👉 [11, 6, 5, 4, 3, 2, 1]

2、forEach()

用来遍历数组 类似于for循环，无返回值
参数：①item当前元素 ②index当前元素的索引 ③Array被遍历的数组

let arr = ['a', 'b', 'c']
arr.forEach((item,index,Array) => console.log(item,index,Array))
//输出👇
//a  0  ['a', 'b', 'c']
//b  1  ['a', 'b', 'c']
//c  2  ['a', 'b', 'c']

3、filter()

将数组中符合条件的元素保存到一个新数组中返回，不会影响原数组，返回新数组

let arr = [1, 2, 3, 4, 5, 6, 7, 8]
let newArr = arr.filter(item => item > 3)
console.log(newArr);//输出👉 [4, 5, 6, 7, 8]

4、map()

根据当前数组生成一个新数组，不会影响原数组,返回新数组

let arr = [1, 2, 3, 4]
let newArr = arr.map(item => item * 2)
console.log(newArr);//输出👉 [2, 4, 6, 8]

5、reduce()

可以用来将一个数组中的所有元素整合为一个值，不会影响原数组,返回新数组
参数：①回调函数，通过回调函数来指定合并的规则 ②可选参数，初始值

let arr = [1, 2, 3, 4]
let newArr = arr.reduce((pre, cur) =>  pre + cur , 0)
console.log(newArr);//输出👉 10
//累加计算：回调函数中-->pre为上一次相加的结果，cur为当前元素，初始值为0

6、every()

判断数组中是否所有的元素都满足指定的条件，所有的元素必须都满足才返回true，如果有一个不满足则为false

let arr = [1, 2, 3, 4]
let newArr = arr.every(item => item < 5)
console.log(newArr);//输出👉 true
let newArr1 = arr.every(item => item < 3)
console.log(newArr1);//输出👉 false

7、some()

查找数组中是否有满足条件的元素，如果查到第一个满足条件的就终止循环，返回为Boolean类型的值

let arr = [1, 2, 3, 4]
let newArr = arr.some(item => item % 2 === 0)
console.log(newArr);//输出👉 true
//备注：如果用一个空数组进行测试，在任何情况下它返回的都是false。
let arr1 = []
let newArr1 = arr1.some(item => item % 2 === 0)
console.log(newArr1);//输出👉 false

8、find()

用于查找满足条件的第1个元素，并返回；如果没有满足条件的元素则返回undefined

let arr = [1, 2, 3, 4]
let newArr = arr.find(item => item > 2)
console.log(newArr);//输出👉 3

9、findIndex()

用于查找数组中满足条件的第一个元素的索引；若没有找到对应元素则返回 -1

let arr = [1, 2, 3, 4]
let newArr = arr.findIndex(item => item > 2)
console.log(newArr);//输出👉 索引为2

拓展：findLastIndex()
用于查找数组中满足条件的最后一个元素的索引；若没有找到对应元素则返回 -1

10、findLast()

用于查找数组中满足条件的最后一个元素的值；若没有找到对应元素则返回 undefined

let arr = [1, 2, 3, 4]
let newArr = arr.findLast(item => item > 2)
console.log(newArr);//输出👉 4

最后：👏👏😊😊😊👍👍