Detaillierte Analyse von Iterationsmethoden in Javascript-Arrays-js-Tutorial-php.cn

Dieser Artikel bietet Ihnen eine detaillierte Analyse der Iterationsmethode in Javascript-Arrays. Ich hoffe, dass er für Freunde hilfreich ist.

Wir haben die Verwendung von Arrays eingeführt. Zum Beispiel: Wie verhält sich ein Array wie ein „Stapel“, welche Methode wird verwendet, um sich wie eine „Warteschlange“ zu verhalten usw. Da es in Javascript viele Array-Methoden gibt, werden wir nicht zu viele Dinge in einem Artikel vorstellen. Lass uns etwas über andere Funktionen von Arrays lernen

Es hat offiziell begonnen!

Array-Iterationsmethoden

Array-Iterationsmethoden werden in unseren Entwicklungsprojekten sehr häufig verwendet, sind sehr wichtig und sehr effizient. Darüber hinaus können diese Methoden unseren Code auch verbessern Seien Sie sozusagen sehr prägnant, und es wird schrecklich sein, wenn Sie diese Methoden in der Entwicklung nicht oft verwenden.

Wie fügen wir beispielsweise DOM-Knoten stapelweise hinzu?

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

Nach dem Login kopieren

Das Obige ist nur ein einfaches Beispiel. Tatsächlich ist unser täglicher Entwicklungsprozess viel mehr als das komplizierter als dies. Daher ist es sehr wichtig, wie man die Arbeitsentwicklung effizient durchführt. Beginnen wir nacheinander mit den am häufigsten verwendeten.

forEach()

Diese Methode führt die angegebene Funktion für jedes Element des Arrays aus und gibt undefiniert (oder keinen Rückgabewert) zurück.

Diese Methode akzeptiert zwei Parameter, einer ist die von jedem Element ausgeführte Rückruffunktion und der andere ist ein optionaler Parameter, dessen Wert beim Ausführen der Rückruffunktion angegeben wird.

Die übergebene Rückruffunktion akzeptiert drei Parameter: das Element im Array (Element), den Index des Elements (Index, optional) und das Array selbst (Array, optional).

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

Nach dem Login kopieren

Schließlich werfen wir einen Blick auf die Kompatibilität der forEach()-Methode, die direkt im Bild oben gezeigt wird.

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

map()

Diese Methode führt die angegebene Funktion für jedes Element des Arrays aus und gibt ein neues Array zurück. Das Ergebnis des neuen Arrays ist das Element im ursprünglichen Array danach Ausführen des Methodenergebnisses.

Die übergebene Rückruffunktion akzeptiert drei Parameter: das Element im Array (Element), den Index des Elements (Index, optional) und das Array selbst (Array, optional).

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

Nach dem Login kopieren

Bei unserer täglichen Entwicklungsarbeit werden wir auf viele Datenformatierungsprozesse stoßen. Die Verwendung dieser Methoden kann unsere Verarbeitung erheblich erleichtern.

Zum Beispiel der Prozess der Konvertierung eines Klassenarrays in ein Array

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

Nach dem Login kopieren

Zum Beispiel die für die Formatierung erforderlichen Daten

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

Nach dem Login kopieren

Natürlich sind wir tatsächlich Die Datenkomplexität bei der Arbeit ist weitaus mehr als das, aber wir können die Vorteile dieser Methoden zur Datenverarbeitung deutlich spüren.

Schließlich werfen wir einen Blick auf die Kompatibilität der Methode map(), wie im Bild oben gezeigt.

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

filter

Diese Methode führt auch die angegebene Funktion für jedes Element des Arrays aus und gibt ein neues Array zurück. Das neue Array besteht aus Elementen, die jeweils „true“ zurückgeben. Einfach ausgedrückt geht es darum, herauszufiltern, was wir wollen.

Die übergebene Rückruffunktion akzeptiert drei Parameter: das Element im Array (Element), den Index des Elements (Index, optional) und das Array selbst (Array, optional).

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

Nach dem Login kopieren

Die Methode „Filter“ hat auch in der Praxis viele Einsatzmöglichkeiten, zum Beispiel: Wir finden heraus, welche Kinder zu einer Gruppe von Menschen gehören.

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

Nach dem Login kopieren

Schließlich werfen wir einen Blick auf die Kompatibilität der filter()-Methode, die direkt im Bild oben gezeigt wird.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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