数组方法大全
数组是做项目中最常见的数据返回的形式，因此我们在处理数组数据的时候，就需要用到数组的方法。数组方法有很多种，我们在处理数据的时候，就得考虑用数组那个方法更简便的实现效果。这篇文章就来总结一下数组的常用的方法，记住最常用方法即可，有些方法了解就行。
push()——末尾追加
- 语法：arr.push(item1,item2,...,itemN)
- push()方法：在数组尾部添加一个或者多个数组元素。
- 原数组会发生改变。
- 该方法有返回值，返回值是添加元素之后的数组长度。
push()方法案例
<script>
let arr = [1, 2, 3, 4]
let arr1 = arr.push(5, 6, 7)
console.log(arr) // [1,2,3,4,5,6,7]
console.log(arr1) // 7
</script>
push.png
unshift()——首位追加
- 语法：arr.unshift(item1,item2,...,itemN)
- unshift()方法：在数组的头部添加一个或者多个数组元素。
- 原数组会发生改变。
- 该方法有返回值，返回值是添加元素之后的数组长度。
unshift()方法案例
<script>
let arr = [1, 2, 3, 4]
let arr1 = arr.unshift(5, 6, 7)
console.log(arr) // [5,6,7,1,2,3,4]
console.log(arr1) // 7
</script>
unshift.png
pop()——末尾删除
- 语法：arr.pop()
- pop()方法：在数组的尾部删除一个数组元素。
- 原数组会发生改变。
- 该方法有返回值，返回值是这个被删除的数组元素。
pop()方法案例
<script>
let arr = [1, 2, 3, 4]
let arr1 = arr.pop()
console.log(arr) // [1,2,3]
console.log(arr1) // 4
</script>
pop.png
shift()——首位删除
- 语法：arr.shift()
- shift()方法：在数组的头部删除一个数组元素。
- 原数组会发生改变。
- 该方法有返回值，返回值是这个被删除的数组元素。
shift()方法案例
<script>
let arr = [1, 2, 3, 4]
let arr1 = arr.shift()
console.log(arr) // [2,3,4]
console.log(arr1) // 1
</script>
shift.png
slice()——截取
- 语法：arr.slice(startIndex,endIndex)
- slice()方法：截取数组元素。
- 参数：传的参数表示数组元素的索引值。不传参数，截取整个数组；传一个参数，从start索引开始截取，一直到数组结束；传两个参数，从start索引开始截取，一直到end索引结束，不包括end索引上的数组元素！！！
- 原数组不会发生改变。
- 该方法有返回值，返回值是截取的数组元素组成的新数组。
slice()方法案例
<script>
let arr = ['apple', 'banana', 'orange', 'lemon']
console.log('=====不传参数=====')
let arr1 = arr.slice()
console.log(arr) // ['apple', 'banana', 'orange', 'lemon']
console.log(arr1) // ['apple', 'banana', 'orange', 'lemon']
console.log('=====传一个参数=====')
let arr2 = arr.slice(1)
console.log(arr) // ['apple', 'banana', 'orange', 'lemon']
console.log(arr2) // ['banana', 'orange', 'lemon']
console.log('=====传两个参数=====')
let arr3 = arr.slice(0, 2)
console.log(arr) // ['apple', 'banana', 'orange', 'lemon']
console.log(arr3) // ['apple', 'banana']
</script>
slice.png
splice()——增加或者删除数组元素
- 语法：arr.splice(startIndex,howmany,item1,…,itemN)
- splice()方法：增加或者删除数组元素。
- 参数和返回值：不传参数，不增加也不删除，原数组不改变，返回空数组；传一个参数，从startIndex索引开始删除，一直到数组结束，原数组改变，返回刚刚被删除的数组元素组成的新数组；传两个参数，第一个参数是开始删除的索引值，第二个参数是要删除的个数，原数组改变，返回刚刚被删除的数组元素组成的新数组；传三个或者多个参数，第一个参数表示开始删除的索引值，第二个参数表示要删除的个数，第三个以及三个之后的参数表示要新增的数组元素，原数组改变，返回刚刚被删除的数组元素组成的新数组。
splice()方法案例
- 不传参数——不传参数，不增加也不删除，原数组不改变，返回空数组。
let arr = ['apple', 'banana', 'orange', 'lemon']
console.log('=====不传参数=====')
let arr1 = arr.splice()
console.log(arr) // ['apple', 'banana', 'orange','lemon']
console.log(arr1) // []
splice1.png
- 传一个参数——从startIndex索引开始删除，一直到数组结束，原数组改变，返回刚刚被删除的数组元素组成的新数组。
let arr = ['apple', 'banana', 'orange', 'lemon']
console.log('=====传一个参数=====')
let arr2 = arr.splice(1)
console.log(arr) // ['apple']
console.log(arr2) // ['banana', 'orange', 'lemon']
splice2.png
- 传两个参数——第一个参数是开始删除的索引值，第二个参数是要删除的个数，原数组改变，返回刚刚被删除的数组元素组成的新数组。
let arr = ['apple', 'banana', 'orange', 'lemon']
console.log('=====传两个参数=====')
let arr3 = arr.splice(0, 2)
console.log(arr) // ['orange', 'lemon']
console.log(arr3) // ['apple', 'banana']
splice3.png
- 传三个或者多个参数——第一个参数表示开始删除的索引值，第二个参数表示要删除的个数，第三个以及三个之后的参数表示要新增的数组元素，原数组改变，返回刚刚被删除的数组元素组成的新数组。
let arr = ['apple', 'banana', 'orange', 'lemon']
console.log('=====传三个参数=====')
let arr4 = arr.splice(1, 2, 'mango')
console.log(arr) // ['apple', 'mango', 'lemon']
console.log(arr4) // ['banana', 'orange']
splice4.png
let arr = ['apple', 'banana', 'orange', 'lemon']
console.log('=====传多个参数=====')
let arr5 = arr.splice(2, 1, 'mango', 'watermelon')
console.log(arr) // ['apple', 'banana', 'mango' 'watermelon', 'lemon']
console.log(arr5) // ['orange']
splice5.png
reverse()——翻转数组
- 语法：arr.reverse()
- reverse()方法：翻转数组。
- 原数组会发生改变。
- 该方法有返回值，返回值是翻转之后的数组。
reverse()方法案例
<script>
let arr = ['apple', 'banana', 'orange', 'lemon']
let arr1 = arr.reverse()
console.log(arr) // ['lemon', 'orange', 'banana', 'apple']
console.log(arr1) // ['lemon', 'orange', 'banana', 'apple']
</script>
reverse.png
sort()——数组排序
- 语法：arr.sort(sortfunction)
- sort()方法：数组排序。
- 原数组会发生改变。
- 该方法有返回值，返回值是排序之后的数组。
sort()方法案例
- 没有参数的情况，按照数组元素首字母的顺序进行排序
<script>
let arr = [11, 111, 2, 12, 15, 13, 445, 5, 33, 7]
let arr1 = arr.sort()
console.log(arr) //[11, 111, 12, 13, 15, 2, 33, 445, 5, 7]
console.log(arr1) //[11, 111, 12, 13, 15, 2, 33, 445, 5, 7]
</script>
sort1.png
- 有参数的情况，参数是一个函数，a-b 从小到大排序。
<script>
let arr = [11, 111, 2, 12, 15, 13, 445, 5, 33, 7]
let arr1 = arr.sort(function(a, b) {
return a - b //从小到大
})
console.log(arr) // [2, 5, 7, 11, 12, 13, 15, 33, 111, 445]
console.log(arr1) // [2, 5, 7, 11, 12, 13, 15, 33, 111, 445]
</script>
sort2.png
- 有参数的情况，参数是一个函数，b-a 从大到小排序。
<script>
let arr = [11, 111, 2, 12, 15, 13, 445, 5, 33, 7]
let arr1 = arr.sort(function(a, b) {
return b - a //从大到小
})
console.log(arr) // [445, 111, 33, 15, 13, 12, 11, 7, 5, 2]
console.log(arr1) // [445, 111, 33, 15, 13, 12, 11, 7, 5, 2]
</script>
sort3.png
concat()——拼接数组
- 语法：arr.concat(arr1)
- concat()方法：拼接数组。
- 原数组不会发生改变。
- 该方法有返回值，返回值是拼接之后的数组。
concat()方法案例
<script>
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = arr1.concat(arr2)
console.log(arr3) //[1,2,3,4,5,6]
console.log(arr1, arr2) // [1,2,3] [4,5,6]
</script>
concat.png
join()——拆分数组
- 语法：arr.join('指定分隔符')
- join()方法：拆分数组，将每个数组元素转换成字符串，通过指定的分隔符进行分隔，最后连接成一个字符串
- 原数组不会发生改变。
- 该方法有返回值，返回值是一个新的字符串。
join()方法案例
<script>
let arr = ['a', 'p', 'p', 'l', 'e']
let str1 = arr.join('') //以空字符分隔
let str2 = arr.join('-') //以-分隔
let str3 = arr.join() //默认以，分隔
console.log(arr)
console.log(str1) //apple
console.log(str2) //a-p-p-l-e
console.log(str3) //a,p,p,l,e
</script>
join.png
indexOf()——查找数组元素
- 语法：arr.indexOf(value,startIndex)
- indexOf()方法：查找元素在数组中第一次出现的位置，如果存在，则返回该元素在数组中的索引；如果不存在，则返回-1。
- 原数组不会发生改变。
indexOf()方法案例
- 传一个参数，如果存在，则返回该元素在数组中的索引；如果不存在，则返回-1。
<script>
let arr = ['apple', 'banana', 'orange']
console.log(arr.indexOf('banana')) //1
console.log(arr.indexOf('lemon')) //-1
</script>
indexOf1.png
- 传两个参数，第一个参数是需要查找的元素，第二个参数是从第几个开始查找的索引值，查找元素从第startIndex索引开始一次出现的位置，如果存在，则返回元素在数组中的索引值；如果不存在，则返回-1。
<script>
let arr = [1, 2, 5, 4, 3, 1, 2]
console.log(arr.indexOf(1, 3)) // 5
console.log(arr.indexOf(2, 0)) // 1
console.log(arr.indexOf(2, 2)) // 6
console.log(arr.indexOf(5, 3)) // -1
</script>
indexOf2.png
forEach()——遍历数组
forEach()方法的功能是循环遍历数组中的每一个元素；
forEach()方法会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写
item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组
js代码块
<script>
var arr = ['张三', '李四', '王五']
arr.forEach(function(item, index, arr) {
console.log(item, index, arr)
})
</script>
forEach.png
some()
判断数组中是否存在满足指定条件的数组元素，只要有一个数组元素满足指定条件就返回true
some()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写
item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组
js代码块
<script>
var arr = [100, 200, 300, 400]
var newArr = arr.some(function(item, index, arr) {
return item > 200//满足数组元素大于200
})
var newArr1 = arr.some(function(item, index, arr) {
return item > 400//满足数组元素大于400
})
console.log(newArr)//返回true
console.log(newArr1)//返回false
</script>
some.png
every()
判断数组中是否存在满足指定条件的数组元素，只有所有数组元素都满足指定条件才会返回true，只要有一个数组元素不满足条件都会返回false
every()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写
item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组
js代码块
<script>
var arr = [100, 200, 300, 400]
var newArr1 = arr.every(function(item, index, arr) {
return item < 200//满足数组元素小于200
})
var newArr2 = arr.every(function(item, index, arr) {
return item <= 400//满足数组元素小于等于400
})
console.log(newArr1)//返回false
console.log(newArr2)//返回true
</script>
every.png
filter()
筛选出满足指定条件的数组元素，并且返回由满足指定条件的数组元素组成的新数组
filter()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写
item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组
js代码块
<script>
var arr = [100, 200, 300, 400]
var arr = [100, 200, 300, 400]
var newArr = arr.filter(function(item) {
return item < 400//满足数组元素小于400
})
console.log(newArr)//返回[100,200,300]
</script>
filter.png
map()
根据指定的条件来处理数组元素，并且返回处理之后的数组元素组成的新数组
map()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写
item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组
js代码块
<script>
var arr = [100, 200, 300, 400]
var newArr = arr.map(function(item) {
return item * 2 //将数组元素乘以2
})
var newArr1 = arr.map(function(item) {
return item / 2 //将数组元素除以2
})
console.log(newArr) //返回[200,400,600,800]
console.log(newArr1) //返回[50，100，150，200]
</script>
map.png
reduce()
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce()方法会自己遍历数组，它会接收一个函数；这个函数包含四个形参，分别为：preval，item, index, array, 用不到时可以不写
preval代表上一次调用回调函数的返回值，item 表示该数组中的当前正在处理的数组元素，index 表示该数组中的当前正在处理的数组元素的下标，array 表示原数组
注意: reduce() 对于空数组是不会执行回调函数的。
js代码块
<script>
var arr = [100, 200, 300, 400]
var newArr = arr.reduce(function(preval, item, index, arr) {
console.log(preval, item, index, arr)
return preval + item
})
console.log(newArr)
</script>
reduce.png
Array.of()——创建数组
- 语法：Array.of(item1,item2,...,itemN)
- Array.of()方法：创建数组，将参数中所有的值作为数组元素组成一个数组作为返回值；如果参数为空，则返回空数组。
- 参数的值可以不用为同一类型。
<script>
console.log(Array.of()) //[]
console.log(Array.of(1, 2, 3, 4, 5)) //[1,2,3,4,5]
</script>
Array.of.png
find()
- 查找数组中符合条件的元素，若有多个符合条件的元素，则返回第一个符合条件的元素。
<script>
let arr = [1, 2, 3, 4, 5]
let arr1 = arr.find(item => item > 2)
console.log(arr1) //3
</script>
findIndex()
- 查找数组中符合条件的元素索引，如果有多个符合条件的元素，则返回第一个满足条件的元素索引。
<script>
let arr = [1, 2, 3, 4, 5]
let arr1 = arr.findIndex(item => item > 2)
console.log(arr1) //2
</script>
includes()——检测数组中是否包含一个值
- 语法：arr.includes(value,startIndex)
- includes()方法：检测数组中是否包含一个值，如果包含则返回true，如果不包含则返回false。
- 参数：传一个参数，检测数组中是否包含一个值；传两个值，检测数组从startIndex索引开始到数组结束是否存在value值；如果存在则返回true，如果不存在则返回false。
<script>
let arr = [1, 2, 3, 4, 5]
console.log(arr.includes(2)) //true
console.log(arr.includes(7)) //false
console.log(arr.includes(3, 1)) //true
console.log(arr.includes(3, 3)) //false
</script>
扩展运算符...
- 拼接合并数组
<script>
let arr = [1, 2, 3]
let arr1 = [4, 5, 6]
let arr2 = [...arr, ...arr1]
console.log(arr2) //[1,2,3,4,5,6]
</script>
扩展运算符.png
