原生JS数组的常用方法 + 参数和返回值详细解释

Array的常用方法

1.join()方法

     数组使用什么符号拼接成字符串

let arr = [1,3,4]

arr.join('') // 134 
    如果传入的是空字符串的话也会按照空字符串的进行拼接
arr.join('-') // 1-3-4
    按照指定的字符串进行拼接
arr.join() // 1,3,4
    如果没有传递参数的话默认按照,进行拼接
arr.join('1') // 11314
    

 2.push()

      向数组尾部添加一个新值

let arr = [1,3,4]

arr.push('1') // [1,3,4,1]
向数组末尾添加一个元素

3.pop()

     从数组尾部删除一个值

let arr = [1,3,4]

arr.pop() [1,3]

从数组尾部删除一个值

4.shift()

     向数组头部删除一个值

let arr = [1,2,3]

arr.shift() // [1,2]

5.unshift()

  向数组头部添加一个值

   

let arr = [2,3]

arr.unshift(1) // [1,2,3]

6.slice()

   切割指定长度的数组

let arr = [1,3,4,5,6,7]

slice() // 截取指定长度的数组

参数1:起始位置
参数2:结束位置
    
arr.slice(1) // [3, 4, 5, 6, 7]

如果只传入一个参数时该方法会从开始位置截取到数组结束的位置

arr.slice(1,3) // [3, 4]

传入两个参数时该方法会从开始位置截取到结束位置之间的字符串(不包括结束位置处的值)

7.concat()

    合并数组

let arr = [1,3,5]
let arr2 = [2,4,6]
let arr3 = [2,4,6]

concat()

    用于拼接数组返回拼接后的数组
    拼接多个数组使用','进行分隔

let arrs = arr.concat(arr2) // [1,3,5,2,4,6]

let arrs = arr.concat(arr2, arr3) // [1,3,5,2,4,6,2,4,6]

8.indexOf()

    正序查找数组是否包含某个值并返回下标

let arr = [1,3,4]

indexOf() // 用于正序查找数组内是否包含某个值
    参数1: 查找的值
    参数2: 查找的开始位置
    返回值: 下标 / -1

arr.indexOf(4) // 2
查找某个值并返回下标

arr.indexOf(1, 1) // -1

从指定位置处查找值从下标为1处查找值为1的项 未查找到返回-1

9.lastIndexOf()

    倒序查找数组是否包含某个值并返回下标

10.includes()

    查找数组是否包含某个值并返回布尔值

let arr = [1,3,4]

includes() // 用于查找数组内是否包含某个值
    参数1: 查找的值
    参数2: 查找的开始位置
    返回值: true / false 

arr.includes(4) // true
查找某个值并返回下标

arr.includes(1, 1) // false 

从指定位置处查找值从下标为1处查找值为1的项 未查找到返回 false 

11.some()

    检查数组中是否有一项满足条件返回布尔值

let arr = [1, 3, 4]

some() // 检测数组中是否有一项符合条件

    接收一个callback()
        参数1: 当前项
        参数2: 当前下标
        参数3: 当前数组

    返回值: true / false

arr.some((row, index) => {
    return row === 1
}) // true

如果是空数值的话直接返回false
如果一项都不满足的话会返回false

12.every()

    检查数组中是否每一项满足条件返回布尔值

let arr = [1, 3, 4]

every() // 检测数组中是否每一项值都符合条件

    接收一个callback()
        参数1: 当前项
        参数2: 当前下标
        参数3: 当前数组

    返回值: true / false

arr.every((row, index) => {
    return row === 1
}) // false

arr.every((row, index) => {
    return row >= 1
}) // true

如果是空数组的话直接返回false
如果有一项都不满足都会返回false

13.forEach()

     循环数组中每一项

let arr = [1,3,4]

forEach() // 用于循环数组

    callback()
        参数1: 当前项
        参数2: 当前下标
        参数3: 当前数组

    返回值:无

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

14.map()

     基于当前数组生成新数组

const array1 = [1, 4, 9, 16];

map() // 基于当前数组返回新数组
 callback()
        参数1: 当前项
        参数2: 当前下标
        参数3: 当前数组

const map1 = array1.map(x => x * 2);

console.log(map1);
//  Array [2, 8, 18, 32]

15.filter()

     筛选符合条件的数组项,返回新数组

let arr = [1,3,4]

filter() // 用于筛选数组

    callback()
        参数1: 当前项
        参数2: 当前下标
        参数3: 当前数组

    返回值:新数组

arr.filter((item,index) => {
    return item > 1
}) // [3,4]

// 必须要有return结果才可以进行筛选,没有return结果的话将返回空数组[]

16.isArray()

     检测变量是否是一个数组

let arr = [1,2]

let b = '123'

isArray() // 检测当前变量是否是一个数组(无参数)
    
    返回值: true / false

arr.isArray() // true 
b.isArray() // false

17.reverse()

    将数组倒序排列

let arr = [ 1,3,4,5]

reverse() // 将数组倒序排列(无参数)

    返回值: 新数组

arr.reverse() // [5,4,3,1]

18.splice()

    修改数组

const months = ['Jan', 'March', 'April', 'June'];

splice() // 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
    参数1: 起始位置
    参数2: 删除的元素个数
    参数3: 替换的元素
    
    返回值: 新数组

months.splice(1, 0, 'Feb');
// ["Jan", "Feb", "March", "April", "June"]
// 新增  表示在下标为1的位置新增一个Feb

months.splice(4, 1, 'May');
// 替换下标为4的位置为 May
//  Array ["Jan", "Feb", "March", "April", "May"]

months.splice(4, 1);

// 删除 表示从下标为4的地方删除一项
//  Array ["Jan", "Feb", "March", "April"]

19.sort()

    数组排序

let arr [1,34,4,2,3]

sort() // 根据unicode码对数组中的内容进行排序

    参数: callback() // 指定倒序还是正序

arr.sort() // [1,2,3,34,4]

arr.sort((a,b) => {
    return a - b
}) // [1,2,3,4,34]

由于sort方法是根据unicode码对数组中的内容进行排序,所以我们需要指定数组中每一项的位置

20.flat()

   指定要提取嵌套数组的结构深度，默认值为 1。

let arr = [1,3,4,[1]]
let arr2 = [1, 2, [3, 4, [5, 6]]]
let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];

flat() // 指定要提取嵌套数组的结构深度，默认值为 1。

    参数1: 解析的数组深度

arr.flat() 
// Array [1, 3, 4, 1, 1, 2, Array [3]]

arr.flat(2) 
// [1, 2, 3, 4, 5, 6] 
// 解析两层数组

arr.flat(Infinity) 
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
// 使用Infinity可以展开多层任意嵌套深度的数组