5 つの配列 配列メソッド:indexOf、filter、forEach、map、reduce 使用例_JavaScript スキル

ECMAScript5 標準は、2009 年 12 月 3 日にリリースされました。これは、既存の Array 配列操作を改善するいくつかの新しいメソッドをもたらします。ただし、当時の市場には ES5 対応ブラウザが不足していたため、これらの新しい配列メソッドはあまり普及しませんでした。

配列「エクストラ」

これらのメソッドの実用性を疑う人はいませんが、ポリフィル (追記: 古いブラウザと互換性のあるプラグイン) を書くことは彼らにとって価値がありません。それは「達成しなければならない」を「達成するのが最善」に変えます。実際、これらの配列メソッドを Array の「エクストラ」と呼ぶ人もいます。なぜ！

しかし、時代は変わりつつあります。 Github で人気のオープンソース JS プロジェクトを見てみると、潮目が変わりつつあることがわかります。誰もが (サードパーティ ライブラリへの) 多くの依存関係を削減し、ローカル コードのみを使用してそれを実現したいと考えています。

それでは、始めましょう。

私の 5 つのアレイ

ES5 には、合計 9 つの Array メソッドがあります http://kangax.github.io/compat-table/es5/

注意* 9 つの方法

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

私が個人的に最も有用だと考え、多くの開発者が遭遇するであろう 5 つの方法を取り上げます。

1)

のインデックス

indexOf() メソッドは、配列内で最初に見つかった要素の位置を返します。要素が存在しない場合は -1 を返します。

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

使用後

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

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

2) フィルター

filter() メソッドは、フィルター条件に一致する新しい配列を作成します。

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

使用されたフィルター():

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 ループを置き換えるために使用されます

4) マップ()

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

マップ使用後

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() は、サーバーから返されたデータを処理する場合に非常に実用的な関数です。

5)reduce()

reduce() は、配列の各値を (左から右に) ある値に減らすアキュムレータの関数を実装できます。

正直に言うと、この文章は最初は抽象的すぎて少し理解するのが難しかったです。

シナリオ: 配列内にある一意の単語の数を数えます

reduceを使用しない場合

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() 使用後

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

まず、reduce についての私自身の理解を説明させてください。 reduce(callback,initialValue) は 2 つの変数を渡します。コールバック関数 (callback) と初期値 (initialValue)。関数には、受信パラメータ、prev と next、index、array があると仮定します。前と次を理解する必要があります。

一般に、prev は配列の最初の要素から始まり、next は 2 番目の要素です。ただし、初期値 (initialValue) を渡すと、最初の prev が initialValue になり、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());