27个JavaScript数组常见方法汇总与实例说明
1. push()
let arr = [1,2,3]
arr.push(1) // 返回新增后的数组长度 4
arr.push() // 不传参数默认不新增 4
arr.push(1,2,3) // 新增多条数据时，返回新增完成后的数组长度 7
2. pop()
let arr = [3]
arr.pop() // 返回已删除的数据 3
arr.pop() // 当数组数据为空时，返回 undefined
3. unshift()
let arr = [1,2,3]
arr.unshift(1) // 返回新增后的数组长度 4
arr.unshift() // 不传参数默认不新增 4
arr.unshift(1,2,4) // 新增多条数据时，返回新增完成后的数组长度 7
4. shift()
let arr = [3]
arr.shift() // 返回已删除的数据 3
arr.shift() // 当数组数据为空时，返回 undefined
5. reverse()
let arr = [1,2,3]
arr.reverse() // 返回反转之后的数组 [3,2,1]
let arr = []
arr.reverse() // 当数组数据为空时返回 []
6. sort()
// 当参数1 - 参数2时，为正序
function justSort(a,b) {
return a-b
}
// 当 参数2 - 参数1 时，为倒序
function backSort(a,b) {
return b-a
}
let arr = [1,2,3]
arr.sort() // 不传参默认通过Unicode（万国码）进行排序 [1,2,3]
arr.sort(backSort) // 通过排序函数进行排序 [3,2,1]
7. join()
let arr = [1,2,3]
arr.join() // 不传参默认根据逗号进行转化 1,2,3
arr.join('') // 根据空字符串进行转化 123
arr.join(',') // 根据逗号进行转化 1,2,3
8. splice()
let arr = [1,2,3,4]
arr.splice() // 不传参默认不删除不插入，返回空数组 []
arr.splice(3) // 数组中默认保留3位数据, 返回删除后的数据 [4]
arr.splice(0,1) // 从数组首位删除一条数据 [1]
arr.splice(0,1,9) // 从首位删除一条数据，并插入一条数据 [2]
arr.splice(0,1,9,8,7,6,5,4,3,2,1) // 从首位删除一条数据并插入多条数据（参数3之后的为插入 [9]
9. slice()
let arr = [1,2,3,4]
arr.slice() // 不传参默认截取全部 [1,2,3,4]
arr.slice(1) // 从索引为1的位置默认截取到末尾 [2,3,4]
arr.slice(1,3) // 从索引为1的位置截取到索引为3的位置前一位 [2,3]
10. concat()
let arr = [1,2,3,4]
arr.concat(5) // 会将入参数据合并到原数组中 [1,2,3,4,5]
arr.concat(5,6,7,8) // 可以入参多条数据 [1,2,3,4,5,6,7,8]
arr.concat([5,6,7,8]) // 可以入参数组进行合并，合并至原数组 [1,2,3,4,5,6,7,8]
11. indexOf()
let arr = [1,2,3,4]
arr.indexOf(3) // 查找数组中指定数据的下标 2
arr.indexOf(5) // 未找到数组中指定数据 -1
12. forEach()
let arr = [1,2,3,4]
arr.forEach((data,index,array) => {
console.log(data) // 数组每个单元数据
console.log(index) // 数组下标
console.log(array) // 原数组本身
})
13. map()
let arr = [1,2,3,4]
arr.map((data,index,array) => {
console.log(data) // 数组每个单元数据
console.log(index) // 数组下标
console.log(array) // 原数组本身
})
14. filter()
let arr = [1,2,3,4]
arr.filter((data,index,array) => {
console.log(data) // 数组每个单元数据
console.log(index) // 数组下标
console.log(array) // 原数组本身
return data == 1 // 过滤返回为true的数据
})
15. some()
let arr = [1,2,3,4]
arr.some((data,index,array) => {
console.log(data) // 数组每个单元数据
console.log(index) // 数组下标
console.log(array) // 原数组本身
return data == 1 // 检测指定数据是否符合条件
})
16. eveny()
let arr = [1,2,3,4]
arr.eveny((data,index,array) => {
console.log(data) // 数组每个单元数据
console.log(index) // 数组下标
console.log(array) // 原数组本身
return data == 1 // 检测所有条件是否符合条件
})
17. reduce()
let arr = [1,2,3,4]
arr.reduce((pre,data,index,array) => {
console.log(pre) // 数组上一次计算结果，如果未计算则是初始值
console.log(data) // 数组中被处理的数据项
console.log(index) // 数据项在数组中的索引
console.log(array) // 原数组
return pre + data // 将每次累加结果进行累加下一项
}, 0) // 设置遍历初始值
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
// 单数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
// 数组对象去重
let arr = [{a: 0, name: 'zhangsan'}, {b: 0, name: 'lisi'}]
let Obj = {}
person = person.reduce((cur,next) => {
obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
return cur;
},[])
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>{
pre.concat(Array.isArray(cur) ? newArr(cur) : cur
}),[])
}
console.log(newArr(arr)); // [0, 1, 2, 3, 4, 5, 6, 7]
var result = [
{
subject: 'math',
score: 10
},
{
subject: 'chinese',
score: 20
},
{
subject: 'english',
score: 30
}
];
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);
console.log(sum) //60
18. reduceRight()
let arr = [1,2,3,4]
arr.reduceRight((pre,data,index,array) => {
console.log(pre) // 数组上一次计算结果，如果未计算则是初始值
console.log(data) // 数组中被处理的数据项
console.log(index) // 数据项在数组中的索引
console.log(array) // 原数组
return pre + data // 将每次累加结果进行累加下一项
}, 0) // 设置遍历初始值
19. Array.from()
let str = 'asdf'
console.log(Array.from(str)) // 将字符串转化成数组 [a,s,d,f]
let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj)) // 含索引并length属性的对象也可以转化成数组 ['a', 'b']
20. Array.of()
console.log(Array.of('11')) // 将字符串转化成数组 ['11']
console.log(Array.of({a:1,b:2})) // 将对象转化成数组 [{a:1,b:2}]
console.log(new Array('11')) // 类似于构造函数声明数组
console.log(new Array(2)) // 构造函数生明因为入参问题容易容易引起重载 [empty × 2] 空数组
21. copyWithin()
let arr = [1,2,3,4,5]
arr.copyWithin(3) // 从下标3的位置上开始，默认将整个数组作为数据项进行替换，长度不够默认截取 [1, 2, 3, 1, 2]
arr.copyWithin(0, 2) // 从下标为0位置开始，默认将从下标2位置截取到末尾作为数据项进行替换，长度不够默认截取 [3, 4, 5, 4, 5]
arr.copyWithin(0, 2, 3) // 从下标0位置开始，默认将从下标2位置截取到下标3位置之前作为数据项进行替换，长度不够默认截取 [3, 2, 3, 4, 5]
arr.copyWithin(-1) // 从倒数倒数第一位开始，默认将整个数组作为数据项进行替换，长度不够默认截取 [1, 2, 3, 4, 1]
arr.copyWithin(-1, -2) // 从倒数第一位置开始，默认将从倒数第二位置默认截取到末尾作为数据项进项替换，长度不够默认截取 [1, 2, 3, 4, 4]
arr.copyWithin(-1, -4, -2) // 从倒数第一位置开始，默认将从倒数第四的位置开始截取到倒数第二的位置作为数据项项进项替换，长度不够默认截取 [1, 2, 3, 4, 2]
22. find()
let arr = [1,2,3,4,5]
arr.find((item, index, array) => {
console.log(item) // 数组数据项
console.log(index) // 数据项下标
console.log(array) // 原数组
return item > 1 // 此条件不会校验数组所有数据项，只会校验第一条符合条件的数据
})
23. findIndex()
let arr = [1,2,3,4,5]
arr.findIndex((item, index, array) => {
console.log(item) // 数组数据项
console.log(index) // 数据项下标
console.log(array) // 原数组
return item > 1 // 此条件不会校验数组所有数据项，只会校验第一条符合条件的数据
})
24. fill()
let arr = [1,2,3,4]
arr.fill(1) // 默认将数组所有项填充成该数据 [1,1,1,1]
arr.fill(1,2) // 以参数1为填充项，将数据从坐标为2位置开始填充至数组末尾 [1,2,1,1]
arr.fill(1,2,4) // 以参数1为填充项，将是数据从坐标2位置开始填充至下标为4位置 [1,2,1,4]
25. keys()
let arr = [1,2,3,4]
let arr2 = arr.keys()
console.log(arr2) // Array Iterator {}
for (let key of arr2) {
console.log(key); // 0,1,2,3
}
26. value()
let arr = [1,2,3,4]
let arr2 = arr.value()
console.log(arr2) // Array Iterator {}
for (let val of arr2) {
console.log(val); // 1,2,3,4
}
27. entries()
let arr = [1,2,3,4]
let arr1 = arr.entries()
console.log(arr1) // Array Iterator {}
for (let e of arr1) {
console.log(e); // [0,1] [1,2] [2,3] [3,4]
}
总结
本文件为大家讲了27个JavaScript数组常见方法汇总并配上了源码实例，更多关于JS数组操作请查看下面的相关链接
您可能感兴趣的文章:
- .NET Core系列之MemoryCache 初识
- 007手机一键Root(安机网一键Root) v3.0 官方最新版 一键ROOT您的Android手机
- 12306密码被盗了怎么办？12306密码外泄解决方法
- 12个字的qq网名
- 150M迷你型无线路由器怎么设置？
- 192.168.1.1打不开怎么办？路由器192.168.1.1打不开的原因以及解决办法
- 2011年电子报合订本 电子报 编辑部 中文 PDF版 [84M]
- 2015年1月15日小米新旗舰发布会现场图文直播
- 2016.3.1vivo Xplay5新品发布会现场视频直播 优酷直播
- 2016华为P9发布会视频直播地址 4月15日华为P9国行发布会直播