当前位置:首页 > 日记 > 正文

JavaScript数组_动力节点Java学院整理

JavaScript数组_动力节点Java学院整理

JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。

要取得Array的长度,直接访问length属性:

var arr = [1, 2, 3.14, 'Hello', null, true];arr.length; // 6

请注意,直接给Array的length赋一个新的值会导致Array大小的变化:

var arr = [1, 2, 3];arr.length; // 3arr.length = 6;arr; // arr变为[1, 2, 3, undefined, undefined, undefined]arr.length = 2;arr; // arr变为[1, 2]Array可以通过索引把对应的元素修改为新的值,因此,对Array的索引进行赋值会直接修改这个Array:var arr = ['A', 'B', 'C'];arr[1] = 99;arr; // arr现在变为['A', 99, 'C']

请注意,如果通过索引赋值时,索引超过了范围,同样会引起Array大小的变化:

var arr = [1, 2, 3];arr[5] = 'x';arr; // arr变为[1, 2, 3, undefined, undefined, 'x']

大多数其他编程语言不允许直接改变数组的大小,越界访问索引会报错。然而,JavaScript的Array却不会有任何错误。在编写代码时,不建议直接修改Array的大小,访问索引时要确保索引不会越界。

indexOf

与String类似,Array也可以通过indexOf()来搜索一个指定的元素的位置:

var arr = [10, 20, '30', 'xyz'];arr.indexOf(10); // 元素10的索引为0arr.indexOf(20); // 元素20的索引为1arr.indexOf(30); // 元素30没有找到,返回-1arr.indexOf('30'); // 元素'30'的索引为2

注意了,数字30和字符串'30'是不同的元素。

slice

slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array:

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C']arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

注意到slice()的起止参数包括开始索引,不包括结束索引。

如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array:

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];var aCopy = arr.slice();aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']aCopy === arr; // false

push和pop

push()向Array的末尾添加若干元素,pop()则把Array的最后一个元素删除掉:

var arr = [1, 2];arr.push('A', 'B'); // 返回Array新的长度: 4arr; // [1, 2, 'A', 'B']arr.pop(); // pop()返回'B'arr; // [1, 2, 'A']arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次arr; // []arr.pop(); // 空数组继续pop不会报错,而是返回undefinedarr; // []

unshift和shift

如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉:

var arr = [1, 2];arr.unshift('A', 'B'); // 返回Array新的长度: 4arr; // ['A', 'B', 1, 2]arr.shift(); // 'A'arr; // ['B', 1, 2]arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次arr; // []arr.shift(); // 空数组继续shift不会报错,而是返回undefinedarr; // []

sort

sort()可以对当前Array进行排序,它会直接修改当前Array的元素位置,直接调用时,按照默认顺序排序:

var arr = ['B', 'C', 'A'];arr.sort();arr; // ['A', 'B', 'C']

能否按照我们自己指定的顺序排序呢?完全可以,我们将在后面的函数中讲到。

reverse

reverse()把整个Array的元素给掉个个,也就是反转:

var arr = ['one', 'two', 'three'];arr.reverse(); arr; // ['three', 'two', 'one']

splice

splice()方法是修改Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素:

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];// 从索引2开始删除3个元素,然后再添加两个元素:arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']// 只删除,不添加:arr.splice(2, 2); // ['Google', 'Facebook']arr; // ['Microsoft', 'Apple', 'Oracle']// 只添加,不删除:arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat

concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array:

var arr = ['A', 'B', 'C'];var added = arr.concat([1, 2, 3]);added; // ['A', 'B', 'C', 1, 2, 3]arr; // ['A', 'B', 'C']

请注意,concat()方法并没有修改当前Array,而是返回了一个新的Array。

实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里:

var arr = ['A', 'B', 'C'];arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

join

join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串:

var arr = ['A', 'B', 'C', 1, 2, 3];arr.join('-'); // 'A-B-C-1-2-3'

如果Array的元素不是字符串,将自动转换为字符串后再连接。

多维数组

如果数组的某个元素又是一个Array,则可以形成多维数组,例如:

var arr = [[1, 2, 3], [400, 500, 600], '-'];

上述Array包含3个元素,其中头两个元素本身也是Array。

小结

Array提供了一种顺序存储一组元素的功能,并可以按索引来读写。

相关文章

QQ空间等级升级快的方法怎么提升QQ

