JavaScript 二維陣列批次移動順序

最近有個小題目,前端接收後端吐出的 JSON 資料並經過轉換後如下:
    
let array = [
	["A", "B", "C"],
    ["A1", "B1", "C1"],
    ["A2", "B2", "C2"],
    ["A3", "B3", "C3"],
    ["A4", "B4", "C4"],
    ["A5", "B5", "C5"],
]
    

上面的資料將會呈現在表格中(第一行是標題),本來一切安好,客戶現在指定排序,說要換為 A, C, B,因為有很多張表,大部分都是動態依照不定資料產生,然後前端同仁就說那只能從最開始接收資料的部分調整了。

?? 什麼,雖然我相對少寫 JavaScript ,但,也可以在最後面再調整順序不是嗎? 於是我嘗試了一下,一行就搞定:
    
let newArray = array.map(([a, b, c]) => [a, c, b]);
console.log("newArray", newArray);

// newArray (6)[Array(3), Array(3), Array(3), Array(3), Array(3), Array(3)]
// 0: (3)["A", "C", "B"]
// 1: (3)["A1", "C1", "B1"]
// 2: (3)["A2", "C2", "B2"]
// ...
    

嗯..很簡單嘛,那假設要動態的呢? 有點難,至少需要三行:
let title = ["C", "B", "A"];

// 取得依照 title 排序後的索引
let sortedIndexes = title.map((item) => array[0].indexOf(item));
console.log("sortedIndexes", sortedIndexes); // sortedIndexes (3)[2, 1, 0]

// 使用排序後的索引重新排列子陣列
newArray = array.map((subArray) => sortedIndexes.map((index) => subArray[index]));

console.log("newArray", newArray);
// newArray (6)[Array(3), Array(3), Array(3), Array(3), Array(3), Array(3)]
// 0: (3)["C", "B", "A"]
// 1: (3)["C1", "B1", "A1"]
// 2: (3)["C2", "B2", "A2"]
// ...
    
    

隨便取個名,上面這種寫法叫做 array 動態重新排序

看來,今天又混了一篇文章呢。

留言