JS数组方法

dbsgw

已于 2023-01-31 09:36:57 修改

阅读量453

点赞数

分类专栏： javascript 文章标签： javascript 前端 vue.js

于 2022-08-18 16:23:15 首次发布

本文链接：https://blog.csdn.net/qq_20333303/article/details/126380216

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. at()方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。

1. js的数组不存在数组越界，访问越界直接返回：undefined

2. 可以填写负数值

入参：string/int，整数/负数

返回值：数组元素，越界返回：undefined

个人理解：数组取值的 arr[0] === arr.at(0) ,at 可以通过正负数取值而已

function f1() {
    let arr = [1, 2, 3, 4, 5]
    console.log(arr[0], arr.at(0)) // 1 1
    console.log(arr[arr.length - 1], arr.at(-1)) // 5 5
    console.log(arr[-1], arr.at(-1)) // undefined 5
    console.log(arr[-3], arr.at(-3)) // undefined 3
    console.log(arr[9], arr.at(9)) // undefined undefined
}

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

1. 链接多个数组

2. 不会改变现有数组，返回一个新数组

入参：多个数组
返回值：新数组

个人理解：合并多个数组的

function f2() {
    let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]
    let arr3 = [7, 8, 9, [10]]
    console.log([].concat(arr1, arr2, arr3)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, Array(1)]
    // 之前学的一个骚操作，可以扁平化数组
    console.log([].concat.apply([], arr3)) // [7, 8, 9, 10]
}

3.entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

入参：string/int，整数/负数

返回值：iterator迭代器

个人理解：返回成一个iterator对象（包含索引和value）

function f4() {
    let arr = [9, 10, "张三"]
    let iter = arr.entries()
    console.log(iter.next()) // { value: [ 0, 9 ], done: false }
    console.log(iter.next()) // { value: [ 1, 10 ], done: false }
    console.log(iter.next()) // { value: [ 2, '张三' ], done: false }
    console.log(iter.next()) // { value: undefined, done: true }

    let arr1 = [9, 10, "张三"]
    let iter1 = arr.entries()
    for (let iter1Element of iter1) {
        console.log(iter1Element) // [ 0, 9 ] [ 1, 10 ] [ 2, '张三' ]
    }
}

4.keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。

个人理解：返回成一个iterator对象（包含索引）

function f19() {
    let arr = [1, 7, 7, 78, 78, 7, 878, 8, 78]
    console.log(...arr.keys()) // 0 1 2 3 4 5 6 7 8

    for (const key of arr.keys()) {
        console.log(key) // 0 1 2 3 4 5 6 7 8
    }
}

5.values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。

个人理解：返回成一个iterator对象（包含value）

function f36() {
    const array1 = ['a', 'b', 'c'];
    const iterator = array1.values();

    for (const value of iterator) {
        console.log(value); // a b c
    }
}

6.every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

入参：数组

返回值：true/false

个人理解：数组的有一项不通过函数里面的判断条件就返回 false 不会继续向下循环了

function f5() {
    let arr = [9, 2, 4, 6, 4, 5]
    let arr1 = [10, 5, 6, 7, 8, 9]

    let bool1 = arr.every((value, index, array) => {
        return value < 10
    })
    console.log(bool1) // true

    let bool2 = arr1.every((value, index, array) => {
        console.log(value, index, array)
        return value < 10
    })
    console.log(bool2) // false
}

7.some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

入参：数组

返回值：true/false

个人理解：some()循环元素，元素全部满足条就是true，一个不满组就false

function f30() {
    let arr = [2, 4, 6, 8, 10]
    console.log(arr.some(ele => ele % 2 === 0)) // true
    console.log(arr.some(ele => ele % 2 === 1)) // false
}

8.forEach() 方法对数组的每个元素执行一次给定的函数。

入参：数组

注意：forEach 无法中止循环【return，break 都不能终止循环】

个人理解：就是循环遍历，感觉就是fori封装起来的