QQ空间等级升级快的方法怎么提升QQ

空间,等级,方法,提升,升级快,  QQ空间等级太低了,而且升级很慢,怎么让它升级快呢?有哪些方法可以提升QQ空间等级?小编为大家整理了提升QQ空间等级的方法,欢迎大家阅读!让QQ空间等级升级快的方法首先我们打开QQ空间,找到应用。让QQ空间等级升级快…

Angular2生命周期钩子函数的详细介

Angular2生命周期钩子函数的详细介

生命周期,钩子函数,详细介绍,电脑软件,Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周期,可以让我们更好的开发Angular应用概述…

Easyui在treegrid添加控件的实现方

Easyui在treegrid添加控件的实现方

方法,控件,电脑软件,Easyui,treegrid, easyui 树加控件最近看了一个easy感觉里面的树搞得还不错,虽然觉得让人有点不灵活的感觉,我们来说说怎么在树种添加控件效果在书中添加需要用到formatter这个属性,可以在加载的时候显示function formatPr…

React操作真实DOM实现动态吸底部的

React操作真实DOM实现动态吸底部的

动态,操作,示例,真实,电脑软件,动态吸底:开始时fixed在页面上,当页面滚动到距离底部一定距离的时fixed部分固定。这个是需要计算页面滚动距离的,如果使用Jquery或者原生js实现是非常好实现的,但是由于使用react并不推崇操作DOM,但是如果使用virt…

删除table表格行的实例讲解

删除table表格行的实例讲解

删除,表格,实例,电脑软件,table,实例如下:function getRowObj(obj){ while(obj.tagName.toLowerCase()!="tr") // toLowerCase转化小写 { obj=obj.parentNode; } // 得到父节点 return obj;}function sc(obj) // sc为点击事件{ var…

Photoshop设计超质感的橙色立体风

Photoshop设计超质感的橙色立体风

网页,橙色,质感,按钮,风格,button按钮作为网页设 UI设计中重要的一步也是最基础的一步,对设计来说有着重要的作用,按钮是否精致、是否和整体网页、UI相配合,对设计的好与坏有着很大的影响。近几年扁平化简洁化的趋势下,按钮越来越简单,但是不是…

利用vue+elementUI实现部分引入组

利用vue+elementUI实现部分引入组

方法,组件,详解,电脑软件,vue,前言vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富。官网的介绍 iView: 一套基于 Vue.js 的高质量 UI 组件库 Element,一套为开发者、设计师和产品经理准…

Git提交文件到三个区的实现方法

Git提交文件到三个区的实现方法

提交,方法,文件,电脑软件,Git,大致介绍年过的差不多了,开始学习!Git有三个工作区域:◆ 工作区(Working Directory)◆ 暂存区(Stage)◆ 版本库(Repository)工作区(Working Directory)简单理解就是需要进行版本的某个文件夹,例如之前例子中的2048文件夹暂…

jquery中绑定事件的异同

jquery中绑定事件的异同

绑定事件,异同,电脑软件,jquery,谈论jquery中bind(),live(),delegate(),on()绑定事件方式1. Bind()$(selector).bind(event,data,function)Event:必须项;添加到元素的一个或多个事件。Data:可选;需要传递的参数Function:必需;当绑定事件发生时…

带你快速理解javascript中的事件模

带你快速理解javascript中的事件模

事件模型,带你,快速,电脑软件,javascript,javascript中有两种事件模型:DOM0,DOM2。而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些。一. DOM0级事件模型DOM0级事件模型是早期的事件模型,所有的浏览器都是支…

excel 计算常数以E为底的指数函数

excel 计算常数以E为底的指数函数

教程,计算,指数函数,数以,电脑软件,  在Excel中经常需要用到公式函数进行数据统计,其中一个计算以E为底的指数函数,虽然不常用,但学到的也是自己掌握的,接下来是小编为大家带来的excel 计算常数以E为底的指数函数教程,供大家参考。excel 计算…

PHP 信号管理知识整理汇总

PHP 信号管理知识整理汇总

信号,管理知识,电脑软件,PHP,SIGQUIT 建立CORE文件终止进程,并且生成core文件SIGILL 建立CORE文件 非法指令SIGTRAP 建立CORE文件 跟踪自陷SIGBUS 建立CORE文件 总线错误SIGSEGV 建立CORE文件 段…