首页 > 其他分享 >数组方法

数组方法

时间:2022-12-23 16:23:10浏览次数:57  
标签:map previousValue 函数 元素 callbackFn 数组 方法

数组方法

数组方法1、forEach()2、map()3、filter()4、every()、 some()5、reduce() 总结

 

1、forEach()

Javascript数组forEach()方法为数组中的每个元素调用一个函数。

        let arr6 = ['a', 'b', 'c', 'd'];
        arr6.forEach(function(item, index, array){
            console.log(item);//数组元素
            console.log(index);//元素索引
            console.log(array);//原数组本身
        });

得到一下结果:


2、map()

Javascript数组map()方法创建一个新数组,其结果是在此数组中的每个元素上调用提供的函数。

**map 方法会给原数组中的每个元素都按顺序调用一次 callbackFn 函数。**

callbackFn 每次执行后的返回值(包括 undefined)组合起来形成一个新数组

因为 map 生成一个新数组,当你不打算使用返回的新数组却使用 map 是违背设计初衷的,请用 forEach 或者 for-of 替代。

如果有以下情形,则不该使用 map

  • 你不打算使用返回的新数组;或

  • 你没有从回调函数中返回值。

callbackFn 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。

        let arr7 = [1, 2, 3];
        let new_arr7 = arr7.map(function(item, index, array) {
            return item * item
        })
        console.log(new_arr7)
        console.log(arr7);// 并未改变原数组(比较forEach)
​
​
        const numbers = [1, 4, 9];
        const roots = numbers.map(function(数组元素,元素索引,原数组本身){
            return item * item
        });
​
        // roots 现在是     [1, 2, 3]
        // numbers 依旧是   [1, 4, 9]
​

尝试下面的代码:

 

map()函数也称映射,将对应的元素按顺序执行callbackFn回调函数,再将这些新产生的新元素组成一个新数组。

因为 map 生成一个新数组,当你不打算使用返回的新数组却使用 map 是违背设计初衷的,请用 forEach 或者 for-of 替代。

大概意思就是如果你不需要对新元素操作,你就用不到该函数。


3、filter()

filter() 方法创建给定数组一部分浅拷贝包含通过所提供函数实现的测试的所有元素。(过滤筛选)

filter() 为数组中的每个元素调用一次 callbackFn 函数,并利用所有使得 callbackFn 返回 true的元素创建一个新数组。

callbackFn 被调用时传入三个参数:

  1. 元素的值

  2. 元素的索引

  3. 被遍历的数组本身

filter() 不会改变原数组。(同map)

function isBigEnough(value) {
  return value >= 10;
}
​
const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
        let arr8 = [
            {
                name:'a',
                height: 177
            },
            {
                name: 'b',
                height: 188
            },
            {
                name: 'c',
                height: 181
            }
        ]
        let higher = arr8.filter(function(i){
            return i.height > 180
        })
        console.log(higher);
​

find()找到目标元素并返回的是目标元素。只找到,不找全。


4、every()、 some()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

两个都返回布尔值。

every()每一个元素都满足条件true。

some()只要有一个元素满足条件true。


5、reduce()

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数(回调函数),每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值。所以如果你不给一个初始值,那么index将从1开始,而不是从0。

  • callbackFn

    一个“reducer”函数,包含四个参数:

    previousValue:上一次调用 callbackFn 时的返回值。

    在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]

    就是函数执行一次后的结果值,第一次没执行采用的结果就是你一开始给的初始值。

     

    currentValue:数组中正在处理的元素。

    在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]

     

    currentIndex:数组中正在处理的元素的索引。

    若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始。array:用于遍历的数组。

  • initialValue 可选

    作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue,则 currentValue 则将使用数组第一个元素;否则 previousValue 将使用数组第一个元素,而 currentValue 将使用数组第二个元素。

// Array.ruduce(function(previousValue, currentValue,currentIndex){},initialValue)
// 和前面差不多: Array.ruduce(function(previousValue, item,index){ },initialValue)
//ruduce()本身两个参数,第二个参数可选。第一个参数即回调函数里,又有三个参数。
​
​
let sum = [1, 2, 3].reduce(function (previousValue, currentValue) {
  return previousValue + currentValue
}, 0)
// sum is 6
//初始previousValue是0。函数每一次执行都会把结果保存给previousValue,然后去和currentValue相加。
​

总结

到此至少掌握:

  • forEach()、map()。

  • 这几个回调函数的参数类似

标签:map,previousValue,函数,元素,callbackFn,数组,方法
From: https://www.cnblogs.com/5-2023/p/17000948.html

相关文章