function f13() {
    let arr = [1, 2, 3, 8, 6, 4, 5, 13, 99, 100]
    arr.forEach(ele => console.log(ele))  // 1 2 3 8 6 4 ......

    let count = 0
    arr.forEach(ele => count += ele)
    console.log(count) // 241

}

9.filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

入参：数组

返回值：过滤后的新数组

个人理解：就是个过滤器，返回满足条件的值，组成一个新数组

function f7() {
    let arr = [1, 2, 3, 4, 5, 6, 7, 8]
    console.log(arr.filter(v => {
        return v % 2 == 0
    })) // [ 2, 4, 6, 8 ]
    console.log(arr.filter(v => {
        return v % 2 == 1
    })) // [ 1, 3, 5, 7 ]
}

10.map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

入参：数组

返回值：处理后的新数组

个人理解：循环处理元素，并且返回新数组，map为所欲为

function f21() {
    let arr = [5, 65, 45, 5613, 132, 5]
    console.log(arr.map(x => x + 10)) // [ 15, 75, 55, 5623, 142, 15 ]

    let arr1 = [{name: "王五"}, {name: "李四"}, {name: "张三"}]
    console.log(arr1.map(x => {
        return {username: x.name}
    })) // [ { username: '王五' }, { username: '李四' }, { username: '张三' } ]

    // 面试题：["1", "2", "3"].map(parseInt); 输出等于：我们期望输出 [1, 2, 3], 而实际结果是 [1, NaN, NaN]
    console.log(["1", "2", "3"].map(parseInt)) // [ 1, NaN, NaN ]
    console.log(["1", "2", "3"].map(x => parseInt(x))) // [ 1, 2, 3 ]
    console.log(["1", "2", "3"].map(x => parseInt(x, 10))) // [ 1, 2, 3 ]
    // 上面的情况  是 parseInt 接收的参数问题  和map的默认3个参数
}

11.reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

入参：数组

返回值：any【看你定义就返回啥】

个人理解：一个优化的循环吧，我已经写了一个reduce的使用
已经写过 reduce 文章，点击一下查看

function f25() {
    let arr = [1, 2, 3, 4, 5]

    let count = arr.reduce((pre, cur) => {
        return pre += cur
    })
    console.log(count) // 15

    let obj = arr.reduce((pre, cur) => {
        pre[cur] = 11
        return pre
    }, {})
    console.log(obj) // { '1': 11, '2': 11, '3': 11, '4': 11, '5': 11 }

}

12.reduceRight() 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

入参：数组

返回值：any【看你定义就返回啥】

个人理解：和 reduce一样，只是reduceRight()从右往左遍历处理

function f26() {
    let arr = ["1", "2", "3", "4", "5"]

    let count = arr.reduceRight((pre, cur) => {
        return pre + cur
    })
    console.log(count) // 54321

    let obj = arr.reduceRight((pre, cur) => {
        pre.push(cur)
        return pre
    }, [])
    console.log(obj) // [ '5', '4', '3', '2', '1' ]
}

13.find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

入参：数组

返回值：元素的(value) / undefined

个人理解：返回查找满足条件的第一个元素的(value)，不满足返回 undefined

function f8() {
    let arr = [1, 2, 3, 5, 8, 6, 4, 5, 13, 99]
    console.log(arr.find(ele => ele > 5)) // 8
    console.log(arr.find(ele => ele > 10)) // 13
    console.log(arr.find(ele => ele > 100)) // undefined
}

14.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

入参：数组

返回值：元素的(key) / -1

个人理解：返回查找满足条件的第一个元素的(key)，找不到返回 -1 ，和 indexOf()很像

function f37() {
    let arr = [1, 2, 3, 5, 8, 6, 4, 5, 13, 99]
    console.log(arr.findIndex(ele => ele > 10)) // 8
    console.log(arr.findIndex(ele => ele > 5)) // 4
    console.log(arr.findIndex(ele => ele > 100)) // -1
}

15.findLast() 方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回 undefined。

入参：数组

返回值：any【看你定义就返回啥】

注意：元素的(value) / undefined

