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」方法肯定是不行了,但是我们可以利用其他方法进行。
老规矩,我们还是会在每个方法的后面看看兼容。
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」方法的兼容性。
兼容
总结
我们继续了我们数组系列的文章的,今天我们主要说的就是数组的如何转换成其他数据类型,以及数组如何按照我们自己的规则去进行排序。希望对你有所帮助,我们后面还会持续更新其他用法,如果你喜欢本篇文章就给个赞加关注吧!
Javascript数组系列四之数组的转换与排序Sort方法的更多相关文章
- 有a1,a2,a3,a4,四个数组,四个数组重新组合成一个数组(A),间隔是10个元素
好久没折腾Py了,这是去年年初2019.3月发在Q中的一个记录,因不从事这个,并且被在工厂耽误10几年,所以很少写Blog在这里,感觉这里比较正式,而在Q中只是随意性的记载, 但发布图片总是需要另外再 ...
- java 基本语法(十一) 数组(四)数组的常见算法
1.数组的创建与元素赋值: 杨辉三角(二维数组).回形数(二维数组).6个数,1-30之间随机生成且不重复. 杨辉三角 public class YHSJ { public static void m ...
- 3.4Python数据处理篇之Numpy系列(四)---ndarray 数组的运算
目录 目录 (一)数组与标量的运算 1.说明: 2.实例: (二)元素级的运算(一元函数) 1.说明: 2.实例: (三)数组级的运算(二元函数) 1.说明: 2.实例: 目录 1.数组与标量的运算 ...
- 【开发者portal在线开发插件系列四】数组 及 可变长度数组
基础篇 基础场景见上面两个帖子,这里单独说明数组和可变长度数组的用法. 话不多说,开始今天的演(表)示(演) Profile和插件开发 添加一个string类型的属性: 在插件里添加一条数据上报消息: ...
- NodeJS对象数组Array 根据对象object key的值排序sort
有个js对象数组 var ary=[{id:1,name:”b”},{id:2,name:”b”}] 需求是根据name 或者 id的值来排序,这里有个风骚的函数. /** * 对数组中的对象,按对象 ...
- Javascript数组系列五之增删改和强大的 splice()
今天是我们介绍数组系列文章的第五篇,也是我们数组系列的最后一篇文章,只是数据系列的结束,所以大家不用担心,我们会持续的更新干货文章. 生命不息,更新不止! 今天我们就不那么多废话了,直接干货开始. 我 ...
- 一维数组、二维数组——Java
一. 一维数组 1. 数组是相同类型数据的有序集合 相同类型的若干个数据,按照一定先后次序排列组合而成 每个数组元素可以通过一个下标来访问它们 其中,每一个数据称作一个数组元素 2. 数组特点: 其 ...
- js sort方法根据数组中对象的某一个属性值进行排序
sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {name:'zopp',age:0}, {name:'gpp' ...
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
随机推荐
- java提高(9)---HashMap解析
HashMap解析(一) 平时一直再用hashmap并没有稍微深入的去了解它,自己花点时间想往里面在深入一点,发现它比arraylist难理解很多. 数据结构中有数组和链表来实现对数据的存储,但这两者 ...
- Chapter 4 Invitations——5
And that was the last contact I'd had with him, though he was there, a foot away from me, every day. ...
- 设置Firefox(火狐)浏览器的中文菜单/界面
步骤一: 设置Firefox浏览器的中文菜单/界面.首先需要查一下正在使用的火狐版本号(小生使用的火狐版本是55.0.3). 步骤二: 下载对应版本的xpi中文插件 其次,访问下面的火狐官方 ...
- 高性能Mysql笔记 — 优化
性能优化 了解查询的整个生命周期,清楚每个阶段的时间消耗情况 性能分析 慢查询日志--服务器性能分析 参考 慢查询日志是优化很重要的手段,但是开启慢查询日志对性能的影响并不大,所以可以考虑在线上打开慢 ...
- 精读JavaScript模式(八),JS类式继承
一.前言 这篇开始主要介绍代码复用模式(原书中的第六章),任何一位有理想的开发者都不愿意将同样的逻辑代码重写多次,复用也是提升自己开发能力中重要的一环,所以本篇也将从“继承”开始,聊聊开发中的各种代码 ...
- spring-boot-2.0.3之quartz集成,数据源问题,源码探究
前言 开心一刻 着火了,他报警说:119吗,我家发生火灾了. 119问:在哪里? 他说:在我家. 119问:具体点. 他说:在我家的厨房里. 119问:我说你现在的位置. 他说:我趴在桌子底下. 11 ...
- 使用3D Slicer对图像进行配准
在进行深度学习之前,我们需要图像进行一些预处理操作,其中配准是很重要的一环,以下将介绍使用软件3D Slicer来进行图像配准 3D Slicer是(1)一个软件平台,用以图像分析(包括配准和实时编辑 ...
- Swing——布局管理器
前言 在编写图形界面时,总是需要考虑的就是组件放在哪里,组件怎么大才合适.在Swing中就有现成的布局管理器帮我们做这些事情,我们不必写代码去一一安排.下面将介绍什么是布局管理器.Swing中常用布局 ...
- IE的浏览器模式、文本模式
最近在部署网页的时候,发现IE下的布局完成混乱. 在改变IE的文本模式后,显示就正常了. IE的浏览器模式,用于切换IE针对该网页的默认文本模式.对不同版本浏览器的条件注释解析.决定请求头里userA ...
- MVC查找排序分页学习
2018-08-07 16:04:11 实现常用功能(Index.cshtml中) 1.查找 2.用户名排序(点击用户名) 3.分页功能(数据库MVCDemo可以添加用户) 源代码参考如下: 链接: ...