JS数组中常用的方法(面试常问)

改变原数组的方法

1. push() 末尾添加元素

• 描述：数组中添加一个值
• 返回：返回添加后的数组的长度

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

2.pop() 末尾删除元素

• 描述：删除数组中最后一个值
• 返回：返回删除的值

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

3.shift() 头部删除元素

• 描述：删除数组中的第一个值
• 返回：返回删除的值

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

4. unshift() 头部插入元素

• 描述：在数组头部插入一个或多个元素
• 返回：插入后的数组的长度

const arr = [1,2,3,4]
const result = arr.unshift(9) // 也可以插入多个arr.unshift(9,8,7)
console.log(arr) // [9,1,2,3,4]
console.log(result) // 5

5.reverse() 反转数组

• 描述：反转数组
• 返回：反转后的数组

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

6.sort() 数组排序

• 描述：数组排序
• 返回：排序后的数组

const arr1 = [2,34,1,45,8,90]
const result1 = arr1.sort((a,b) => a-b) // 从小到大

const arr2 = [2,34,1,45,8,90]
const result2 = arr2.sort((a,b) => b-a) // 从大到小

console.log(result1) // [1,2,8,34,45,90]
console.log(result2) // [90,45,34,8,2,1]

7.splice() 截取数组

• 描述：截取数组并且可以插入新的值
• 返回：截取的数组

使用：三个参数splice(index, howmany, item1,item2...)

1. index是从第几个下标开始截取
2. howmany截取几个
3. items在截取的位置插入数据

const arr = [1,2,3,4,5]
const result1 = arr.splice(1,2) //从下标1开始截取2个
console.log(result1) // [2,3]

const arr2 = [1,2,3,4,5]
const result2 = arr2.splice(1,2,45,67)
console.log(arr2) // [1,45,67,4,5]
console.log(result2) // [2,3]

不改变原数组的方法

1.slice() 截取数组

• 描述：截取数组
• 返回：截取的数组

const arr = [10,20,30,40,50]
const result = arr.slice(1,3) // 截取下标[1,3) 不包括3
console.log(result) // [20,30]

2.concat() 连接数组

• 描述：连接数组
• 返回：连接后的数组

const arr = [1,2,3]
const result = arr.concat([10,20])
console.log(result) // [1,2,3,10,20]

3.join() 数组转为字符串

• 描述：数组转为字符串
• 返回：返回字符串

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

4.toString() 数组转为字符串

• 描述：转为字符串 等同于join()
• 返回：返回字符串

const arr = [1,2,3]
const result = arr.toString() // '1,2,3'

5.indexOf() 头部开始元素第一次出现的位置

• 描述：从头部开始找出某个元素第一次出现的位置
• 返回：返回该元素的下标，没有返回-1

const arr = [1,2,3,4]
const result = arr.indexOf(3) // 2
const result2 = arr.indexOf(7) // -1

6.lastIndexOf() 尾部开始查找元素第一次出现的位置

• 描述：从尾部开始找出某个元素第一次出现的位置
• 返回：该元素的下标，没有返回-1

const arr = [2,3,4,4,5,6]
const result = arr.lastIndexOf(4) // 3

7.forEach() 遍历循环数组

• 描述：遍历循环数组
• 返回：无

使用：forEach((item,index,arr)=>{console.log()})

1. item 数组中每一项
2. index 下标
3. 该数组

const arr = [1,2,3,4]
arr.forEach(item => {console.log(item)})

8.map() 遍历映射数组

• 描述：映射数组
• 返回：映射完后的数组

使用：map((item,index,arr)=>{console.log()})

1. item 数组中的每一项
2. index 下标
3. arr 该数组

const arr = [10,20,30,40]
const result = arr.map(item => {
    return item + 1
})
console.log(result) // [11,21,31,41]

9.filter() 过滤数组

• 描述：过滤数组
• 返回：过滤后的数组

使用：filter((item,index,arr)=>{console.log()})

1. item 数组中的每一项
2. index 下标
3. arr 该数组

const arr = [12,2,34,5,78]
const result = arr.filter(item => {
    return item > 10
})
console.log(result) // [12,34,78]

10. some() 判断数组中是否有满足条件的元素

• 描述：判断数组中是否有满足条件的元素
• 返回：只要有一项满足返回true，否则返回false

