详解JavaScript中数组的相关知识


Posted in Javascript onJuly 29, 2015

创建数组

js中数组的声明可以有如下几种方式:

var arr = [];  // 简写模式
var arr = new Array(); // new一个array对象
var arr = new Array(arrayLength); // new一个确定长度的array对象

要说明的是:

  •     虽然第三种方法声明了数组的长度,但是实际上数组长度是可变的。也就是说,即使指定了长度为5,仍然可以将元素存储在规定长度之外,这时数组的长度也会随之改变。
  • 此外,还需要明确的一点:
  •     js是弱类型语言,也就是数组中的元素类型不需要一样。

举个数组中元素类型不一致的例子:

var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu'];

for (var i = 0; i < arr.length; i ++) {
  console.log(arr[i]);
}

数组元素访问

JavaScript数组的索引值也是从0开始的,我们可以直接通过数组名+下标的方式对数组元素进行访问。

示例代码如下:

var arr = [1, 2, 3];
console.log(arr[0]);
console.log(arr[1]);

此外,数组的遍历推荐使用连续for循环的模式,不推荐for-in,具体原因参考:Loop through array in JavaScript

遍历数组示例代码如下:

var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu'];

for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

注意:

    上述代码中,一个小优化在于提前获取数组的大小,这样不需要每次遍历都去查询数组大小。对于超大数组来说,能提高一定的效率。

添加数组元素

有三种方法可以往一个数组中添加新的元素,分别是:push、unshift、splice。下面我分别来介绍一下这三种方法。
push

push方法,在数组末尾添加元素。示例代码如下:

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);


for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

执行结果为:

1
2
3

unshift

unshift方法,是在数组头部添加元素。示例代码如下:

var arr = [];
arr.unshift(1);
arr.unshift(2);
arr.unshift(3);


for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

执行结果如下:

3
2
1

splice

splice方法是在数组的指定位置插入新元素,之前的元素则是自动顺序后移。注意splice的函数原型为:

array.splice(index, howMany, element...)

howMany表示要删除的元素个数,如果只是添加元素,此时howMany需要置为0。

示例代码如下:

var arr = [1, 2, 3, 4];

arr.splice(1, 0, 7, 8, 9);

for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

执行结果如下:

1
7
8
9
2
3
4

删除数组元素

与增加数组元素一样,删除数组中的元素也有三个方法,分别是:pop、shift和splice。接下来,分别讲解一下这三个函数的用法。
pop

pop方法是移除数组中的最后一个元素。push和pop的组合可以将数组实现类似于栈(先入后出)的功能。示例代码如下:

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);

while (arr.length != 0) {
  var ele = arr.pop();
  console.log(ele);
}

shift

shift方法是移除第一个元素,数组中的元素自动前移。(这种方法肯定对应着效率问题,时间复杂度是O(n))。

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);

function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

while (arr.length != 0) {
  var ele = arr.shift();
  traverseArray(arr);
}

大家可以自己考虑运行结果。
splice

在增加数组元素的时候,我们就讲过splice,这个函数原型中有一个howMany参数,代表从index开始删除之后的多少个元素。
示例代码如下:

var arr = [1, 2, 3, 4, 5, 6, 7];

function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

arr.splice(1, 3);
traverseArray(arr);

执行结果为:

1
5
7

数组的拷贝和截取

举个例子,代码如下:

var arr1 = [1, 2, 3, 4];
var arr2 = arr1;

这个时候,arr2只是保存arr1数组在堆内存的地址,并没有在堆内存重新申请内存搞一个数组出来。所以对arr2的修改会同时影响到arr1。因此,如果我们需要拷贝一份数组该怎么做呢?这就引出了需要学习的slice和concat函数。
slice

这里的slice和python语法的slice是一样的,都是返回数组的切片。slice函数原型为:

array.slice(begin, end)

返回从begin到end的所有元素,注意包含begin,但是不包含end。
缺省begin,默认从0开始。缺省end,默认到数组末尾。

因此,拷贝数组我们可以通过如下代码实现:

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.slice();
arr2[2] = 10000
function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

traverseArray(arr1);
traverseArray(arr2);

执行结果如下:

1
2
3
4
1
2
10000
4

concat

concat方法将创建一个新数组,然后将调用它的对象(this 指向的对象)中的元素以及所有参数中的数组类型的参数中的元素以及非数组类型的参数本身按照顺序放入这个新数组,并返回该数组.

示例代码如下:

var alpha = ["a", "b", "c"];
var number = [1, 2, 3]

// 新数组为["a", "b", "c", 1, 2, 3]
var complex = alpha.concat(number);
Javascript 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 #Javascript
js实现登陆遮罩效果的方法
Jul 28 #Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 #Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 #Javascript
简单的jQuery入门指引
Jul 28 #Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 #Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 #Javascript
You might like
php通过sort()函数给数组排序的方法
2015/03/18 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
php封装的page分页类完整实例
2016/10/18 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
js post提交调用方法
2014/02/12 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python删除列表内容
2015/08/04 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
python字符串循环左移
2019/03/08 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
学术会议邀请函范文
2014/01/22 职场文书
cf收人广告词大全
2014/03/14 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
交警失职检讨书
2015/01/26 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js