本文列举了22种 javaScript 的内置数组方法,我亲切的将其称为数组API;其中有些改变原数组,有些不改变原数组,都有一一注释
一、增删改查(7个)
1. push()
将一个或多个元素添加到数组的末尾,并返回该数组的新长度 (改变原数组)
let arrAll = [4, 0, 9, 5, 0, 20, 3, 0, 11, 0 , 0, 10]
// 准备一个新的数组装内容
let arr = []
// 将不为0的数组成新的数组
for (let i = 0; i < arrAll.length; i++) {
if (arrAll[i] !== 0) {
// 增加新的数组
arr.push(arrAll[i])
}
}
console.log(arr) //4, 9, 5, 20, 3, 11, 10
2. unshift()
将一个或多个元素添加到数组的开头,并返回该数组的新长度 (改变原数组)。
// 数组中间有红色和绿色
let arr = ['red', 'green']
// 新加入粉色和蓝色出现在数组开头
arr.unshift('pink','blue')
// 打印在打印台里面
console.log(arr); //'pink', 'blue', 'red', 'green'
3. pop()
从数组中删除最后一个元素,并返回被删除的元素的值。(改变原数组)
// 数组中间有红色和绿色
let arr = ['red', 'green']
// 删除最后一个元素
arr.pop()
// 打印在打印台里面
console.log(arr); //'red'
4. shift()
从数组中删除第一个元素,并返回被删除的元素的值。(改变原数组)
// 数组中间有红色和绿色
let arr = ['red', 'green']
// 删除第一个元素
arr.shift()
// 打印在打印台里面
console.log(arr); //'green'
5. splice()
通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。(改变原数组)
//用法: arr.splice(起始位置, 删除几个元素, 添加的内容)
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months) //'Jan', 'Feb', 'March', 'April', 'June'
6. findIndex()
查找数组中是否存在某个指定元素,返回一个返回这个元素数组中首次出现的下标;如果没有就返回-1。
let arr = [
{ name:'张三',age:20},
{ name:'李四',age:30},
{ name:'王五',age:40},
]
let index = arr.findIndex( item=>item.name == '李四' )
console.log( index ) //1
7. find()
查找数组中是否存在某个指定元素,存在就返回找到的那个元素,不存在就返回undefined
let arr = [
{ name:'张三',age:20},
{ name:'李四',age:30},
{ name:'王五',age:40},
]
let index = arr.find( item=>item.name == '李四' )
console.log( index ) // { name:'李四',age:30}
二、排序、拷贝、拼接(6个)
8. sort()
用原地算法对数组的元素进行排序,并返回数组。(改变原数组)
//arr.sort( function (a,b) {} ) : 数组排序
let arr1 = [20,5,66,88,19,35]
arr1.sort( function(a,b){
// return a-b//从小到大 //5, 19, 20, 35, 66, 88
return b-a//从大到小 88, 66, 35, 20, 19, 5
})
console.log(arr1)
9. reverse()
将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。(改变原数组)
let arr = [10,20,30]
//arr.reverse() : 翻转数组
arr.reverse()
console.log(arr) //30, 20,10
10. concat()
用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组
let arr = [10,20,30]
//arr.concat( 数组 ) : 连接数组
//应用场景 : 下拉加载下一页数据 (需要连接数组)
arr = arr.concat( [40,50,60] )
console.log(arr) //10, 20, 30, 40, 50, 60
11. join()
将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回一个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。
12. slice()
返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。不改变原数组
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2)); //"camel", "duck", "elephant"
console.log(animals.slice(2, 4)); //"camel", "duck"
console.log(animals.slice(1, 5)); //bison", "camel", "duck", "elephant"
console.log(animals.slice(-2)); //"duck", "elephant"
console.log(animals.slice(2, -1)); //"camel", "duck"
console.log(animals.slice()); //'ant', 'bison', 'camel', 'duck', 'elephant'
13. split
分割数组
const value = '2022-06-18'
value.split['-'] // 将日期转换成数组 ['2022','06','18']
value.split['-'][0] // 年 2022
value.split['-'][1] // 月 06
value.split['-'][2] // 日 18
循环、过滤(6个)
14. map()
遍历原数组中的每个元素都调用一次提供的函数,返回一个新数组
let arr = [80, 66, 20, 50, 100]
//完整语法
// let res = arr.map( (item,index)=>{
// console.log(item,index)
// return item*0.8
// } )
//熟练写法
let res = arr.map(item => item * 0.8)
console.log(res) //[64,52.8,16,40,80]
15. forEach()
遍历数组的每个元素执行一次给定的函数, 改变原数组
let arr = [20,55,60,75,80,33]
arr.forEach((item,index) => {
console.log(item,index) //[20,55,60,75,80,33] // [0,1,2,3,4,5]
} )
区别:
forEach中途结束不了
for循环可以用break结束循环
16. some()
测试数组中至少有1个元素符合条件,只要有符合的结束循环返回true。它返回的是一个Boolean值。
//判断数组中有没有奇数
let arr = [10,21,30,40,50]
//标准写法
// let res = arr.some( (item,index)=>{
// if( item % 2 == 1 ){
// return true
// }else{
// return false
// }
// } )
//简写语法
let res = arr.some( item=>item % 2 == 1 )
//更简洁语法
let res = arr.some( item=>item % 2 )
//布尔类型 1:true 0:false
console.log( res ) //true
17. every()
测试一个数组内的所有元素是否都符合条件,所有元素符合返回true。它返回一个Boolean值。
//判断数组中是否所有元素都是 偶数
let arr = [10,20,30,40,50]
//标准写法
// let res = arr.every( (item,index)=>{
// if( item % 2 == 0 ){
// return true
// }else{
// return false
// }
// } )
//简写语法
let res = arr.every( item=>item % 2 == 0 )
console.log( res ) //true
18. reduce()
计算数组所有元素的总和:
let arr = [20,50,60,70]
//以前:累加和思想
//let sum = 0
//for(let i = 0;i<arr.length;i++){
// sum = sum + arr[i]
//}
//console.log( sum )
/*
第一个参数:回调函数 (sum,item,index)=>{}
sum : 上一次回调return 返回值
item: 当前元素
index: 当前下标
第二个参数 : sum初始值。 一般给0, 如果不给,遇到空数组reduce就会报错
reduce自身返回值: 最后一次sum的结果
*/
let res = arr.reduce( (sum,item,index)=>{
console.log( sum,item,index)
return sum + item
} , 0 )
console.log(res) //200
19. filter()
过滤出所有符合条件的数据,返回一个新数组
let arr = [20,55,60,75,80,33]
//标准写法
// let res = arr.filter( (item,index)=>{
// if( item % 2 == 0){
// return true
// }else{
// return false
// }
// })
// console.log(res) // //[20,60,80]
//简洁写法
有三种表达式:算数表达式 逻辑表达式 比较表达式
算数表达式和比较表达式的区别
算数表达式会算出一个结果
比较表达式永远只会有两个结果true和false
//item % 2 == 0这里是表达式 表达式一定会有运算结果
let res = arr.filter( item=>item % 2 == 0 )
console.log(res) //[20,60,80]
补充几个不常用的方法
20. includes()
判断数组中是否包含一个某个值,返回boolean值
let arr = [10,20,30,40,50];
arr.includes(10); //true
arr.includes(10,1); //false
21. indexof()
只能找基础数据类型
返回数组中一个符合条件的元素的一个索引,不存在就返回-1(用来判断数组中有没有这个元素)
22.flat
实现数组扁平化,将多维数组转换成一维数组
let arr = [1, 2, 3, [4, 5,[6, 7]]]
console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6, 7]