0
点赞
收藏
分享

微信扫一扫

数组扁平化 && 对象扁平化


目录

  • ​​1. 数组扁平化​​
  • ​​1.1 toString + split​​
  • ​​1.2 reduce​​
  • ​​1.3 join + split​​
  • ​​1.4 递归 + 循环​​
  • ​​1.5 扩展运算符​​
  • ​​1.6 flat()​​
  • ​​2. 对象扁平化​​

1. 数组扁平化

数组扁平化就是将多维数组转化为一维数组:

[1, [2, 3, [4, 5]]]  ——>  [1, 2, 3, 4, 5]

1.1 toString + split

先将数组转化为字符串,在使用split将字符串转化为数组:

let arr = [1, [2, 3, [4, 5]]]
function flatten(arr) {
return arr.toString().split(',').map( item => Number(item))
}
console.log(flatten(arr)) // [1, 2, 3, 4, 5]

用split形成的数组的每个元素仍然是字符串,需要将其转化为数字

注意: 仅适用于数组元素都是数字的情况

1.2 reduce

reduce方法会对根据回调函数对数组的每个元素进行操作:

let arr = [1, [2, 3, [4, 5]]] 
const newArr = function(arr){
return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5]

更多​​reduce()​​​方法的使用:《数组reduce()方法的妙用》

1.3 join + split

​join()​​方法和上面的toString方法类似,都能将数组转化为字符串

function flatten(arr) {
return arr.join(',').split(',').map( item => parseInt(item) )
}

1.4 递归 + 循环

function flatten(arr) {
var res = [];
arr.map(item => {
if(Array.isArray(item)) {
res = res.concat(flatten(item));
} else {
res.push(item);
}
});
return res;
}

1.5 扩展运算符

​...​​扩展运算符可以取出参数的所有的可以遍历的对象,并拷贝到当前的对象中

let arr = [1, [2, 3, [4, 5]]] 
function flatten(arr) {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
console.log(flatten(arr)); // [1, 2, 3, 4, 5]

1.6 flat()

​flat()​​是ES6中的一个数组方法,该方法会按照一个可指定的深度depth递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。该方法不会改变原数组

语法: ​​let newArray = arr.flat(depth)​

注意:

  • ​depth​​为指定要提取嵌套数组的结构深度,默认值为 1
  • ​flat()​​ 方法会移除数组中的空项

let arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

// 指定要提取嵌套数组的结构深度为1层
let arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(1); // [1, 2, 3, 4, [5, 6]]

// 指定要提取嵌套数组的结构深度为2层
let arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]

// 使用 Infinity 作为深度,展开任意深度的嵌套数组
let arr4 = [1, 2, [3, 4, [5, 6]]]
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6]

// 移除数组中的空项
let arr5 = [1, 2, , 4, 5];
arr5.flat(); // [1, 2, 4, 5]

2. 对象扁平化

对象扁平化就是将复杂的多层的对象转化为一维对象:

let obj = { a: { d: 1 }, 
d: 2,
e: [1, 2]
}
function flatten(data) {
var result = {};
function recurse(cur, prop) {
// 如果输入进来的是不是对象,就将其放在数组中,返回
if (Object(cur) !== cur) {
result[prop] = cur;
// 如果输入进来的是数组,长度不为0就递归数组,得出结果
} else if (Array.isArray(cur)) {
for (var i = 0, len = cur.length; i < len; i++)
recurse(cur[i], prop + "[" + i + "]");
if (len == 0) result[prop] = [];
} else {
var isEmpty = true;
for (var p in cur) {
isEmpty = false;
recurse(cur[p], prop ? prop + "." + p : p);
}
if (isEmpty && prop)
result[prop] = {};
}
}
recurse(data, "");
return result;
};
console.log(flatten(obj)) // {a.d: 1, d: 2, e[0]: 1, e[1]: 2}


举报

相关推荐

0 条评论