数组 es5 常用方法

TIGERB 发布于2019-08-21 16:49 / 391人阅读

摘要：通常我们在项目过程中，难免会碰到各种对于数组的操作，或是是一些业务逻辑中，使用数组自带方法，可以更加灵活的达到预期效果。

通常我们在项目过程中，难免会碰到各种对于数组的操作，或是是一些业务逻辑中，使用数组自带方法，可以更加灵活的达到预期效果。

这里对一些常用的数组方法进行总结，顺便记录下使用中的小技巧，方便后面进行查询

forEach

使用频率最高的数组遍历方法，效果与for循环相似，对数组中每一项进行遍历，但时间效率要比for 循环低，从代码简洁上看，推荐使用forEach，如果在有条件的情况下进行遍历时，推荐使用some 和 every 进行遍历，会在满足具体条件后停下，节约不必要的循环

  
    [1,2,3].forEach(function(value, index, array) {
        cosole.log(value);                                
    });

  // output 
  //   1
  //   2
  //   3

对应的在jQUery 中也实现了相同功能的遍历方法 $.each()，对选中的数组或者对象进行遍历，这里还有$().each() 在dom 操作中使用较多，表示对子元素集合进行遍历。详细解释

 $.each([1,2,3],function(){
   console.log(this);
 }
// output 
   1
   2
   3

// 对象进行遍历
 $.each({a:1,b:2,c:3},function(key,val){
       console.log(obj[key])
  })
// output 
    1
    2
    3

map

对旧数组进行"映射"，同时生成对应的新数组，用法简单，不改变原来的旧数组

var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item) {
        return item * item;
});

最后返回的新的数组arrarOfSquares [1,4,9,16]

filter

数组过滤方法，返回判断条件为true 的数组项形成的数组，不改变原数组

var arrayFilter = [1,2,3,4,5].filter(function(item,index){
                  rerutn item>3; 
           })
 console.log(arrayFilter);
 // output  [4,5]

some

数组中的判断方法，更逻辑运算中的或操作非常相似，|| ，只要数组中有任何一项满足条件,就返回true,并且停止后面的遍历.所以some方法在实际使用中也可以计较准确的找到指定数组项的同时，得到相应的下标，更indexOf 方法有一些类似

[1,2,3,4,5].some(function(item,index){
                        console.log(index);
                        return item<3;
         }) 
   // output  0;

数组在遍历的过程中，在第一个数组项处就停止循环了，并且整个数组返回 true

find

找到符合条件的第一个数组元素，与filter 类，如果没有找到任何一个就返回undefined

var inventory = [
    {name: "apples", quantity: 2},
    {name: "bananas", quantity: 0},
    {name: "cherries", quantity: 5}
];

function findCherries(fruit) { 
    return fruit.name === "cherries";
}

console.log(inventory.find(findCherries)); 
// { name: "cherries", quantity: 5 }

every

与some方法相反的效果，只有数组中所有的项全都满足条件，就会返回true，与逻辑运算中的与，&& 操作类似

if([1,2,3,4,5].every(functionI(item,index){
                       console.log(index);
                       return item<3;
               })
     // output 0,1,2;

在带条件的遍历中，every 使用频率比较高。既可以得到满足条件的数组项，也可以判断数组项中所有的值情况。

indexOf

查找匹配的项，返回匹配的索引值，如果没有匹配，则返回-1，在搭配逻辑运算中非运算时 ~ ,有意想不到的效果

      ~ value 值， 当value = -1 的时候，得到的才是0； false
                    其他任何值的时候，等到的是非0，   true

 if(!~[1,2,3,4,5].indexOf(1)){
       cnosole.log()
}

对于上面这种情况，在数组中没有满足条件的数组项时，才会返回true,如果有满足条件的数组项，就会返回false,对于处理一些特定的业务逻辑有非常奇妙的效果

lastIndexOf

从后往前找，返回匹配项的索引值，如果没有匹配的话，就返回 -1，

reduce

递归遍历

var sum = [1,2,3,4].reduce(function(previous,current,index,array){
                        return previous + current;
                  });
              console.log(sum);
            // output 10;

默认是从第一个元素开始遍历，

reduceRight

从后往前进行递归遍历

云服务器 GPU云服务器 query常用方法深度学习常用方法 file类常用方法 jquery常用的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88783.html

JavaScript es5中的Array常用的forEach、map、filter、indexOf

摘要：的的区别和相同之处就是数组的遍历循环，回调支持三个参数，第个是遍历的数组内容第个是对应的数组索引，第个是数组本身他是没有返回值得，不需要再下面，更进一步，除了接受一个必须的回调函数参数，还可以接受一个可选的上下文参数改变回调函数里面 Array的forEach、map的区别和相同之处 forEach 1、 forEach就是数组的遍历、循环，回调支持三个参数，第1个是遍历的数组内容；...

xuexiangjys 2019-08-20 15:37 评论0 收藏0
细说数组常用遍历的方法

摘要：需要返回值，如果不给，默认返回使用场景假定有一个数值数组将数组中的值以双倍的形式放到数组写法方法使用场景假定有一个对象数组将数中对象某个属性的值存储到数组中三从数组中找出所有符合指定条件的元素检测数值元素，并返回符合条件所有元素的数组。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

阿罗 2019-08-29 17:05 评论0 收藏0
细说数组常用遍历的方法

摘要：需要返回值，如果不给，默认返回使用场景假定有一个数值数组将数组中的值以双倍的形式放到数组写法方法使用场景假定有一个对象数组将数中对象某个属性的值存储到数组中三从数组中找出所有符合指定条件的元素检测数值元素，并返回符合条件所有元素的数组。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

AlphaWatch 2019-08-02 11:48 评论0 收藏0
细说数组常用遍历的方法

摘要：需要返回值，如果不给，默认返回使用场景假定有一个数值数组将数组中的值以双倍的形式放到数组写法方法使用场景假定有一个对象数组将数中对象某个属性的值存储到数组中三从数组中找出所有符合指定条件的元素检测数值元素，并返回符合条件所有元素的数组。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

?xiaoxiao, 2019-08-23 12:32 评论0 收藏0