数组的常用的方法大全()-其他
数组的常用的方法大全()
数组的增删改查操作:
1. 数组.push( 元素 )
2. 数组.unshift( 元素 )
在数组首位添加一个或者多个元素
返回值 : 返回的是添加元素后数组的长度.
3. 数组.pop( 元素 )
let arr = [10,20,30,40,50]
const newArr = arr.slice(2,5)// 2 <= 范围 < 5
console.log( newArr )//[30,40,50]
常用方法:
7. 数组.concat( 数组 )
let arr = [10,20]
const newArr1 = arr.concat([60,70,80])
console.log( newArr1 ) //[10,20,60,70,80]
8. 数组.join(‘分隔符’)
将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。返回值:返回一个新的字符串
const nameArr = ['张三','李四']
console.log( nameArr.join('&') )//张三&李四
9.数组.reverse( )
翻转数组
let arr = [10,20,30,40,50]
arr.reverse()
console.log( arr )//[50,40,30,20,10]
10. 数组.sort( )
可以对数组进行排序.
let dataArr = [
{name:'张三',age:18},
{name:'李四',age:22},
{name:'王五',age:16},
{name:'赵六',age:30},
]
// 排序
dataArr.sort( (a,b)=>{
console.log( a,b )//数组中相邻的元素
return a.age - b.age // 从小到大排序
return b.age - a.age // 从大到小排序
})
console.log(dataArr)
遍历数组方法
11.数组.map( )
12.数组.forEach( )
arr.forEach(function(item,index){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
})
13.数组.filte( )
filter方法: 有返回值, 过滤出符合条件的元素
<script>
let arr = [
{name:'商品1',select:false},
{name:'商品2',select:true},
{name:'商品3',select:false},
{name:'商品4',select:true},
{name:'商品5',select:false}
]
/*
1.根据条件筛选数组,将满足条件的元素放入新数组
筛选数组元素 批量删除数组元素
2.循环次数 === 数组长度
3.回调函数内部返回值
return true : 满足条件,放入新数组
return false : 不满足条件,不放入新数组
4.方法自身返回值 无return返回值
*/
// 需求 : 筛选用户选中的商品
// const res = arr.filter( ( item,index ) => {
// if( item.select){
// return true
// }else {
// return false
// }
// })
// console.log(res);
// 简写
const res =arr.filter(item => item.select)
console.log(res);
// 需求 : 删除选中的商品(把true的剔除,保留false的商品)
// 等价于 : 筛选用户没有选中的商品
arr=arr.filter(item => !item.select)
console.log(arr);
</script>
14.数组.reduce( )
<script>
let arr = [10,20,30,40,50]
// 数组reduce方法 : 为每一个元素执行一次回调,并得到最终结果
// 经典应用 : 求累加和
/*
第一个参数 : (sum,item,index)=>{
return 下一次的sum值
}
第二个参数 : sum初始值
一定要传初始值,一般为0(不传遇到空数组就会报错)
reduce自己返回值 : 最后一次sum结果
*/
// const res = arr.reduce((sum,item,index)=>{
// return sum + item
// },0)
const res = arr.reduce( (sum,item,index) => sum + item , 0)
console.log(res);
</script>
————————
数组的增删改查操作:
1. 数组.push( 元素 )
2. 数组.unshift( 元素 )
在数组首位添加一个或者多个元素
返回值 : 返回的是添加元素后数组的长度.
3. 数组.pop( 元素 )
let arr = [10,20,30,40,50]
const newArr = arr.slice(2,5)// 2 <= 范围 < 5
console.log( newArr )//[30,40,50]
常用方法:
7. 数组.concat( 数组 )
let arr = [10,20]
const newArr1 = arr.concat([60,70,80])
console.log( newArr1 ) //[10,20,60,70,80]
8. 数组.join(‘分隔符’)
将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。返回值:返回一个新的字符串
const nameArr = ['张三','李四']
console.log( nameArr.join('&') )//张三&李四
9.数组.reverse( )
翻转数组
let arr = [10,20,30,40,50]
arr.reverse()
console.log( arr )//[50,40,30,20,10]
10. 数组.sort( )
可以对数组进行排序.
let dataArr = [
{name:'张三',age:18},
{name:'李四',age:22},
{name:'王五',age:16},
{name:'赵六',age:30},
]
// 排序
dataArr.sort( (a,b)=>{
console.log( a,b )//数组中相邻的元素
return a.age - b.age // 从小到大排序
return b.age - a.age // 从大到小排序
})
console.log(dataArr)
遍历数组方法
11.数组.map( )
12.数组.forEach( )
arr.forEach(function(item,index){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
})
13.数组.filte( )
filter方法: 有返回值, 过滤出符合条件的元素
<script>
let arr = [
{name:'商品1',select:false},
{name:'商品2',select:true},
{name:'商品3',select:false},
{name:'商品4',select:true},
{name:'商品5',select:false}
]
/*
1.根据条件筛选数组,将满足条件的元素放入新数组
筛选数组元素 批量删除数组元素
2.循环次数 === 数组长度
3.回调函数内部返回值
return true : 满足条件,放入新数组
return false : 不满足条件,不放入新数组
4.方法自身返回值 无return返回值
*/
// 需求 : 筛选用户选中的商品
// const res = arr.filter( ( item,index ) => {
// if( item.select){
// return true
// }else {
// return false
// }
// })
// console.log(res);
// 简写
const res =arr.filter(item => item.select)
console.log(res);
// 需求 : 删除选中的商品(把true的剔除,保留false的商品)
// 等价于 : 筛选用户没有选中的商品
arr=arr.filter(item => !item.select)
console.log(arr);
</script>
14.数组.reduce( )
<script>
let arr = [10,20,30,40,50]
// 数组reduce方法 : 为每一个元素执行一次回调,并得到最终结果
// 经典应用 : 求累加和
/*
第一个参数 : (sum,item,index)=>{
return 下一次的sum值
}
第二个参数 : sum初始值
一定要传初始值,一般为0(不传遇到空数组就会报错)
reduce自己返回值 : 最后一次sum结果
*/
// const res = arr.reduce((sum,item,index)=>{
// return sum + item
// },0)
const res = arr.reduce( (sum,item,index) => sum + item , 0)
console.log(res);
</script>