用js来实现那些数据结构 第一章

 在开始正式的内容之前,不得不说说js中的数据类型和数据结构,以及一些比较容易让人混淆的概念。那么为什么要从数组说起?数组在js中是最常见的内存数据结构,数组数据结构在js中拥有很多的方法,很多初学者记不清数组的大多数用法,只知道push,pop,shift等最基本的几个。所以,本系列(数组篇)会尽可能的让大家对数组有一个透彻的了解。也方便后面其他数据结构的学习和使用。

   可能很多web前端开发者都会有一个疑问,那就是,数组和对象究竟是数据类型?还是数据结构?那么我们就带着这样的疑问,开始下面的学习,希望看完这篇文章之后,你模糊的概念会变得清晰一些。

   首先,在js中,数据类型分为两种,基本类型(原始类型)和复杂类型,其中,基本类型是:String(字符串),Number(数值),Boolean(布尔值),还有undefinednull。复杂类型是Objecct(对象)。

  说到这里大家可能会有些疑问,只有这六种类型?那数组(Array),正则(RegExp),日期(Date)算是什么?其实他们都是Object(对象)的一个分支,换句话说它们都属于Object类型,这也正是js与众不同的地方——万物皆对象。而后面要聊的包括队列,栈,链表,集合,树,图等数据结构在js中的展现方式,也都是通过对象和原型来实现的。本文无意去详细的描述数据类型和数据结构的种类以及在js中的体现形式。所以点到为止。

  故事已经开始,请大家系好安全带,跟着我驰骋在在这篇广阔的土地上——数组

  先解释一下什么是数组吧,所谓数组,是有序的元素序列 若将有限个类型相同的变量的集合命名,那么这个“名”称为数组名。组成数组的各个变量称为数组的分量,也称为数组的元素,有时也称为下标变量。用于区分数组的各个元素的数字编号称为下标。数组是在程序设计中,为了处理方便, 把具有相同类型的若干元素按无序的形式组织起来的一种形式。这些无序排列的同类数据元素的集合称为数组。简单来说数组就是用于储存多个相同类型数据的集合。(当然,js中的数组也可以存储不同类型数据,但是!不建议这样做!)

  一、数组的创建和初始化

  相信很多小伙伴都知道创建一个数组十分容易:

var arr = [];

  这样我们就创建了一个数组,我们还可以用new关键字来创建并初始化一个数组:

//创建一个空数组
var newArr = new Array();
//创建一个指定长度的数组
var newLenArr = new Array(4);
//创建一个具有指定参数的数组
var numArr = new Array(1,2,3,4);

  当然,通过new关键字创建并初始化数组的方式并不推荐,这里只是给大家介绍一下。其实我们通过上面第一种方式来创建数组的本质就是通过new来实例化一个Array对象。OK,这里不多说它的实现原理,还是回到数组本身来吧。

  那么我们如何读取数组中的数据呢?很简单,我就一句话带过了,也就是通过中括号([ ])arr[2],来传递数值的位置,获取到对应位置的值,也可以通过这种方式来重新赋值。

  二、数组的增删

  接下来说说如何使用js数组自带的方法来实现数组头尾的增删:push(数组尾部插入元素),unshift(数组头部插入元素),pop(数组尾部删除元素)和shift(数组头部删除元素)

  1、push方法

  如果我不想使用push方法,有没有什么方式可以在数组的尾部插入一个元素呢?其实很简单,我们只需要把值赋给数组中最后一个空位上的元素就可以了。

var nums = [0,1,2,3,4];
nums[nums.length] = 5;

  我们通过length属性,获取该数组的长度是5,但是我们数组对应的下标是从0开始的,通过这样的方式,也就给数组的尾部插入了一个新的元素。当然,其实我们可以更方便的使用push来给数组的尾部插入一个元素:

var nums = [0,1,2,3,4];
nums.push(5);

  也可以得到同样的结果。当然,push也可以传入多个参数,依次的从尾部插入数组:

var nums = [0,1,2,3,4];
nums.push(5,6,6);
//[0,1,2,3,4,5,6,6]

  2、unshift方法

  那么同样的,如何在不使用原生方法的前提下给数组的头部添加一个元素呢?

