资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Javascript数组系列四之数组的转换与排序Sort方法

Javascript数组系列四之数组的转换与排序Sort方法

zhonghanwen / 1036人阅读

摘要：总结我们继续了我们数组系列的文章的，今天我们主要说的就是数组的如何转换成其他数据类型，以及数组如何按照我们自己的规则去进行排序。

今天我们继续来介绍 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 数组的键排序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97806.html

相关文章

  • Javascript数组系列五之增删改和强大的 splice()

    摘要：删除数组元素的开始索引需要删除元素的个数，插入数组的元素语法因为参数变化多样，我们主要从三个方面来展示的用法。 今天是我们介绍数组系列文章的第五篇，也是我们数组系列的最后一篇文章，只是数据系列的结束，所以大家不用担心，我们会持续的更新干货文章。 生命不息，更新不止！ 今天我们就不那么多废话了，直接干货开始。 我们在《Javascript数组系列一之栈与队列》中描述我们是如何利用 pus...

    chavesgu 评论0 收藏0

  • JavaScript系列--八种【数组去重】方法的总结

    摘要：缺点不兼容以下浏览器七高阶函数方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回，否则返回。方法六高阶函数优点高阶函数的高级用法。 一、前言 数组去重是一个老生常谈的问题，但是有时候会弹出点其他东西。 二、双重循环 这个方法是最常见的，最原始的方法。 // 方法一：双重循环 var array = [1,1,1,2,1,1,2] function unique(arr...

    Xufc 评论0 收藏0

  • JavaScript专题之乱序

    摘要：源码地址为了简化篇幅，我们对这个数组进行分析，数组长度为，此时采用的是插入排序。插入排序的源码是其原理在于将第一个元素视为有序序列，遍历数组，将之后的元素依次插入这个构建的有序序列中。 JavaScript 专题系列第十九篇，讲解数组乱序，重点探究 Math.random() 为什么不能真正的乱序？ 乱序 乱序的意思就是将数组打乱。 嗯，没有了，直接看代码吧。 Math.random ...

    I_Am 评论0 收藏0

  • JavaScript标准库系列——Object对象和Array对象（一）

    摘要：目录导语对象对象小结导语本系列文章将重点讲解提供的原生库标准库，只要在支持语言的平台，标准库中的提供的对象的属性和方法都能使用对象对象的理解讲的标准库，首先要从对象谈起，因为之后的所有对象都可以看做是对象构造出来的因此，对象可以看做是一个构 目录 导语 1. Object对象 2. Array对象 3. 小结 导语 本系列文章将重点讲解JavaScript提供的原生库——标准库，只要...

    Scholer 评论0 收藏0

  • 【重温基础】21.高阶函数

    摘要：欢迎您的支持系列目录复习资料资料整理个人整理重温基础篇重温基础对象介绍重温基础对象介绍重温基础介绍重温基础相等性判断重温基础闭包重温基础事件本章节复习的是中的高阶函数，可以提高我们的开发效率。 本文是 重温基础 系列文章的第二十一篇。 今日感受：想家。 本人自己整理的【Cute-JavaScript】资料，包含：【ES6/ES7/ES8/ES9】，【JavaScript基础...

    wua_wua2012 评论0 收藏0

发表评论

登陆后可评论

0条评论

zhonghanwen

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<