ああ、私が配列にするもの

3701 ワード
javascript beginners テキストリンク
JavaScriptでは、配列はオブジェクトです.より多くの場合、我々は要素の配列やオブジェクトの配列を提供しています.これらの要素は、これらのメソッドのいくつかが私たちの生活をより楽にする場所です.
  • 配列.mapping()/配列.forech ()
  • 配列.filter ()
  • 配列.reduce ()
    キャプテン翼
    なぜ配列を使うのですか?配列は、類似したデータのコレクションを格納する簡単な方法を持っているように私たちのために作成されました(混合データタイプを持つことは可能ですが、推奨されません-それは我々がオブジェクトを持っている理由です!)変数のトンを宣言する必要はありません.
    const array1 = [1,3,3,7]; //same datatype of integers
const array2 = [1,"3",3,7]; //legal but not recommended
    対
    const variable1 = 1;
const variable2 = 3;
const variable3 = 3;
const variable4 = 7;
    配列の反復処理
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
    より頻繁に、配列から情報を抽出する必要があるかもしれません.map ()と配列.forech ()が入っています.これらの関数はすべての要素を反復処理し、コールバック関数を返す.唯一の違いはマップが新しい配列を返す間、foreachは要素の上で繰り返します.つまり、配列を変更する必要がなければ、マップの代わりにforeachを使う必要があるということです.
    以下が例です.最近、APIデータベースからデータを取得しなければなりませんでしたが、動きの配列はダッシュ“-”を含んでいました.
    const moves = ["karate-chop","double-slap", "comet-punch", "mega-punch"]
    私は配列を使いました.map ()メソッドを使用してダッシュをスペースに置換し、結果を新しい配列に戻ります.
    const newMoves = moves.map(move => move.replace(/[^a-zA-Z ]/g, " "))
console.log(moves)
console.log(newMoves)
// (4) ['karate-chop', 'double-slap', 'comet-punch', 'mega-punch'] // (4) ['karate chop', 'double slap', 'comet punch', 'mega punch']
    に
    const newMoves = moves.forEach(move => move.replace(/[^a-zA-Z ]/g, " "))
console.log(moves)
console.log(newMoves)
// (4) ['karate-chop', 'double-slap', 'comet-punch', 'mega-punch'] // undefined
    foreachを使う方法がありますが、それはより多くの仕事です.
    アレイフィルタリング
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
    配列のフィルタリングは、配列からすべてを使用したくない場合もあります.配列.filter ()メソッドは、コールバック関数で設定した条件を返す新しい配列を作成します.ドキュメンタリーリンクの例はかなり自明ですが、それを使うことも可能です.要素を除外するために配列を返す演算子ではありません:
    const ids = [1, 2, 3, 4, 5]
const newIds = ids.filter(id => id !== 2)
console.log(ids)
console.log(newIds)
//(5) [1, 2, 3, 4, 5]
//(4) [1, 3, 4, 5]
    アレイ縮小
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
    より頻繁に、私たちは配列を壊して、1つの値でそれを返す必要があるかもしれません.配列がオブジェクトであることを忘れないでください.そうすれば、オブジェクトの数のリストがあるかもしれません.配列のパラメータ.reduce ()関数はコールバック関数とオプションの初期化値です.
    const numbers = [101, 4, 6, 20, 9];

const reduceFunction = (total, num) => {
  return total - num;
}

console.log(numbers.reduce(reduceFunction))
// 62

console.log(numbers.reduce(reduceFunction, 100))
// -40

console.log(numbers.reduce(reduceFunction, 200))
// 60
    私はそこに他の多くの配列操作方法があると確信しています、しかし、これらは使用される最も一般的で、一般的なものです、そして、それはQOLを改善するために彼らを使う方法を学ぶことが重要です!
    • ヒントを使用してコードを“OMIT”を使用してインターフェイスを作成する縮小!
    ファイルを使用してゴラン.