• 238 ES5新增方法:forEach()、map()、filter()、some()、every(),some、forEach、filter区别,from,of,find,findIndex


    3.1 数组方法forEach遍历数组

     arr.forEach(function(value, index, array) {
           //参数一是:数组元素
           //参数二是:数组元素的索引
           //参数三是:当前的数组
     })
      //相当于数组遍历的 for循环 没有返回值
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            // forEach 迭代(遍历) 数组
            var arr = [1, 2, 3];
            var sum = 0;
            arr.forEach(function(value, index, array) {
                console.log('每个数组元素' + value);
                console.log('每个数组元素的索引号' + index);
                console.log('数组本身' + array);
                sum += value;
            })
            console.log(sum);
        </script>
    </body>
    
    </html>
    

    3.2 数组方法filter过滤数组

    array.filter(function(currentValue, index, arr))
    
    (1) filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组
    (2) 注意它直接返回一个新数组
    (3) currentValue: 数组当前项的值
    (4) index:数组当前项的索引
    (5) arr:数组对象本身
    
      var arr = [12, 66, 4, 88, 3, 7];
      var newArr = arr.filter(function(value, index,array) {
      	 //参数一是:数组元素
         //参数二是:数组元素的索引
         //参数三是:当前的数组
         return value >= 20;
      });
      console.log(newArr);//[66,88] //返回值是一个新数组
    

    filter删除数组元素【最完美】

        let arr = ['123123123131', '', '', '', '', '', '', '', '', '', '', '', '', '', '1231321366666666666', '6666', '']
    
        let newArr = arr.filter(function(v, i, arr) {
            return v !== ''
        })
        console.log(newArr);  // ["123123123131", "1231321366666666666", "6666"]
    

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            // filter 筛选数组
            var arr = [12, 66, 4, 88, 3, 7];
            var newArr = arr.filter(function(value, index) {
                // return value >= 20;
                return value % 2 === 0;
            });
            console.log(newArr);  // [12, 66, 4, 88]
        </script>
    </body>
    
    </html>
    

    3.3 数组方法some

    array.some(function(currentValue, index, arr))
    
    (1)some() 方法用于检测数组中的元素是否满足指定条件. 通俗点 查找数组中是否有满足条件的元素
    (2)注意它返回值是布尔值, 如果查找到这个元素, 就返回true , 如果查找不到就返回false.
    (3)如果找到第一个满足条件的元素,则终止循环. 不在继续查找.
    (4)currentValue: 数组当前项的值
    (5)index:数组当前项的索引
    (6)arr:数组对象本身
    
    some 查找数组中是否有满足条件的元素 
     var arr = [10, 30, 4];
     var flag = arr.some(function(value,index,array) {
        //参数一是:数组元素
         //参数二是:数组元素的索引
         //参数三是:当前的数组
         return value < 3;
      });
    console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            // some 查找数组中是否有满足条件的元素 
            // var arr = [10, 30, 4];
            // var flag = arr.some(function(value) {
            //     // return value >= 20;
            //     return value < 3;
            // });
            // console.log(flag);
    
            var arr1 = ['red', 'pink', 'blue'];
            var flag1 = arr1.some(function(value) {
                return value == 'pink';
            });
            console.log(flag1);  // true
    
            // 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
            // 2. some 也是查找满足条件的元素是否存在  返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环
        </script>
    </body>
    
    </html>
    


    3.4 some、forEach、filter区别

    • 如果查询数组中唯一的元素,用some方法更合适,在some 里面 遇到 return true 就是终止遍历,迭代效率更高
    • 在forEach 里面, return 不会终止迭代
    • 在filter里面, return 也不会终止迭代
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            var arr = ['red', 'green', 'blue', 'pink'];
            // 1. forEach迭代 遍历
            // arr.forEach(function(value) {
            //     if (value == 'green') {
            //         console.log('找到了该元素');
            //         return true; // 在forEach 里面 return 不会终止迭代
            //     }
            //     console.log(11);
            // })
    
    
            // 如果查询数组中唯一的元素, 用some方法更合适,
            arr.some(function(value) {
                if (value == 'green') {
                    console.log('找到了该元素');
                    return true; //  在some 里面 遇到 return true 就是终止遍历 迭代效率更高
                }
                console.log(11);
            });
    
    
            // arr.filter(function(value) {
            //     if (value == 'green') {
            //         console.log('找到了该元素');
            //         return true; //  // filter 里面 return 不会终止迭代
            //     }
            //     console.log(11);
            // });
        </script>
    </body>
    
    </html>
    


    map函数 【补充】

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

    const array1 = [1, 4, 9, 16];
    
    // pass a function to map
    const map1 = array1.map(x => x * 2);
    
    console.log(map1);
    // expected output: Array [2, 8, 18, 32]
    
    
    var numbers = [1, 4, 9];
    var roots = numbers.map(Math.sqrt);
    // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
    
    


    every方法

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

    const isBelowThreshold = (currentValue) => currentValue < 40;
    
    const array1 = [1, 30, 39, 29, 10, 13];
    
    console.log(array1.every(isBelowThreshold));
    // expected output: true
    
    
    function isBigEnough(element, index, array) {
      return element >= 10;
    }
    [12, 5, 8, 130, 44].every(isBigEnough);   // false
    [12, 54, 18, 130, 44].every(isBigEnough); // true
    
    

    from,of,find,findIndex

    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>03_数组扩展</title>
    </head>
    
    <body>
        <button>测试1</button>
        <br>
        <button>测试2</button>
        <br>
        <button>测试3</button>
        <br>
    
        <!--
            1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
            2. Array.of(v1, v2, v3) : 将一系列值转换成数组
            3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
            4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
        -->
    
        <script type="text/javascript">
            // Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
            let btns = document.getElementsByTagName('button');
            console.log(btns.length); // 3
            console.log(Array.isArray(Array.from(btns))) // true
            console.log(Array.from(btns)) // [button, button, button]
    
            Array.from(btns).forEach(function (item, index) {
                console.log(item, index);
            });
    
    
            // Array.of(v1, v2, v3) : 将一系列值转换成数组
            let arr = Array.of(1, 'abc', true);
            console.log(arr); // [1, "abc", true]
    
    
            // find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
            let arr1 = [1, 3, 5, 2, 6, 7, 3];
            let result = arr1.find(function (item, index) {
                return item > 3
            });
            console.log(result); // 5
    
    
            // findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
            let result1 = arr1.findIndex(function (item, index) {
                return item > 3
            });
            console.log(result1); // 2
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    MongoDB下配置用户权限
    (CF)Codeforces445A DZY Loves Chessboard(纯实现题)
    C语言概述
    C#中值类型和引用类型的差别浅记
    Qt5官方demo解析集30——Extending QML
    汉澳sinox通过ndis执行windows驱动程序
    linux设备驱动归纳总结(三):4.ioctl的实现【转】
    linux设备驱动归纳总结(三):3.设备驱动面向对象思想和lseek的实现【转】
    linux设备驱动归纳总结(三):2.字符型设备的操作open、close、read、write【转】
    linux设备驱动归纳总结(三):1.字符型设备之设备申请【转】
  • 原文地址:https://www.cnblogs.com/jianjie/p/12227136.html
Copyright © 2020-2023  润新知