Analyse détaillée des méthodes d'itération dans les tableaux Javascript-js tutoriel-php.cn

Ce que cet article vous apporte, c'est une analyse détaillée de la méthode d'itération dans les tableaux Javascript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Nous avons introduit une certaine utilisation des tableaux. Par exemple : comment un tableau se comporte-t-il comme une « pile », quelle méthode est utilisée pour se comporter comme une « file d'attente », etc. Comme il existe de nombreuses méthodes de tableau en Javascript, nous n'introduisons pas trop de choses dans un seul article. Découvrons les autres fonctions des tableaux

C'est officiellement commencé !

Méthodes d'itération de tableau

Les méthodes d'itération de tableau sont très fréquemment utilisées dans nos projets de développement, très importantes et très efficaces. Non seulement cela, ces méthodes peuvent également rendre notre code Il le fera. soyez très concis, pour ainsi dire, et ce sera terrible si vous n'utilisez pas souvent ces méthodes en développement.

Par exemple, comment ajouter des nœuds DOM par lots

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);
})

Copier après la connexion

Ce qui précède n'est qu'un exemple simple. En fait, notre processus de développement quotidien est bien plus que cela, et c'est le cas. beaucoup plus compliqué que cela. Il y en a beaucoup, il est donc très nécessaire de développer le travail de manière efficace. Commençons par les plus couramment utilisés, un par un.

forEach()

Cette méthode exécute la fonction donnée sur chaque élément du tableau et renvoie undéfini (ou aucune valeur de retour).

Cette méthode accepte deux paramètres, l'un est la fonction de rappel exécutée par chaque élément et l'autre est un paramètre facultatif, la valeur de celui-ci lorsque la fonction de rappel est exécutée.

La fonction de rappel transmise acceptera trois paramètres : l'élément dans le tableau (item), l'index de l'élément (index, facultatif) et le tableau lui-même (tableau, facultatif).

//语法
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])
}

Copier après la connexion

Enfin, jetons un œil à la compatibilité de la méthode forEach(), directement montrée dans l'image ci-dessus.

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

map()

Cette méthode exécute la fonction donnée sur chaque élément du tableau et renvoie un nouveau tableau. Le résultat du nouveau tableau est l'élément du tableau d'origine après. exécuter le résultat de la méthode.

La fonction de rappel transmise acceptera trois paramètres : l'élément dans le tableau (item), l'index de l'élément (index, facultatif) et le tableau lui-même (tableau, facultatif).

//语法
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]

Copier après la connexion

Dans notre travail de développement quotidien, nous rencontrerons de nombreux processus de formatage de données. L'utilisation de ces méthodes peut grandement faciliter notre traitement.

Par exemple, le processus de conversion d'un tableau de classe en tableau

<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>
});

Copier après la connexion

Par exemple, les données nécessaires au formatage

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}]

Copier après la connexion

Bien sûr, la complexité des données dans notre travail réel est bien plus que cela, mais nous pouvons clairement ressentir les avantages de ces méthodes dans le traitement des données.

Enfin, jetons un œil à la compatibilité de la méthode map(), comme le montre l'image ci-dessus.

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

filter

Cette méthode exécute également la fonction donnée sur chaque élément du tableau et renvoie un nouveau tableau. Le nouveau tableau est composé d'éléments renvoyant chacun vrai. Pour faire simple, il s’agit de filtrer ce que nous voulons.

La fonction de rappel transmise acceptera trois paramètres : l'élément dans le tableau (item), l'index de l'élément (index, facultatif) et le tableau lui-même (tableau, facultatif).

//语法
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]

Copier après la connexion

La méthode du "filtre" a également de nombreuses utilisations dans les travaux pratiques, par exemple : on découvre quels enfants font partie d'un groupe de personnes.

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);

Copier après la connexion

Enfin, jetons un œil à la compatibilité de la méthode filter(), directement montrée dans l'image ci-dessus.

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

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

Copier après la connexion

我们在来看看 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

Copier après la connexion

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