【JavaScript数据结构系列】01-数组Array
【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的更多相关文章
- 【JavaScript数据结构系列】03-队列Queue
[JavaScript数据结构系列]03-队列Queue 码路工人 CoderMonkey 转载请注明作者与出处 1. 认识队列Queue结构 队列,跟我们的日常生活非常贴近,我们前面举例了食堂排队打 ...
- 【JavaScript数据结构系列】00-开篇
[JavaScript数据结构系列]00-开篇 码路工人 CoderMonkey 转载请注明作者与出处 ## 0. 开篇[JavaScript数据结构与算法] 大的计划,写以下两部分: 1[JavaS ...
- JavaScript进阶系列01,函数的声明,函数参数,函数闭包
本篇主要体验JavaScript函数的声明.函数参数以及函数闭包. □ 函数的声明 ※ 声明全局函数 通常这样声明函数: function doSth() { alert("可以在任何时候调 ...
- 【JavaScript数据结构系列】05-链表LinkedList
[JavaScript数据结构系列]05-链表LinkedList 码路工人 CoderMonkey 转载请注明作者与出处 ## 1. 认识链表结构(单向链表) 链表也是线性结构, 节点相连构成链表 ...
- 【JavaScript数据结构系列】04-优先队列PriorityQueue
[JavaScript数据结构系列]04-优先队列PriorityQueue 码路工人 CoderMonkey 转载请注明作者与出处 ## 1. 认识优先级队列 经典的案例场景: 登机时经济舱的普通队 ...
- 【JavaScript数据结构系列】02-栈Stack
[JavaScript数据结构系列]02-栈Stack 码路工人 CoderMonkey 转载请注明作者与出处 ## 1. 认识栈结构 栈是非常常用的一种数据结构,与数组同属线性数据结构,不同于数组的 ...
- JavaScript数据结构与算法-数组练习
一. 创建一个记录学生成绩的对象,提供一个添加成绩的方法,以及一个显示学生平均成绩的方法. // 创建一个记录学生成绩的对象 const Students = function Students () ...
- 【JavaScript数据结构系列】07-循环链表CircleLinkedList
[JavaScript数据结构系列]07-循环链表CircleLinkedList 码路工人 CoderMonkey 转载请注明作者与出处 1. 认识循环链表 首节点与尾节点相连的,就构成循环链表.其 ...
- 【JavaScript数据结构系列】06-双向链表DoublyLinkedList
[JavaScript数据结构系列]06-双向链表DoublyLinkedList 码路工人 CoderMonkey 转载请注明作者与出处 1. 认识双向链表 不同于普通链表/单向链表,双向链表最突出 ...
随机推荐
- NodeJS实现websocket代理机制
使用的模块 ws http http-proxy 主要通过htt-proxy实现中转 启动websocket服务 var WebSocketServer = require('ws').Server; ...
- Python解决钻石小偷问题
题目如下: A:我没有偷钻石. B:D就是罪犯. C:B是盗窃这块钻石的罪犯. D:B有意诬陷我. 假定只有一个人说的是真话,编程序判断谁偷走了钻石. 答案是:说真话的是D,罪犯是A,逻辑思路可以百度 ...
- PHP导出excel文件之权限字段筛选导出
因为导出excel时要过滤掉不是自身权限内的数据,权限有专门的字段,所以导出的数据要具体考量,数据库权限字段是MMId,因为登录的时候MMId已存入SESSION,所以导出的时候只要判断是否在此SES ...
- haskell ide - vscode
以windows为例(因为手头只有这个系统,linux系统下类似) 1. 下载安装vscode 2. 安装haskell的管理工具stack,将路径添加到环境变量path 3. windows下安装s ...
- docker虚拟化平台构建
docker虚拟化平台构建 从1.13版本以后的docker软件分为连个版本:企业版.社区版,在企业中推荐社区版本. 构建docker平台环境,系统选择centos7.x,推荐linux内核3.10 ...
- libevent到底是同步还是异步,是阻塞还是非阻塞
应该从不同角度看libevent的同步/异步.阻塞/非阻塞: IO数量的角度:select出来之前,会阻塞在一个io上,处理完成后再阻塞在下一个io上:之后就是把所有的io fd拿过来,都不阻塞,一个 ...
- 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...
- Netty源码死磕一(netty线程模型及EventLoop机制)
引言 好久没有写博客了,近期准备把Netty源码啃一遍.在这之前本想直接看源码,但是看到后面发现其实效率不高, 有些概念还是有必要回头再细啃的,特别是其线程模型以及EventLoop的概念. 当然在开 ...
- HBase Filter 过滤器之 ValueFilter 详解
前言:本文详细介绍了 HBase ValueFilter 过滤器 Java&Shell API 的使用,并贴出了相关示例代码以供参考.ValueFilter 基于列值进行过滤,在工作中涉及到需 ...
- 「雕爷学编程」Arduino动手做(38)——joystick双轴摇杆模块
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...