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


Posted in Javascript onJune 26, 2017

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; // 3
arr.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的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到,返回-1
arr.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新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错,而是返回undefined
arr; // []

unshift和shift

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

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

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提供了一种顺序存储一组元素的功能,并可以按索引来读写。

Javascript 相关文章推荐
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
vue.js实例todoList项目
Jul 07 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
详解 TypeScript 枚举类型
Nov 02 Javascript
Angular 表单控件示例代码
Jun 26 #Javascript
jQuery实现一个简单的验证码功能
Jun 26 #jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 #jQuery
JavaScript实现三级联动菜单实例代码
Jun 26 #Javascript
jQuery实现frame之间互通的方法
Jun 26 #jQuery
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 #Javascript
jQuery回调方法使用示例
Jun 26 #jQuery
You might like
php 中的4种标记风格介绍
2012/05/10 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
浅谈Python中的数据类型
2015/05/05 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
python3 配置logging日志类的操作
2020/04/08 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书