一個關於 JS Array 排序的小知識
我們在對 Array 使用排序的時候很常會使用 sort 來排序
const todos = [“mike”, “zod”, “vue”, “nuxt3”, ”alex”, “js”];
console.log(todos.sort())
// -> ["alex", "js", "mike", "nuxt3", "vue", "zod"]我們把 sort 回傳的結果 log 出來後可以看到所有的內容都按照 A -> Z去做排序，但是這時候如果你再去 log todos這個陣列的時候就會發現它也被改變了。
console.log(todos)
// -> ["alex", "js", "mike", "nuxt3", "vue", "zod"]但是很常一種情況是我們會避免改變到原始陣列，因為原始陣列可能會要產生好幾種不同的資料格式，所以我們一般我們可能會這樣做
const todos = [“mike”, “zod”, “vue”, “nuxt3”,”alex”, “js”];
const copyTodo1 = […todos]; // 方案一
const copyTodo2 = [].concat(todos); // 方案二
console.log(copyTodo1.sort()); // -> ["alex", "js", "mike", "nuxt3", "vue", "zod"]
console.log(copyTodo2.sort()); // -> ["alex", "js", "mike", "nuxt3", "vue", "zod"]
console.log(todos); // -> ["mike", "zod", "vue", "nuxt3","alex", "js"]我們可以利用 Spread Operator (展開運算符) 或是 array 的 concat 來複製一份陣列後只去修改新複製出來的陣列。
But …
其實 Array 有提供另外一個方法叫做 toSorted專門來處理要再多做一層複製的問題，我們直接來看以下的 code
const todos = [“mike”, “zod”, “vue”, “nuxt3”,”alex”, “js”];
console.log(todos.toSorted()); // -> ["alex", "js", "mike", "nuxt3", "vue", "zod"]
console.log(todos); // -> ["mike", "zod", "vue", "nuxt3","alex", "js"]你會發現我們使用 toSorted 進行排序後，再去 log todos這個原始陣列它卻沒有被改變排序，所以我們在做排序的時候就可以不用再使用一些複製陣列的方式，可以直接使用 toSorted就可以達到這樣的效果。
在我的課程中就會有許多這樣的小知識點的教學，想一起學習更多 JavaScript ，現在就加入 👉 https://thecodingpro.com/courses/javascript
現在輸入折扣碼：mikemedium (單堂課程折 200元 ，組合包再折 500 元)
