文字目录
数组的20种常用方法
💡 Tips:本篇文章将详细介绍20个数组的常用方法供大家学习
1.push()
push()
- 语法: 数组.push(数据)
- 作用:向数组的末尾追加数据
- 返回值:追加数据之后,返回数组的新长度
var arr = [100, 200, 300, 400, 500]
console.log("原始数组", arr)
var res = arr.push("新来的")
console.log("push后", arr)
console.log("返回值", res)
2.pop()
pop() 方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。
- 语法 数组.pop()
- 作用 删除数组的最后一个数据
- 返回值 被删除的数据
var arr = [100, 200, 300, 400, 500]
console.log("原始数组", arr)
var res = arr.pop()
console.log("pop后", arr)
console.log("返回值", res)
3.unshift()
unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度。
- 语法 数组.unshift()
- 作用 向数组的最前面插入一个数据
- 返回值 修改后的新数组的长度
var arr = [100, 200, 300, 400, 500]
console.log("原始数组", arr)
var res = arr.unshift("新来的")
console.log("unshift后", arr)
console.log("返回值", res)
4.shift()
shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
- 语法 数组.shift()
- 作用 删除数组里面的第一个数据
- 返回值 被删除的数据
var arr = [100, 200, 300, 400, 500]
console.log("原始数组", arr)
var res = arr.shift()
console.log("shift后", arr)
console.log("返回值", res)
5.reverse()
reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。
- 语法 数组.reverse()
- 作用 反转数组
- 返回值 反转以后的数组
var arr = [100, 200, 300, 400, 500]
console.log("原始数组", arr)
var res = arr.reverse()
console.log("reverse后", arr)
console.log("返回值", res)
6.sort()
sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列时构建的
- 语法
-> 数组.sort()
排序的时候按照 unicode 编码进行排序
0 - 9 48-57
A - Z 65-90
a - z 97-122
-> 数组.sort( function(a, b) { return a-b } )
按照数字大小进行升序排序
-> 数组.sort( function(a,b) { return b-a } )
按照数字大小进行降序排序
- 作用 排序
- 返回值: 排序好的数组
var arr = [1, 2, 100, 3, 20, 201, 400, 101]
// -> 数组.sort()
// 排序的时候按照 unicode 编码进行排序
// 0 - 9 48-57
// A - Z 65-90
// a - z 97-122
arr.sort( function(a, b) { return a-b } )
// 按照数字大小进行升序排序
arr.sort( function(a,b) { return b-a } )
var arr = [1, 2, 100, 3, 20, 201, 400, 101]
var arr = ["apple", "Bana", "orange"]
console.log("原始数组", arr)
var res = arr.sort()
// 升序
var res = arr.sort(function (a, b) {
return a - b
})
// 降序
var res = arr.sort(function (a, b) {
return b - a
})
console.log("sort后", arr)
console.log("返回值", res)
7.splice()
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
- 语法
-> 数组.splice(开始索引, 多少个)
-> 数组.splice(开始索引, 多少个, 插入的数据1, 插入的数据2…)
- 作用 截取数组部分内容,并选择性插入内容
取 从开始索引的位置开始,向后截取指定个数的内容
- 返回值 必然是一个新数组
面包含截取出来的部分
// splice 实现删除
var arr = [100, 200, 300, 400, 500, 600, 700]
console.log("原始数组", arr)
var res = arr.splice(2, 3)
// 删除 数组最后一个
var res = arr.splice(arr.length - 1, 1)
// 删除 数组的第一个
var res = arr.splice(0, 1)
console.log("splice后", arr)
console.log("返回值", res)
// splice实现插入
var arr = [100, 200, 300, 400, 500, 600, 700]
console.log("原始数组", arr)
// 插入 -> 数组.splice(开始索引, 多少个, 插入的数据1, 插入的数据2....)
var res = arr.splice(2, 3, "新来的")
var res = arr.splice(2, 0, "新来的")
// 实现 在数组的最后一个插入一项
var res = arr.splice(arr.length, 0, "新来的")
// 实现 在数组的开始位置插入一项
var res = arr.splice(0, 0, "新来的")
console.log("修改后", arr)
console.log("返回值", res)
8.concat()
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
- 语法 原始数组.concat(数组1, 数组2, … )
- 作用 进行数组拼接,把()中的数据拼在数组后面
- 返回 拼接好的数组
- 和 push的区别
1. 是否修改原数组
数组
concat 不修改原数组
2. 插入数据
把数据插入
concat 如果遇到数组,会把数组拆开,把每一项依次放入
var arr = [100, 200, 300, 400, 500]
var res = arr.concat("新来的")
arr.push("新来的")
console.log(arr)
console.log("修改后", res)
// concat 和 push的区别
arr.push(["新来的1", "新来的2"]) // [100, 200, 300, 400, 500 , ['新来的1' , '新来的2'] ]
console.log(arr)
var res = arr.concat(["新来的1", "新来的2"])
console.log(res)
9.join()
join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串,用逗号或指定的分隔符字符串分隔。如果数组只有一个元素,那么将返回该元素而不使用分隔符。
- 语法 数组.join(‘连接符’)
- 作用 使用连接符,把数组里面的每一个数据都连接起来,变成一个字符串, (连接符不写 默认 逗号)
- 返回值 拼接好的字符串
var arr = [100, 200, 300, 400, 500]
var arr = [2022, 12, 21]
var arr = [16, 28, 30]
// var res = arr.join("-")
// var res = arr.join(":")
// var res = arr.join("aaaaaaaaaaaa")
var res = arr.join()
console.log(res)
10.slice()
slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
- 语法 数组.slice(开始索引, 结束索引)
- 作用 截取数组的部分内容
- 返回值 必然是一个新数组
就是截取出的东西
- 参数特点
前不包后, 包含开始索引位置,不包含结束索引位置
-> 开始索引可以不写, 默认从0开始, 结束索引不写,默认到数组最后
-> 可以写负数, 表示倒数第几个
var arr = [100, 200, 300, 400, 500, 600, 700]
console.log("原始数组", arr)
// 从索引2 的位置 ,截取到索引5的位置
// var res = arr.slice(2, 5)
// var res = arr.slice(2)
var res = arr.slice(2, -1)
console.log(res)
11.indexOf()
indexOf() 方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回 -1。
- 语法
-> 数组.indexOf(数据)
-> 数组.indexOf(数据,开始索引)
- 作用 从前向后查找该数据在数组中第一次出现的位置
- 返回
果数组中找到了该数据,那么返回第一次出现的索引
-> 如果没找到, 那么返回-1
<script>
var arr = [100, 200, 200, 300, 300, 400, 200, 500]
// 数组.indexOf(数据)
var i = arr.indexOf(200)
var i = arr.indexOf(2000)
console.log(i)
// 数组.indexOf(数据,开始索引)
var i = arr.indexOf(200, 1)
var i = arr.indexOf(200, 3)
console.log(i)
</script>
12.lastIndexOf()
lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。
- 语法
-> 数组.lastIndexOf(数据)
-> 数组.lastIndexOf(数据, 开始索引)
- 作用 从后向前查找数据第一次在该数组中出现的位置
- 返回值
找到 返回索引
-> 找不到 返回-1
var arr = [100, 200, 200, 300, 300, 400, 200, 500]
// var res = arr.lastIndexOf(200)
var res = arr.lastIndexOf(200, 5)
console.log(res)
13. forEach()
- 语法 数组.forEach(function(item, index, origin) {})
-> item 数组的每项
-> index 数组每一项的索引
-> origin 表示原始数组
- 作用 遍历数组(和for一样)
- 返回值 没有(undefined)
- 注意 不能中断 break continue
var arr = [100, 200, 300, 400, 500]
arr.forEach(function (item, index, origin) {
console.log(item, index, origin)
})
// break 报错
// arr.forEach(function (item, index, origin) {
// if(index>3) {
// break
// }
// console.log(item, index, origin)
// })
// continue
// arr.forEach(function (item, index, origin) {
// if(index>3) {
// continue
// }
// console.log(item, index, origin)
// })
案例一:求数组中所有数据的和
// forEach 案例
// 1. 求数组中所有数据的和
var arr = [100, 200, 300, 400, 500]
var sum = 0
arr.forEach(function (item) {
sum += item
})
console.log(sum)
案例二:找数组中最大的数字的索引
// 2. 找数组中最大的数字的索引
var arr = [100, 200, 300, 400, 500, 20, 10, 201, 302]
var maxIndex = 0
arr.forEach(function (item, index) {
// 比较当前项和 [maxIndex], 如果当前项大 maxIndex 等于 当前项的索引
if (item > arr[maxIndex]) {
maxIndex = index
}
})
console.log(maxIndex)
案例三:去重
// 3. 去重
var arr = [100, 200, 100, 200, 2, 1, 3, 3, 400, 400, 55, 55, 555, 600]
// 有一个新数组,去重之后的内容放到新数组中
// 判断当前项在新数组中存在吗,不存在,放到新数组中
var newArr = []
arr.forEach(function (item) {
// 判断 item 在不在newArr indexOf
if (newArr.indexOf(item) === -1) {
newArr.push(item)
}
})
console.log(newArr)
14. map()
- 语法 数组.map(function(item, index, origin) {})
-> item 数组的每项
-> index 数组每一项的索引
-> origin 表示原始数组
- 作用 映射
- 返回值 返回一个新数组,和原始数组一样的长度,只不过内部数据进行映射加工
- 注意 映射条件用return 形式书写
var arr = [100, 200, 300, 400, 500]
var res = arr.map(function (item, index) {
// return item * 10
// return 100
// return "哈哈哈"
if (index % 2 === 0) {
return item * 10
} else {
return item
}
})
console.log(res)
15. filter ()
- 语法 数组.filter(function(item, index, origin){})
-> item 数组的每一项
-> index 数组的每一项的索引
-> origin 原始数组
- 作用 过滤数组
- 返回值 是一个新数组,内部存储的是经过筛选后的内容
- 注意 过滤条件用return形式书写
var arr = [100, 200, 300, 400, 500]
var res = arr.filter(function (item) {
// 得到arr中 > 200 的数据
return item > 200
// return item > 1000
})
console.log(res)
16. find()
- 语法 数组.find(function( item, index, origin ){})
-> item 数组的每一项
-> index 数组每一项的索引
-> origin 原始数组
- 作用 在原始数组中查找满足条件的第一项
- 返回值 找到的数据 , 找不到返回undefined
- 注意 查找条件用return形式书写
var arr = [100, 200, 300, 400, 500]
var res = arr.find(function (item, index) {
// return item > 300
return item > 3000
})
console.log(res)
var arr = [
{ name: "小花", id: 1 },
{ name: "小红", id: 2 },
{ name: "tom", id: 3 },
{ name: "jerry", id: 4 },
{ name: "nick", id: 5 },
]
// 查找id===3 这一项
var res = arr.find(function (item) {
return item.id === 3
})
console.log(res)
17. findIndex()
- 语法 数组.findIndex(function(item, index, origin){})
-> item 数组的每一项
-> index 数组每一项的索引
-> origin 原始数组
- 作用 查找数组满足条件的第一项的索引
- 返回值 找到的数据的索引, 没找到返回-1
- 注意 查找条件用return形式书写
var arr = [100, 200, 300, 400, 500]
var res = arr.findIndex(function (item) {
// return item > 300
return item > 3000
})
console.log(res)
18. includes()
- 语法 数组.includes(数据)
- 作用
据在不在数组中
- 返回值 找到 true 没找到 false
var arr = [100, 200, 300, 400, 500]
var res = arr.includes(300)
console.log(res)
19. some()
- 语法 数组.some(function(item, index, origin){})
-> item 数组的每一项
-> index 数组每一项的索引
-> origin 原始数组
- 作用 判断数组中是否有一个满足条件
- 返回值
至少有一个满足条件
false 每一个都不满足条件
- 注意
用return形式书写
var arr = [100, 200, 300, 400, 500]
var res = arr.some(function (item) {
// return item > 400
return item > 4000
})
console.log(res)
20. every
- 语法 数组.every(function(item, index, origin){})
- 作用 判断数组中每一项是否满足条件
- 返回值
数组每一项都满足条件
false 数组中至少有一项不满足条件
- 注意 判断条件用return形式书写
var list = [
{ name: "小花", id: 1, score: 100 },
{ name: "小红", id: 2, score: 30 },
{ name: "tom", id: 3, score: 10 },
{ name: "jerry", id: 4, score: 2 },
{ name: "nick", id: 5, score: 59 },
]
// 判断 所有学生的成绩 是否 > 0
var res = list.every(function (item) {
return item.score > 0
})
console.log(res)
// 判断 所有学生的成绩 是否 > 60
var res = list.every(function (item) {
return item.score > 60
})
console.log(res)