ホームページ > 記事 > ウェブフロントエンド > js は配列を走査して共有できる API サンプルを使用します

js は配列を走査して共有できる API サンプルを使用します

小云云オリジナル: 2018-01-29 11:41:071384ブラウズ

js には配列を走査できる API がたくさんありますが、それらは非常によくカプセル化されているため、通常の開発中にそれらを使用しないのはなぜでしょうか? この記事では、forEach、map、filter、some、every、reduce などの API の使用について説明します。比較のため、通常の文と同様です。この記事では主に、js で走査可能な配列を使用する API の例を紹介します。お役に立てれば幸いです。

テストデータとしてオブジェクト配列を使用します:

const testArr = [
    { id: 1, name: '张三', age: 18 }, 
    { id: 2, name: '李四', age: 24 }, 
    { id: 3, name: '王小二', age: 22 }
];

forEach

すべてのオブジェクトのIDを出力します:

for (let i = 0, len = testArr.length; i < len; i++) {
    console.log(testArr[i].id); // 1, 2, 3
}

次に、その方法を見てみましょう。 forEach は次のように書かれています:

testArr.forEach(item => console.log(item.id)); // 1, 2, 3

両方の結果は同じです。for ステートメントは命令型プログラミングスタイルですが、forEach は宣言型プログラミングスタイルであり、前者はマシンに何をすべきかを指示しますが、後者は何をすべきかのみに焦点を当てています。。後者の記述方法をお勧めします。for() で一連の長い式を記述する必要がないように、forEach を使用するようにしてください。 (追記: パフォーマンスにこだわりがある場合は、for を使用してください。)

map

ここで、すべてのオブジェクトの名前を取得して、新しい配列を形成したいと思います。 for ステートメントは次のように記述されます:

let names = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    names.push(testArr[i].name);
}

console.log(names); // [ &#39;张三&#39;, &#39;李四&#39;, &#39;王小二&#39; ]

これはより冗長です。、オリジナルとのこの種の比較配列の各要素に対して指定された操作を実行し、最終的に新しい配列を返すという問題には、map が最適です:

testArr.map(item => item.name); // [ '张三', '李四', '王小二' ]

for ステートメントと比較すると、map は非常にエレガントです!

マップについて、注意すべき点があります:

[1, 2, 3].map(parseInt); // [ 1, NaN, NaN ]

一部の生徒はここで少し混乱しているかもしれませんが、結果が [1、2、3] ではないのはなぜですか?

実際、これは非常に単純です。map は 3 つのパラメーター (現在トラバースされている要素、現在の要素のインデックス、元の配列自体) を parseInt に渡します。parseInt は 2 つのパラメーターを持つことができます。

これは、次のコードを実行するのと同じです:

parseInt(1, 0); // 1
parseInt(2, 1); // NaN
parseInt(3, 2); // NaN

したがって、結果は [1, 2, 3] ではなく [1, NaN, NaN] になります。

filter

場合によっては、18 歳を超えるオブジェクトなど、指定された条件を満たす要素を除外する必要があります。 for の記述は次のとおりです:

let newArr = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].age > 18) {
        newArr.push(testArr[i]);
    }
}

console.log(newArr); // [ { id: 2, name: '李四', age: 24 }, { id: 3, name: '王小二', age: 22 } ]

ご覧のとおり、記述は非常に冗長です。この時点でフィルターを使用すると非常に便利です:

testArr.filter(item => item.age > 18); // [ { id: 2, name: '李四', age: 24 }, { id: 3, name: '王小二', age: 22 } ]

filter は配列の重複排除にも使用できます。コードは次のとおりです:

const arr2 = [1, 2, 4, 1, 3, 2, 6];

arr2.filter((item, idx, arr) => {
    return arr.indexOf(item) === idx;
}); // [ 1, 2, 4, 3, 6 ]

map + filter

すべてのオブジェクトの特定の属性を取得するには、次のことを行う必要があります。オブジェクトがこの属性を事前に持っているかどうかを確認するのは少し面倒です:

