自転車なしでJavaScriptで配列を操作する

この記事では、JavaScriptで配列を操作する複雑さについて説明します。

おそらく、すべてのJavaScript開発者は、関数(自己作成またはライブラリ) $ (idによる要素選択)および$$ (CSSクラスによる要素選択)を持っています。 CSSクラスに従っていくつかの要素を選択する場合、特定のアクションを実行します。 サイクルが始まります。 そして、それらの中にサンプルが必要な場合は? コンバージョン? 必要な要素に対するアクション? 難しいコードが判明しました。

JavaScriptは止まっておらず、MozillaはGeckoエンジンのJavaSriptをたゆまなく改善しており、これらのイノベーションを使用しないことは罪です。 JavaScript 1.6は、上記の状況で必要なコードを簡素化するための新しい便利なメソッドを追加します。

新しい配列クラスのメソッド


フィルター

フィルター(コールバック[、thisObject])
特定の基準に従った要素の選択。


var myArray = [3、5、7、9、4、8、2、1、6];
var newArray = myArray.filter( function (item){ return item> 5;});
// newArrayは配列[7、9、8、6]と等しくなります


forEach

forEach(コールバック[、thisObject])
配列の各要素でアクションを実行します。


var myArray = [3、5、7、9、4、8、2、1、6];
myArray.forEach( function (item){alert(item);});


毎回

every(コールバック[、thisObject])
配列のすべての要素が条件を満たす場合はtrueを返し、そうでない場合はfalseを返します


var myArray = [3、5、7、9、4、8、2、1、6];
alert(myArray.every( function (item){ return item> 5;})); // false
alert(myArray.every( function (item){ return item <10;})); // true


いくつかの

いくつか(コールバック[、thisObject])
配列の少なくとも1つの要素が条件を満たす場合はtrueを返し、そうでない場合はfalseを返します


var myArray = [3、5、7、9、4、8、2、1、6];
alert(myArray.some( function (item){ return item> 5;})); // true
alert(myArray.some( function (item){ return item> 10;})); // false


地図

マップ(コールバック[、thisObject])
指定された関数による処理後、古い配列の要素が入る新しい配列を作成します。


var myArray = [3、5、7、9、4、8、2、1、6];
var newArray = myArray.map( function (item){ return item + 10;});
// newArrayは配列[13、15、17、19、14、14、18、12、11、16]と等しくなります


組み合わせる


これらのメソッドは、互いに組み合わせて使用​​できます。


var myArray = [3、5、7、9、4、8、2、1、6];
myArray
.filter( function (item){ return item> 5;})
.forEach( function (item){alert(item);});


練習に近い
document.forms [0] .elements
.filter( function (item){ return item.type == 'checkbox';})
.forEach( function (item){item.checked = true;});


適合性


まあ、私たちはこの記事を読んで、インスピレーションを受けました...しかし、それを気にしてください! これは、バージョン1.6以降のJavaScriptのみにあります!

関係ありません これらの各機能のMozilla開発者は、古いバージョンのJavaScriptの実装を作成し、機能の説明に記載しました。

これらの実装をarrays.jsファイルにコンパイルしました。

開発に頑張ってください!

PS jQueryはそれをすべて持っていることを書く必要はありません:)

Source: https://habr.com/ru/post/J28977/


All Articles