在开始正式的内容之前,不得不说说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)]

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

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

用js来实现那些数据结构 第一章的更多相关文章

  1. 用js来实现那些数据结构 第二章

    这一篇文章,我们一起来看看数组还有哪些用法,以及在实际工作中我们可以用这些方法来做些什么.由于其中有部分内容并不常用,所以我尽量缩小篇幅.在这篇文章内介绍完大部分的数组方法,加快我们实现其它数据结构的 ...

  2. JS红宝书笔记——第一章 JavaScript简介

    1.JavaScript简史 Netscape公司决定开发一种客户端语言用来处理浏览器端简单的表单验证. Netscape公司派布兰登·艾奇(BrendanEich)为计划于1995年2月发布的Net ...

  3. C语言数据结构——第一章 数据结构的概念

    一.数据结构的基本概念 1.1-数据结构是什么? 数据结构是计算机存储和组织数据的方式.数据结构是指相互之间存在一种或多种特定关系的数据元素的集合.一般情况下,精心选择的数据结构可以带来更高的运行或者 ...

  4. 你不知道的javaScript上卷(第一章 作用域是什么)

    在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉. ...

  5. 【js 笔记】读阮一峰老师 es6 入门笔记 —— 第一章

      鉴于最近用 vuejs 框架开发项目,其中有很多涉及到 es6 语法不太理解所以便认真地读了一下这本书. 地址:http://es6.ruanyifeng.com/#README 第一章:let ...

  6. 为什么我要放弃javaScript数据结构与算法(第一章)—— JavaScript简介

    数据结构与算法一直是我算比较薄弱的地方,希望通过阅读<javaScript数据结构与算法>可以有所改变,我相信接下来的记录不单单对于我自己有帮助,也可以帮助到一些这方面的小白,接下来让我们 ...

  7. 【vue.js权威指南】读书笔记(第一章)

    最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...

  8. 第一章 用three.js创建你的第一个3D场景

    第一章 用three.js创建你的第一个3D场景 到官网下载three.js的源码和示例. 创建HTML框架界面 第一个示例的代码如下: 01-basic-skeleton.html 位于 Learn ...

  9. Python3-Cookbook总结 - 第一章:数据结构和算法

    第一章:数据结构和算法 Python 提供了大量的内置数据结构,包括列表,集合以及字典.大多数情况下使用这些数据结构是很简单的. 但是,我们也会经常碰到到诸如查询,排序和过滤等等这些普遍存在的问题. ...

随机推荐

  1. dropdown多选下拉框

    写好了一个dropdown多选框.直接粘下面代码就能用 效果展示: temp2.jsp <%@page import="com.util.LabelCacheManager" ...

  2. 整理mp4协议重点,将协议读薄

    MP4 实际代表的含义是 MPEG-4 Part 14.它只是 MPEG 标准中的 14 部分.它主要参考 ISO/IEC 标准来制定的.MP4 主要作用是可以实现快进快放,边下载边播放的效果.他是基 ...

  3. 我的第五个java程序 每过10秒读取一次天气 并把天气更新到mysql数据库里

    import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.HttpURLConnection; ...

  4. Spring MVC多动作控制器

    以下示例演示如何使用Spring Web MVC框架的多动作控制器. MultiActionController类用于在单个控制器中分别映射多个URL到对应的方法. 所下所示配置 - package ...

  5. 用Java实现一些常见的问题

    八皇后 public class EightQueen { private static final int ROW = 4; private static final int COL = 4; pr ...

  6. cocos2d-x之读开发技术精解

    引擎位置(依次往下): 游戏App->逻辑与规则->引擎->运行的平台->硬件接口(驱动运行库API) 1. 渲染框架 CCNode绘制基类(引擎核心类都继承于它,形成一个链表 ...

  7. Python 使用MySQL

    在导入MySQLdb之前,需要安装MySQLdb模块.使用pip安装,命令如下: pip install MySQL-python 安装成功后,导入MySQLdb模块 import MySQLdb 连 ...

  8. splay tree旋转操作 hdu 1890

    很神奇的旋转操作. 目前没看到其他数据结构能实现这个功能.平衡树不好处理区间操作,线段树很难旋转.splay tree搞这个就很简单了. 下面用的这个模板跑了700ms,好慢,估计是删除操作太费时了, ...

  9. [CTSC1999][网络流24题] 星际转移

    36. [CTSC1999][网络流24题] 星际转移 ★★★☆   输入文件:home.in   输出文件:home.out   简单对比时间限制:1 s   内存限制:128 MB «问题描述: ...

  10. 《从零开始学Swift》学习笔记(Day5)——我所知道的标识符和关键字

    Swift 2.0学习笔记(Day5)——我所知道的标识符和关键字   原创文章,欢迎转载.转载请注明:关东升的博客 好多计算机语言都有标识符和关键字,一直没有好好的总结,就是这样的用着,现在小小的整 ...