Javascript配列の反復メソッドの詳細な分析-jsチュートリアル-php.cn

Javascript配列の反復メソッドの詳細な分析

不言

リリース： 2018-09-11 15:31:21

オリジナル

1118 人が閲覧しました

この記事は Javascript 配列の反復メソッドの詳細な分析を提供します。必要な方は参考にしていただければ幸いです。

配列の使用法をいくつか紹介しました。たとえば、配列はどのように「スタック」のように動作するのか、どのようなメソッドを使用すれば「キュー」のように動作するのかなどです。JavaScript には多数の配列メソッドがあるため、1 つの記事であまり多くのことを紹介することはありません。 , 配列の他の関数について学びましょう

正式にスタートしました！

配列反復メソッド

配列反復メソッドは開発プロジェクトで非常に頻繁に使用されており、非常に重要で非常に効率的であるだけでなく、これらのメソッドを使用すると、いわばコードを非常に簡潔にすることができます。開発中にこれらのメソッドを頻繁に使用しないと、ひどいことになります。

たとえば、DOM ノードをバッチで追加するにはどうすればよいですか

let containerUl = document.getElementById('container');
let li;
let peoples = [{name: 'Liu', age: 14}, {name: 'Li', age: 13}, {name: 'Cao', age: 11}];

//for 循环
for (let i = 0; i < peoples.length; i++) {
    li = document.createElement(&#39;li&#39;);
    li.innerHTML = peoples[i].name + ":" + peoples[i].age;
    containerUl.appendChild(li);
};

//数组的迭代方法，更加简洁
peoples.forEach((people) => {
    li = document.createElement('li');
    li.innerHTML = people.name + ":" + people.age;
    containerUl.appendChild(li);
})

ログイン後にコピー

上記は単なる例にすぎません。実際には、私たちの日常の開発プロセスはこれよりもはるかに複雑であり、どのように開発するかです。効率的に作業することが非常に必要ですか？より一般的に使用されるものから 1 つずつ始めましょう。

forEach()

このメソッドは、配列の各要素に対して指定された関数を実行し、未定義 (または戻り値なし) を返します。

このメソッドは 2 つのパラメータを受け入れます。1 つは各要素によって実行されるコールバック関数で、もう 1 つはオプションのパラメータであり、コールバック関数が実行されるときの値です。

渡されるコールバック関数は、配列内の要素 (項目)、要素のインデックス (インデックス、オプション)、配列自体 (配列、オプション) の 3 つのパラメーターを受け入れます。

//语法
array.forEach(callback[, this])
array.forEach(callback(item, index, array){
    //函数体，执行的操作
});

//看个例子，本质上与 for 循环一样
let items = ['a', 'b', 'c'];
items.forEach(function (item) {
    console.log(item);
});

for (let i = 0; i < items.length; i++) {
    console.log(items[i])
}

ログイン後にコピー

最後に、上の図に直接示されている forEach() メソッドの互換性を見てみましょう。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
はい	はい	1.5	9	はい	はい

地図()

このメソッドは、配列の各要素に対して指定された関数を実行し、新しい配列の結果は、元の配列内の要素に対してメソッドを実行した結果になります。

//语法
var newArrs = array.map(callback[, this])
var newArrs = array.map(callback(item, index, array){
    //return 执行后的结果
});

//例子
let numbers = [1, 2, 3];
let newNumbers = numbers.map(x => x * x);
console.log(newNumbers); //[1, 4, 9]

ログイン後にコピー

日々の開発作業では、これらのメソッドを使用すると、処理が大幅に容易になります。

例えば、クラス配列を配列に変換するプロセス

<ul>
    <li><input type="text" value="1"></li>
    <li><input type="text" value="2"></li>
    <li><input type="text" value="3"></li>
</ul>
<script>
    let list = document.getElementsByTagName('input');
    let newList = Array.prototype.map.call(list, item => {
        return item.value;
    });
    console.log(newList);//[1,2,3]
</script>
});

ログイン後にコピー

例えば、書式設定に必要なデータ

let peoples = ['Liu', 'Cao', 'Pan'];
let peoplesInfo = peoples.map(people => {
    return {
        name: people,
        age: Math.floor(Math.random()*20)
    }
});
console.log(peoplesInfo);
// [{name: Liu, age: XX}, 
//  {name: Cao, age: XX}, 
//  {name: Pan, age: XX}]

ログイン後にコピー

もちろん、実際の作業におけるデータの複雑さはこれよりはるかに複雑ですが、これらの方法がデータを処理していることをはっきりと感じることができます。利点は次のとおりです。

最後に、上の図に示すように、map() メソッドの互換性を見てみましょう。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
はい	はい	1.5	9	はい	はい

フィルター

このメソッドは、配列の各要素に対して指定された関数も実行し、新しい配列を返します。新しい配列は、それぞれが true を返す項目で構成されます。簡単に言えば、自分が望むものをフィルタリングすることです。

//语法
var newArrs = array.filter(callback[, this])
var newArrs = array.filter(callback(item, index, array){
    //return 满足条件的项
});

//例子
let numbers = [1, 2, 3, 4, 5];
let newNumbers = numbers.filter(x => x > 2);
console.log(newNumbers); //[3, 4, 5]

ログイン後にコピー

「フィルター」メソッドは実際の作業でも多くの用途があります。たとえば、人々のグループの中にどの子供が含まれているかを調べます。

var peoples = [{name: 'liu', age: 9}, 
            {name: 'jiang', age: 18}, 
            {name: 'cao', age: 20}, 
            {name: 'pan', age: 3}];
var childrens = peoples.filter(people => people.age < 10);
console.log(childrens);

ログイン後にコピー

最後に、上の図に示す filter() メソッドの互換性を見てみましょう。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
はい	はい	1.5	9	はい	はい

every

该方法是对数组的每一个元素执行给定的函数，
如果数组中的每个元素都满足给定的条件则返回 true，否则返回 false。

该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是：数组中的元素（item），元素的索引（index，可选），数组本身（array，可选）。

//语法
var newArrs = array.every(callback[, this])
var newArrs = array.every(callback(item, index, array){
    //执行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.every(item => item > 4);
console.log(result1); //false
var result2 = number.every(item => item > 1);
console.log(result2); //true

ログイン後にコピー

我们在来看看 every() 方法的兼容性，直接上图。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Yes	Yes	1.5	9	Yes	Yes

some

该方法是对数组的每一个元素执行给定的函数，
如果数组中的有一个元素满足条件则返回 true，如果全部不满足条件则返回 false。

该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是：数组中的元素（item），元素的索引（index，可选），数组本身（array，可选）。

//语法
var newArrs = array.some(callback[, this])
var newArrs = array.some(callback(item, index, array){
    //执行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.some(item => item < 1);
console.log(result1); //false
var result2 = number.some(item => item > 5);
console.log(result2); //true

ログイン後にコピー

我们在来看看 some() 方法的兼容性，直接上图。