数组常用方法(2)---数组遍历方法
创始人
2024-05-25 00:45:29

1. forEach(cb)

  • 回调函数中有三个参数,第一个是当前遍历项(必须),第二个是索引,第三个是遍历的数组本身。
  • forEach() 对于空数组不会执行回调函数。
  • forEach()不会使用回调函数的返回值,返回值为undefined。
let arr = [1, 2, 3, {a:1,b:2}]
let res = arr.forEach((val, index) => {console.log(val, index);if(index === 3) return arr[index] = {c:3}arr[index] = 0
})
console.log(res);
console.log(arr);
1 0
2 1
3 2
{ a: 1, b: 2 } 3
undefined
[ 0, 0, 0, { c: 3 } ]

2. filter(cb)

  • 回调函数中有三个参数,第一个是当前遍历项(必须),第二个是索引,第三个是遍历的数组本身。
  • filter()筛选出符合条件的元素,放到新数组中并返回,return 后可以是筛选条件,若在回调中return true,则会把当前遍历项放入新数组。
  • 返回值是筛选后的新数组。
let arr = [1, 2, 3, {a:1,b:2}]
let res = arr.filter((val, index) => {console.log(val, index);return typeof val === 'number'
})
console.log(res);
console.log(arr);
1 0
2 1
3 2
{ a: 1, b: 2 } 3
[ 1, 2, 3 ]
[ 1, 2, 3, { a: 1, b: 2 } ]

3.map(cb)

  • 回调函数中有三个参数,第一个是当前遍历项,第二个是索引,第三个是遍历的数组本身。
  • map()处理数组的每一个元素,放到新数组中并返回,return 一个需要的元素来替换旧元素。(通常用于把数组元素处理成想要的格式)
  • 返回值是与原数组有映射关系的新数组。
let arr = [1, 2, 3, {a:1,b:2}]
let res = arr.map((val, index) => {console.log(val, index);return {value: val,index:index}
})
console.log(res);
console.log(arr);
1 0
2 1
3 2
{ a: 1, b: 2 } 3
[{ value: 1, index: 0 },{ value: 2, index: 1 },{ value: 3, index: 2 },{ value: { a: 1, b: 2 }, index: 3 }
]
[ 1, 2, 3, { a: 1, b: 2 } ]

4. some()

  • 回调函数中有三个参数,第一个是当前遍历项,第二个是索引,第三个是遍历的数组本身。
  • return 后面是一个条件,结果是true / false,有一个满足条件的元素就返回true,后面的不再判断,所有都不满足则返回false。
  • 返回值是与原数组有映射关系的新数组。
let arr = [1, 2, 3, {a:1,b:2}]
let res = arr.some((val, index) => {console.log(val, index);return typeof val === 'number'
})
console.log(res);
console.log(arr);
1 0
true
[ 1, 2, 3, { a: 1, b: 2 } ]

5. every()

  • 回调函数中有三个参数,第一个是当前遍历项,第二个是索引,第三个是遍历的数组本身。
  • return 后面是一个条件,结果是true / false,有一个不满足条件的元素就返回false,后面的不再判断,所有都满足则返回true。
  • 返回值是与原数组有映射关系的新数组。
let arr = [1, 2, 3, {a:1,b:2}]
let res = arr.every((val, index) => {console.log(val, index);return typeof val === 'number'
})
console.log(res);
console.log(arr);
1 0
2 1
3 2
{ a: 1, b: 2 } 3
false
[ 1, 2, 3, { a: 1, b: 2 } ]

6. includes(val,index)

  • includes()有两个参数,第一个是要查找的值,第二个是开始查找的索引,默认为0,负数表示从后往前找,比如-1表示从倒数第一个元素开始查找,若负数的绝对值大于数组长度,则索引置为0。

Array构造下的includes()可以判断一个数组中是否包含一个指定的元素,不建议用来判断复杂数据类型,判断NaN会返回true。

let obj = {a:111}
let arr = [1, 2, 3,'ss',{a:111}]
arr.push(obj)
let res1 = arr.includes({a:111}) /* 因为复杂数据类型的值相等其引用也不一定相等,所以返回false */
let res2 = arr.includes(obj) /* 这里判断的是push进去的同一个对象,所以返回true */
let res3 = arr.includes(2)
let res4 = arr.includes(NaN) /* 判断NaN会返回true */
console.log(res1);
console.log(res2);
console.log(res3);
console.log(res4);
console.log(arr);
false
true
true
true
[ 1, 2, 3, 'ss', { a: 111 }, { a: 111 } ]

注意:数组最后一个元素是push进去的obj,倒数第二个是初始定义的{a:111},两个对象值相同,但是引用地址不同。

String构造下的includes()可以判断一个字符串中是否包含另一个字符串,判断时建议筛除空字符串,因为任何字符串判断是否包含空字符串都会返回true。

let str = 'hello world!'
let res = str.includes(0)
let res1 = str.includes('')
let res2 = str.includes('hello')
let res3 = str.includes('lo ')
let res4 = str.includes('heee')
console.log(res);
console.log(res1);
console.log(res2);
console.log(res3);
console.log(res4);
false
true
true
true
false

7. indexOf()

8. findIndex()

9. reduce(cb,initial)

  • reduce()有两个参数,第一个参数是回调函数,第二个值是迭代相加的初始值。
  • 回调函数中有四个参数,第一个是初始值或迭代相加值,第二个当前遍历项(必须),第三个是索引,第四个是遍历的数组本身。
  • 返回值是迭代相加的值,需要在reduce外输出迭代相加的值。

此处案例是得到一个对象,对象属性的值为数组各元素对应属性的和

// mockData
let arr = [{num1:11,num2:22,num3:33,num4:100},{num1:11,num2:22,num3:33,num4:100},{num1:11,num2:22,num3:33,num4:100},{num1:11,num2:22,num3:33,num4:100}
]// code start
let total  = {num1:0,num2:0,num3:0,num4:0
}
let res = arr.reduce((pre, val) => {Object.keys(pre).forEach((item,i)=>{// 这里的数据相加只能是整数,否则有精度问题,如果要考虑含小数的相加,需要引入数据处理的包,比如math.jspre[item] += val[item] })return pre
},total)
console.log(res);
{ num1: 44, num2: 88, num3: 132, num4: 400 }

相关内容

热门资讯

北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...