Тема массива JS 1️⃣ ➖ Сведение массива

внешний интерфейс JavaScript

1. Что такое выравнивание массива

  1. Сглаживание, как следует из названия, призвано уменьшить сложность оформления, сделать сами вещи более лаконичными, простыми и выделить тему.
  2. Выравнивание массива, как видно из приведенного выше значения, заключается в преобразовании сложного вложенного многослойного массива слой за слоем в массив с меньшим количеством слоев или только с одним слоем.

Ps: flattenМассив можно сгладить, и эффект будет следующим:

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

Отсюда видно, что использованиеflattenОбрабатываемый массив имеет только один слой, поэтому попробуем его реализовать.

2. Простая реализация

2.1 Обычная рекурсия

  • Это самый простой способ думать об этом, простой и понятный!
/* 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));
/* 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));

2.2 toString()

  • Метод должен использоватьtoStringПреобразуйте массив в строку с разделителями-запятыми, затем выполните цикл по массиву, чтобы преобразовать каждый элемент обратно в исходный тип.

Давайте взглянемtoStringкак преобразовать массив в строку

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

полный дисплей

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

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));
/* ES5 */
function flatten(arr) {
  return arr.toString().split(',').map(function(item){
    return +item;
  });
}

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

Сценарии, используемые этим методом, очень ограничены, и все элементы массива должны бытьNumber. также может быть всеString, конкретная реализация собственного опыта каждого.

2.3 [].concat.apply + some

  • использоватьarr.someСудя по тому, что если в массиве есть массив, цикл вызываетflattenплоская функция (используя[].concat.applyквартира), с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));
/* 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));

2.4 reduce

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

2.5 Операторы деструктуризации в ES6...

  • ...За один раз можно расширить только самый внешний массив, т.е.[].concatназад,arrПросто сгладьте его один раз.
function flatten(arr){
  while(arr.some(item => Array.isArray(item))){
    arr = [].concat(...arr);
  }
  return arr;
}

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

Интермедия объяснит вамlodashсерединаflattenИсходный код реализации, спасибо за прочтение!