复制代码
var nums = [0,1,2,3,4,5,6];
for(var i = nums.length;i >= 0;i--){nums[i] = nums[i - 1];      
}
//[undefined, 0, 1, 2, 3, 4, 5, 6]
nums[0] = -1;
//[-1, 0, 1, 2, 3, 4, 5, 6]
复制代码

  实际上,我们通过循环遍历,把nums数组中的每一位所对应的下标增加一个,也就是向后移动一位,那么这就导致了头部的位置空出(它的位置是存在的),但是此时我们并没有给空出的位置所对应的下标赋值,所以它的长度增加了值确实undefined,赋值之后,才会得到我们想要的结果。

  下面我们还是用unshift方法来给数组的头部插入新值:

var nums = [0,1,2,3,4,5];
nums.unshift(-1);
//[-1, 0, 1, 2, 3, 4, 5]
nums.unshift(-2,-3);
//[-2, -3, -1, 0, 1, 2, 3, 4, 5]

  那么要注意一点,在使用unshift传入多个参数的时候,他会把第一个参数放在数组的头部(以此类推),也就是说unshift方法会把所有的参数依照顺序插入数组,并不是我们想当然的那样从第一个参数依次添加进数组。

  3、pop方法

  如果我想要删除数组尾部的元素,我们可以使用pop方法,其实我们还是可以用js来模拟一下pop:

var nums = [0,1,2,3,4,5];
nums.length = nums.length - 1;
//[0, 1, 2, 3, 4]

  我们可以通过手动让数组的长度减少一位,就可以实现删除数组尾部的元素,当然也可以减少两位三位等。

  实际上,在日常开发中通常都会使用pop方法来删除数组尾部的元素(pop()方法没有参数,只是删除数组尾部的元素。):

var nums = [0,1,2,3,4,5];
nums.pop()
// [0, 1, 2, 3, 4]

  4、shift方法

  那么接下来我们看看如何从数组的首位删除元素:

var nums = [0,1,2,3,4,5];
for(var i = 0; i < nums.length; i++) {nums[i] = nums[i + 1]
}
// [1, 2, 3, 4, 5, undefined]

  可以看到,我们最后一位是undefined,也就是说在最后一次的循环里,i + 1引用了一个数组里还未初始化的位置(开辟了空间但是未赋值),所以,这样的方式只是依次覆盖了上一位的值,并没有真正的删除元素。如果想要删除首位的元素,这就需要用到shift方法了。

var nums = [0,1,2,3,4,5];
nums.shift();
// [1, 2, 3, 4, 5]

  5、splice方法

  最后,我们看看如何使用splice()方法,在数组的任意位置添加和删除元素:

var nums = [0,1,2,3,4,5,6,7];
nums.splice(2);
//[0, 1]
//如果只加一个参数,说明删除从下标2开始的所有的后面的元素
var nums = [0,1,2,3,4,5,6,7];
nums.splice(2,1);
//[0, 1, 3, 4, 5, 6, 7]
//如果加入两个参数,则为删除从下标2开始的后面的几个元素。
var nums = [0,1,2,3,4,5,6,7];
nums.splice(2,1,"a","b","c");
//[0, 1, "a", "b", "c", 3, 4, 5, 6, 7]
//三个或多个参数,意味着删除从下标2(第一个参数)开始的后面的1个(第二个参数)元素,并在下标2的后面加入从第三个参数开始的后面的所有参数,把第二个参数设置为0就可以不删除元素从而实现从任意位置添加元素

  再多说一点,我们还可以使用delete操作符来删除数组中的元素,但是实际上,delete只是删除了对应下标上所存储的值,并没有同时把存储值得空间也删除掉,会导致对应位置上的值为undefined:

var nums = [0,1,2,3,4,5,6,7];
delete nums[2];
//[0, 1,  undefined, 3, 4, 5, 6, 7]

  splice()方法是修改了原数组的。

  6、slice()

    slice()方法,会返回参数选定的范围的数组。该方法有两个参数,start(必选)和end(可选)。这两个值可以为负数,如果为负数则默认从尾部的第一个参数算起,也就是说-1就是数组的最后一个元素,-2就是数组的倒数第二个元素,以此类推。如果不传end,则默认从start开始直到数组最后一个元素都会被截取。

