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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
jQuery 页面载入进度条实现代码
Feb 08 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
javascript读写json示例
Apr 11 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 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程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
js省市区级联查询(插件版&无插件版)
2017/03/21 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
Vue数据监听方法watch的使用
2018/03/28 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现博客文章爬虫示例
2014/02/26 Python
利用Python破解斗地主残局详解
2017/06/30 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
陈欧的广告词
2014/03/18 职场文书
辞职信标准格式
2015/02/27 职场文书
留学推荐信怎么写
2015/03/26 职场文书
我是特种兵观后感
2015/06/11 职场文书
Mysql中常用的join连接方式
2022/05/11 MySQL