JS常用数组方法 reduce filter find forEach

文章目录

  • reduce
  • filter
  • find
    • [从数组 [1,2,3,4,5,6] 中找出值为 2 的元素](#从数组 [1,2,3,4,5,6] 中找出值为 2 的元素)
  • forEach
      • [用于遍历,forEach 方法没有返回值,它总是返回 undefined。](#用于遍历,forEach 方法没有返回值,它总是返回 undefined。)

reduce

数组变量名.reduce((sum,value) => {

// 向sum变量上累加值

// 一定要return值 给下一次循环sum初始值

},0)

javascript 复制代码
let arr = [10, 5, 3, 7]

let res = arr.reduce((sum, value) =>{
  console.log(sum,value);
  
  sum += value
  return sum
},0)

console.log(res);

应用:数据扁平化

filter

filter 方法用于过滤数组,返回数组中满足条件的元素所组成的新数组

javascript 复制代码
let newArray = array.filter(function(element, index, array) {
    // 返回 true 或 false
}, thisArg);

element:当前正在处理的数组元素。
index(可选):当前正在处理的元素的索引。
array(可选):调用 filter 方法的数组。
thisArg(可选):执行回调时使用的 this 值。
newArray:包含通过测试的所有元素的新数组。

应用场景:当你需要根据特定条件筛选数组元素时

javascript 复制代码
假设我们有一个数字数组,我们想要找出所有大于 10 的数字:

const numbers = [1, 12, 5, 8, 20, 7, 30];
const filteredNumbers = numbers.filter(function(number) {
    return number > 10;
});

console.log(filteredNumbers); // 输出: [12, 20, 30]

find

返回数组中满足提供的测试函数的第一个元素的值。如果没有元素满足测试函数,find 方法返回 undefined。

javascript 复制代码
let result = array.find(function(element, index, array) {
    // 返回 true 或 false
}, thisArg);

element:当前正在处理的数组元素。
index(可选):当前正在处理的元素的索引。
array(可选):调用 find 方法的数组。
thisArg(可选):执行回调时使用的 this 值。
result:数组中满足测试函数的第一个元素的值,否则返回 undefined。
返回值
  • 例子
javascript 复制代码
const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

const foundUser = users.find(user => user.id === 2);

console.log(foundUser); // 输出: { id: 2, name: 'Bob' }

从数组 [1,2,3,4,5,6] 中找出值为 2 的元素

  • 用find
javascript 复制代码
// 从数组 [1,2,3,4,5,6] 中找出值为 2 的元素
console.log('从数组 [1,2,3,4,5,6] 中找出值为 2 的元素');

let arr1 = [1,2,3,4,5,6]
let res1 = arr1.find((ele,index)=>{
  return ele === 2
})
console.log(res1);
  • 用filter
javascript 复制代码
let res2 = [1,2,3,4,5,6].filter((ele) => ele === 2)
console.log(res2);

这两个方法略有不同,filter返回的是一个数组,数组中包含符合条件的元素。find返回的是第一个满足条件的元素

forEach

用于遍历,forEach 方法没有返回值,它总是返回 undefined。

javascript 复制代码
array.forEach(function(element, index, array) {
    // 执行代码
}, thisArg);

element:当前正在处理的数组元素。
index(可选):当前正在处理的元素的索引。
array(可选):调用 forEach 方法的数组。
thisArg(可选):执行回调时使用的 this 值。
undefined:forEach 方法没有返回值,它总是返回 undefined。
  • 遍历数组
javascript 复制代码
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => console.log(number));
相关推荐
刚刚好ā8 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
Domain-zhuo3 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花3 小时前
前端三剑客(三):JavaScript
开发语言·前端·javascript
码农六六3 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保4 小时前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~4 小时前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
建群新人小猿4 小时前
会员等级经验问题
android·开发语言·前端·javascript·php