JS数组API大全(持续更新)
首先对于数组的API,我是以原数组是否改变去分的两类,一种是会改变自身数组的方法,另一种不会.至于是ES6还是ES5的方法并没有过多的记忆,会用即可数组方法功能原数组是否改变push()在数组的最后一位新增一个或多个数据,返回值是长度改变unshift()在数组的第一位新增一个或多个数据,返回值是长度改变pop()删除最后一位,并返回删除的数据改变shift()删除第一位,并返回删除.
首先对于数组的API,我是以原数组是否改变去分的两类,一种是会改变自身数组的方法,另一种不会.
至于是ES6还是ES5的方法并没有过多的记忆,会用即可
| 序号 | 数组方法 | 功能 | 原数组是否改变 |
|---|---|---|---|
| 1 | push() | 在数组的最后一位新增一个或多个数据,返回值是长度 | 改变 |
| 2 | unshift() | 在数组的第一位新增一个或多个数据,返回值是长度 | 改变 |
| 3 | pop() | 删除最后一位,并返回删除的数据 | 改变 |
| 4 | shift() | 删除第一位,并返回删除的数据 | 改变 |
| 5 | reverse() | 反转数组,返回结果 | 改变 |
| 6 | join() | 使用分隔符,将数组转为字符串并返回 | 不改变 |
| 7 | slice() | 截取指定位置的数组,并返回 | 不改变 |
| 8 | concat() | 合并数组,并返回合并之后的数据 | 不改变 |
| 9 | sort() | 排序(字符规则),返回结果 | 改变 |
| 10 | splice() | 删除指定位置,并替换,返回删除的数据 | 改变 |
| 11 | toString() | 直接转为字符串,并返回 | 不改变 |
| 12 | valueOf() | 返回数组对象的原始值 | 不改变 |
| 13 | indexOf() | 查询并返回数据的索引 | 不改变 |
| 14 | lastIndexOf() | 反向查询并返回数据的索引 | 不改变 |
| 15 | forEach() | 参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self； forEach返回值undefind | 不改变 |
| 16 | map() | 同forEach，同时回调函数返回数据，组成新数组由map返回 | 不改变 |
| 17 | filter() | 同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回 | 不改变 |
| 18 | every() | 同forEach，同时回调函数返回布尔值，全部为true，由every返回true | 不改变 |
| 19 | some() | 同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true | 不改变 |
| 20 | reduce() | 归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduce返回 | 不改变 |
| 21 | reduceRight() | 反向归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduceRight返回0 | 不改变 |
| 22 | some() | 会遍历数组中的每个元素，让每个值都执行一遍callback函数, 如果有一个元素满足条件，返回true , 剩余的元素不会再执行检测。 如果没有满足条件的元素，则返回false。 | 不改变 |
1.push(),在数组的最后一位新增一个或多个数据,返回值是长度
let arr1 = [1, 2, 3, 4, 5]
let num = 6
let result = arr1.push(num)
console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(result); //62.unshift(),在数组的第一位新增一个或多个数据,返回值是长度
let arr1 = [1, 2, 3, 4, 5]
let num = 6
let result = arr1.unshift(num)
console.log(arr1); //[6, 1, 2, 3, 4, 5]
console.log(result); //63.pop(),删除最后一位,并返回删除的数据
let arr1 = [1, 2, 3, 4, 5]
let result = arr1.pop()
console.log(arr1); //[1, 2, 3, 4]
console.log(result); //54.shift(),删除第一位,并返回删除的数据
let arr1 = [1, 2, 3, 4, 5]
let result = arr1.shift()
console.log(arr1); //[2, 3, 4, 5]
console.log(result); //15.reverse(),反转数组,返回结果
let arr = [1, 2, 3, 4, 5]
let result = arr.reverse()
console.log(arr); //[5, 4, 3, 2, 1]
console.log(result); //[5, 4, 3, 2, 1]6.join("连接符"),使用分隔符,将数组转为字符串并返回
常用场景一:
let arr = [1, 2, 3, 4, 5]
let result = arr.join()
console.log(arr); // [1, 2, 3, 4, 5]
console.log(result); // 1,2,3,4,5常用场景二:
let arr = [1, 2, 3, 4, 5]
let result = arr.join("")
console.log(arr); // [1, 2, 3, 4, 5]
console.log(result); // 12345常用场景三:
let arr = [1, 2, 3, 4, 5]
let result = arr.join("|")
let result2 = arr.join(" and ")
console.log(arr); // [1, 2, 3, 4, 5]
console.log(result); // 1|2|3|4|5
console.log(result2); // 1 and 2 and 3 and 4 and 57.slice((start[,end]),截取指定位置的数组,并返回
tips:第一个参数为起始索引,
第二个参数为结束索引,可传可不传
截取结果含头不含尾
省略第二个参数表示start位置开始一直截取到末尾
支持附属,表示倒数第几个开始
let arr = [1, 2, 3, 4, 5]
let result = arr.slice(1, 3) //含头不含尾
let result2 = arr.slice(1) //省略第二个参数表示从start位置开始一直截取到末尾
let result3 = arr.slice(-3) //支持负数，表示倒数第几个
console.log(arr); // [1, 2, 3, 4, 5] //含头不含尾
console.log(result); // [2, 3]
console.log(result2); // [2, 3, 4, 5]
console.log(result3); // [3, 4, 5]8.concat(),合并数组,并返回合并之后的数据
tips:不会修改原数组，返回新数组;
concat() 的某个参数本身是一个数组，则会将该数组的元素衔接到 arr 中
let arr = [1, 2, 3]
let arr2 = [6, 7, 8, 9]
let arr3 = [4, [5, [7, 8]]]
let result = arr.concat(arr2)
let result2 = arr.concat(4, 5)
let result3 = arr.concat(arr3)
console.log(result); //[1, 2, 3, 6, 7, 8, 9]
console.log(result2); //[1, 2, 3, 4, 5]
console.log(result3); //[1, 2, 3, 4, Array(2)]9.sort(),排序(字符规则),返回结果,会改变原数组
(1)默认按照数组元素第一位的ASCII码从小到大排列,并不是从大到小!
let arr = [9, 311, 81, 1, 2, 8, 3, 4, 9, 2, 1, 6, 7]
let result = arr.sort()
console.log(arr) //直接修改原数组
console.log(result); //[1, 1, 2, 2, 3, 311, 4, 6, 7, 8, 81, 9, 9](2)设置回调函数,即可实现升序降序的实现
let arr = [9, 311, 81, 1, 2, 8, 3, 4, 9, 2, 1, 6, 7]
let result = arr.sort(function (a, b) {
return a - b
})
console.log(arr) //[1, 1, 2, 2, 3, 4, 6, 7, 8, 9, 9, 81, 311]
console.log(result); //[1, 1, 2, 2, 3, 4, 6, 7, 8, 9, 9, 81, 311]
result = arr.sort(function (a, b) {
return b - a
})
console.log(arr) //[311, 81, 9, 9, 8, 7, 6, 4, 3, 2, 2, 1, 1]
console.log(result); //[311, 81, 9, 9, 8, 7, 6, 4, 3, 2, 2, 1, 1](3)随机打散(拓展)
let arr = [9, 311, 81, 1, 2, 8, 3, 4, 9, 2, 1, 6, 7]
arr.sort(function () {
undefined
return Math.random() > .5 ? 1 : -1
})
console.log(arr); //[6, 81, 7, 2, 8, 4, 2, 1, 9, 311, 1, 3, 9]10.splice(start, deleteCount [,value1,value2...]) ,删除指定位置,并替换,返回删除的数据
1.只传star参数,删除后面所有元素,并返回删除的元素
let arr = [1, 2, 3, 4, 5]
let result = arr.splice(1)
console.log(arr); //[1]
console.log(result); //[2, 3, 4, 5]2.两个参数,从 start 开始，并包含 start 处的元素,删除deleteCount个元素
let arr = [1, 2, 3, 4, 5]
let result = arr.splice(1, 2)
console.log(arr); //[1, 4, 5]
console.log(result); //[2, 3]3.三个参数
替换写法: 第三个参数为替换的值
let arr = [1, 2, 3, 4, 5]
let result = arr.splice(2, 1, "6")
console.log(arr); // [1, 2, '6', 4, 5]
console.log(result); //[3]插入写法:第二个参数为0,插入元素在start前面
let arr = [1, 2, 3, 4, 5]
let result = arr.splice(2, 0, "6")
console.log(arr); // [1, 2, '6', 3, 4, 5]
console.log(result); //[]11.toString() ,直接转为字符串,并返回,不会改变原数组
也可以写成 String(arr)
let arr = [1, 2, 3, 4, 5]
let result = arr.toString()
console.log(arr); //[1, 2, 3, 4, 5]
console.log(result); //1,2,3,4,512.valueOf(),返回数组对象的原始值 不改变原数组,对于数组几乎不用
let arr = [1, 2, 3, 4, 5]
let result = arr.valueOf()
console.log(arr); //[1, 2, 3, 4, 5]
console.log(result); //[1, 2, 3, 4, 5]13.indexOf(),查询并返回数据的索引,不改变数组本身
let arr = [1, 2, 3, 4, 5]
let result = arr.indexOf(5)
let result2 = arr.indexOf(6)
console.log(arr); //[1, 2, 3, 4, 5]
console.log(result); //4 找到返回目标索引
console.log(result2); //-1 未找到返回-114.lastIndexOf() ,反向查询并返回数据的索引,不改变数组本身
let arr = [1, 2, 3, 4, 5]
let result = arr.lastIndexOf(1)
let result2 = arr.indexOf(6)
console.log(arr); //[1, 2, 3, 4, 5]
console.log(result); //0 找到返回目标索引
console.log(result2); //-1 未找到返回-115.forEach(),参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self； forEach返回值undefind
let arr = [1, 2, 3, 4, 5]
let result = arr.forEach((item, index, self) => {
console.log(item, index, self)
// 参数item: 数组中每一项的内容
// 参数index: 数组索引
// 参数a: 指的是数组本身
})
console.log(result); // undefined16.map() 同forEach，同时回调函数返回数据，组成新数组由map返回,不改变原数组
let arr = [1, 2, 3, 4, 5]
let result = arr.map((item) => {
return item + 1
})
console.log(result) // [2, 3, 4, 5, 6]
console.log(arr) //原数组不变[1, 2, 3, 4, 5]17.filter() 同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回,不改变原数组
tips:返回是过滤的数组喔~
let arr = [1, 2, 3, 4, 5]
let result = arr.filter((item) => {
return item > 2 //true的时候返回item,false不返回
})
console.log(result) // 返回筛选结果[3, 4, 5]
console.log(arr) //原数组不变[1, 2, 3, 4, 5]18.every(),同forEach，同时回调函数返回布尔值，全部为true，由every返回true
let arr = [1, 2, 3, 4, 5]
let result = arr.every((item) => {
return item >= 1
})
console.log(result) // 全部满足条件返回true
console.log(arr) //原数组不变[1, 2, 3, 4, 5]如果有一个不满足条件 例如:
let arr = [1, 2, 3, 4, 5]
let result = arr.every((item) => {
return item >= 2
})
console.log(result) // false
console.log(arr) //原数组不变[1, 2, 3, 4, 5]19.some(),同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true,不会改变原数组
let arr = [1, 2, 3, 4, 5]
let result = arr.some((item) => {
return item >= 4
})
console.log(result);//true 当有item其中一项为true的时候就会返回true
console.log(arr);//[1, 2, 3, 4, 5]20.reduce(),归并，reduce的第2个参数是可选的，也就是初始值是可选的。当不指定初始值时，它将使用数组的第一个元素作为初始值。函数里面的 index 是当前 value 在数组中的索引。当不传入初始值的时候，index 是从 1 开始的，总的循环次数比数组长度少1。当传入初始值的时候，index 是从 0 也就是第一个元素开始，数组有多长就会遍历几次。
let arr = [1, 2, 3, 4, 5]
let result = arr.reduce((total, value, index, arr) => {
return total + value
}, 0)
console.log(result); //15
console.log(arr); //[1, 2, 3, 4, 5]
21.reduceRight(),reduceRight() 的工作原理和 reduce() 一样，不同的是它按照数组索引从高到低（从右到左）处理数组。
let arr = [1, 2, 3, 4, 5]
let result = arr.reduceRight(function (x, y) {
return x / y;
});
console.log(arr);// [1, 2, 3, 4, 5]
console.log(result);//0.2083333333333333422.some(),会遍历数组中的每个元素，让每个值都执行一遍callback函数,
如果有一个元素满足条件，返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false,不改变本身
let arr = [1,2,3,4,5,6,7,8]
let result = arr.some((item) => {
return item > 9
})
let result2 = arr.some((item) => {
return item > 5
})
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(result); //false
console.log(result2); //true
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
22
0- 0
已为社区贡献1条内容
所有评论(0)