【JavaScript】高级语法——常用的数组处理方法

简介: 【JavaScript】高级语法——常用的数组处理方法

本篇文章分享给大家几个常用的处理数组使用的函数方法

1. filter 过滤

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

示例代码如下:

// 要求: 使用filter方法过滤出nums数组中的偶数
/* 
    三个参数:
    * item :数组中的每一项
    * index : 数组中每一项的索引值
    * arr :该数组 (本案例中为数组nums)
*/
var nums = [10, 5, 16, 21, 55, 37]
var newNums1 = nums.filter((item, index, arr) => {
    // console.log(item, index, arr)
    return item % 2 == 0
})
console.log(newNums1) // [ 10, 16 ]

2. map 映射

map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

示例代码如下:

// map 映射
/* 
callback 为数组中每个元素执行的函数,该函数接收三个参数:
    * currentValue :数组中正在处理的当前元素。
    * index : 数组中正在处理的当前元素的索引。
    * array 可选 :forEach() 方法正在操作的数组。
*/
var nums = [10, 5, 16, 21, 55, 37]
var newNums2 = nums.map(item => {
    return item * 2
})
console.log(newNums2) // [ 20, 10, 32, 42, 110, 74 ]

需要注意的是 map()方法回调函数的结果组成了新数组的每一个元素。而不是修改了原数组。

3. forEach 迭代

forEach() 方法对数组的每个元素执行一次提供的函数。

/* 
callback 为数组中每个元素执行的函数,该函数接收三个参数:
    * currentValue :数组中正在处理的当前元素。
    * index : 数组中正在处理的当前元素的索引。
    * array 可选 :forEach() 方法正在操作的数组。
*/
var nums = [10, 5, 16, 21, 55, 37]
var arr = []
nums.forEach(item => {
    if (item % 2 == 0) {
        arr.push(item)
    }
})
console.log(arr) // [ 10, 16 ]

4. find 查找

find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

var nums = [10, 5, 16, 21, 55, 37]
var result1 = nums.find(item => {
    return item == 16
})
var result2 = nums.find(item => {
    return item == 200
})
console.log(result1) // 16
console.log(result2) // undefined
// 也可以深入查找对象中的某个属性,如下所示:
var arr2 = [
    { name: 'L', age: 19 },
    { name: 'W', age: 6 },
    { name: 'Z', age: 24 }
]
console.log(arr2.find(item => {
    return item.age == 24
})) // { name: 'Z', age: 24 }

5. findIndex 查找索引

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

var arr2 = [
    { name: 'L', age: 19 },
    { name: 'W', age: 6 },
    { name: 'Z', age: 24 }
]
var findIndex1 = arr2.findIndex(item => {
    return item.name === 'Z' 
})
var findIndex2 = arr2.findIndex(item => {
    return item.name === 'K' // 
})
console.log(findIndex1) // 2  索引从0开始,{ name: 'Z', age: 24 }索引为2
console.log(findIndex2) // -1  查找不到name叫K的对象,返回-1

6. reduce 累积

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

/* 
    语法:
    arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
    两个参数:
        回调函数callback 中的四个参数:
            * accumulator 累计器 (上一次的返回值)
            * currentValue 当前值
            * index(可选) 当前索引
            * array(可选) 数组
        第二个参数(可选):
            * initialValue 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的 空数组上调用 reduce 将报错。
*/
var nums = [10, 5, 16, 21, 55, 37]
var total = nums.reduce((acc, cur) => {
    return acc + cur
}, 0) // 0 代表initialValue值
console.log(total) // 144 (nums数组元素之和)

reduce()方法比较难理解,这里就进行一个详细一点的解释。

reduce为数组中的每一个元素依次执行callback函数,不包括数组中被删除或从未被赋值的元素。

回调函数第一次执行时,accumulator和currentValue的取值有两种情况:如果调用reduce()时提供了initialValue,accumulator取值为initialValue,currentValue取数组中的第一个值;如果没有提供initialValue ,那么accumulator取数组中的第一个值,currentValue取数组中的第二个值。


注意:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。


目录
相关文章
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
41 2
|
2月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
31 3
|
2月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
47 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
49 1
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
36 0
|
2月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
23 0
|
2月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
35 0
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
104 2