个人理解：返回查找满足条件的倒叙查找的第一个元素的(value)，不满足返回 undefined

function f9() {
    let arr = [1, 2, 3, 8, 6, 4, 5, 13, 99]
    console.log(arr.findLast(ele => ele > 5)) // 99
    console.log(arr.findLast(ele => ele > 10)) // 99
    console.log(arr.findLast(ele => ele > 100)) // undefined
}

16.findLastIndex() 方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。

入参：数组

返回值：元素的(key) / -1

注意：兼容性问题, 谷歌在97 ，ie不支持，我的node 也不兼容

个人理解：返回查找满足条件的倒叙查找的第一个元素的(key)，不满足返回 -1

function f10() {
    let arr = [1, 2, 3, 8, 6, 4, 5, 13, 99, 100]
    console.log(arr.findLastIndex(ele => ele > 5)) // 9
    console.log(arr.findLastIndex(ele => ele > 10)) // 9
    console.log(arr.findLastIndex(ele => ele > 100)) // -
}

17.includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

入参：数组/字符串【字符串也可以，有这个js方法】

返回值：bool

个人理解：判断数组是否包含这个值，我记得字符串也有这个方法

function f15() {
    let arr = [1, 2, 4, 6, 7]
    console.log(arr.includes(2)) // true
    console.log(arr.includes(3)) // false
    let str = "张三"
    console.log(str.includes("三")) // true
    console.log(str.includes("1三")) // false
}

18.indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

入参：数组

返回值：不存在返回-1，存在返回其索引

个人理解：和 findIndex()很像，找数组中的元素，不存在返回-1

function f16() {
    let arr = [1, 2, 4, 6, 7, 8]
    console.log(arr.indexOf(6)) // 3
    console.log(arr.indexOf(10)) // -1

    let str = "张三"
    console.log(str.indexOf("三")) // 1
    console.log(str.indexOf("1三")) // -1


}

19.lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

入参：数组

返回值：不存在返回-1，存在返回其索引

个人理解：查找元素，查到就返回索引，查不到返回-1 ，从后向前找

function f20() {
    let arr = [1, 7, 7, 78, 78, 7, 878, 8, 78]
    console.log(arr.lastIndexOf(7)) // 5
    console.log(arr.lastIndexOf(78)) // 8
    console.log(arr.lastIndexOf(728)) // -1

    // 可以指定查找位置
    console.log(arr.lastIndexOf(7, 4)) // 2
    console.log(arr.lastIndexOf(78, 4)) // 4
}

20.flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

入参：int 默认是： 1【解析1层】，Infinity 【解析无限层】

返回值：一维数组

个人理解：js封装的扁平化数组的

function f11() {
    let arr = [1, [2, 3], [8, 6, 4, [5, [13], 99]], [100]]
    console.log(arr.flat(1)) // [1, 2, 3, 8, 6, 4, Array(3), 100]
    console.log(arr.flat(2)) // [1, 2, 3, 8, 6, 4, 5, Array(1), 99, 100]
    console.log(arr.flat(Infinity)) // [1, 2, 3, 8, 6, 4, 5, 13, 99, 100]
}

21.flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

入参：数组

个人理解：map()和1层的flat()，我感觉没啥用哈，但是还是学习一下

function f12() {
    let arr = [1, [2, 3], [8, 6, 4, [5, [13], 99]], [1001]]
    // 解析了一层 数组
    console.log(arr.flatMap((ele) => ele)) // [ 1, 2, 3, 8, 6, 4, [ 5, [ 13 ], 99 ], 1001 ]
    console.log(arr.flatMap((ele) => ele * 10)) // [ 10, NaN, NaN, 10010 ]

    // 引用官网案例哈
    let arr1 = ["it's Sunny in", "", "California"]
    console.log(arr1.map(x => x.split(" ")))  // [ [ "it's", 'Sunny', 'in' ], [ '' ], [ 'California' ] ]
    console.log(arr1.flatMap(x => x.split(" "))) // [ "it's", 'Sunny', 'in', '', 'California' ]
}

