【JavaScript数据结构系列】01-数组Array

码路工人 CoderMonkey

转载请注明作者与出处

# 【JavaScript数据结构系列】

# 01-数组Array

数组:

是有序的元素序列

元素通常是同一数据类型

下标索引通常从 0 开始

数组是JavaScript中最常用的数据结构,
在ES6之前也JS中也只有数组这一种数据结构,
ES6之后加入了Set和Map。
(包括WeakSet和WeakMap)

JS中的数组Array,
基于数组数据结构做的封装,
JS封装的数组使用起来更方便。
其它的数据结构也会基于数组进行封装实现。

我们分以下及部分来讲:

  • 原本的数组
  • JS中的数组
    • ES5之前的数组
    • ES6之后的数组

Original Array

原始数组具有以下特点:

  • 属于线性结构
  • 固定的长度/容量
  • 具有下标/索引

因此,数组具有以下优点:

  • 通过下标索引访问查找元素非常方便高效
  • 通过下标索引方便遍历元素
  • 可以在任意位置插入删除元素

同样,数组也有相应的劣势:

  • 固定长度,不便于处理非定长数据
    而数据一般都是动态的,需要手动扩容/缩容
  • 需要进行遍历才能通过元素进行查找
    时间复杂度高
  • 插入删除元素时需要移动其它元素位置
    增加删除元素效率低
  • 通常只能存储一种数据类型

另外,数组可以是一维数组,也可以有二维数组,
也就是说,数组嵌套,元素也是数组。


JS中的数组

JavaScript中提供了数组这种数据类型,
不再需要我们自己封装。
JS中的Array不同于原始数组,
不再是固定长度,你可以几乎无限的push进元素,
因为它在底层实现上自动扩容的,让你感觉不到固定长度的限制。
另外,也可以存放不同类型的数据。

数组有length属性,提供了一系列操作数组数据的方法。
还有它的近亲,类数组(就是类似于数组的意思),
同样具有length属性,但不具有Array.prototype上的方法,
我们通常是通过改变this指向来借用数组的方法。
例如:

function test() {
var args = [].slice.call(arguments,0, arguments.length)
console.log(args)
}
test(1,2,3,4)
// (4) [1, 2, 3, 4]
// 0: 1
// 1: 2
// 2: 3
// 3: 4
// length: 4
// __proto__: Array(0)

※新语法里可以将可迭代对象转为数组,获取数组更简便

你能不眨眼一口气说出 JavaScript 中数组的所有方法吗?

因ES6版本发生重大变化,所以分ES5之前跟ES6之后来说。

ES5之前常用的数组方法有:

静态方法

方法 描述
Array.isArray() 判断对象是否为数组。

实例方法

方法 描述
concat() 连接两个或更多的数组,并返回结果。
every() 检测数值元素的每个元素是否都符合条件。
filter() 检测数值元素,并返回符合条件所有元素的数组。
forEach() 数组每个元素都执行一次回调函数。
indexOf() 搜索数组中的元素,并返回它所在的位置。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
lastIndexOf() 搜索数组中的元素,并返回它最后出现的位置。
map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reduce() 将数组元素计算为一个值(从左到右)。
reduceRight() 将数组元素计算为一个值(从右到左)。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
some() 检测数组元素中是否有元素符合指定条件。
sort() 对数组的元素进行排序
splice() 删除元素,并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串,并返回结果。
toLocaleString() 把数组转换为本地数组,并返回结果。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
valueOf() 返回数组对象的原始值

