摘要：總結(jié)我們繼續(xù)了我們數(shù)組系列的文章的，今天我們主要說的就是數(shù)組的如何轉(zhuǎn)換成其他數(shù)據(jù)類型，以及數(shù)組如何按照我們自己的規(guī)則去進(jìn)行排序。

今天我們繼續(xù)來介紹 Javascirpt 數(shù)組中的方法，也是數(shù)組系列的第四篇文章，因?yàn)閿?shù)組的方法眾多，每篇文章我們都對(duì)數(shù)組的每個(gè)方法都有比較細(xì)致的描述，只要你能夠從中成長一點(diǎn)點(diǎn)，那我們的目的就達(dá)到了，學(xué)習(xí)是一個(gè)持續(xù)的，漸進(jìn)的過程。每天進(jìn)步一點(diǎn)點(diǎn)，最終會(huì)有大成就。

直接進(jìn)入主題

我們?cè)陧?xiàng)目的開發(fā)過程中，數(shù)據(jù)類型之間的轉(zhuǎn)換有著非常重要的作用，而數(shù)組轉(zhuǎn)換成其他數(shù)據(jù)類型是我們常見的一種。

該方法是對(duì)數(shù)組轉(zhuǎn)換成字符串，數(shù)組的每一個(gè)元素都會(huì)調(diào)用 「toString」方法 ，返回一個(gè)新字符串。該字符串是以數(shù)組中的每一個(gè)元素的字符串形式拼接而成，且元素之間用逗號(hào)分隔。

定義沒看懂，我們看一個(gè)例子肯定立刻就明白！

//語法
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 的執(zhí)行過程
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

看到這里應(yīng)該會(huì)有人疑問，是不是只能用逗號(hào)分隔呢？如果我用其它字符分隔可行嗎？可以告訴你「toString」方法肯定是不行了，但是我們可以利用其他方法進(jìn)行。

老規(guī)矩，我們還是會(huì)在每個(gè)方法的后面看看兼容。

該方法也是將一個(gè)數(shù)組轉(zhuǎn)換成字符串，返回一個(gè)新的字符串。

方法會(huì)將數(shù)組的每一個(gè)元素轉(zhuǎn)換成字符串，然后再用給定的字符去拼接成一個(gè)新的字符串返回給我們。

該方法接受一個(gè)參數(shù)：就是我們給定的分隔符。

//語法
array.join(separator)

雖說語法看上去比較簡(jiǎn)單，但是有幾點(diǎn)我們需要注意的

參數(shù)是可選的，如果沒有參數(shù)默認(rèn)為逗號(hào)（，）

參數(shù)可以為空字符串("")，這時(shí)會(huì)返回一個(gè)沒有任何字符分隔的字符串

如果數(shù)組的元素中有 undefined 或者null，則會(huì)被轉(zhuǎn)化為空字符串（""）

參數(shù)可以為空格，元素會(huì)以空格分隔

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

這里我們說到了數(shù)組轉(zhuǎn)換為字符串，那么字符串如何轉(zhuǎn)換成數(shù)組呢？感興趣的小伙伴可以自己去了解下。

「sort」方法的兼容性如何呢？直接上圖。

數(shù)組的排序用到的場(chǎng)景有很多，比如表格的升序與降序，數(shù)據(jù)從大到小排列或者按照某些規(guī)則去排列等等都會(huì)用到排序，如何有效到使用數(shù)據(jù)到排序方法，首先你要對(duì)這些方法有一定的了解才能使用比較恰當(dāng)?shù)姆椒ā?/p> reverse

從名稱我們應(yīng)該就能猜出該方法的作用，該方法就是將數(shù)組中的元素顛倒順序。

//語法
array.reverse()

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

方法相對(duì)比較簡(jiǎn)單，也沒什么好解釋的，但是應(yīng)用場(chǎng)景比較少，在實(shí)際的項(xiàng)目中我們并不是那么簡(jiǎn)單的數(shù)據(jù)結(jié)構(gòu)，那么簡(jiǎn)單的排序規(guī)則，下面我們來重點(diǎn)介紹一個(gè)非常牛逼而且非常靈活的一個(gè)排序方法。

「reverse」方法的兼容性。

該方法對(duì)數(shù)組的元素進(jìn)行排序，默認(rèn)情況下按照升序排列。先看看兩個(gè)例子吧

//案例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]

你會(huì)發(fā)現(xiàn)排序規(guī)則并不是我們想想的那樣，究竟是怎么一回事情呢？
其實(shí)在「sort」方法執(zhí)行的時(shí)候，數(shù)組的每個(gè)元素會(huì)先執(zhí)行一次 toString() 方法，然后在根據(jù)字符串的 Unicode 編碼進(jìn)行排序。

那么我們?cè)趺礃幼霾拍馨凑瘴覀冏约旱囊庠富蛘哒f規(guī)則進(jìn)行排序呢？

其實(shí)「sort」方法還接受一個(gè)可選的參數(shù)：該參數(shù)是一個(gè)函數(shù)，它可以用來指定我們數(shù)組排序的規(guī)則。

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

那么我們應(yīng)該如何利用這個(gè)參數(shù)去指定我們排序的規(guī)則呢？參數(shù)函數(shù)接受兩個(gè)參數(shù)，然后會(huì)根據(jù)返回的兩個(gè)參數(shù)的比較值進(jìn)行排序。

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

排序的規(guī)則如下：

如果 a - b 小于 0 ，那么 a 在 b 的前面，也就是會(huì)按照升序排列

如果 a - b 等于 0 ，那么 a 和 b 的位置相對(duì)不變

如果 a - b 大于 0 ，那么 b 在 a 的前面，也就是會(huì)按照降序排列。

例如我們想把上面的案例2中的數(shù)組按照數(shù)字的大小進(jìn)行排列，我們只需要加入上面我們說的比較函數(shù)

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！如果我們想要進(jìn)行降序排列也很簡(jiǎn)單，調(diào)換一個(gè)我們的計(jì)算方法就行。

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

但是在實(shí)際的使用當(dāng)中我們不僅僅比較的是數(shù)字與字符類型，也可以能是比較的是對(duì)象，不過沒關(guān)系我們依舊可以使用對(duì)象的屬性去進(jìn)行排序。

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}]

可以看到我交的朋友一般都比較偏大，一眼就能看出哪個(gè)是最大的，哪個(gè)是最小的，不過我相信大家也看出來了，最小的哪個(gè)就是我（... 哈哈）。

至于 sort 更多更有趣的方法，小伙伴們不妨自己去尋找嘗試吧。

繼續(xù)來看看「sort」方法的兼容性。

總結(jié)

我們繼續(xù)了我們數(shù)組系列的文章的，今天我們主要說的就是數(shù)組的如何轉(zhuǎn)換成其他數(shù)據(jù)類型，以及數(shù)組如何按照我們自己的規(guī)則去進(jìn)行排序。希望對(duì)你有所幫助，我們后面還會(huì)持續(xù)更新其他用法，如果你喜歡本篇文章就給個(gè)贊加關(guān)注吧！

關(guān)注微信公眾號(hào)：六小登登。領(lǐng)取全套學(xué)習(xí)資源