Qu'est-ce que l'aplatissement du tableau js ? Implémentation de l'aplatissement du tableau js (avec code)-js tutoriel-php.cn

Qu'est-ce que l'aplatissement du tableau js ? Implémentation de l'aplatissement du tableau js (avec code)

不言

Libérer： 2018-08-06 13:58:16

original

2482 Les gens l'ont consulté

Cet article vous explique qu'est-ce que l'aplatissement des tableaux js ? L'implémentation de l'aplatissement du tableau js (avec code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

1. Qu'est-ce que l'aplatissement des tableaux

Le flatlining, comme son nom l'indique, consiste à réduire la complexité de décoration et faciliter la tâche. C'est plus concis et simple, mettant en valeur le thème.
L'aplatissement des tableaux, comme vous le savez déjà d'après ce qui précède, consiste à transformer un tableau multicouche complexe imbriqué couche par couche en un tableau avec moins de niveaux ou un seul tableau de couches.

Ps : flatten peut aplatir le tableau, l'effet sera le suivant :

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr)); // [1, 2, 3, 4]

Copier après la connexion

Comme on peut le voir, en utilisant flatten Le tableau traité n'a qu'une seule couche, essayons de l'implémenter ci-dessous.

2. Implémentation simple

2.1 Récursion ordinaire

Ceci C’est la méthode la plus simple à imaginer, simple et claire !

/* ES6 */
const flatten = (arr) => {
  let result = [];
  arr.forEach((item, i, arr) => {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(arr[i])
    }
  })
  return result;
};

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

Copier après la connexion

/* ES5 */
function flatten(arr) {
  var result = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]))
    }
    else {
      result.push(arr[i])
    }
  }
  return result;
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

Copier après la connexion

2.2 toString()

Cette méthode utilise toString pour modifier le tableau into dans une chaîne séparée par des virgules, puis parcourez le tableau et reconvertissez chaque élément dans son type d'origine.

Regardons d'abord comment toString transforme un tableau en chaîne

[1, [2, 3, [4]]].toString()
// "1,2,3,4"

Copier après la connexion

Affichage complet

/* ES6 */
const flatten = (arr) => arr.toString().split(',').map((item) => +item);

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

Copier après la connexion

/* ES5 */
function flatten(arr) {
  return arr.toString().split(',').map(function(item){
    return +item;
  });
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

Copier après la connexion

Le les scénarios utilisés par cette méthode sont très limités. Tous les éléments du tableau doivent être des nombres.
Ils peuvent également être uniquement des chaînes, et vous pouvez réaliser vous-même l'implémentation spécifique.

2.3 [].concat.apply + some

Utilisez arr.some pour déterminer s'il y a un tableau dans le tableau et appelez Fonction plate (utilisant flatten aplatissement), connectée à [].concat.apply, renvoie finalement concat;arr

/* ES6 */
const flatten = (arr) => {
  while (arr.some(item => Array.isArray(item))){
    arr = [].concat.apply([], arr);
  }
  return arr;
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

Copier après la connexion

/* ES5 */
/**
* 封装Array.some
* @param {function} callback    - 回调函数
* @param {any}      currentThis - 回调函数中this指向
*/
Array.prototype.some = function (callback, currentThis){
  let context = this;
  let flag = false;
  currentThis = currentThis || this;
  for (var i = 0, len = context.length; i < len; i++) {
    const res = callback.call(currentThis, context[i], i, context);
    if (res) {
      flag = true;
    } else if (!flag) {
      flag = false;
    }
  }
  return flag;
}

function flatten(arr){
  while(arr.some(item => Array.isArray(item))){
    arr = [].concat.apply([], arr);
  }
  return arr;
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

Copier après la connexion

2.4 réduire

lui-même est un boucleur itératif, généralement utilisé pour l'accumulation, donc sur la base de cette fonctionnalité, il y a les éléments suivants : reduce

function flatten(arr){
  return arr.reduce(function(prev, cur){
    return prev.concat(Array.isArray(cur) ? flatten(cur) : cur)
  }, [])
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

Copier après la connexion

2.5 L'opérateur de déstructuration dans ES6...

ne peut étendre que le tableau le plus externe à chaque fois. ... Aplatissez-le une fois. [].concatarr