前端学习day11-js0401:数组的高级API

本文链接：https://blog.csdn.net/qq_45926448/article/details/125488351

        所有的高级api  其实把函数做为参数进行传递 
        测试函数的返回值  决定着 高级函数的返回值

1.find方法

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

参数：一个测试函数

测试函数的返回值：true或false

返回值：依赖于测试函数的返回值

如果测试函数的返回值为true 则得到对应的value值

如果测试函数条件都不满足时返回false则返回undefined

  var arr = [1, 5, 8, 10];
        var num = arr.find(function(value, index, arr) {
            if (value > 5) {
                return true;
            } else {
                return false;
            }
        });
        console.log(num); //8

模拟find方法

 function testFind(callback) {
            var array = [1, 5, 8, 10];
            var result;
            for (let index = 0; index < array.length; index++) {
                const element = array[index];
                if (typeof callback == "function") {
                    result = callback(element, index, array);
                    if (result) {
                        return element;
                    }
                }
            }
            if (!result) {
                return undefined;
            }
        }
        var num = testFind(function(value, index, arr) {
            return value > 5;

        });
        console.log(num);

2.findIndex 找索引

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

 var arr = [1, 5, 8, 10];
        var index = arr.findIndex(function(value, index, arr) {
            if (value > 5) {
                return true;
            } else {
                return false;
            }
        })
        console.log(index); //2

3.map 映射

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

 var arr = [1, 5, 8, 10];
        var newArr = arr.map(function(v) {
            return v * 10;
        });
        console.log(newArr); // [10, 50, 80, 100]

延伸：map与foreach的区别

foreach（）方法没有返回值 void空

map返回一个新数组

4.filter 过滤

满足测试函数条件 组成的新数组

var arr = [1, 5, 8, 10];
        var newArr = arr.filter(function(value) {
            return value > 5;

        });
        console.log(newArr); // [ 8, 10 ]

5.some 一些

只要测试函数有一次返回为true，some函数就返回为true；

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

 var arr = [1, 5, 8, 10];
        var newArr = arr.some(function(value) {
            return value > 5;

        });
        console.log(newArr); //true

6.every 所有

测试函数都满足条件时返回为true ，有一个返回为false，则every函数返回为false

var arr = [1, 5, 8, 10];
        var newArr = arr.every(function(value) {
            return value > 5;

        });
        console.log(newArr); //false

7.reduce 聚合

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

7.1利用reduce方法计算数组所有元素的总和

  var arr = [1, 5, 8, 10];
        var num = arr.reduce(function(previousValue, currentValue, currentIndex, array) {
            return previousValue + currentValue;
        });
        console.log(num); //24

7.2利用reduce方法找到最大值

测试函数的返回值会作为下次执行时的previousValue

 var arr = [1, 5, 8, 10];
        var num = arr.reduce(function(previousValue, currentValue, currentIndex, array) {
            if (currentValue > previousValue) {
                return currentValue;
            } else {
                return previousValue;
            }
        });
        console.log(num); //10

7.3当reduce函数有两个参数时

参数1.回调函数

参数2.初始值

 var arr = [1, 5, 8, 10];
        var num = arr.reduce(function(previousValue, currentValue, currentIndex, array) {
            return previousValue + currentValue;
        }, 100);

        console.log(num); //124

8.sort 排序

return a-b;——为升序

return b-a;——为降序

 var arr = [1, 5, 8, 10];
        var num = arr.sort(function(a, b) {
            return b - a;
        })
        console.log(num); //[ 10, 8, 5, 1 ]

sort方法里面如果不传测试函数时，则将数组里面的元素转为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的，返回新数组。