终于,这是有关于数组的最后一篇,下一篇会真真切切给大家带来数据结构在js中的实现方式。那么这篇文章还是得啰嗦一下数组的相关知识,因为数组真的太重要了!不要怀疑数组在JS中的重要性与实用性。这篇文章分为两部分,第一部分会给大家简单说一下数组原生的排序方法sort和reverse。第二部分会给大家简单说一下二维和三维数组。都不难,仔细看,很简单的。

  1、reverse()

    reverse比较容易理解,颠倒数组中元素的顺序,也就是第一个变成最后一个,最后一个呢变成第一个。

var nums = [0,1,2,3,4,5,6,7];
nums.reverse();
console.log(nums)//[7, 6, 5, 4, 3, 2, 1, 0]

    reverse方法只是无差别的对数组进行倒叙,可能很多时候并不适用于我们的应用场景,所以才出现了sort()方法。

  2、sort()

    sort()方法可以说是js数组中不太容易记忆和使用的方法,但是sort()是十分重要的一个方法,那么下面我就详细的说明一下,sort()的应用场景和使用方法。

  sort()方法允许传入一个匿名函数作为排序的依据,也可以不传参数,但是我想大家都知道,在不传参数的情况下,很多时候的结果并不是我们想要的,比如:

var nums = [0,2,4,9,10,11,20,32,3,6,7,8,15,26];
var newNums = nums.sort();
console.log(newNums)//[0, 10, 11, 15, 2, 20, 26, 3, 32, 4, 6, 7, 8, 9]
console.log(nums)//[0, 10, 11, 15, 2, 20, 26, 3, 32, 4, 6, 7, 8, 9]

  上面的代码说明,sort会改变原来的数组,而不是生成一个排序后的新数组,大家看到上面的排序并不是依据数字从大到小排序的。这是因为,sort在排序的时候会默认把数组中的各个元素转换成字符串,并且依据字符串对应的ASCII码值来比较的,那ASCII是什么?ASCII是基于拉丁字母的一套电脑编码系统,主要用于显示现代英语和其他西欧语言。

  显然这不是我们想要的结果,所以就需要给sort传入一个函数(compareFunction)来使排序得到我们想要的结果或者自定义排序的方式。

  在大多数实际工作的排序中,我们都会依据id值得大小,或者一些依据数值大小来排序的场景。那么我们看看如何使用compareFunction来使sort排序可以得到正确的结果:

var nums = [0,2,4,9,10,11,20,32,3,6,7,8,15,26];
nums.sort(function (a,b) {
return a - b;
})
console.log(nums)// [0, 2, 3, 4, 6, 7, 8, 9, 10, 11, 15, 20, 26, 32]

  我在刚接触sort时候看到这样的写法,第一个反应就是a和b是什么?他所代表的参数是什么意义?为什么要用a和b?我用其他的参数可以么?

  首先,a和b在这里只是代表数组中任意两个元素的值,你可以使用任何两个参数来代表它。

  那么再给大家看一个:

var nums = [0,2,4,9,10,11,20,32,3,6,7,8,15,26];
var i = 0;
nums.sort(function (m,n) {
console.log(m,n)
console.log(++i)
return m - n;
})
console.log(nums)// [0, 2, 3, 4, 6, 7, 8, 9, 10, 11, 15, 20, 26, 32]

  上面的代码,给大家留下一个疑问自己去找答案。这里不会多说,看看再不同数组长度下sort会循环多少次?m,n每一次的值又是什么样的?其实一个sort方法就包含很多更深层次的问题。

  那么还有一种场景,比如说后端传给我一个包含对象元素的数组,我需要依照id的大小来给这个数组排序,要怎么做呢?

var objArr = [{name:"zaking",id:0},{name:"json",id:6},{name:"undefined",id:11},{name:"obj",id:10},{name:"number",id:4},{name:"string",id:5}]
objArr.sort(function(a,b){
var m = a.id;
var n = b.id;
return m - n;
})
console.log(objArr)

  console出来的结果是这样的:

  那么这样就实现了我们在工作场景中排序的大多数的情况。那么如果你想要倒叙排序怎么办呢?a-b变成b-a。其实a-b这样的方式是简写。

nums.sort(function (a,b) {
if(a<b) {
return -1
}
if(a>b) {
return 1
}
return 0
})

  或许这样更清晰一点,判断a和b值得大小来决定是否要调换两个值得位置,如果a<b那么a就放在b的后面,如果a>b,那么久把a放在b的前面,如果a既不大于b,也不小于b,那么说明a=b,则不改变两个值得位置。

  这里有一篇文章,大家可以去看一下,JS基础篇--sort()方法的用法,参数以及排序原理

  3、多维数组的使用及场景

    其实多维数组在平时的工作中还是很常见的,最普通的要说是二维数组了,也可以叫做矩阵。但是其实js是不支持二维或者多维数组的,但是好在js够灵活,我没有的,都可以模拟出来。那么我们也可以通过数组嵌套数组的方式来模拟多维数组。

  我们先来看看二维数组:

var matrix = [["a","b","c","d"],["A","B","C","D"],[1,2,3,4]];

  这就是一个简单的二维数组形式,我们通常需要遍历数组获取其中的每一个值,其实我们可以把二维数组视为行和列,第一层循环每一行,第二层循环每一行的每一列,这样就可以得到二维数组中的每一个元素。

var matrix = [["a","b","c","d"],["A","B","C","D"],[1,2,3,4]];
for (var i = 0; i < matrix.length; i++) {
document.write("</br>")
for(var j = 0; j < matrix[i].length;j++) {
document.write(matrix[i][j])
}
}

  这样我们就得到了一个二维数组内所有的元素。

  其实三维数组也是一样的,只是再多循环一层,我们来看一下。

