Explication détaillée de plusieurs méthodes de division d'un tableau en blocs pairs en JavaScript

Cet article va vous montrer comment diviser un tableau en blocs pairs en javascript ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Les tableaux sont l'une des structures les plus couramment utilisées dans la programmation JavaScript, c'est pourquoi il est important de comprendre ses méthodes intégrées.

Dans cet article, nous voyons comment diviser un tableau en morceaux de taille n dans JS.

Plus précisément, deux méthodes sont principalement étudiées :

• utilisant la méthode slice() et la for boucle

• Utilisez la méthode splice() et while pour boucler

et utilisez la méthode slice() pour diviser le tableau en blocs pairs. La méthode 🎜> est le moyen le plus simple d'extraire un morceau d'un tableau ou de le couper en morceaux : la méthode

slice() renvoie un nouvel objet tableau, qui est une copie superficielle du tableau d'origine. déterminé par le début et la fin (y compris le début, excluant la fin). Le tableau d'origine n'est pas modifié.

Remarque : slice(start, end) et

peuvent être des entiers négatifs, ce qui signifie simplement qu'ils sont énumérés à partir de la fin du tableau.

est le dernier élément du tableau, start est l'avant-dernier et ainsi de suite... end-1 Donc, pour diviser une liste ou un tableau en morceaux égaux, nous utilisons la méthode -2

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

Résultat d'exécution : slice()

[[ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ], [ 10 ]]

Dans le code ci-dessus, nous décomposons

en morceaux de taille

en parcourant le tableau et en le découpant par chacun

Petits morceaux. Dans la dernière itération, il ne reste qu'un seul élément (chunkSize), il forme donc un bloc à lui seul. [Apprentissage recommandé : arrTutoriel JavaScript avancé3]10Utilisez la méthode splice() pour diviser le tableau en blocs pairs

Même si le La méthode ressemble à la méthode

, mais son utilisation et ses effets secondaires sont assez différents. Regardons de plus près :

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

splice() Voyons cela en action avec un exemple de code : slice（）

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

Résultats d'exécution :

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ] ]

Ici, nous utilisons une

boucle Traverse le tableau. A chaque itération, nous effectuons une opération de concaténation et ajoutons chaque morceau au tableau résultant jusqu'à ce qu'il n'y ait plus d'éléments dans le tableau d'origine (

).

whileUne chose très importante à noter est que sarr.length> 0 modifie le tableau d'origine. Comme

crée une copie du tableau d'origine, il n'y aura donc aucune modification dans le tableau d'origine.

plice()slice()Résumé

Dans cet article, nous avons examiné quelques façons simples de diviser une liste en morceaux dans JS. En cours de route, nous avons appris à utiliser plusieurs méthodes de tableau intégrées, telles que et

.

slice()splice()Adresse originale : https://stackabuse.com/how-to-split-an-array-into-even-chunks-in-javascript/

Auteur : Abhilash Kakumanu

Adresse de traduction : https://segmentfault.com/a/1190000039833328

Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!