【JavaScript高级】关于数组的高阶函数讲解精髓版

最新推荐文章于 2022-08-12 08:57:43 发布

阿山同学.

最新推荐文章于 2022-08-12 08:57:43 发布

阅读量132

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_50112395/article/details/124591815

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的高阶函数</title>
    <style>

    </style>
</head>

<body>
    <script>
        // 数组的高阶函数
        // 高阶函数：如果一个函数中，，使用了；另一个函数，就叫高阶函数
        // 类似：程序员有经验后 程序员成为大佬或高阶程序员
        // 例如：数组有一个sort排序，例如sort[1131,1231,12145]
        // 以后：从服务器上查询出数据，往往是数组类型，在JS中提供了大量
        // every ：每一个，用于遍历数组，检查每一个元素是否符合条件
        var nums = [111, 222, 333, 444, 555, 666, 777, 888];
        // 检查：数组每个元素是否都是偶数
        // every 的参数：要求是函数类型，函数固定接受三个函数
        // every会便历nums中的每个元素，传递给函数
        var a = nums.every((value, index, array) => {
            // 箭头函数的形参名可以随便起
            // 顺序固定：值，序号，数组本身
            console.log("value", value);
            console.log("index", value);
            console.log("array", value);
            return true; // 先写true
        });
    </script>
</body>

</html>

输出：

所以我们就可以：

<script>
        var nums = [111, 222, 333, 444, 555, 666, 777, 888];
        var a = nums.every((value, index, array) => {
            // 箭头函数的形参名可以随便起
            // 顺序固定：值，序号，数组本身
            console.log("value", value);
            console.log("index", value);
            console.log("array", value);
            // return true; // 先写true
            return value % 2 == 0
        });
        console.log("a?", a);
        console.log(a ? '都是偶数' : '都不是偶数');
        //三目运算符忘记的出来挨打
    </script>

则输出为：

我们可以简化一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
    <style>

    </style>
</head>

<body>
    <script>
        var nums = [12, 3, 5, 65, -3];
        // 没用到的函数，可以不用声明
        // 箭头函数：单参数省略() 函数体只有一行（return）

        var a = nums.every((value) => {
            return value <= 0
        });
        // 所以可简化为
        var a = nums.every(value =>
            value > 0
        )
        console.log("a?", a);
        console.log(a ? '都是偶数' : '都不是偶数');
    </script>
</body>

</html>

练习写出一下数组是否都大于10

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
    <style>

    </style>
</head>

<body>
    <script>
        var nums = [12, 3, 5, 65, -3];
        // 没用到的函数，可以不用声明
        // 箭头函数：单参数省略() 函数体只有一行（return）

        //？？？
    </script>
</body>

</html>

答案：

var nums = [12, 3, 5, 65, -3];
var a = nums.every(value => value > 10)
        console.log("a?", a);
        console.log(a ? '都大于10' : '部分或全部不大于10');

实际运用：

完成需求：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
    <style>

    </style>
</head>

<body>
    <script>
        var products = [{
            pname: 'iphone',
            price: '9000',
            const: 10
        }, {
            pname: 'v80',
            price: '4000',
            const: 8
        }, {
            pname: 'findx5',
            price: '5400',
            const: 40
        }, {
            pname: 'magic',
            price: '6000',
            const: 100
        }];
        // 需求：判断商品是否价格都大于5000
        // 数组的每个元素是对象类型
        var salary = products.every(value => value.price > 5000)
        console.log(salary ? 'yes' : 'no')
        // 需求：判断商品是否价格都大于3个
        var pics = products.every(value => value.const > 3);
        console.log(pics ? 'yes' : 'no')
    </script>
</body>

</html>

结果：