var matrix3 = [];
for (var i = 0; i < 3; i++) {
matrix3[i] = [];
for (var j = 0; j < 3; j++) {
matrix3[i][j] = [];
for (var k = 0; k < 3; k++) {
matrix3[i][j][k] = i + j + k;
}
}
}
console.log(matrix3)

  数组的介绍到这里就基本结束了,下一篇文章会跟大家一起来看看如何用JS来实现栈这种数据结构。

  最后,由于本人水平有限,能力与大神仍相差甚远,若有错误或不明之处,还望大家不吝赐教指正。非常感谢!

用js来实现那些数据结构03(数组篇03-排序及多维数组)的更多相关文章

  1. C语言数组篇(四)二维数组

      二维数组声明: ][] ={{,,},{,,}; //两行 三列         二维数组在声明的时候可以不写行,但一定要写列 ] = {{,},{,,},{}}; //未声明的地方自动补零 二维 ...

  2. 用js来实现那些数据结构(数组篇03)

    终于,这是有关于数组的最后一篇,下一篇会真真切切给大家带来数据结构在js中的实现方式.那么这篇文章还是得啰嗦一下数组的相关知识,因为数组真的太重要了!不要怀疑数组在JS中的重要性与实用性.这篇文章分为 ...

  3. c指针与数组,传参问题,指针数组与数组指针的区别,二维数组动态内存分配

    一 数组的结构:顺序存储,看谭浩强中的图,牢记 1.数组名指代一种数据结构:数组 现在可以解释为什么第1个程序第6行的输出为10的问题,根据结论1,数组名str的内涵为一种数据结构,即一个长度为10的 ...

  4. 《C专家编程》数组和指针并不同--多维数组

    <C专家编程>数组和指针并不同 标签(空格分隔): 程序设计论著笔记 1. 背景理解 1.1 区分定义与声明 p83 声明相当于普通声明:它所说明的并不是自身,而是描写叙述其它地方创建的对 ...

  5. java 数组基础学习(一维二维数组)

    1.一维数组 1>静态初始化:数据类型[ ] 变量名 = {元素} 例:int[ ] arr = {1,2} 动态初始化:数据类型[ ] 变量名 = new数据类型[数据长度] 例:int[ ] ...

  6. [C++ Primer Plus] 第7章、函数(一)程序清单——递归,指针和const,指针数组和数组指针,函数和二维数组

    程序清单7.6 #include<iostream> using namespace std; ; int sum_arr(int arr[], int n);//函数声明 void ma ...

  7. 数组(Array),二维数组,三维数组

    数组(Array):相同类型数据的集合就叫做数组. (一)定义数组的方法: A) type[] 变量名 = new type[数组中元素的个数] 例如: int[] a = new int[10] ; ...

  8. VB.NET 数组的定义 动态使用 多维数组

    我们都知道在全部程序设计语言中数组都是一个非常重要的概念,数组的作用是同意程序猿用同一个名称来引用多个变量,因此採用数组索引来区分这些变量.非常多情况下利用数组索引来设置一个循环,这样就能够高效地处理 ...

  9. Python代码阅读(第12篇):初始化二维数组

    Python 代码阅读合集介绍:为什么不推荐Python初学者直接看项目源码 本篇阅读的代码实现了二维数组的初始化功能,根据给定的宽高初始化二维数组. 本篇阅读的代码片段来自于30-seconds-o ...

随机推荐

  1. D - Maximizing Advertising

    题目链接:https://cn.vjudge.net/contest/250168#problem/D 题目大意:给你一些点的坐标,这些点属于两个帮派,让你将这些点分进两个不能重叠的矩形中,问你最多两 ...

  2. ROS 时间同步问题

    0. 问题 两台ubuntu主机无法与一台debian主机使用分布式通信,摄像头发出的话题机器人收不到,考虑是时间同步的问题. 也可能是系统不统一的问题; 今天在家实验了一下,时间差6min,照样可以 ...

  3. SpringBoot整合SpringDataElasticSearch操作ES

    (1).添加starter依赖 <dependency> <groupId>org.springframework.boot</groupId> <artif ...

  4. linux内核中链表代码分析---list.h头文件分析(一)【转】

    转自:http://blog.chinaunix.net/uid-30254565-id-5637596.html linux内核中链表代码分析---list.h头文件分析(一) 16年2月27日17 ...

  5. camera驱动框架分析(上)【转】

    转自:https://www.cnblogs.com/rongpmcu/p/7662738.html 前言 camera驱动框架涉及到的知识点比较多,特别是camera本身的接口就有很多,有些是直接连 ...

  6. 004_Nginx 499错误的原因及解决方法

    一. 今天进行系统维护,发现了大量的499错误, 499错误 ngx_string(ngx_http_error_495_page), /* 495, https certificate error ...

  7. Android:ZoomControls控件

    ZoomControls控件 //_ZoomControls.java public class _ZoomControls extends Activity{ @Override protected ...

  8. mysql 常用,使用经验

    mysql default  boolean字段 `enable` char(1) NOT NULL DEFAULT '1' COMMENT '启(禁)用',结果: this.enable ? &qu ...

  9. 从零开始自己搭建复杂网络2(以Tensorflow为例)

    从零开始自己搭建复杂网络(以DenseNet为例) DenseNet 是一种具有密集连接的卷积神经网络.在该网络中,任何两层之间都有直接的连接,也就是说,网络每一层的输入都是前面所有层输出的并集, 而 ...

  10. cf797c 栈,字符串

    还以为能用单调栈做出来,,想了老半天,最后发现模拟一下很好做的 按顺序把字符压栈即可 #include<bits/stdc++.h> using namespace std; #defin ...