Array数组常用的5个方法

es6 时代来临了,不知道es5 你熟知了吗?

在此介绍一个我常用到的5个方法,万恶的ie9一下并不支持,需要做兼容慎用

indexOf

indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1。

eg:

var arr = [‘apple‘,‘orange‘,‘pear‘];

console.log("found:", arr.indexOf("orange") != -1);

当我们不使用它的时候,是这个样子的

var arr = [‘apple‘,‘orange‘,‘pear‘],
var found = false;

for(var i= 0, l = arr.length; i< l; i++){
    if(arr[i] === ‘orange‘){
         found = true;
   }
}

console.log("found:",found);

很明显代码量明显增加了。

有优点就有缺点,那就是万恶的ie了,ie9一下不支持此方法。

2) filter

该filter()方法创建一个新的匹配过滤条件的数组。

eg:

ar arr = [
    {"name":"apple", "count": 2},
    {"name":"orange", "count": 5},
    {"name":"pear", "count": 3},
    {"name":"orange", "count": 16},
];

var newArr = arr.filter(function(item){
    return item.name === "orange";
});

console.log("Filter results:",newArr);

  

对比一下

var arr = [
    {"name":"apple", "count": 2},
    {"name":"orange", "count": 5},
    {"name":"pear", "count": 3},
    {"name":"orange", "count": 16},
];

var newArr = [];

for(var i= 0, l = arr.length; i< l; i++){
    if(arr[i].name === "orange" ){
     newArr.push(arr[i]);
  }
}

console.log("Filter results:",newArr);

3) forEach()

forEach为每个元素执行对应的方法

eg:

var arr = [1,2,3,4,5,6,7,8];

// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
      console.log(arr[i]);
}

console.log("========================");

//Uses forEach to iterate
arr.forEach(function(item,index){
      console.log(item);
});

对比一下

forEach是用来替换for循环的

4) map()

map()对数组的每个元素进行一定操作(映射)后,会返回一个新的数组

eg:

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){

    return oldArr.map(function(item,index){
        item.full_name = [item.first_name,item.last_name].join(" ");
        return item;
    });

}

console.log(getNewArr());

对比一下

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){

    var newArr = [];

    for(var i= 0, l = oldArr.length; i< l; i++){
        var item = oldArr[i];
        item.full_name = [item.first_name,item.last_name].join(" ");
        newArr[i] = item;
    }

    return newArr;
}

console.log(getNewArr());

map()是处理服务器返回数据时是一个非常实用的函数。

5) reduce()

reduce()可以实现一个累加器的功能,将数组的每个值(从左到右)将其降低到一个值。

说实话刚开始理解这句话有点难度,它太抽象了。

场景: 统计一个数组中有多少个不重复的单词

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
    return arr.reduce(function(prev,next){
        prev[next] = (prev[next] + 1) || 1;
        return prev;
    },{});
}

console.log(getWordCnt());

对比一下

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
    var obj = {};

    for(var i= 0, l = arr.length; i< l; i++){
        var item = arr[i];
        obj[item] = (obj[item] +1 ) || 1;
    }

    return obj;
}

console.log(getWordCnt());

  

让我先解释一下我自己对reduce的理解。reduce(callback, initialValue)会传入两个变量。回调函数(callback)和初始值(initialValue)。假设函数它有个传入参数,prev和next,index和array。prev和next你是必须要了解的。

一般来讲prev是从数组中第一个元素开始的,next是第二个元素。但是当你传入初始值(initialValue)后,第一个prev将是initivalValue,next将是数组中的第一个元素。

/*
* 二者的区别,在console中运行一下即可知晓
*/

var arr = ["apple","orange"];

function noPassValue(){
    return arr.reduce(function(prev,next){
        console.log("prev:",prev);
        console.log("next:",next);

        return prev + " " +next;
    });
}
function passValue(){
    return arr.reduce(function(prev,next){
        console.log("prev:",prev);
        console.log("next:",next);

        prev[next] = 1;
        return prev;
    },{});
}

console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());

再次介绍另一篇文章(兼容处理)

http://www.dengzhr.com/js/362

时间: 2024-11-05 19:36:28

Array数组常用的5个方法的相关文章

Array[数组]常用属性与方法

