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 相关文章推荐
jQuery学习2 选择器的使用说明
Feb 07 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
javascript包装对象实例分析
Mar 27 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 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将向Java靠拢
2006/10/09 PHP
php下使用SMTP发邮件的代码
2008/01/10 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
javascript 节点排序 2
2011/01/31 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
机电工程学生自荐信范文
2013/12/07 职场文书
实习生工作证明范本
2014/09/14 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
七一慰问简报
2015/07/20 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书