升級你的for迴圈

Skyshine發表於2019-11-19

前言

你是否還在用著萬年不變的for迴圈，是否還因為定義多層for迴圈，看著各種i、j、k 而感到心煩，so 趕緊升級你的裝備， 本文將分享多種替換for迴圈的方法

1、indexOf

indexOf() 方法返回在該陣列中第一個找到的元素位置，如果它不存在則返回-1。

使用for：

var arr = ['blue','red','black'],
    exit = false;
for(var i= 0, l = arr.length; i< l; i++){
  if(arr[i] === 'red'){
    exit = true;
  }
}
console.log("exit:",exit);
複製程式碼

使用indexOf：

var arr = ['blue','red','black'];  
console.log("exit:", arr.indexOf("red") != -1);
複製程式碼

2、lastindexOf

lastIndexOf() 方法返回在該陣列中最後一個找到的元素位置，和 indexof相反。

3、every()

every()可是檢測陣列中的每一項是否符合條件

使用for：

/* 
* 是否全部大於0
*/
var ary = [12,223,4,62,2];
var result = function(){
  for (var i = 0; i < ary.length; i++) {
    if(ary[i] < 0){
      return false;
    }
  }
  return true;
}
console.log(result())
複製程式碼

使用every：

var ary = [12,223,4,62,2];
var result = ary.every(function(item, index){
  return item > 0
})
console.log(result)
複製程式碼

4、some()

some()可以檢測陣列中是否有某一項符合條件

使用for：

/* 
* 是否存在小於0的項
*/
var ary = [12,223,-28,62,2];
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,223,-28,62,2];
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,223,4,62,2]
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,223,4,62,2]
var res = ary.map(function (item,index,input) {
  return item*10;
})
console.log(res);//-->[120,2230,40,620,20];
console.log(ary);//-->[12,223,4,62,2]；
複製程式碼

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)
複製程式碼

相關文章