javascript之数组方法总结
- forEach遍历数组(不返回数组)
- map迭代数组(返回新数组)
- join方法
- reduce累计器(返回累计处理结果)
- filter过滤数组(返回新数组)
- sort排序
- splice删除
- find查找元素
- every检测
- some检测
- 伪数组转换为真数组
- pop删除末尾元素
- shift删除首位元素
- push新增末尾
- unshift新增开头
forEach遍历数组(不返回数组)
forEach方法用于调用数组的每个元素,并将元素传递给回调函数
语法:
被遍历的数组.forEach(function(当前数组元素,当前元素索引号){
//函数体
})
注意:
1.forEach主要是遍历数组
2.参数当前数组元素是必须要写的,索引号可选。
//forEach就是遍历,不返回数组,加强版的for循环,适合遍历数组对象
const arr=['red','green','pink']
const result=arr.forEach(function(item,index){
console.log(item)//数组元素red green pink
console.log(index)//索引号
})
map迭代数组(返回新数组)
map可以遍历数组处理数据,并且返回新数组
map也称为映射,指两个元素的集之间元素相互对应的关系。
map重点在于有返回值,forEach没有返回值
const arr = ['red', 'blue', 'green']
// map 方法也是遍历 处理数据 可以返回一个数组
const newArr = arr.map(function (item, i) {
// console.log(item) // 数组元素 'red'
// console.log(i) // 下标
return item + '老师'
})
console.log(newArr)
// ['red老师', 'blue老师', 'green老师']
const arr1 = [10, 20, 30]
const newArr1 = arr1.map(function (item) {
return item + 10
})
console.log(newArr1)
join方法
join()
方法用于把数组的所有元素转换一个字符串
参数:
数组元素是通过参数里面指定的分隔符进行分隔,空字符串(’’),则所有元素之间都没有任何字符
<!DOCTYPE html>
const arr = ['red', 'blue', 'green']
// 把数组元素转换为字符串
console.log(arr.join('*')) //red*blue*green
console.log(arr.join('')) //redbluegreen
console.log(arr.join()) //red,blue,green
reduce累计器(返回累计处理结果)
reduce()
经常用于求和
语法:
arr.reduce(function(){},起始值)
arr.reduce(function(上一次值,当前值){},初始值)
参数:
1.如果有初始值,则把初始值累加到里面
执行过程:
1.如果没有起始值,则上一次值以数组的第一个数组元素的值
2.每一次循环,把返回值给作为下一次循环的上一次值
3.如果有起始值,则起始值作为上一次值
1.有初始值
// arr.reduce(function (prev, item) {
// // console.log(11)
// // console.log(prev)
// return prev + item
// }, 0)
2.没有初始值
// arr.reduce(function (prev, item) {
// console.log(11)
// // console.log(prev)
// return prev + item
// })
3.箭头函数的写法
const arr = [1, 2, 3]
const re = arr.reduce((prev, item) => prev + item)
console.log(re)
filter过滤数组(返回新数组)
此方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
被遍历的数组.filter(function(currentValue,index){
return 筛选条件
})
//筛选数组中大于30的元素
const score=[10,50,3,40,33]
const re=score.filter(function(item){
return item>30
})
console.log(re)//[50,40,33]
返回值:返回数组,包含了符合条件的所有元素。如果没有符合的元素则返回空数组
参数:currentValue
必须写,index
可选
因为返回新数组,所以不会影响原数组
sort排序
默认按照升序排列
// sort 升序排列
// arr.sort(function (a, b) {
// return a - b
// })
// sort() 降序
arr.sort(function (a, b) {
return b - a
})
console.log(arr)
splice删除
数组.splice()
方法,删除指定元素
arr.splice(起始位置,删除几个元素)
arr.splice(start,deleteCount)
deleteCount如果省略,表示从指定的起始位置删除到最后
splice 删除指定元素
splice(起始位置-索引号, 删除几个)
arr.splice(1, 1) // 是从索引号1的位置开始删, 只删除1个
// arr.splice(1) // 从green 删除到最后
find查找元素
返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回undefined
const arr = ['red', 'blue', 'green']
const re = arr.find(function (item) {
return item === 'blue'
})
console.log(re)
console.log(item.name)
const arr = [
{
name: '小米',
price: 1999
},
{
name: '华为',
price: 3999
},
]
// 找小米 这个对象,并且返回这个对象
// const mi = arr.find(function (item) {
// // console.log(item) //
// // console.log(item.name) //
// console.log(111)
// return item.name === '华为'
// })
every检测
检测数组中所有元素是否都符合指定条件,如果所有元素都通过检测则返回true,否则返回false
// 2. every 每一个是否都符合条件,如果都符合返回 true ,否则返回false
const arr1 = [10, 20, 30]
const flag = arr1.every(item => item >= 20)
console.log(flag)
some检测
检测数组中d的元素是否满足指定条件,如果数组中有元素满足条件则返回true,否则返回false
伪数组转换为真数组
Array.from(lis) 把伪数组转换为真数组
const lis = document.querySelectorAll('ul li')
// console.log(lis)
// lis.pop() 报错
const liss = Array.from(lis)
liss.pop()
console.log(liss)
pop删除末尾元素
数组.pop()
方法从数组中删除最后一个元素,并返回该元素的值
let arr = ['red', 'green', 'blue']
// console.log(arr.pop()) // blue
// pop() 删除最后一个元素
// arr.pop()
// console.log(arr)
shift删除首位元素
数组.shift()
方法从数组中删除第一个一个元素,并返回该元素的值
// shift() 删除第一个元素
// arr.shift()
// console.log(arr)
push新增末尾
数组.push()
方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度
<!DOCTYPE html>
let arr = ['pink', 'hotpink']
// 新增 push 推末尾
console.log(arr.push('deeppink')) // 3
// arr.push('deeppinnk', 'linghtpink')
// console.log(arr)
unshift新增开头
arr.unshift(新增的内容)
方法将一个或多个元素添加到数组的开头,并返回该数组的新长度
// 开头追加
arr.unshift('red')
console.log(arr)