JavaScript 数组 拓展 方法 forEach filter some map every的比较

目录

1. 数组方法

1.1 forEach

1.2 some遍历 every遍历比较

1.3 filter遍历

1.4 map遍历数组

2.总结


1. 数组方法

1.1 forEach

  • 作用:读取遍历数组

  • 三个参数:

    value:每个数组元素

    index:每个数组元素的索引号

    array: 数组本身

  • 可以进行求和

        var array = [1, 2, 3, 4, 5];
         var Sum = 0;
         array.forEach(function (value, index, array) {
             console.log('每个数组元素' + value);
             console.log('每个数组元素的索引号' + index);
             console.log('数组本身' + array);
             Sum += value;
         })
         console.log(Sum);
  • 和for 遍历的执行效率的比较

如下,可以复制下面的代码去试试,发现for遍历的时间,比forEach短。所以for 比 forEach遍历的速度会更快

注意 console.time("test")和 console.timeEnd("test"),这是一个测试程序执行时间的一个方法,配套使用,里面的参数可以任意,但是time和timeEnd的必须对应一致。
    // 测试运行时间
         var array = [1, 2, 3, 4];
         var array2 = [1, 2, 3, 4];
         console.time('test');
         for (let i = 0; i < array.length; i++) {
             // some code
         }
         console.timeEnd('test');
 ​
         console.time('test');
         var sum = 0;
         array2.forEach(function (value) {
             sum += value;
         })
         console.timeEnd('test');
    // for 会比for each 更好

forEach 能否进行创建新数组?

        var arr2 = arr.forEach(function (value, index, array) {
            return value > 2;
        })
        console.log(arr2); // undefined

打印出来是undefined,所以forEach不能够直接创建数组。当然里面可以用if进行值判断,值再push进新数组里面,但是这样是间接啦。

1.2 some遍历 every遍历比较

every遍历

返回布尔值

作用:

  1. every用于测试一个数组内的数据 是否 满足指定函数的条件

  1. 如下面的代码写法1,先定义一个函数,array1.every(Test1)括号里面直接写函数名,记得不加括号;只要有一个数没有满足条件,都是false

  2. 注意写法3,每一个元素都会进行遍历,这个和some方法的写法3不同,见下面some的解释。

         // 1. 写法1
         var array1 = [1, 30, 39, 29, 10, 13];
         function Test1(value) {
             return value >= 30;
         }
         console.log(array1.every(Test1)); // false
 ​
        // 写法2:
         var arr2 = array1.every(function (value, index) {
             if (value >= 5) {
                 console.log('有数据大于5'); 
                 return;
             }
             console.log(index); 
         })
        // 写法3:
         var arr3 = ['李', '李', '沈以诚'];
         var flag2 = arr3.every(function (e, f) {
             console.log(f); // 打印了一个索引就停止了
             return e === '李';
         })
         console.log(flag2);
some遍历

返回布尔值

作用:

1.写法1里面,只要array2有一个元素能被4整除,就是true。

2.写法2里面,因为用了if语句,这里就是普通的遍历,每一个元素都会进行判断。打印如下

打印如下:

0 1 "有数据大于5" 3 4

3.写法3,打印第一个索引就会停止,注意这个写法下some的特性,找到一个数,就会停止遍历后面的

打印0和true

        // 写法1:
         var array4 = [2, 4, 5, 8, 10];
         function Test3(value) {
             return value % 4 === 0;
         }
         console.log(array4.some(Test3)); // true
       // 写法2:
       var arr3 = array4.some(function (value, index) {
             if (value >= 5) {
                 console.log('有数据大于5'); 
                 return;
             }
             console.log(index); 
         })
       // 写法3:
         var arr4 = ['李', '焦迈奇', '沈以诚'];
         var flag2 = arr4.some(function (e, f) {
             console.log(f); // 打印了一个索引就停止了
             return e === '李';
         })
         console.log(flag2);

1.3 filter遍历

直接返回新数组

作用:进行数据的筛选,每一个值都会筛选一次。

如下面的代码,满足条件的值都会返回到新的数组里面去

         var arr = [1, 2, 3, 4];
         var newArr2 = newArr.filter(function (value) {
             return value >= 4;
         })
         console.log(newArr2); // [4,6,8]

1.4 map遍历数组

返回一个新数组

如下代码,arr里面的每一个值都会执行里面回调函数的执行体

同时map还能和filter结合玩出新花样

         // // 1. map也能进行数组的筛选 
         var arr = [1, 2, 3, 4];
         var newArr = arr.map(function (value) {
             return value * 2;
         })
         console.log(newArr); // [2,4,6,8]
 ​
 ​
         // 2. map和filter的结合
         var newArr2 = arr.map(function (value) {
             return value * 2;
         }).filter(function (value) {
             return value % 2 === 0;
         })
         console.log(newArr2);

2.总结

方法

作用 返回值
foreach 遍历读取每一个值进行相应操作 不固定
some 一般情况下,根据指定条件,有对应判断的值就输出true【后面的循环就终止】 true / false
every 根据指定条件,遍历每一个值 true / false
filter 数组的筛选 新数组
map 数组的筛选 新数组

结尾:

学习id: 201903090124-39

现在是大三学生,学习到了vue阶段,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>