一維數組轉二維數組

 

使用場景舉例：接口返回一個數組對象，展示時每行固定顯示n個，則可將返回的數組轉成二維數組[[...n], [...n]...]的形式循環展示。
a.數組元素為基本類型：

let baseArray = [1, 2, 3, 4, 5, 6, 7, 8];
len len = baseArray.length;
let n = 4; //假設每行顯示4個
let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );
let res = [];
for (let i = 0; i < lineNum; i++) {
// slice() 方法返回一個從開始到結束（不包括結束）選擇的數組的一部分淺拷貝到一個新數組對象。且原始數組不會被修改。
let temp = baseArray.slice(i*n, i*n+n);
res.push(temp);
}
console.log(res);

結果：

 

b.數組元素為對象

當數組元素為對象的時候，就不能使用slice方法進行截取了，因為slice屬於淺拷貝，導致的問題就是你修改了新生成的數組對象值，會影響原始數組中對象的值，就比如下。但很多時候我們並不想影響原來的值。

 

現在來說說 數組的深拷貝和淺拷貝之我的理解 。簡單的說深拷貝就是完全跟被拷貝對象脫離了關系，你修改新的對象內容，不會影響原來的對象，而且淺拷貝呢，貌似是生成了一份新的，但是實際和原來的還是同一個對象，只是變了個名字而已，所以你通過新名字來操作對象實際還是操作的原來的對象。嗯，有這樣一個認識就可以了。
深拷貝和淺拷貝主要是針對對象類型，基本類型並不涉及。具體的可以看看內存堆棧相關知識，也可以對深淺拷貝有更深的理解，這里就不贅述了。

好了，回歸正題，那就是如何深拷貝對象數組。這里就介紹一種通過JSON.stringify和JSON.parse方法。

 

所以舉例的使用場景就可以改為如下：
 

let objArray = [{a: 1}, {b: 2}, {c: 3}, {d: 4}, {e: 5}, {f: 6}, {g: 7}];
let len = objArray.length;
let n = 4; //假設每行顯示4個
let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );
let res = [];
for (let i = 0; i < lineNum; i++) {
let temp = objArray.slice(i*n, i*n+n);
res.push(JSON.parse(JSON.stringify(temp)));
}
console.log(res);