Sujet JavaScript 8 : Aplatissement des tableaux

Répertoire

• 1. Récursion
• 2. réduire
• 3.
• 4. Opérateur d'expansion ES6
• 5. toString
• 6. Régularité
• 7. Implémentez votre propre méthode d'outil plat
• Écrire à la fin

(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 :

1. Déterminer le type de base des éléments du tableau
2. Si ce n'est pas un tableau : stockez-le directement dans le nouveau tableau
3. S'il s'agit d'un tableau : Répétez la première étape jusqu'à le dernier élément qui n'est pas un tableau est stocké dans le nouveau tableau

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 la

Mé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 :

• : Appeler une API avec un this A donné fonction avec des valeurs et des arguments fournis sous forme de tableau (ou d'objet de type tableau). apply
•  : Testez si au moins un élément du tableau réussit le test de fonction fourni. Il renvoie une valeur booléenne 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;}

5. toString

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 ]

1. Cette méthode fournit le nombre de couches d'aplatissement. effet inverse après aplatissement

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 ]

2. Une fois le paramètre activé, les éléments exposés sont conservés après l'aplatissement et les éléments peu profonds sont éliminés.

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

Recommandations d'apprentissage gratuites associées :

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!