当前位置: 首页 > news >正文

数组常用方法(2)---数组遍历方法

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 }
http://www.lryc.cn/news/1332.html

相关文章:

  • 卸载Node.js
  • 发表计算机SCI论文,会经历哪些过程? - 易智编译EaseEditing
  • python中lambda的用法
  • 网络安全协议(3)
  • 102.第十九章 MySQL数据库 -- MySQL的备份和恢复(十二)
  • 【C++】C++入门 类与对象(一)
  • 笔记_js运算符
  • java面试题(十九) Mybatis
  • Linux系统位运算函数以及相应CPU ISA实现收录
  • logback配置文件---logback.xml
  • Web前端-设计网站公共header
  • 引用和指针傻傻分不清
  • MySQL面试题:关系型数据库SQL和非关系型数据库NoSQL
  • 1.Redis【介绍与安装】
  • DataStore快速上手1-preference
  • 彻底掌握 MySQL InnoDB 的锁机制
  • C++继承
  • 动态代理是基于什么原理?
  • YOLO-V4经典物体检测算法介绍
  • angular相关知识点总结
  • 大坝安全监测系统:水库“守坝人”!
  • CentOS7安装配置OpenVNP连接远端服务器
  • 04- Matplotlib数据可视化详解 (数据库)
  • 高性能MySQL -- 查询性能优化
  • Android Binder机制之一(简介)
  • 《SOC芯片研究框架》深度科普,发展趋势、技术特点、产业链一文看懂
  • WebRTC中的ICE
  • 了解webpack
  • NoSQL数据库详细介绍
  • 【2023】华为OD机试真题Java-题目0210-优秀学员统计