复制代码
var nums = [0,1,2,3,4,5,6,6,7,"a",9,10,{name:"zaking"},["b","c"]];
var a = nums.slice(1,5);
console.log(a);//[1, 2, 3, 4]
var b = nums.slice(-1,5);
console.log(b);//[]
var c = nums.slice(-1,-5);
console.log(c);//[]
var d = nums.slice(-5,-1);
console.log(d);// ["a", 9, 10, {…}]
var f = nums.slice(5,1);
console.log(f);//[]
var x = nums.slice(5);
console.log(x);// [5, 6, 6, 7, "a", 9, 10, {…}, Array(2)]
var y = nums.slice(-5);
console.log(y)//["a", 9, 10, {…}, Array(2)]
复制代码

  希望大家仔细看一下这个例子,当然,我还是一句话说明一下吧。

  其实主旨就是,你所传的参数无论正负,参数所限定的范围必须是包含数组元素的。

转载于:https://www.cnblogs.com/wang-z-z/p/8797385.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/398314.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

excel密码忘记了怎么办

2019独角兽企业重金招聘Python工程师标准>>> Excel电子表格应用程序堪称Office中的“王牌应用”&#xff0c;能够快速灵活地整理各种大数据&#xff0c;在各行各业中发挥着不可替代的作用。因此&#xff0c;excel文档的跋扈密码比其他文档多&#xff0c;除了常设的打…

Smobiler 4.4 更新预告 Part 1(Smobiler能让你在Visual Studio上开发APP)

在4.4版本中&#xff0c;大家对产品优化的一些建议和意见进行了相应的优化和修复&#xff0c;同时&#xff0c;还新增了一些令人激动的功能和插件。 下面先为大家介绍4.4版本中Smobiler的优化和修复&#xff1a; 优化 1&#xff0c; PageView的AutoPlay默认属性改为True。 2&am…

cad lisp 二次抛物线_学习CAD的五个段位,你是青铜还是王者?

大家学习AutoCAD多久了&#xff0c;从入门到精(fang)通(qi)&#xff0c;小编总结了5个段位&#xff0c;大家对号入座。此时视口内的三维实体并没有任何变化&#xff0c;需要后续使用soldraw才能进行转换。SOLVIEW创建的视口经过SOLDRAW处理后&#xff0c;会生成表示实体轮廓和边…

Python 基础知识(二)

一、基础数据类型 1、数字int 数字主要是用于计算用的&#xff0c;使用方法并不是很多&#xff0c;就记住一种就可以&#xff1a; #bit_length() 当十进制用二进制表示时&#xff0c;最少使用的位数 # -*- coding:UTF-8 -*- v 11 data v.bit_length() print(data) # 二进制&a…

深入理解JavaWeb(五)——过滤器和监听器

深入理解JavaWeb&#xff08;五&#xff09;——过滤器和监听器 摘要&#xff1a;在基于Java-Web核心技术的开发应用中&#xff0c;为了一些特定的用途或目的&#xff0c;那么Filter和Listener就要闪亮登场了。在本文中我们来聊一聊Servlet规范中的另俩技术的核心知识点&#x…

ps一点等于多少厘米_劝告大家:女人40岁后,体重多少算正常?太瘦也不好

阅读本文前&#xff0c;请您先点击上面的“蓝色字体”&#xff0c;再点击“关注”&#xff0c;这样您就可以继续免费收到文章了。每天都有分享&#xff0c;完全是免费订阅&#xff0c;请放心关注。由于身高、骨骼、体型和体重的不同&#xff0c;与男性相比&#xff0c;女性将相…

java xml转map_java练习本(原每日一练)(20190514)

名人名言昨日翻译“The No. 1 reason people fail in life is because they listen to their friends, family, and neighbors.”——Napoleon Hill“人们生活中失败的第一个原因是他们听取朋友、家人和邻居的意见。”——拿破仑希尔今日名言“Your time is limited, so don’t…

? SegmentFault Hackathon 文艺复兴上海站作品集 - 获奖篇

承上回&#xff0c;在 Day 1 中&#xff0c;石墨文档、Agora.io 声网和 HPE 的技术团队针对自家的 SDK、API 等作了深度介绍&#xff0c;今天就来看看我们的开发者是如何将作品和服务关联起来的吧。 跳蚤市场 24 小时的编程&#xff0c;艺术家都将什么作品搬上自己的摊位&#…

华为手机云闪付付款码如何截图_云闪付乘车码,它带着优惠又来了

云闪付乘车码又来了&#xff01;想必这段时间大家有些(甚是)想念薅羊毛的日子想起那快乐时光嘴角总是不经意的偷偷乐不多说了&#xff0c;直接上优惠特别提醒&#xff1a;1分钱乘公交5折乘地铁......详戳▼▼▼银联信用卡1分钱乘公交活动时间&#xff1a;2019年12月6日—2019年…

ChemDraw教程:如何查看和删除俗名