22.Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

入参：数组

返回值：any【看你定义就返回啥】

个人理解：转数组用的

function f14() {
    // 字符串转数组
    console.log(Array.from('foo')) // [ 'f', 'o', 'o' ]

    // set 转数组
    console.log(Array.from(new Set(['111', '222']))) // [ '111', '222' ]

    // map 转数组
    let map = new Map
    map.set('name', '张三')
    map.set('age', '25')
    console.log(Array.from(map)) // [ [ 'name', '张三' ], [ 'age', '25' ] ]

    // Array.from 居然还能循环 操作 着实没想到
    let arr = [1, 2, 3, 8, 6, 4, 5, 13, 99, 100]
    console.log(Array.from(arr, (x) => x * 10))  // [10,   20, 30,  80, 60,   40, 50, 130, 990, 1000]
}

23.Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

入参：数组

返回值：any【看你定义就返回啥】

个人理解：创建数组实例的，Array.from() 是转换数组的

function f22() {

    console.log(Array.of(1, 2, 3, 4, 5)) // [ 1, 2, 3, 4, 5 ]
    console.log(Array.of("张三")) // [ '张三' ]
    console.log(Array.from("张三")) // [ '张', '三' ]
    // console.log(Array.from(1, 2, 3, 4, 5))  // 报错
}

24.Array.isArray（）用于确定传递的值是否是一个 Array。

入参：any【我猜的，任意类型】

返回值：bool

个人理解：判断是否是数组

function f17() {
    let arr = []
    let str = ""
    let obj = {}

    console.log(Array.isArray(arr)) // true
    console.log(Array.isArray(str)) // false
    console.log(Array.isArray(obj)) // false
}

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

入参：数组

返回值：any【看你定义就返回啥】

注意：影响原数组

个人理解：删除数组中最后一个元素，返回删除的元素，影响原数组

function f23() {
    let arr = Array.of(1, 2, 3, "行三")
    console.log(arr) // [ 1, 2, 3, '行三' ]
    console.log(arr.pop()) // 行三
    console.log(arr) // [ 1, 2, 3 ]

}

26.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

入参：数组

返回值：any【看你定义就返回啥】

注意：影响原数组

个人理解：添加数组元素的

function f24() {
    let arr = Array.from("张三")
    console.log(arr) // [ '张', '三' ]
    console.log(arr.push(10)) // 数组长度 3
    console.log(arr.push(20)) // 数组长度 4
    console.log(arr) // [ '张', '三', 10, 20 ]
}

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

入参：数组

返回值：any【看你定义就返回啥】

注意：影响原数组

个人理解：删除第一个元素，并返回该元素的值

function f28() {
    let arr = [1, 2, 3, 4, 5]
    console.log(arr.shift()) // 1
    console.log(arr.shift()) // 2
    console.log(arr) // [ 3, 4, 5 ]
}

28.unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度（该方法修改原有数组）。

入参：数组

返回值：any【看你定义就返回啥】

注意：影响原数组

个人理解：添加元素到数组头部

function f35() {
    let arr = [1, 2, 3]
    arr.unshift(4)
    arr.unshift(5)
    console.log(arr) // [ 5, 4, 1, 2, 3 ]
}

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

入参：数组

返回值：any【看你定义就返回啥】

注意：影响原数组

个人理解：删除指定数组下标，且可以替换元素

function f32() {
    let months = ['Jan', 'March', 'April', 'June']
    // 删除 索引 1 删除 2个元素，且添加一个元素， 并返回删除的元素
    console.log(months.splice(1, 2, 'Feb')) // [ 'March', 'April' ]
    // 数组改变了，看到新添加的元素
    console.log(months) // [ 'Jan', 'Feb', 'June' ]

    let months1 = ['Jan', 'March', 'April', 'June']
    console.log(months.splice(2, 0, 'Feb', 'Feb', 'Feb')) // []
    console.log(months) // [ 'Jan', 'Feb', 'Feb', 'Feb', 'Feb', 'June' ]
}