index:从0开始的数组下标; length:数组长度; prototype:数组原型属性; 数组常用方法 concat:连接数组; 示例: arr1 = [1,2,3]; arr2 = [4,5,6]; arr1.concat(arr2) = [1,2,3,4,5,6]; join():将数组转换为字符串,()里参数为连接字符,默认为","; 示例:arr1 = ['a','b','c'];      arr1.join() = a,b,c ; arr1.join(' ') = a

数组常用的几种方法

push:向数组的末尾增加一项 返回值是数组的新长度unshift:向数组开头增加一项 返回值是数组的新长度pop:删除数组的末尾项 返回值是删除的数组项shift:删除数组开头项 返回被删除的开头项目splice:删除数组中的任意项 返回值是被删除的数组项slice:复制数组 返回值是复制到的新数组 写上数值之后 不包含被复制的最后一项 拼接:concat:把一个数组和另一个数组拼接在一起 返回拼接好的数组 join:把数组中的每一项 按照指定的分隔符拼接成字符串 排序:reverse:倒序数

js的Array数组传到后台的方法

页面代码 var array = new Array(); ......//array.push();   赋值 $.ajax({ url:url, async:true, data: { array: array, test : 'test' },success : function (result){ } }); 后台Mybatis直接接收即可 @RequestMapping(value="/XXX") @ResponseBody public void updateByClust

JavaScript引用类型之Array数组的concat()和push()方法的区别

在javascript中,我们一般都只用push向数组的尾部插入新元素的,但是其实在javascript中还有另外一个方法和push一样,也是向数组尾部插入新元素的,但是他们之间却存在着一定的区别,当我们看下面的代码的时候就明显的知道了: 1. 通过使用push操作数组: 2. 通过使用concat操作数组: 从上面的两个操作就很明显的看出来push和concat的区别了 push 遇到数组参数时,把整个数组参数作为一个对象插入:而 concat 则是拆开数组参数,一个元素一个元素地加进去. p

javascript中数组常用的方法和属性

前言 在javascript中,数组是一种非常重要的数据类型,我们时常会和它打交道,最近在开发项目中频繁的使用到数组,但是自己对数组的众多方法已经是非常模糊了,为了方便自己以后能够更好的使用数组中的属性和方法,在此记录一下. 数组常用的属性和方法 常用属性 Array.length:返回数组的大小 常用方法 Array.pop():删除并返回数组的最后一个元素 Array.push():向数组的结尾添加元素 Array.shift():将元素移除数组 Array.unshift():向数组头部添

js Array数组对象常见方法总结

Array对象一般用来存储数据. 其常用的方法包括: 1.concatc()方法 concat() 方法用于合并两个或多个数组.它不会更改现有数组,而是返回一个新数组. 例如: var arr1=[1,2,3]; var arr2=[4,5,6]; var arr3=arr1.concat(arr2,"7",8,[9,10]); document.write(arr3);//1,2,3,4,5,6,7,8,9,10 2.join()方法 join方法通过指定的分隔符将数组连接成字符串.

Array 对象常用的方法总结

shift:删除原数组的第一项,返回删除元素的值:如果数组为空则返回undefined var arr = [1, 2, 3, 4, 5]; var out = arr.shift(); console.log(arr); //[2,3,4,5] console.log(out); //1 var arr = []; var out = arr.shift(); console.log(arr); //[] console.log(out); //undefined unshift:将参数添加到

JS数组常用函数以及查找数组中是否有重复元素的三种常用方法

阅读目录: DS01:常用的查找数组中是否有重复元素的三种方法 DS02:常用的JS函数集锦 DS01.常用的查找数组中是否有重复元素的三种方法 1. 1 var ary = new Array("111","22","33","111"); 2 var s = ary.join(",")+","; 3 for(var i=0;i<ary.length;i++) { 4 if(s.

js数组对象以及数组常用属性和方法

定义形式: var  arr1 = new Array(1,  5,  8,  7,  2,  10);  //定义了一个数组,其中具有6个数据 var  arr2 = new Array();                   //只是单纯地定义了一个数组(名),但没有给值(数据),即现在是空的 var  arr3 = [1,  5,  8,  7,  2,  10];  //同arr1,只是一种简写的定义法. var  arr4 = [ ];                  //同arr