ECMAScript5規格は2009年12月3日にリリースされ、既存のアレイアレイ操作を改善するためのいくつかの新しい方法をもたらします。ただし、これらの新しいアレイメソッドは、当時市場にES5対応ブラウザが不足していたため、実際には人気がありませんでした。
配列「エクストラ」
これらの方法の実用性について疑う人はいませんが、ポリフィル(PS:古いブラウザーと互換性のあるプラグイン)を書くことは価値がありません。 「実装する必要がある」に変わり、「最適な実装」になります。一部の人々は、実際にこれらの配列メソッドアレイを「エクストラ」と呼んでいます。なぜ!
しかし、時代は変化しています。 GitHubで人気のあるオープンソースJSプロジェクトを見ると、トレンドが変化していることがわかります。誰もが多くの依存関係(サードパーティライブラリ)を削減し、ローカルコードのみでそれらを実装したいと考えています。
わかりました、始めましょう。
私の5つの配列
ES5には、合計で9つの配列メソッドがあります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.deduceright
私は5つの方法を選択しますが、これは個人的に最も有用であり、多くの開発者が遭遇すると思います。
1)インデックス
indexOF()メソッドは、配列にある最初の要素の位置を返し、存在しない場合は-1を返します。
IndexOFが使用されていない場合
var arr = ['apple'、 'orange'、 'pear']、fund = false;
使用後
var arr = ['apple'、 'orange'、 'pear']; console.log( "found:"、arr.indexof( "orange")!= -1);
2)フィルター
フィルター()メソッドは、フィルター基準に一致する新しい配列を作成します。
フィルター()が使用されていない場合
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( "フィルター結果:"、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( "フィルター結果:"、newArr);3)foreach()
foreachは、各要素に対応するメソッドを実行します
var arr = [1,2,3,4,5,6,7,8]; //通常の "for" loop to iteatefor(var i = 0、l = arr.length; i <l; i ++){console.log(arr [i]);} console.log( "============================================================== iteratearr.foreach(function(item、index){console.log(item);});foreachは、forループを置き換えるために使用されます
4)map()
MAP()が配列の各要素で特定の操作(MAP)を実行した後、新しい配列が返されます。
マップを使用しないでください
var oldarr = [{first_name: "colin"、last_name: "toh"}、{first_name: "addy"、last_name: "osmani"}、{first_name: "yehuda"、last_name: "katz"}]; function getnewarr(){var new = []; for(var i = 0、l = oldarr.length; i <l; i ++){var item = oldarr [i]; item.full_name = [item.first_name、item.last_name] .jein( "); 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] .jein( ""); return item;}); } console.log(getNewARR());MAP()は、サーバーによって返されるデータを処理する場合、非常に実用的な機能です。
5)削減()
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());Rediv()を使用した後
var arr = ["Apple"、 "Orange"、 "Apple"、 "Orange"、 "pear"、 "orange"]; function getwordcnt(){return arr.reduce(function(prev、next){prev [next] + 1)|| 1; return prev;}、{});} console.log(getwordcnt());最初に減少についての私自身の理解を説明させてください。 Reduce(Callback、initialValue)は、2つの変数に渡されます。コールバック関数(コールバック)とinitialValue。関数に着信パラメーターがあると仮定します。あなたは前と次を理解する必要があります。
一般的に、PREVは配列の最初の要素から始まり、次は2番目の要素です。ただし、初期値(initialValue)を渡すと、最初のprevは初期値になり、次は配列の最初の要素になります。
例えば:
/** 2つの違い、コンソールで実行すると、*/var arr = ["apple"、 "orange"]; function nopassvalue(){return arr.reduce(function(prev、next){console.log( "prev:"、prev); console.log( "next:"、next); return + "" + " arr.Reduce(function(prev、next){console.log( "prev:"、prev); console.log.log.log.log.log.log.log.log.log.logは[next] = 1; return prev;}、{});} console.log( "追加パラメーター:"、nopassvalue();パラメーター: "、passvalue());