Detaillierte Analyse von Iterationsmethoden in Javascript-Arrays

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

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

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.

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

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

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

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

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.

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

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

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

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

我们在来看看 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() 方法的兼容性，直接上图。

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

可以看出 every 方法是全部返回 true 时，整个函数才返回 true；some 方法则是全部返回 false 时，整个函数才返回 false。

相关推荐：

javascript中Array数组的迭代方法实例分析_javascript技巧

JavaScript数组的5种迭代方法实例详解

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse von Iterationsmethoden in Javascript-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!