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

zhonghanwen 發布于2019-08-23 11:59 / 1099人閱讀

摘要：總結我們繼續了我們數組系列的文章的，今天我們主要說的就是數組的如何轉換成其他數據類型，以及數組如何按照我們自己的規則去進行排序。

今天我們繼續來介紹 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」方法的兼容性。

總結

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

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

GPU云服務器云服務器 php數組排序的方法 javascript數組方法 php數組位置的排序 php 數組的鍵排序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97806.html

Javascript數組系列五之增刪改和強大的 splice()

摘要：刪除數組元素的開始索引需要刪除元素的個數，插入數組的元素語法因為參數變化多樣，我們主要從三個方面來展示的用法。今天是我們介紹數組系列文章的第五篇，也是我們數組系列的最后一篇文章，只是數據系列的結束，所以大家不用擔心，我們會持續的更新干貨文章。生命不息，更新不止！今天我們就不那么多廢話了，直接干貨開始。我們在《Javascript數組系列一之棧與隊列》中描述我們是如何利用 pus...

chavesgu 2019-08-23 12:01 評論0 收藏0
JavaScript系列--八種【數組去重】方法的總結

摘要：缺點不兼容以下瀏覽器七高階函數方法用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回，否則返回。方法六高階函數優點高階函數的高級用法。一、前言數組去重是一個老生常談的問題，但是有時候會彈出點其他東西。二、雙重循環這個方法是最常見的，最原始的方法。 // 方法一：雙重循環 var array = [1,1,1,2,1,1,2] function unique(arr...

Xufc 2019-08-23 18:14 評論0 收藏0
JavaScript專題之亂序

摘要：源碼地址為了簡化篇幅，我們對這個數組進行分析，數組長度為，此時采用的是插入排序。插入排序的源碼是其原理在于將第一個元素視為有序序列，遍歷數組，將之后的元素依次插入這個構建的有序序列中。 JavaScript 專題系列第十九篇，講解數組亂序，重點探究 Math.random() 為什么不能真正的亂序？亂序亂序的意思就是將數組打亂。嗯，沒有了，直接看代碼吧。 Math.random ...

I_Am 2019-08-21 17:00 評論0 收藏0
JavaScript標準庫系列——Object對象和Array對象（一）

摘要：目錄導語對象對象小結導語本系列文章將重點講解提供的原生庫標準庫，只要在支持語言的平臺，標準庫中的提供的對象的屬性和方法都能使用對象對象的理解講的標準庫，首先要從對象談起，因為之后的所有對象都可以看做是對象構造出來的因此，對象可以看做是一個構目錄導語 1. Object對象 2. Array對象 3. 小結導語本系列文章將重點講解JavaScript提供的原生庫——標準庫，只要...

Scholer 2019-08-21 11:25 評論0 收藏0
【重溫基礎】21.高階函數

摘要：歡迎您的支持系列目錄復習資料資料整理個人整理重溫基礎篇重溫基礎對象介紹重溫基礎對象介紹重溫基礎介紹重溫基礎相等性判斷重溫基礎閉包重溫基礎事件本章節復習的是中的高階函數，可以提高我們的開發效率。本文是重溫基礎系列文章的第二十一篇。今日感受：想家。本人自己整理的【Cute-JavaScript】資料，包含：【ES6/ES7/ES8/ES9】，【JavaScript基礎...

wua_wua2012 2019-08-23 15:05 評論0 收藏0