使用：some((item,index,arr)=>{console.log()})

1. item 数组中的每一项
2. index 下标
3. arr 该数组

const arr = [1,23,34,-12,4]
const result = arr.some(item => {
    return item < 0
})
console.log(result) // true

11.every() 判断数组中是否每一项都满足条件

• 描述：判断数组中是否每一项都满足条件
• 返回：所有项都满足返回true，否则返回false

使用：every((item,index,arr)=>{console.log()})

1. item 数组中的每一项
2. index 下标
3. arr 该数组

const arr = [1,23,34,-12,4]
const result = arr.every(item => {
    return item < 0
})
console.log(result) // false
const result2 = arr.every(item => {
    return typeof item == 'number' //判断每一项是不是都是number类型
})
console.log(result2) // true

12. find() 找出数组中满足条件的第一个元素

• 描述：找出数组中满足条件的第一个元素
• 返回：返回这个元素值

使用：find((item,index,arr)=>{console.log()})

1. item 数组中的每一项
2. index 下标
3. arr 该数组

const arr = [1,23,34,-12,4]
const result = arr.find(item => {
    return item > 10
})
console.log(result) // 23

13. includes() 数组中是否包含元素

• 描述：数组中是否含有某个元素
• 返回：包含返回true，没有返回false

const arr = [1,2,3,5]
const result = arr.includes(4) // false

14. reduce() 超级重要 超级重要

• 描述：叠加器
• 返回：叠加后的结果

使用：reduce((prev,item,index,arr)=>{console.log()},initVal)

1. prev 回调初始值，如果设置了initVal则initVal为初始值，没有的话默认数组第一个为初始值
2. item 当前元素，如果设置了initVal则从第一个元素开始，没有设置的话prev为第一个元素,item从第二个元素开始
3. index 为item的下标
4. arr 为该数组
5. initVal 初始值

const arr = [1,2,3,4,5]
const result = arr.reduce((prev,item)=>{
    return prev + item
})
console.log(result) // 15 这就是累加器1+2+3+4+5

const result2 = arr.reduce((prev,item)=>{
    return prev + item
},10)
console.log(result2) // 25 初始值为10 所以就是10+1+2+3+4+5

// 数组去重的时候可以使用 特好用
const arr2 = [1,23,34,23,1,4,6,4,67,6,98,4]
const result3 = arr2.reduce((prev,item)=>{
    return prev.includes(item) ? prev : [...prev,item]
},[])
console.log(result3) // [1, 23, 34, 4, 6, 67, 98]

15.Array.from()

• 描述：将伪数组或者可迭代对象转为数组
• 返回：转换后的数组

使用：Array.from(arrLike,mapFn,thisArg)

1. arrLike：就是伪数组或者可迭代对象
2. mapFn：遍历数组中的每个值，可以对每一项单独处理
3. thisArg： mapFn中的this
   通常用来转换伪数组arguments为数组，也可以用来遍历数组处理数据

// 1. 将伪数组处理为数组
const fun = function(){
    const args = Array.from(arguments)
    console.log(args)
}
fun(1,2,3) // [1,2,3]

// 2. 将Set Map可迭代对象转为数组
console.log(Array.from(new Set([1,2,3]))) // [1,2,3]
console.log(Array.from(new Set('123'))) // ['1','2','3']

const maps = new Map()
maps.set('a',1)
maps.set('b',2)
console.log(Array.from(maps)) // [['a',1],['b',2]]

// 3. 可以拷贝数组
// 浅拷贝
const arr = [1,2,3]
const copyarr = Array.from(arr)
console.log(copyarr) // [1,2,3]
// 深拷贝
function deepCopy(val){
    return Array.isArray(val) ? Array.from(val, v => deepCopy(v)) : val
}
const deeparr = [1,2,[3,4],5]
const deeparrcopy = deepCopy(deeparr)
console.log(deeparrcopy) // [1,2,[3,4],5]

// 4. 生成空数组
const length = 3
//{length}相当于{length:5}可以理解成伪数组中的length
const arr = Array.from({length}, v => null) 
console.log(arr) // [null, null, null]

// 5. 生成序列数
const num = 5
const arr = Array.from({ length:num }, (v,index) => index)
console.log(arr) // [0,1,2,3,4]