function getAllOfSomeProps (array, props) {
    let arr = [];

    array.forEach((item) => {           
        if (item[props]) {
            arr.push(item[props]); // => item[props] && arr.push(item[props])
        }
    })

    return arr;
}

getAllOfSomeProps(testArr, 'sex'); // []
getAllOfSomeProps(testArr, 'id'); // [ 1, 2, 3 ]
getAllOfSomeProps(testArr, 'name'); // [ '张三', '李四', '王小二' ]

map + filter の組み合わせはより洗練されています:

return array.map(item => item[props]).filter(item => item);

たとえば、より一般的な例を見てみましょう。配列内の年齢が 18 より大きいすべてのオブジェクトの for ステートメントは次のとおりです:

let newNames = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].age > 18) {
        newNames.push(testArr[i].name);
    }
}

console.log(newNames); // [ '李四', '王小二' ]

もう一度マップ + フィルターを見てみましょう:

testArr.filter(item => item.age > 18).map(item => item.name); // [ '李四', '王小二' ]

は依然として非常にエレガントです。

some

新しいオブジェクトを追加する必要がある場合がありますが、一部の属性は繰り返すことができません。for は次のように記述されます:

function isRepeat (array, props, value) {
    for (let i = 0, len = array.length; i < len; i++) {
        if (array[i][props] === value) {
            return true;
        }
    }

    return false;
}

some メソッドは、配列内の特定の要素が指定された関数のテストに合格するかどうかをテストします。これは次のように書き換えられます。

function isRepeat (array, props, value) {
    return array.some(item => item[props] === value);
}

isRepeat(testArr, 'name', '张三'); // true
isRepeat(testArr, 'name', '李白'); // false

every

配列内の各オブジェクトが特定の属性を持っているかどうかを検出する必要があります。for は次のように記述されます:

function hasSomeProps (array, props) {
    for (let i = 0, len = array.length; i < len; i++) {
        if (!array[i][props]) {
            return false;
        }
    }

    return true;
}

every メソッドは、配列のすべての要素が指定された属性のテストに合格したかどうかをテストします。関数。次のように書き換えます:

function hasSomeProps (array, props) {
    return array.every(item => item[props]);
}

hasSomeProps(testArr, 'name'); // true

ループから抜け出す

名前が Li Si:

for use Break:

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].name === &#39;李四&#39;) {
        break;
    }
    console.log(testArr[i]); // { id: 1, name: &#39;张三&#39;, age: 18 }
}

some になるまでオブジェクト情報を出力するなど、特定の条件が満たされたときにループを終了する必要がある場合があります。、条件が true の場合、true を返してループから抜けます:

testArr.some((item) => {
    if (item.name === '李四') {
        return true;
    }
    console.log(item); // { id: 1, name: '张三', age: 18 }
})

every、条件が true の場合、false を返してループから抜けます:

testArr.every((item) => {
    if (item.name === '李四') {
        return false;
    }
    console.log(item); // { id: 1, name: '张三', age: 18 }
})

forEach にはブレークがないため、ここでは some、every を使用できます。その代わり。

reduce

[343, 34, 232, 4, 343, 335, 353535] の合計を計算します。 for の書き方は次のとおりです。

const arr = [343, 34, 232, 4, 343, 335, 353535];

let sum = 0;
for (let i = 0, len = arr.length; i < len; i++) {
    sum += arr[i];
}
console.log(sum); // 354826

このような累積演算を行うには、reduce を使用すると非常に便利です。 :

arr.reduce((prev, curr) => prev + curr) // 354826

その実践的な方法は、単にそれをはるかに超えています。このようにして、学生は毎日の勉強や仕事の中でゆっくりとそれを蓄積することができます。

要約: 配列を走査するときは、これらの API を使用するようにしてください。関数とチェーン呼び出しを可能な限り使用するこのスタイルは、コードをよりエレガントにすることができ、コードの品質を向上させることができます。