1. Что такое выравнивание массива
- Сглаживание, как следует из названия, призвано уменьшить сложность оформления, сделать сами вещи более лаконичными, простыми и выделить тему.
- Выравнивание массива, как видно из приведенного выше значения, заключается в преобразовании сложного вложенного многослойного массива слой за слоем в массив с меньшим количеством слоев или только с одним слоем.
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Исходный код реализации, спасибо за прочтение!