數組Array.prototype方法的使用

你還在用for循環大法麼？
文章主要介紹了數組Array.prototype方法的使用，須要的朋友能夠參考下，若是你是大神，請直接無視。
在ES5中，一共有9個Array方法 http://kangax.github.io/compat-table/es5/
  Array.prototype.indexOf
  Array.prototype.lastIndexOf
  Array.prototype.every
  Array.prototype.some
  Array.prototype.forEach
  Array.prototype.map
  Array.prototype.filter
  Array.prototype.reduce
  Array.prototype.reduceRight
在ES6即將普及的時代，我相信這些方法對FE開發者是很是實用的必備技能，接下來我將經過實例幫你們替換for循環大法，更高效的來操做數組。

1、indexOf
indexOf()方法返回在該數組中第一個找到的元素位置，若是它不存在則返回-1。

使用for：
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、lastindexOf
lastIndexOf() 方法返回在該數組中最後一個找到的元素位置，和 indexof相反。

3、every()
every()但是檢測數組中的每一項是否符合條件

使用for：
/* 
* 是否所有大於0
*/
var ary = [12,23,24,42,1];
var result = function(){
  for (var i = 0; i < ary.length; i++) {
    if(ary[i] < 0){
       return false;
    }
  }
  return true; //需所有知足
}
console.log(result()) //所有知足,返回true

使用every：
var ary = [12,23,24,42,1];
var result = ary.every(function(item, index){
  return item > 0
})
console.log(result)

4、some()
some()能夠檢測數組中是否有某一項符合條件

使用for：
/* 
* 是否存在小於0的項
*/
var ary = [12,23,-24,42,1];
var result = function(){
  for (var i = 0; i < ary.length; i++) {
    if(ary[i] < 0){
       return true;
    }
  }
  return false; //只需知足一個
}
console.log(result())  //有一項小於0，返回true

使用some：
var ary = [12,23,-24,42,1];
var result = ary.some(function(item, index){
  return item < 0
})
console.log(result)

5、 forEach() 
forEach爲每一個元素執行對應的方法

使用for：
var arr = [1,2,3,4,5,6,7,8];

for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}

使用forEach()：
var arr = [1,2,3,4,5,6,7,8];

arr.forEach(function(item,index){
console.log(item);
});
forEach是用來替換for循環的

6、 map()
map()對數組的每一個元素進行必定操做（映射）後，會返回一個新的數組， 

使用for：
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());
map()是處理服務器返回數據時是一個很是實用的函數。

forEach 與map的區別：

語法：forEach和map都支持2個參數：一個是回調函數（item,index,list）和上下文；

forEach：用來遍歷數組中的每一項；這個方法執行是沒有返回值的，對原來數組也沒有影響；數組中有幾項，那麼傳遞進去的匿名回調函數就須要執行幾回；每一次執行匿名函數的時候，還給其傳遞了三個參數值：數組中的當前項item,當前項的索引index,原始數組list；理論上這個方法是沒有返回值的，僅僅是遍歷數組中的每一項，不對原來數組進行修改；可是咱們能夠本身經過數組的索引來修改原來的數組；

forEach方法中的this是ary,匿名回調函數中的this默認是window；
var ary = [12,23,24,42,1];
var res = ary.forEach(function (item,index,input) {
  input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->會對原來的數組產生改變；

map： 和forEach很是類似，都是用來遍歷數組中的每一項值的，用來遍歷數組中的每一項；

區別：map的回調函數中支持return返回值；return的是啥，至關於把數組中的這一項變爲啥（並不影響原來的數組，只是至關於把原數組克隆一份，把克隆的這一份的數組中的對應項改變了）；

無論是forEach仍是map 都支持第二個參數值，第二個參數的意思是把匿名回調函數中的this進行修改。
var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
  return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1]；

7、 filter
該filter()方法建立一個新的匹配過濾條件的數組。

使用for：
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);


8、 reduce()
reduce()能夠實現一個累加器的功能，將數組的每一個值（從左到右）將其下降到一個值。 說實話剛開始理解這句話有點難度，它太抽象了。 

場景： 統計一個數組中有多少個不重複的單詞 

使用for：
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());

9.reduceRight()
 reduceRight的語法以及回調函數的規則和reduce方法是同樣的，區別就是在與reduce是升序，即角標從0開始，而reduceRight是降序，即角標從arr.length-1開始。

方法可應用於字符串。

/* 
* 使用此方法反轉字符串中的字符
*/
var word = "retupmoc";
function AppendToArray(previousValue, currentValue) {
  return previousValue + currentValue;
}
var result = [].reduceRight.call(word, AppendToArray, "the ");
console.log(result); // the computer

補.isArray()
isArray()是Array對象的一個靜態函數，用來判斷一個對象是否是數組

var ary1 = [];
var res1 = Array.isArray(ary1);  // Output: true
console.log(res1)

var ary2 = new Array();
var res2 = Array.isArray(ary2);  // Output: true
console.log(res2)

var ary3 = [1, 2, 3];
var res3 = Array.isArray(ary3);  // Output: true
console.log(res3)

var ary4 = new Date();
var res4 = Array.isArray(ary4);  // Output: false
console.log(res4)

 原文 https://shimo.im/doc/VXqv2bxTlOUiJJqO/