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

今天我们继续来介绍 Javascirpt 数组中的方法,也是数组系列的第四篇文章,因为数组的方法众多,每篇文章我们都对数组的每个方法都有比较细致的描述,只要你能够从中成长一点点,那我们的目的就达到了,学习是一个持续的,渐进的过程。每天进步一点点,最终会有大成就。

直接进入主题

数组的转换

我们在项目的开发过程中,数据类型之间的转换有着非常重要的作用,而数组转换成其他数据类型是我们常见的一种。

toString

该方法是对数组转换成字符串,数组的每一个元素都会调用 「toString」方法 ,返回一个新字符串。该字符串是以数组中的每一个元素的字符串形式拼接而成,且元素之间用逗号分隔。

定义没看懂,我们看一个例子肯定立刻就明白!

//语法array.toString()

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

//案例2const numbers = ["A", "B", "C"];const result = numbers.toString();console.log(result); //A,B,Cconsole.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,5const result2 = numbers.join("");console.log(result2);//12345const result3 = numbers.join(" ");console.log(result3);//1 2 3 4 5const result4 = numbers.join("-");console.log(result4);//1-2-3-4-5const 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

该方法对数组的元素进行排序,默认情况下按照升序排列。先看看两个例子吧

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

//案例2const 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」方法的兼容性。

兼容

总结

我们继续了我们数组系列的文章的,今天我们主要说的就是数组的如何转换成其他数据类型,以及数组如何按照我们自己的规则去进行排序。希望对你有所帮助,我们后面还会持续更新其他用法,如果你喜欢本篇文章就给个赞加关注吧!

原文地址:https://www.cnblogs.com/beevesnoodles/p/9650466.html

时间: 2024-09-30 10:01:53

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

javascript:第四章 数据类型的转换2

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>数据类型的转换</title> <script> var a = '+100'; // alert( a+100 ); // '+100100' // alert( Numbe

JS 对象数组Array 根据对象object key的值排序sort,很风骚哦

有个js对象数组 var ary=[{id:1,name:"b"},{id:2,name:"b"}] 需求是根据name 或者 id的值来排序,这里有个风骚的函数 函数定义: function keysrt(key,desc) {   return function(a,b){     return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);   } } 使用: var ary=[{id:1,nam

JavaScript基础(四)

JavaScript基础(四) 冒泡排序 // 准备一个需要进行排序的数组 var arr = [12, 88, 154, 23, 32, 15, 72, 2, 1, 66]; // 根据分析出的规律进行代码实现 // - 外层循环控制轮数:length - 1 for (var i = 0; i < arr.length - 1; i++) { // - 内层循环控制每轮比较次数: // - 设置条件时发现只 - i 不够,少了1,再设置一个 - 1 凑数 for (var j = 0; j

数组Array的排序sort

JavaScript中的Array对象有自己的排序方法sort(),对数组中的数据项进行排序,但是有时候排序结果不尽如人意,比如 var arr = [12, 1, 2, 21, 3]; arr.sort(); alert(arr); 得到的结果为  1,12,2,21,3 这是为什么呢?因为JavaScript中的排序默认按照ascii字符代码进行排序,也就是说,数字也是按照它们的字符串形式排序的. var strArr = ['a', '2', 'a2', '2a', 'b', '3'];

JavaScript进阶系列02,函数作为参数以及在数组中的应用

有时候,把函数作为参数可以让代码更简洁. var calculator = { calculate: function(x, y, fn) { return fn(x, y); } }; var sum = function(x, y) { return x + y; }, diff = function (x, y) { return x - y; }; var sumResult = calculator.calculate(2, 1, sum), diffResult = calculat

JavaScript初探系列之数组的基本操作

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 一.创建数组 在JavaScript多种方式创建数组 (一)构造函数 1.无参构造函数,创建一空数组 var a1=new Array(

JavaScript学习笔记3之 数组 &amp; arguments(参数对象)&amp; 数字和字符串转换 &amp; innerText/innerHTML &amp; 鼠标事件

一.Array数组 1.数组初始化(Array属于对象类型) 1 /*关于数组的初始化*/ 2 //1.创建 Array 对象--方法1: 3 var arr1=[]; 4 arr1[0]='aa';//给数组元素赋值 5 arr1[1]='bb'; 6 arr1[2]='cc'; 7 arr1[3]='dd'; 8 console.log(arr1);//["aa","bb","cc","dd"] 9 //1.创建 Arra

JavaScript 精粹 基础 进阶(5)数组

转载请注明出处 原文连接 http://blog.huanghanlian.com/article/5b698ee6b8ea642ea9213f4d 数组是值的有序集合.每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引.JS中的数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或其它数组. 第一节.创建数组.数组操作 数组概述 数组是值的有序集合.每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引.JS中的数组是弱类型的,数组中可以含有不同类型的元素.数组

软件工程课程作业(四)--返回一个整数数组中最大子数组的和

伙伴链接:http://www.cnblogs.com/haoying1994/ 一.设计思想 本实验要求输入一个正负数混合的整型数组,长度不限,在此数组的所有子数组中找到和最大的数组,并求出相应数组的和,且时间复杂度为O(n).我们在课堂上共同讨论了多种解决方案,这些将在下面可能的解决方案中展示,在听了同学的思路和老师的讲解之后, 我们最终选取了老师课堂上描述的比较简便的思路.如下: 在输入数组的环节,采用for无限循环加if判断截止,直到触发回车键为止,将数组记录到Array中,数组长度记录