Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erläuterung verschiedener Methoden zum Aufteilen eines Arrays in gerade Blöcke in JavaScript

青灯夜游
Freigeben: 2021-04-29 09:27:00
nach vorne
2962 Leute haben es durchsucht

Dieser Artikel zeigt Ihnen, wie Sie ein Array in Javascript in gerade Blöcke aufteilen? Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Ausführliche Erläuterung verschiedener Methoden zum Aufteilen eines Arrays in gerade Blöcke in JavaScript

Arrays sind eine der am häufigsten verwendeten Strukturen in der JavaScript-Programmierung, weshalb es wichtig ist, ihre integrierten Methoden zu verstehen.

In diesem Artikel schauen wir uns an, wie man ein Array in JS in n-große Blöcke aufteilt.

Konkret untersuchen wir hauptsächlich zwei Methoden:

  • Verwenden Sie die slice()-Methode und die for-Schleife. slice()方法和 for 循环

  • splice()方法和 while 循环

使用 slice() 方法将数组分割成偶数块

slice()方法是提取数组块,或者将其切成块的最简单方法:

slice(start, end) 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

注意:startend都可以是负整数,这仅表示它们是从数组末尾枚举的。 -1是数组的最后一个元素,-2是倒数第二个,依此类推...

因此,要将列表或数组分割成偶数块,我们使用slice()方法

function sliceIntoChunks(arr, chunkSize) {
    const res = [];
    for (let i = 0; i < arr.length; i += chunkSize) {
        const chunk = arr.slice(i, i + chunkSize);
        res.push(chunk);
    }
    return res;
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(sliceIntoChunks(arr, 3));
Nach dem Login kopieren

运行结果:

[[ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ], [ 10 ]]
Nach dem Login kopieren

在上面的代码中,我们通过遍历数组并按每个chunkSize对其进行切片,将arr分解成大小为3的小块。在最后一次迭代中,只剩下一个元素(10),所以它自己就组成一个块。【推荐学习:javascript高级教程

使用 splice() 方法将数组分割成偶数块

即使splice()方法看起来与slice()方法相似,但其用法和副作用却大不相同。 我们仔细来看看:

// splice 做以下两件事:
// 1. 删除从 startIdx 开始的 deleteCount 元素
// 2. 将提供的新元素(newElem1, newElem2…)插入到myArray中,以索引startIdx开始
// 该方法的返回值是一个包含所有已删除元素的数组

myArray.splice(startIdx, deleteCount, newElem1, newElem2...)

let arrTest = [2, 3, 1, 4]
let chunk = arrTest.splice(0,2)
console.log(chunk) // [2, 3]
console.log(arrTest) // [1, 4]
Nach dem Login kopieren

我们通过一个代码示例来实际了解这一点:

function spliceIntoChunks(arr, chunkSize) {
    const res = [];
    while (arr.length > 0) {
        const chunk = arr.splice(0, chunkSize);
        res.push(chunk);
    }
    return res;
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(spliceIntoChunks(arr, 2));
Nach dem Login kopieren

运行结果:

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ] ]
Nach dem Login kopieren

在这里,我们使用while循环遍历数组。 在每次迭代中,我们执行拼接操作,并将每个块添加到结果数组中,直到原始数组中不再有其他元素为止(arr.length> 0)。

需要注意的非常重要的一点是splice()会更改原始数组。 如slice()创建原始数组的副本,因此原始数组不会有任何更改。

总结

在本文中,我们介绍了在 JS 中将列表分割为多个块的几种简单方法。在此过程中,我们学习了如何使用几个内置的数组方法,如slice()splice()

Verwenden Sie splice ()-Methode und while-Schleife

Verwenden Sie die Slice()-Methode, um das Array in gerade Blöcke aufzuteilenDie slice()-Methode ist die einfachste Möglichkeit, Teile eines Arrays zu extrahieren oder in Stücke zu schneiden:

slice(start, end)-Methode gibt zurück Ein neues Array-Objekt. Dieses Objekt ist eine flache Kopie des ursprünglichen Arrays, das durch Anfang und Ende bestimmt wird (einschließlich Anfang, ohne Ende). Das ursprüngliche Array wird nicht verändert.

Hinweis: Sowohl start als auch end können negative Ganzzahlen sein, was nur bedeutet, dass sie ab dem Ende des Arrays aufgezählt werden. -1 ist das letzte Element des Arrays, -2 ist das vorletzte und so weiter ...

Teilen Sie also die Liste oder das Array in gleichmäßige Abschnitte auf , verwenden wir die Methode slice() rrreeeDas laufende Ergebnis:

rrreee🎜Im obigen Code durchlaufen wir das Array und schneiden es nach jedem chunkSize, Break arr in kleine Stücke der Größe 3 schneiden. Bei der letzten Iteration ist nur noch ein Element übrig (10), sodass es selbst einen Block bildet. [Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene🎜]🎜

Verwenden Sie splice() Methode Array in gleichmäßige Blöcke aufteilen

🎜 Auch wenn die Methode splice() der Methode slice() ähnelt, sind ihre Verwendung und Nebenwirkungen so sind unterschiedlich, nicht gleich. Schauen wir uns das genauer an: 🎜rrreee🎜 Sehen wir uns das in Aktion anhand eines Codebeispiels an: 🎜rrreee🎜 Laufergebnisse: 🎜rrreee🎜 Hier verwenden wir eine while-Schleife, um das Array zu durchlaufen. Bei jeder Iteration führen wir die Spleißoperation durch und fügen jeden Block zum resultierenden Array hinzu, bis im ursprünglichen Array keine Elemente mehr vorhanden sind (arr.length> 0). 🎜🎜Es ist sehr wichtig zu beachten, dass splice() das ursprüngliche Array ändert. Beispielsweise erstellt slice() eine Kopie des ursprünglichen Arrays, sodass keine Änderungen am ursprünglichen Array vorgenommen werden. 🎜

Zusammenfassung

🎜In diesem Artikel haben wir uns ein paar einfache Möglichkeiten angesehen, eine Liste in JS in Teile aufzuteilen. Unterwegs haben wir gelernt, wie man mehrere integrierte Array-Methoden verwendet, wie zum Beispiel slice() und splice(). 🎜🎜🎜Originaladresse: https://stackabuse.com/how-to-split-an-array-into-even-chunks-in-javascript/🎜🎜Autor: Abhilash Kakumanu🎜🎜Übersetzungsadresse: https://segmentfault .com/a/1190000039833328🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung verschiedener Methoden zum Aufteilen eines Arrays in gerade Blöcke in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!