Math.prototype.concat详解及二维数组扁平化方法

121 阅读 0 评论 80 点赞

我是靠谱客的博主鳗鱼星月，这篇文章主要介绍Math.prototype.concat详解及二维数组扁平化方法，现在分享给大家，希望可以做个参考。

当concat的参数不为数组时

复制代码

1
2
3
4
var arr1 = ['a', 'b', 'c'];
var arr2 = arr1.concat([1,2,[3,5,[6,7]]],4,5);//这里[1,2,[3,5,[6,7]]],4,5不是数组
console.log(arr2);
VM1827:3 (8) ["a", "b", "c", 1, 2, Array(3), 4, 5]

当concat参数不为数组时,如上面的[1,2],4,5，则会将[1,2],4,5里面的参数若是基本类型则直接push进数组，如果是多维数组则只会拆开一层，而调用者数组不会改变，会原封不动的首先添加到新数组中。

当concat的参数整体不是数组，但里面的某几个项是数组时，此项的改变不会作用到新数组上

复制代码

1
2
3
4
5
6
var arr1 = [['a', 'b'], 'c'];
var arr2 = [1,2];
var arr3 = arr1.concat(arr2,4,5);
arr3;//(6) [Array(2), "c", 1, 2, 4, 5]
arr2.push(1000);
arr3;//(6) [Array(2), "c", 1, 2, 4, 5]

可见arr2的改变并未影响新数组arr3;

当concat的参数是数组时

当concat的参数是数组时，相当于遍历这个数组，将每一项值浅拷贝到新数组中因此原数组中某一个数组项（如下面的arr2）的改变会体现到新数组上。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
var arr1 = [['a', 'b'], 'c'];
var arr2 = [1,2];
var arr3 = [arr2,4,5];
var arr4 = arr1.concat(arr3);
arr4;
/**
0:["a", "b"]
1:"c"
2:(2) [1, 2]
3:4
4:5
**/

现在改变arr2的值：

复制代码

1
2
3
4
5
6
7
8
9
arr2.push(345);
arr4;
/**
0:(2) ["a", "b"]
1:"c"
2:(3) [1, 2, 345];//注意这里已经将arr2中新加入的值加入新数组中了
3:4
4:5
**/

而当concat的参数为数组，且这个数组整体改变时不会影响新数组，还是上面的例子，现在更新arr3:

复制代码

1
2
3
4
5
6
7
8
9
10
arr3.push(890);
arr4;
/**
0:["a", "b"]
1:"c"
2:(2) [1, 2]
3:4
4:5
**/

arr4并没有变化。

二维数组扁平化方法

复制代码

1
var newArr = Array.prototype.concat.apply([],arr);

复制代码

1
2
3
var newArr = arr.reduce(function(prev,next){
retrun prev.concat(next);
});

复制代码

1
var newArr = [].concat(...arr);//注意扩展运算符只能扁平化一层数组

复制代码

1
2
3
4
5
6
7
8
9
10
var reg = /[[]]/g;
var str = JSON.stringify(arr);
var arrstr = str.replace(reg,function(c,pos){
if(pos !== 0 && pos !== str.length - 1){
return '';
}else{
return c;
}
});
var newarr = JSON.parse(arrstr);