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老师, 80var arrLength = arr.push(20)console.log(arr) // 1, 50, 'pink老师', 80, 20console.log(arrLength)  // 5arrLength = 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老师, 80var arrLength = arr.unshift(20)console.log(arr) // 20, 1, 50, 'pink老师', 80console.log(arrLength)  // 5arrLength = arr.unshift([1,2,4])console.log(arr) // [1,2,4], 20, 1, 50, 'pink老师', 80console.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)         // 1let 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)  // 1let 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老师，之前看过他的学习视频

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

js中数组常用的方法总结，包括ES6
原文地址:js中数组常用的方法总结,包括ES6 1.push() 后增 push()方法可以向数组后添加一个新的元素,并返回新数组的长度. 末尾添加,返回长度,改变原数组 var a = [1,2,3 ...
JS中数组迭代方法（JavaScript从入门到疯癫）
数组迭代的方法包含了以下七个( map,filter,forEach,some,every, findIndex,reduce) 目录 1.map 2.filter 3.foreach 4.数组som ...
请尽可能说出js中数组的方法，最少3个，越多越好
我接下来要把数组方法全都过一遍,顺手做个整理. 至于为什么整理这个,最近总听说面试经常会问到这个问题, 面试官灵魂发问:请尽可能说出js中数组的方法,最少3个,越多越好据可靠消息了解到,如果你回答的 ...
js中数组的增删改查遍历迭代过滤
注:最后附有源码,可自行测试,动动手印象更深刻 js中数组的增删改查.排序.遍历.迭代.过滤 1.展开语法 2.解构赋值 3.剩余解构 4.增删改 5.合并拆分 6.查 7.排序 8.遍历 9.迭代 ...
js中数组删除对象的几种方式总结
JS中数组是我们较为常用的一种数据结构,本篇文章主要是介绍js中我们常见的一些删除数组中元素的方式方法,希望可以对大家有所帮助.站长不易,感兴趣的大家可以点击查看原文支持支持. 数组中元素的删除通过删 ...
js中数组增删查改unshift、push、pop、shift、slice、indexOf、concat、join
全栈工程师开发手册 (作者:栾鹏) js系列教程1-数组操作全解 js中数组增删查改代码如下: //元素增加 var names=[]; //定义数组并初始化为空 names = ["小明 ...
js中数组定义Array
全栈工程师开发手册 (作者:栾鹏) js系列教程1-数组操作全解 js中数组定义 js中数组的定义非常简单,包含以下5中方式.不过首先要明确的是数组是Array类型的.不是基本数据类型代码如下: v ...
js中数组原型Array、自定义原型函数Array.prototype
全栈工程师开发手册 (作者:栾鹏) js系列教程1-数组操作全解 js中数组原型.自定义原型函数每个数组都包含length.prototype.constructor属性. 通过在prototype ...
js中数组反向、排序reverse、sort
全栈工程师开发手册 (作者:栾鹏) js系列教程1-数组操作全解 js中数组反向.排序数组反向使用reverse函数,数组排序使用sort函数,排序函数可以传入比较函数,也可以修改数组圆形,自定义添 ...

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