*以上参考自:
 [W3School](https://www.w3school.com.cn/jsref/jsref_obj_array.asp)
 [菜鸟教程]https://www.runoob.com/jsref/jsref-obj-array.html)

ES6之后新增的数组方法有:

静态方法

方法 描述
Array.from 可以将类数组对象(array-like object)或可迭代对象(iterable object)转为数组。
Array.of 将一组值转换为数组

实例方法

方法 描述
copyWithin() 在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。
find() 找出第一个符合条件的数组成员。
findIndex() 返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
fill() 初始化一个用指定元素填充的新数组。
entries() 用于数组遍历,返回键值对的遍历器对象。
keys() 用于数组遍历,返回键的遍历器对象。
values() 用于数组遍历,返回值的遍历器对象。
includes() 判断数组是否包含指定的值,返回布尔值结果。
flat() 将二维数组变为一维数组(即嵌套多层时只能减少一层)。
flatMap() 相当于flat方法加map方法。

*ES6内容建议参考阮老师的电子书(直接点上面的方法也可跳转)
 http://es6.ruanyifeng.com/

以上方法的使用具体参照链接就可以了,不再赘述。
我们的主要精力将放在数据结构本身上。

  • 数组作为JavaScript中的重要类型,数组操作是需要掌握好的必备技能
  • 单就数组就可以开一个专题,内容庞杂。
  • 有时候一个关于高阶函数方法就可以单独开篇长文(码路工人这里有很多优秀的文章---想给推荐给大家---,那些作者才是真大佬、前端大侠,还有全栈牛人,读大佬们的文章也是码路工人自我提升中不断汲取营养的来源之一)

做了一份 npm 工具包 data-struct-js ,
基于 ES6 实现的 JavaScript 数据结构,
也许这个小轮子很少会被使用,
也许对于初学者学习 JavaScript 会有点帮助。
只要简单 install 一下即可,感兴趣的话还可以去
GitHub / Gitee 看源码。(Star 表支持~)

npm install data-struct-js --save-dev

最后,感谢您的阅读和支持~


-End-

【JavaScript数据结构系列】01-数组Array的更多相关文章

  1. 【JavaScript数据结构系列】03-队列Queue

    [JavaScript数据结构系列]03-队列Queue 码路工人 CoderMonkey 转载请注明作者与出处 1. 认识队列Queue结构 队列,跟我们的日常生活非常贴近,我们前面举例了食堂排队打 ...

  2. 【JavaScript数据结构系列】00-开篇

    [JavaScript数据结构系列]00-开篇 码路工人 CoderMonkey 转载请注明作者与出处 ## 0. 开篇[JavaScript数据结构与算法] 大的计划,写以下两部分: 1[JavaS ...

  3. JavaScript进阶系列01,函数的声明,函数参数,函数闭包

    本篇主要体验JavaScript函数的声明.函数参数以及函数闭包. □ 函数的声明 ※ 声明全局函数 通常这样声明函数: function doSth() { alert("可以在任何时候调 ...

  4. 【JavaScript数据结构系列】05-链表LinkedList

    [JavaScript数据结构系列]05-链表LinkedList 码路工人 CoderMonkey 转载请注明作者与出处 ## 1. 认识链表结构(单向链表) 链表也是线性结构, 节点相连构成链表 ...

  5. 【JavaScript数据结构系列】04-优先队列PriorityQueue

    [JavaScript数据结构系列]04-优先队列PriorityQueue 码路工人 CoderMonkey 转载请注明作者与出处 ## 1. 认识优先级队列 经典的案例场景: 登机时经济舱的普通队 ...

  6. 【JavaScript数据结构系列】02-栈Stack

    [JavaScript数据结构系列]02-栈Stack 码路工人 CoderMonkey 转载请注明作者与出处 ## 1. 认识栈结构 栈是非常常用的一种数据结构,与数组同属线性数据结构,不同于数组的 ...

  7. JavaScript数据结构与算法-数组练习

    一. 创建一个记录学生成绩的对象,提供一个添加成绩的方法,以及一个显示学生平均成绩的方法. // 创建一个记录学生成绩的对象 const Students = function Students () ...

  8. 【JavaScript数据结构系列】07-循环链表CircleLinkedList

    [JavaScript数据结构系列]07-循环链表CircleLinkedList 码路工人 CoderMonkey 转载请注明作者与出处 1. 认识循环链表 首节点与尾节点相连的,就构成循环链表.其 ...

  9. 【JavaScript数据结构系列】06-双向链表DoublyLinkedList

    [JavaScript数据结构系列]06-双向链表DoublyLinkedList 码路工人 CoderMonkey 转载请注明作者与出处 1. 认识双向链表 不同于普通链表/单向链表,双向链表最突出 ...

随机推荐

  1. NodeJS实现websocket代理机制

    使用的模块 ws http http-proxy 主要通过htt-proxy实现中转 启动websocket服务 var WebSocketServer = require('ws').Server; ...

  2. Python解决钻石小偷问题

    题目如下: A:我没有偷钻石. B:D就是罪犯. C:B是盗窃这块钻石的罪犯. D:B有意诬陷我. 假定只有一个人说的是真话,编程序判断谁偷走了钻石. 答案是:说真话的是D,罪犯是A,逻辑思路可以百度 ...

  3. PHP导出excel文件之权限字段筛选导出

    因为导出excel时要过滤掉不是自身权限内的数据,权限有专门的字段,所以导出的数据要具体考量,数据库权限字段是MMId,因为登录的时候MMId已存入SESSION,所以导出的时候只要判断是否在此SES ...

  4. haskell ide - vscode

    以windows为例(因为手头只有这个系统,linux系统下类似) 1. 下载安装vscode 2. 安装haskell的管理工具stack,将路径添加到环境变量path 3. windows下安装s ...

  5. docker虚拟化平台构建

    docker虚拟化平台构建 从1.13版本以后的docker软件分为连个版本:企业版.社区版,在企业中推荐社区版本. 构建docker平台环境,系统选择centos7.x,推荐linux内核3.10 ...

  6. libevent到底是同步还是异步,是阻塞还是非阻塞

    应该从不同角度看libevent的同步/异步.阻塞/非阻塞: IO数量的角度:select出来之前,会阻塞在一个io上,处理完成后再阻塞在下一个io上:之后就是把所有的io fd拿过来,都不阻塞,一个 ...

  7. 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  8. Netty源码死磕一(netty线程模型及EventLoop机制)

    引言 好久没有写博客了,近期准备把Netty源码啃一遍.在这之前本想直接看源码,但是看到后面发现其实效率不高, 有些概念还是有必要回头再细啃的,特别是其线程模型以及EventLoop的概念. 当然在开 ...

  9. HBase Filter 过滤器之 ValueFilter 详解

    前言:本文详细介绍了 HBase ValueFilter 过滤器 Java&Shell API 的使用,并贴出了相关示例代码以供参考.ValueFilter 基于列值进行过滤,在工作中涉及到需 ...

  10. 「雕爷学编程」Arduino动手做(38)——joystick双轴摇杆模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...