js中的Array数组方法
程序员文章站
2022-03-10 20:30:26
...
创建数组的方法
- 通过字面量创建
let arr = [1,2,4] - 通过类创建
let arr = new Array(3) // 返回一个数组长度为3的空数组 =>[empty × 3]
目录
splice方法
slice方法
join方法
concat方法
filter方法
some方法
map方法
sort方法
indexOf方法
find方法
forEach方法
reduce方法
reverse方法
flat方法
fill方法
Array类私有方法
/*
* 方法:splice(start,deleteCount,item1,item2...)
* 功能：可实现数组项的删除、插入、替换
* 返回值：由被删除的元素组成的一个数组，如果没有被删除则返回空数组
* 参数：start:删除或插入或替换的起始位置
* deleteCount（可选）:删除或插入或替换的数量。若忽略，
* 则从start开始后边都会被删除
* item1（可选）:删除或插入或替换的值
*/
let arr = [1,2,3,4,5]
let ary = arr.splice(1,2) // 从数组下标1开始删除2个元素
console.log(arr,ary) //arr:[1,4,5] ary:[2,3]
ary = arr.splice(1,2,2,3)// 从数组下标1开始替换2个元素为2，3
console.log(arr,ary) //arr:[1,2,3] ary:[4,5]
ary = arr.splice(3,0,4,5)// 从数组下标3开始增加2个元素4，5
console.log(arr,ary) //arr:[1,2,3,4,5] ary:[]
/* 方法:slice(start,end)
* 功能：浅拷贝数组中的某段数据(浅拷贝说明如果是引用类型数据则拷贝的是引用地址)
* 返回值：返回一个浅拷贝了某段数据的新数组
* 参数：start(可选):起始位，对应数组下标（包含该位）
* end(可选):结束位，数组下标（不包含该位）
*/
let arr = [1,2,3,4,{name:'good'}]
let ary = arr.slice(1,2) // 从数组下标1浅拷贝到数组下标2前
console.log(arr,ary) //arr:[1,2,3,4,{name:'good'}] ary:[2]
ary = arr.slice()// 浅拷贝整个数组
console.log(arr,ary) //arr:[1,2,3,4,{name:'good'}] ary:[1,2,3,4,{name:'good'}]
ary = arr.slice(3)// 从数组下标3开始浅拷贝
console.log(arr,ary) //arr:[1,2,3,4,{name:'good'}] ary:[4,{name:'good'}]
ary[0] = 100
ary[1].name = 'bad'
console.log(arr,ary) //arr:[1,2,3,4,{name:'bad'}] ary:[100,{name:'bad'}]
/* 方法:join(separator)
* 功能：用分隔符将数组中的每一项连接起来形成字符串
* 返回值：返回一个用分隔符连接起来的字符串
* 参数：separator(可选):分隔符（为空时，默认为’，‘）
*/
let arr = [1,2,3,4]
let ary = arr.join() // 用默认逗号分隔符将数组中的每一项连接起来形成字符串
console.log(arr,ary) //arr:[1,2,3,4] ary:"1,2,3,4"
ary = arr.join("")// 将数组中的每一项连接起来形成字符串
console.log(arr,ary) //arr:[1,2,3,4] ary:“1234”
ary = arr.join('good')// 用'good'将数组中的每一项连接起来形成字符串
console.log(arr,ary) //arr:[1,2,3,4] ary:"1good2good3good4"
arr = [1,2,3,undefined,4,null]
ary = arr.join() // 如果数组元素为undefined或null，都返回空
console.log(arr,ary) //arr:[1,2,3,undefined,4,null] ary:"1,2,3,,4,"
ary = arr.join("") // 如果数组元素为undefined或null，都返回空
console.log(arr,ary) //arr:[1,2,3,undefined,4,null] ary:"1234"
/* 方法:concat(val1,val2....)
* 功能：合并一个或多个数组，返回新的数组，原数组不会被改变。数组元素若是引用类型，也为浅拷贝
* 返回值：返回一个新的数组（浅拷贝）
* 参数：val(可选):数组
*/
let arr1 = [1,2,3]
let arr2 = [4,5,6,{name:'good'}]
let ary = arr1.concat(arr2) // 连接两个数组
console.log(arr1,ary) //arr1:[1,2,3] ary:[1,2,3,4,5,6,{name:'good'}]
ary = arr1.concat(arr2)
ary[6].name = 'bad'
console.log(arr2,ary) //arr2: [4,5,6,{name:'bad'}] ary:[1,2,3,4,5,6,{name:'bad'}]
ary = arr1.concat()
console.log(arr1,ary) //arr1:[1,2,3] ary:[1,2,3]
/* 方法:filter(callback(item,index,array))
* 功能：创建一个新数组，其包含满足所提供方法的元素
* 返回值：返回一个新的数组,满足提供的方法的元素
* 参数：callback:用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。
*/
let arr = [1,2,3]
let ary = arr.filter(item=>(){
return item>1
}) // 过滤大于1的元素
console.log(arr,ary) //arr1:[1,2,3] ary:[2,3]
arr = [1,2,3,[3,4]]
ary = arr.filter(item=>{
return item>1
}) // 过滤大于1的元素
console.log(arr,ary) //arr: [1,2,3,[3,4]] ary: [2,3]
/* 方法:some(callback(item,index,array))
* 功能：测试数组是否至少满足一次所提供的函数
* 返回值：Boolean =>至少满足一次则为true,反之为false
* 参数：callback:用来测试数组的每个元素的函数。
*/
let arr = [1,2,3]
let flag = arr.some(item=>{
return item==2
}) // 是否存在’2‘这个元素
console.log(arr,flag) //arr:[1,2,3] flag:true
/* 方法:map(callback(item,index,array))
* 功能：用提供的方法遍历一遍数组，形成新数组
* 返回值：数组
* 参数：callback:遍历每个元素的方法
*/
let arr = [1,2,3]
let ary = arr.map(item=>{
return item*2
}) // 给数组每位元素都乘以2
console.log(arr,ary) //arr:[1,2,3] ary:[2,4,6]
/* 方法:sort(compareFunc(firstEl,secondEl))
* 功能：对数组进行排序并返回
* 返回值：排序后的数组，原地排序
* 参数（可选）：compareFunc(firstEl,secondEl)
* firstEl: 数组的第二项a[1]
* secondEl: 数组的第一项a[0]
* 如果compareFunc>0,那么firstEl排在secondEl之后
* 如果compareFunc=0,那么firstEl和secondEl的相对位置不变
* 如果compareFunc<0,那么firstEl排在secondEl之前
*/
let arr = [1,2,3]
arr.sort((firstEl,secondEl)=>{
return secondEl - firstEl
}) // 实现数组从大到小排序
console.log(arr) // arr:[3,2,1]
arr = [1,2,3,34,31,4]
arr.sort()
console.log(arr) // arr:[1,2,3,31,34,4]
/* 方法:indexOf(searchEl,fromIndex)
* 功能：寻找索引
* 返回值：在数组中的索引位置
* 参数：
* searchEl: 查找的元素值
* fromIndex(可选): 开始查找的索引值
*/
let arr = [1,2,3]
let index = arr.indexOf(2) // 查找元素’2‘的索引值
console.log(index) // index:1
arr = [1,2,3,34,31,4]
index = arr.indexOf(31,3)// 从索引值3开始寻找元素31
console.log(index) // index:4
/* 方法:find(callback(item,index,array))
* 功能：找到第一个符合所提供的函数的条件，并返回该元素
* 返回值：符合条件的元素
* 参数：
* item: 当前遍历到的元素
* index(可选): 当前遍历到的索引
* array(可选): 数组本身
*/
let arr = [1,2,3,4]
let element = arr.find(item=>{return item>2}) // 查找第一个大于2的元素
console.log(element) // element:3
// 需要注意它与filter的区别：find是找到第一个满足函数的元素，而filter是所有满足函数的元素
/* 方法:forEach(callback(item,index,array))
* 功能：使用函数遍历数组所有元素
* 返回值：undefined
* 参数：
* item: 当前遍历到的元素
* index(可选): 当前遍历到的索引
* array(可选): 数组本身
*/
let arr = [1,2,3,4]
arr.forEach((item,index)=>{arr[index]+=item}) // 查找第一个大于2的元素
console.log(arr) // arr:[2,4,6,8]
// 需要注意它与map的区别：map是返回新数组，而forEach返回值是undefined
/* 方法:reduce(callback(accumulator, currentValue,index,array),initialValue)
* 功能：所有数组元素执行一次callback函数,将其结果汇总成单个结果返回
* 返回值：函数累计的结果（也就是accumulator的值）
* 参数：
* accumulator: 累计值
* currentValue: 当前遍历到元素
* index(可选): 当前遍历到的索引
* array(可选): 数组本身
* initialValue(可选): accumulator的初始值。若没有，则为数组中第一个元素
*/
// e.g.1:计算各元素重复出现次数
let arr = [1,2,2,3,3,3,5,4]
let count = arr.reduce((accumulator,currentVal)=>{
if(currentVal in accumulator){
accumulator[currentVal]++
}else{
accumulator[currentVal] = 1
}
return accumulator
},{})
console.log(arr) // count:{1: 1, 2: 2, 3: 3, 4: 1, 5: 1}
// e.g.2:按照属性进行统计
let people = [
{ name: 'Alice', age: 21 },
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 }
]
function groupBy(property,objArray){
return objArray.reduce((accu,val)=>{
if(val[property] in accu){
accu[val[property]].push(val)
}else{
accu[val[property]] = Array.of(val)
}
return accu
},{})
}
let groupByAge = groupBy('age',people)
// 输出如下：
// {
// 20: [
// { name: 'Max', age: 20 },
// { name: 'Jane', age: 20 }
// ],
// 21: [{ name: 'Alice', age: 21 }]
// }
// e.g.3:实现数组去重
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
let myOrderedArray = myArray.reduce((acc,val)=>{
if(!acc.includes(val)){
acc.push(val)
}
return acc
},[])
console.log(myOrderedArray) // ["a", "b", "c", "e", "d"]
/* 方法:reverse()
* 功能：反转数组，即第一项变成最后一项，最后一项变为第一项
* 返回值：经反转后的原数组
*/
let arr = [1,2,3,4]
let reverseArr = arr.reverse() // 反转数组
console.log(arr,reverseArr ) // arr:[4,3,2,1] reverseArr :[4,3,2,1]
/* 方法:flat(depth)
* 功能：通过指定深度遍历各元素，并且将个元素组成新数组返回
* 返回值：经指定深度遍历各元素后组成的新数组
* 参数：
* depth(可选)：指定要提取嵌套数组的结构深度，默认值为 1
*/
let arr = [1,2,3,[4,5,6]]
let flatArr= arr.flat() // 按照深度为1进行提取元素，并组成新数组
console.log(arr,flatArr) // arr:[1,2,3,[4,5,6]] flatArr:[1,2,3,4,5,6]
// 使用 Infinity，可展开任意深度的嵌套数组
let arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
arr.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
/* 方法:fill(val,start,end)
* 功能：填充数组，改变原数组
* 返回值：填充后的数组
* 参数：
* val：要填充的值
* start(可选)：要填充的起始位置
* end(可选)：要填充的中止位置
*/
let arr = [1,2,3,4,5]
let fillArr= arr.fill(100,2,3) // 从数组下标2开始到数组下标3前，填充’100‘
console.log(arr,fillArr) // arr:[1,2,100,4,5] flatArr:[1,2,100,4,5]
fillArr= arr.fill(100,2) // 从数组下标2开始填充’100‘
console.log(arr,fillArr) // arr:[1,2,100,100,100] flatArr:[1,2,100,100,100]
fillArr= arr.fill(100) // 从头开始填充’100‘
console.log(arr,fillArr) // arr:[100,100,100,100,100] flatArr:[100,100,100,100,100]