30.copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

入参：数组

返回值：any【看你定义就返回啥】

注意：影响原数组

个人理解：理解不了，先放着

function f3() {
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    console.log(arr.copyWithin(-2)) // [6, 7, 8, 9, 7, 8, 9, 6, 7]
    console.log(arr.copyWithin(0, 2)) // [6, 7, 8, 9, 7, 8, 9, 8, 9]
    console.log(arr.copyWithin(0, 3, 1)) // [4, 5, 6, 7, 8, 9, 7, 8, 9]
}

31.fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

入参：数组

返回值：any【看你定义就返回啥】

注意：影响原数组

个人理解：把数组里面填充指定元素，可以从指定下标到另外一个下标

function f6() {
    let arr = [1, 2, 3, 4, 5]
    let arr1 = [1, 2, 3, 4, 5]
    let arr2 = [1, 2, 3, 4, 5]
    console.log(arr.fill(1)) // [ 1, 1, 1, 1, 1 ]
    console.log(arr1.fill(1, 3)) // [ 1, 2, 3, 1, 1 ]
    console.log(arr2.fill(1, 3, 4)) // [ 1, 2, 3, 1, 5 ]

}

32.reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

入参：数组

返回值：any【看你定义就返回啥】

个人理解：数组翻转

function f27() {
    let arr = [1, 2, 3, 4, 5]
    console.log(arr.reverse()) // [ 5, 4, 3, 2, 1 ]
}

33.slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

入参：数组

返回值：any【看你定义就返回啥】

个人理解：通过下标获取指定范围内的数组

function f29() {
    let arr = [1, 2, 3, 4, 5]
    console.log(arr.slice(1, 2)) // [ 2 ]
    console.log(arr.slice(2, 4)) // [ 3, 4 ]
}

34.sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的

入参：数组

返回值：any【看你定义就返回啥】

个人理解：数组排序

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

    // 数组对象排序
    let items = [{name: 'Edward', value: 21}, {name: 'Sharpe', value: 37}, {name: 'And', value: 45}, {
        name: 'The', value: -12
    }, {name: 'Magnetic'}, {name: 'Zeros', value: 37}];
    console.log(items.sort(function (a, b) {
        return (a.value - b.value)
    }))
}

35.toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

入参：数组

返回值：any【看你定义就返回啥】

个人理解：将字符串使用指定字符隔开，【有点蒙，感觉有待研究】

function f33() {
    const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
    const localeString = array1.toLocaleString('en', {timeZone: 'UTC'});

    console.log(localeString);
    let prices = ['￥7', 500, 8123, 12];
    let p = prices.toLocaleString('ja-JP', {style: 'currency', currency: 'JPY'});
    console.log(p) // ￥7,￥500,￥8,123,￥12
}

36.toString() 方法返回一个字符串，表示指定的数组及其元素

入参：数组

返回值：any【看你定义就返回啥】

个人理解：数组转字符串

function f34() {
    let arr = [1, 2, 3, 4, 5]
    console.log(arr.toString()) // 1,2,3,4,5
}

37.join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

入参：数组

返回值：any【看你定义就返回啥】

个人理解：数组链接，通过指定字符，成字符串

function f18() {
    let arr = [1, 2, 3, 4, 5]
    console.log(arr.join('')) // 12345
    console.log(arr.join(',')) // 1,2,3,4,5
    console.log(arr.join('=')) // 1=2=3=4=5

}

dbsgw

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS数组方法

入参：数组返回值：any【看你定义就返回啥】个人理解：一个优化的循环吧，我已经写了一个reduce的使用已经写过reduce文章，点击一下查看})}, {})}入参：数组返回值：any【看你定义就返回啥】注意：元素的(value) / undefined个人理解：返回查找满足条件的倒叙查找的第一个元素的(value)，不满足返回 undefined}入参：数组返回值：元素的(key) / -1注意：兼容性问题, 谷歌在97 ，ie不支持，我的node 也不兼容。...
复制链接

扫一扫