首頁 >Java >java教程 >Javascript如何進行陣列轉換與排序?

Javascript如何進行陣列轉換與排序?

青灯夜游
青灯夜游原創
2018-09-15 16:05:171539瀏覽

本章來介紹Javascript如何進行陣列轉換與排序,讓大家了解Javascript中陣列轉換與排序的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

陣列的轉換

我們在專案的開發過程中,資料型別之間的轉換有著非常重要的作用,而陣列轉換成其他資料類型是我們常見的一種。

toString

這個方法是將陣列轉換成字串,陣列的每個元素都會呼叫「toString」方法,傳回一個新字串。字串是以數組中的每一個元素的字串形式拼接而成,且元素之間以逗號分隔。

定義沒看懂,我們看一個例子一定立刻就明白!

//语法
array.toString()

案例1

const numbers = [1, 2, 3, 4, 5];
const result = numbers.toString();
console.log(result); //1,2,3,4,5
console.log(typeof  result); //string

案例2

#
const numbers = ["A", "B", "C"];
const result = numbers.toString();
console.log(result); //A,B,C
console.log(typeof  result); //string
//利用 reduce 方法模拟 toString 的执行过程
const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduce((prev, current) => {
    return  prev.toString() + "," + current.toString();
});
console.log(result); //1,2,3,4,5

看到這裡應該會有人疑問,是不是只能用逗號分隔呢?如果我用其它字元分隔可行嗎?可以告訴你「toString」方法肯定是不行了,但是我們可以利用其他方法來進行。

老規矩,我們還是會在每個方法的後面看看相容。

Javascript如何進行陣列轉換與排序?

join

#該方法也是將一個數組轉換成字串,並傳回一個新的字符串。

方法會將陣列的每個元素轉換成字串,然後再用給定的字元去拼接成一個新的字串回傳給我們。

該方法接受一個參數:就是我們給定的分隔符號。

//语法
array.join(separator)

雖然說語法看起來比較簡單,但是有幾點我們需要注意的

#參數是可選的,如果沒有參數預設為逗號(,)

參數可以為空字串(""),這時會傳回一個沒有任何字元分隔的字串

如果陣列的元素中有undefined 或null,則會轉換為空字串("")

參數可以為空格,元素會以空格分隔

const numbers = [1, 2, 3, 4, 5];
const result1 = numbers.join();
console.log(result1);//1,2,3,4,5
const result2 = numbers.join("");
console.log(result2);//12345
const result3 = numbers.join(" ");
console.log(result3);//1 2 3 4 5
const result4 = numbers.join("-");
console.log(result4);//1-2-3-4-5
const result5 = numbers.join("A");
console.log(result5);//1A2A3A4A5

“sort”方法的兼容性如何呢?直接上圖。

Javascript如何進行陣列轉換與排序?

陣列的排序

#陣列的排序用到的場景有很多,例如表格的升序與降序,資料由大到小排列或依照某些規則去排列等等都會用到排序,如何有效到使用資料到排序方法,首先你要對這些方法有一定的了解才能使用比較恰當的方法。

reverse

從名稱我們應該就能猜出該方法的作用,該方法就是將陣列中的元素顛倒順序。

//语法
array.reverse()
//案例
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); //[5, 4, 3, 2, 1]

方法相對比較簡單,也沒什麼好解釋的,但是應用場景比較少,在實際的項目中我們並不是那麼簡單的數據結構,那麼簡單的排序規則,下面我們來重點介紹一個非常牛逼而且非常靈活的一個排序方法。

“reverse”方法的兼容性。

Javascript如何進行陣列轉換與排序?

sort

#此方法對陣列的元素進行排序,預設會依照升序排列。先看看兩個例子吧

//案例1
const numbers = [1, 3, 5, 2, 4];
numbers.sort();
console.log(numbers); //[1, 2, 3, 4, 5]
//案例2
const numbers2 = [1, 15, 20, 2, 3];
numbers2.sort();
console.log(numbers2);//[1, 15, 2, 20, 3]

你會發現排序規則並不是我們想的那樣,究竟是怎麼一回事情呢?
其實在「sort」方法執行的時候,陣列的每個元素會先執行一次 toString() 方法,然後在依照字串的 Unicode 編碼進行排序。

那麼我們怎麼樣做才能按照我們自己的意願或說規則進行排序呢?

其实「sort」方法还接受一个可选的参数:该参数是一个函数,它可以用来指定我们数组排序的规则。

//语法
array.sort([callback])

那么我们应该如何利用这个参数去指定我们排序的规则呢?参数函数接受两个参数,然后会根据返回的两个参数的比较值进行排序。

array.sort(compare(a, b){
    return a- b
});

排序的规则如下:

  • 如果 a - b 小于 0 ,那么 a 在 b 的前面,也就是会按照升序排列

  • 如果 a - b 等于 0 ,那么 a 和 b 的位置相对不变

  • 如果 a - b 大于 0 ,那么 b 在 a 的前面,也就是会按照降序排列。

例如我们想把上面的案例2中的数组按照数字的大小进行排列,我们只需要加入上面我们说的比较函数

const numbers2 = [1, 15, 20, 2, 3];
numbers2.sort(function(a ,b){
    return a- b;
});
console.log(numbers2);//[1, 2, 3, 15, 20]

是不是 so easy!如果我们想要进行降序排列也很简单,调换一个我们的计算方法就行。

const numbers2 = [1, 15, 20, 2, 3];
numbers2.sort(function(a ,b){
    return b - a;
});
console.log(numbers2);//[20, 15, 3, 2, 1]

但是在实际的使用当中我们不仅仅比较的是数字与字符类型,也可以能是比较的是对象,不过没关系我们依旧可以使用对象的属性去进行排序。

const friends = [{
    name: "大B哥",
    age: 25
}, {
    name: "二B哥",
    age: 30
}, {
    name: "三B哥",
    age: 28
}, {
    name: "我",
    age: 14
}];
friends.sort(function(a, b){
    return b.age - a.age;
});
console.log(friends);
//排序之后
//[{name: "二B哥", age: 30},
//{name: "三B哥", age: 28},
//{name: "大B哥", age: 25},
//{name: "我", age: 14}]

可以看到我交的朋友一般都比较偏大,一眼就能看出哪个是最大的,哪个是最小的,不过我相信大家也看出来了,最小的哪个就是我(… 哈哈)。

至于 sort 更多更有趣的方法,小伙伴们不妨自己去寻找尝试吧。

继续来看看「sort」方法的兼容性。

Javascript如何進行陣列轉換與排序?

以上是Javascript如何進行陣列轉換與排序?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn