js中数组常用的API（一）之添加、删除和搜索元素

最新推荐文章于 2023-02-01 18:55:49 发布

静茹秋叶

最新推荐文章于 2023-02-01 18:55:49 发布

阅读量1.3k

点赞数 3

分类专栏： js 文章标签： javascript 数组Array 添加元素删除元素搜索元素

本文链接：https://blog.csdn.net/zhang_cherry/article/details/120676752

版权

js 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

1 数组的定义

数组是由一系列有序的元素组合在一起，通过索引可以得到元素的值。
var arr = [1,2,‘pink老师’]

2 添加和删除数组元素的方法

2.1 添加数组的方法

2.1.1 push()方法可以在数组的末尾添加一个或多个元素

目的：（1）push是给数组追加一个或多个元素
参数：（2）push()的参数是数组元素
返回值：（3）push()的返回值是数组的长度
有无变化：（4）push后，原数组也会发生变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>push方法</title>
</head>
<body>
    <script>
        var arr = [1, 50, 'pink老师', 80]
        console.log(arr) // 1, 50, pink老师, 80

        var arrLength = arr.push(20)
        console.log(arr) // 1, 50, 'pink老师', 80, 20
        console.log(arrLength)  // 5

        arrLength = arr.push([1,2,4])
        console.log(arr) // 1, 50, 'pink老师', 80, 20, [1,2,4]
        console.log(arrLength) // 6
        // 其实 由于后面又添加了一些元素，console.log(arr) 始终会打印 1, 50, 'pink老师', 80, 20, [1,2,4]
    </script>
</body>
</html>

2.1.2 unshift()方法可以在数组的开头添加一个或多个元素

目的：（1）unshift() 可以在数组的前面追加一个或多个元素
参数：（2）unshift()的参数是数组元素
返回值：（3）unshift()的返回值是数组的长度
有无变化：（4）unshift()后，原数组也会发生变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>push方法</title>
</head>
<body>
    <script>
        var arr = [1, 50, 'pink老师', 80]
        console.log(arr) // 1, 50, pink老师, 80

        var arrLength = arr.unshift(20)
        console.log(arr) // 20, 1, 50, 'pink老师', 80
        console.log(arrLength)  // 5

        arrLength = arr.unshift([1,2,4])
        console.log(arr) // [1,2,4], 20, 1, 50, 'pink老师', 80
        console.log(arrLength) // 6
        // 其实 由于后面又添加了一些元素，console.log(arr) 始终会打印 [1,2,4], 20, 1, 50, 'pink老师', 80[1,2,4]
    </script>
</body>
</html>

2.2 删除数组元素的方法

2.2.1 pop()方法删除数组的最后一个元素

删除数组的最后一个元素
pop()没有参数
返回值是被删除的元素
原数组也会发生改变

var arr = [1, 50, 'pink老师', 80]
var lastElement = arr.pop()
console.log(arr) // 1, 50, pink老师
console.log(lastElement) // 80

2.2.2 shift()方法删除数组的最前面的一个元素

删除数据的第一个元素
shift()无参数
返回值是被删除的元素
原数组也会发生改变

var arr = [1, 50, 'pink老师', 80]
var lastElement = arr.shift()
console.log(arr) // 50, pink老师, 80
console.log(lastElement) // 1

2.3 splice添加或删除数组的元素

语法：

start表示起始位置（包含在内），可以为负数，最后一个元素的索引是-1
deleteCount表示要删除的数量，当deleteCount的值为0时，表示一个也不删除，
item1(itemN):表示要添加的元素

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

