JavaScript基础知识

 

现在应该使用的5个数组方法

 

ECMAScript 5 发布时，为数组提供了一些新的方法。然后，由于缺乏浏览器的支持，却迟迟未得到广泛的使用。

 

本文列举了9个ES5数组方法中的其中5个的使用方法和应用场景。

 

1）indexOf

 

indexOf()方法，返回指定元素在数组中首次出现的索引，如果在数组中未找到该元素，则返回-1。与字符串中的indexOf()方法类似。

 

使用场景：确认"orange"元素是否在数组中

不使用indexOf()的实现方法：

var arr = ['apple','orange','pear'],

found = false;

 

for(var i= 0, l = arr.length; i< l; i++){

if(arr[i] === 'orange'){

found = true;

}

}

 

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

 

使用indexOf()的实现方法：

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

 

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

 

2）filter()方法

filter()将通过测试条件的元素组成一个新的元素并返回，测试条件通过一个函数提供。

即对一个数组进行过滤，返回符合条件的元素；过滤掉不符合条件的元素。

 

使用场景：查找数组中所有name属性为"orange"的元素

不使用filter()的实现方法：

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);

 

使用filter()的实现方法：

var 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);

 

3）forEach()

forEach()在各个数组元素上执行一次操作，操作的具体内容由提供的函数指定。

 

使用场景：遍历数组

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循环的一个重要升级，如果只有一个方法可以使用，那就用forEach()方法吧。

 

使用for循环的一个常见的问题就是在for循环中声明的变量不只局限在循环块中，在与for循环在同一个作用域的其它代码可能受到影响。

 

注意：for循环在性能上优于forEach。

 

4）map()方法

map()方法，对数组的每个元素上执行一个函数，并将结果组成一个新的数组返回

 

使用场景：对一个对象数组进行解析，并返回一个包含新属性"full_name"的对象数组。

不使用map()方法：

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()方法的实现：

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());

 

5）reduce()

reduce()方法，

 http://colintoh.com/blog/5-array-methods-that-you-should-use-today?utm_source=javascriptweekly&utm_medium=email