Maison > Article > interface Web > Sujet JavaScript 8 : Aplatissement des tableaux
Répertoire
(recommandation d'apprentissage gratuite : tutoriel vidéo javascript )
1. Récursion
La boucle for est la chose la plus simple à penser lorsque nous effectuons des opérations sur les tableaux, quelle que soit la complexité temporelle et spatiale, la récursivité devrait être un choix parfait !
Exemple :
输入 const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];` 输出 [ 1, 2, 3, 4, { a: 1 }, null, undefined ]
Code :
function flatten(arr) { let res = []; for (let i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) { // 因为函数返回的是数组,所以要做拼接处理 res = res.concat(flatten(arr[i])); } else { res.push(arr[i]) } } return res;}
Remarque :
2. réduire
Voyons d'abord ce que reduce
fait : La méthode reduce()
s'applique à chaque élément du tableau que vous fournissez (par ordre croissant), résumant leurs résultats en une seule valeur de retour. reducer函数
Exemple :
输入 const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];` 输出 [ 1, 2, 3, 4, { a: 1 }, null, undefined ]
Code :
function flatten(arr) { return arr.reduce((prev, next) => { // prev表示上一次操作的结果 return prev.concat(Array.isArray(next) ? flatten(next) : next) }, []) // 注意reduce的初始值应该是[],否则无法进行拼接}
Remarque :
Comparez soigneusement laMéthode 1 et la Méthode 2 Les deux idées sont exactement les mêmes - trouvez les sous-éléments dont le type de données est le tableau et lissez-les, mais les détails d'implémentation sont légèrement différents. . différent.
La seule chose à laquelle il faut prêter attention est que le type de données de base doit commencer par un tableau lors de l'épissage.3. apply+some
Puisque la méthode deux est une variante de la première méthode, la méthode trois peut également être considérée comme une variante de la méthode deux, mais ce n'est pas le cas. utilise plus la récursion Au lieu de "démanteler" l'imbrication couche par couche Regardons d'abord l'API utilisée :apply
some
Code :
function flatten(arr) { while (arr.some(item => Array.isArray(item))) { // 只要存在数组类型的元素,就抹平一层 arr = [].concat.apply([], arr) } return arr;}
Remarque :
Tout le monde est confus Le point principal est. En fait, l'objectif principal est de réduire les parenthèses apply
let res = [];res = res.concat({});// 等价于[].concat.apply([], [{}])Dans cet exemple :
arr = [].concat.apply([], arr);// 等价于[].concat(1, [2, [3, 4, { a: 1 }], null], undefined)
4. Opérateur d'extension ES6 Vous avez peut-être remarqué que de la méthode 1 à la méthode 3, nous nous sommes constamment appuyés sur les méthodes existantes pour rationaliser notre code. Il en va de même pour cette méthode~
Nous utilisons l'opérateur d'expansion d'ES6 (utilisé pour retirer). paramètres Tous les attributs traversables de l'objet sont copiés dans l'objet actuel), continuez à rationaliser la troisième méthode :
Code :function flatten(arr) {
while (arr.some(item => Array.isArray(item))) {
// 只要存在数组类型的元素,就抹平一层
arr = [].concat(...arr)
}
return arr;}
Si les quatre premières méthodes sont les méthodes traditionnelles que nous pouvons implémenter, alors les suivantes sont les méthodes « non traditionnelles » que nous pouvons implémenter, il suffit d'aller au code !
function flatten(arr) { return arr.toString().split(',').map(function(item){ return +item })}Remarque :
Il existe des restrictions de type lors de la conversion des données. Si les données d'origine ressemblent à ceci : [1, '2'], des problèmes surviendront <.>
6. Régularité
Si on prend par défaut le défaut que le type sera converti, alors on peut aussi aplatir le tableau de manière plus violente :
function flatten(arr) { return JSON.stringify(arr).replace(/\[|\]/g, '').split(',');}
Remarque :
S'il s'agit d'un tableau pur, il ne semble y avoir aucun problème
function flatten(arr) { return JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '').split(',') + ']')}Mais si le tableau contient des objets, vous devez éliminer les conséquences après JSON, donc Plus rigoureux ~ À ce stade, les six méthodes incluent la plupart des implémentations de l'aplatissement des tableaux. Et si nous voulons "mettre à niveau" notre méthode vers un outil ? En ce moment, nous devons "plagier" Loadsh ~
7. Implémentez votre propre méthode d'outil plat
Ici, nous aplatissons La fonction dans Loadsh est simplifiée. Regardons le code pour des changements spécifiques :
/* * @private * @param {Array} array 需要扁平化的数组 * @param {number} depth 最多处理几层 * @param {boolean} [isStrict] 是否严格处理函数 * @param {Array} [result=[]] 输出的数组 * @returns {Array} */function flatten(array, depth, isStrict, result) { result || (result = []) // 边界 if (array == null) return result; for (const value of array) { if (depth > 0 && Array.isArray(value)) { if (depth > 1) { flatten(value, depth - 1, isStrict, result) } else { result.push(...value); // 只拆1层 } } else if (!isStrict) { result[result.length] = value } } return result;}
Cette méthode fournit le nombre de couches d'aplatissement
const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, false);// [ 1, 2, 3, 4, [ 5, 6 ], { a: 1 }, null, undefined ]
const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, true);// [ 3, 4, [ 5, 6 ] ]const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 2, true);// [ 5, 6 ]
En écrivant ceci, nous avons compris les idées de traitement d'aplatissement et disposons de certaines capacités d'implémentation. Si vous pouvez bien comprendre le code ci-dessus, je pense que la partie d'aplatissement ne devrait pas être difficile pour vous. étudier une autre méthode de chargement ~isStrict
javascript(vidéo)
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!