splice方法说明：
目的：添加或删除多个元素
参数：见上面的引用
返回值：被删除的元素组成的数组，没有时为空数组
有无变化：原数组发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>spice方法</title>
</head>
<body>
<script>
    // 1、删除索引为2的元素及之后的所有元素
    let nameArr = ['小明', '小红', '张三', '李四', '王五']
    let removeNames = nameArr.splice(2)
    console.log(nameArr)        // ['小明', '小红']
    console.log(removeNames)    // ['张三', '李四', '王五']

    // 2、从索引为1的元素开始删除，总共删除2个元素
    let foodsArr = ['苹果', '香蕉', '葡萄', '梨子', '板栗']
    let removeFoods = foodsArr.splice(1, 2)
    console.log(foodsArr)       // ['苹果', '梨子', '板栗']
    console.log(removeFoods)    // ['香蕉', '葡萄']

    // 3、从索引为2的位置删除3个元素，然后又添加了’good Job‘元素
    let jobArr = ['job1', 'job2', 'job3', 'job4', 'job5']
    let removeJob = jobArr.splice(2, 3, 'good Job')
    console.log(jobArr)         // ['job1', 'job2', 'good Job']
    console.log(removeJob)      // ['job3', 'job4', 'job5']

    // 4、从索引为2的位置删除1个元素，然后又添加了'资治通鉴', '红与黑', '三字经'
    let booksArr = ['西游记', '红楼梦', '水浒传', '三国演义']
    let removeBook = booksArr.splice(2, 1, '资治通鉴', '红与黑', '三字经')
    console.log(booksArr)       // ['西游记', '红楼梦', '资治通鉴', '红与黑', '三字经', '三国演义']
    console.log(removeBook)     // ['水浒传']

    // 5、从索引为2的位置删除0个元素，然后添加'狗'
    let animalsArr = ['猫', '猪', '熊猫', '狮子']
    let removeAnimal = animalsArr.splice(2, 0, '狗')
    console.log(animalsArr)     // ['猫', '猪', '狗', '熊猫', '狮子']
    console.log(removeAnimal)   // []
</script>
</body>
</html>

3 搜索数组的元素

我们经常需要在数组中查找某个元素的索引，或者判断数组中是否存在某个元素。

3.1 indexOf和lastIndexOf方法

indexOf和lastIndexOf方法不会修改原数组，返回值是寻找到该元素的第一个索引值，若数组中没有该元素，则返回-1。

3.1.1 indexOf方法

参数

searchElement: 表示要查找的元素
fromIndex: 表示从第几个元素开始查找，默认是在整个数组中查找

indexOf(searchElement)
indexOf(searchElement, fromIndex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indexOf和lastIndexOf方法</title>
</head>
<body>
<script>
    let numberArr1 = [1, 34, 243, 88]
    let index1 = numberArr1.indexOf(34)
    console.log(index1)         // 1
    let index2 = numberArr1.indexOf(100)
    console.log(index2)         // -1

    // 从索引为2的位置开始寻找
    let index3 = numberArr1.indexOf(34, 2)
    console.log(index3)         // -1

    // 从索引为-1的位置开始寻找
    let index4 = numberArr1.indexOf(34, -1)
    console.log(index4)         // -1
</script>
</body>
</html>

3.1.2 lastIndexOf

lastIndexOf的用法和indexOf的用法类似，只是它会从后往前查找。

    let numberArr2 = [1, 23, 4, 13, 23, 6]
    let index5 = numberArr2.indexOf(23)  // 1
    let index6 = numberArr2.lastIndexOf(23) //4

小应用：根据API直接求一维数组的最大值和最小值，并返回索引

3.2 find和findIndex方法

ES6扩展了find和findIndex方法，它们相比于indexOf和lastIndexOf功能更加强大，因为它们能够按照条件进行筛选，从而选出符合条件的第一个元素或元素的索引值。

find和findIndex方法接收一个函数作为参数，该函数可以有三个参数。如

find(function (element, index, array){

})

其中，element表示数组的元素，index表示数组的索引，array表示数组，index和array参数可以省略。

3.2.1 find查找满足条件的第一个元素值

    let numArr = [2, 232, 23, 4, 10, 231]
    let oddNum = numArr.find(function (element) {
        return element % 2 !== 0
    })
    console.log(oddNum)  // 23

3.2.2 findIndex查找满足条件的第一个元素的索引值

    let numArr = [2, 232, 23, 4, 10, 231]
    let oddNum = numArr.findIndex(function (element) {
        return element % 2 !== 0
    })
    console.log(oddNum)  // 2

参考资料
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
《学习JavaScript数据结构与算法》
感谢：谢谢pink老师，之前看过他的学习视频

静茹秋叶

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js中数组常用的API（一）之添加、删除和搜索元素

数组的定义添加和删除数组元素的方法添加数组的方法push()方法可以在数组的末尾添加一个或多个元素unshift()方法可以在数组的开头添加一个或多个元素删除数组元素的方法pop()方法shift()方法查找数组元素的索引数组转换成字符串其他方法数组的定义数组是由一系列有序的元素组合在一起，通过索引可以得到元素的值。var arr = [1,2,‘pink老师’]添加和删除数组元素的方法添加数组的方法push()方法可以在数组的末尾添加一个或多个元素目的.
复制链接

扫一扫