详解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 相关文章推荐
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
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中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
php实现的用户查询类实例
2015/06/18 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
英语感恩演讲稿
2014/01/14 职场文书
促销活动方案模板
2014/02/24 职场文书
企业出纳岗位职责
2014/03/12 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python