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

  终于,这是有关于数组的最后一篇,下一篇会真真切切给大家带来数据结构在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的大小来给这个数组排序,要怎么做呢?

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来实现栈这种数据结构。

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

原文地址:https://www.cnblogs.com/zaking/p/8784575.html

时间: 2024-08-06 03:51:16

用js来实现那些数据结构(数组篇03)的相关文章

js简单的API之数组篇

简单数组建立: 1 var a = [1,true,"旭","","",""]; 2 var b = [a[0]*2,a[1],a[2]]; 3 for (var i = 0;i< b.length;i++){ 4 alert(b[i]); 5 // alert(a.length); 6 } 数组连接: 1 var a = [0,1,2]; 2 var b = [3,4,5]; 3 var s = a.concat([3

js中二维数组篇

QQ:1187362408 欢迎技术交流和学习 js中二维数组篇(二维数组篇): TODO: 1,一位数组声明并初始化如下: <span style="color:#000000;">var chkProQuery = new Array("ddlPro", "ddlCity", "ddlCoun", "ddlTown", "ddlVill", "ddlGird&q

用js来实现那些数据结构15(图01)

其实在上一篇介绍树结构的时候,已经有了一些算法的相关内容介入.而在图这种数据结构下,会有更多有关图的算法,比如广度优先搜索,深度优先搜索最短路径算法等等.这是我们要介绍的最后一个数据结构.同时也是本系列最为复杂的一个.那么我们先来简单介绍一下,什么是图? 一.图的概念 简单说,图就是网络结构的抽象模型,图是一组由边连接的节点(或顶点).任何二元关系都可以用图来表示.比如我们的地图,地铁线路图等.都是图的实际应用. 接着我们看看图的一些相关概念和术语. 一个图G = (V,E)由以下元素组成: V

探究JS V8引擎下的“数组”底层实现

本文首发于 vivo互联网技术 微信公众号? 链接:https://mp.weixin.qq.com/s/np9Yoo02pEv9n_LCusZn3Q 作者:李超 JavaScript 中的数组有很多特性:存放不同类型元素.数组长度可变等等,这与数据结构中定义的数组结构或者C++.Java等语言中的数组不太一样,那么JS数组的这些特性底层是如何实现的呢,我们打开V8引擎的源码,从中寻找到了答案.V8中对数组做了一层封装,使其有两种实现方式:快数组和慢数组,快数组底层是连续内存,通过索引直接定位,

【C/C++学院】0828-数组与指针/内存分配/数据结构数组接口与封装

[送给在路上的程序员] 对于一个开发者而言,能够胜任系统中任意一个模块的开发是其核心价值的体现. 对于一个架构师而言,掌握各种语言的优势并可以运用到系统中,由此简化系统的开发,是其架构生涯的第一步. 对于一个开发团队而言,能在短期内开发出用户满意的软件系统是起核心竞争力的体现. 每一个程序员都不能固步自封,要多接触新的行业,新的技术领域,突破自我. 数组与指针 #include<stdio.h> #include<stdlib.h> void main1() { int a[10]

【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己一人独享,没办法,谁让博主这么爱分享呢~~ 本文原创地址:http://www.cnblogs.com/landeanfen/p/5603790.html 七.多值输入组件manifest 关于文本框的多值输入,一直是一个比较常见的需求,今天博主推荐一款好用的多值输入组件给大家,不要谢我,请叫我“红

【史上最强JavaSE笔记】之数组篇

各位程序猿,各位攻城狮,各位蜥蜴鸥以及各位棕鲸鲤们~~大家好,我是潘师傅,欢迎大家收看由我为你们带来的[史上最强JavaSE笔记]系列,其实也可以叫[嘻哈JavaSE笔记]的,第一次在博客园发帖,想想还真是有点小激动呢,各位求支持呀,哈哈,那么回归正题,我把自己之前学习积累的笔记拿出来跟大家分享一下,方便大家更好的理解和复习,希望能够对大家有所帮助哈,这次发的是JavaSE方面数组篇的,内容不一定全面哦,欢迎大家前来留言交流哈,不足的地方还望大家多多指出和指导哈~(由于首次发文章,布局可能比较乱

js如何合并两个数组

js如何合并两个数组:本章节介绍一下如何合并两个数组,希望对大家有所帮助.实例代码:实例一: var arrOne=["蚂蚁部落","青岛市南区",3]; var arrTwo=["分享交流","antzone",600]; console.log(arrOne.concat(arrTwo)); console.log(arrOne); console.log(arrTwo); 由以上代码的输出结果可以看出concat()函数

js数字、字符串、数组之间的转化

1.数组转字符串 var a, b; a = new Array(0,1,2,3,4); b = a.join("-"); 2.字符串转数组 var s = "abc,abcd,aaa"; ss = s.split(","); 3.数字转字符串toString var i = 10; var s = i.toString(); 4.字符串转数字 parseInt(字符串) parseInt("ssss999"); //错误 输