Javascript數組系列四之數組的轉換與排序Sort方法

今天咱們繼續來介紹 Javascirpt 數組中的方法，也是數組系列的第四篇文章，由於數組的方法衆多，每篇文章咱們都對數組的每一個方法都有比較細緻的描述，只要你可以從中成長一點點，那咱們的目的就達到了，學習是一個持續的，漸進的過程。天天進步一點點，最終會有大成就。

直接進入主題

數組的轉換

咱們在項目的開發過程當中，數據類型之間的轉換有着很是重要的做用，而數組轉換成其餘數據類型是咱們常見的一種。

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」方法確定是不行了，可是咱們能夠利用其餘方法進行。

老規矩，咱們仍是會在每一個方法的後面看看兼容。

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」方法的兼容性如何呢？直接上圖。

數組的排序

數組的排序用到的場景有不少，好比表格的升序與降序，數據從大到小排列或者按照某些規則去排列等等都會用到排序，如何有效到使用數據到排序方法，首先你要對這些方法有必定的瞭解才能使用比較恰當的方法。

reverse

從名稱咱們應該就能猜出該方法的做用，該方法就是將數組中的元素顛倒順序。

//語法
array.reverse()

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

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

「reverse」方法的兼容性。

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」方法的兼容性。

總結

咱們繼續了咱們數組系列的文章的，今天咱們主要說的就是數組的如何轉換成其餘數據類型，以及數組如何按照咱們本身的規則去進行排序。但願對你有所幫助，咱們後面還會持續更新其餘用法，若是你喜歡本篇文章就給個贊加關注吧！

關注微信公衆號：六小登登。領取全套學習資源