化学范畴里&#xff0c;允许用俗名表示ChemDraw原子标记或原子标记的一部分&#xff0c;可以定义俗名的快捷键也可以自由查看或删除俗名&#xff0c;熟练掌握可以提高ChemDraw软件使用效率&#xff0c;下面将具体介绍此部分内容。 一、查看俗名 查看已定义俗名的方法有两种&…

谈Find指令

Linux下find命令在目录结构中搜索文件&#xff0c;并执行指定的操作。Linux下find命令提供了相当多的查找条件&#xff0c;功能很强大。由于find具有强大的功能&#xff0c;所以它的选项也很多&#xff0c;其中大部分选项都值得我们花时间来了解一下。即使系统中含有网络文件系…

k8s部署tomcat及web应用_部署 Spring Boot 应用到 K8S 教程

点击上方 Java后端&#xff0c;选择 设为星标优质文章&#xff0c;及时送达作者&#xff1a;qingmuqingmu.io/2020/04/08/Spring-Boot-Operator-User-Guide/前言在Kubernetes中部署spring boot应用整体上来说是一件比较繁琐的事情&#xff0c;而Spring Boot Operator则能带给你…

Web性能优化分析

如果你的网站在1000ms内加载完成&#xff0c;那么会有平均一个用户停留下来。2014年&#xff0c;平均网页的大小是1.9MB。看下图了解更多统计信息。 直击现场 《HTML开发MacOSApp教程》 http://pan.baidu.com/s/1jG1Q58M 网站的核心内容需要在1000ms内呈现出来。如果失败了&a…

闭包/Block当成函数参数实现回调

2019独角兽企业重金招聘Python工程师标准>>> Swift // MARK:// MARK: 获取数据/// 获取数据class func toolLoadData(completion:(finish: String) -> ()? ,content: String) {self .nextStepRequest({ (finish) -> ()? in// 接收到数据 调用 block 传递数据…

使用labview读取一副位图,并进行BCG校准(或修改其BCG)程序解析

进行图像处理第一步肯定就是要读取一副图片&#xff0c;然后再进行图像的BCG校准。 首先讲解一下用到的函数第一个函数为IMAQ Create&#xff0c;位于 视觉与运动--Vision Utilities---Image Management---IMAQ create 函数如图&#xff0c;对于如何看函数功能&#xff0c;还是…

实现生成小学四则运算练习题

实现小学四则运算练习题 1.题目要求 本次作业要求两个人合作完成&#xff0c;驾驶员和导航员角色自定&#xff0c;鼓励大家在工作期间角色随时互换&#xff0c;这里会布置两个题目&#xff0c;请各组成员根据自己的爱好任选一题。 题目1&#xff1a; 我们在刚开始上课的时候介绍…

[转] 64位windows下添加postgreSQL odbc数据源

系统环境&#xff1a;windows7 64位 postgreSQL9.0&#xff08;64bit)ps&#xff1a;安装postgreSQL时确定安装了odbc驱动。问题&#xff1a;点击“开始-》控制面板-》管理工具-》数据源&#xff08;ODBC&#xff09;-》用户DSN-》添加”&#xff0c;未出现postgreSQL关联选项。…

Mysql ---Sqlserver数据迁移到Mysql(Mysql建表迁移数据)

1 试用了MysqlWorkBench的数据迁移功能 以为能实现&#xff1a;建立跟Sqlserver一样的表结构和视图的功能&#xff0c;sqlserver的数据迁移到mysql 实际上发现&#xff1a;即使勾选了表和视图&#xff0c;实际上却只能建立表结构。 视图结构&#xff0c;表数据&#xff0c;都没…

vscode 默认初始化_Visual Studio Code(vscode)使用介绍

[TOC]vscode 安装软件直接在vscode官网&#xff08;https://code.visualstudio.com/&#xff09;下载安装。建议将下图红框中勾选&#xff0c;安装完成后可通过鼠标右键打开vscode。安装界面使用介绍插件安装安装完成后&#xff0c;左侧栏可以看到不同模块&#xff0c;一开始包…

梯度下降法分析

梯度下降法存在的问题 梯度下降法的基本思想是函数沿着其梯度方向增加最快&#xff0c;反之&#xff0c;沿着其梯度反方向减小最快。在前面的线性回归和逻辑回归中&#xff0c;都采用了梯度下降法来求解。梯度下降的迭代公式为&#xff1a; \(\begin{aligned} \theta_j\theta_j…