详解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高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
vue实现日历表格(element-ui)
Sep 24 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二维/三维数组转字符串
2013/09/13 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
司马光教学反思
2014/02/01 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
项目经理任命书
2014/06/04 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
银行转正自我鉴定
2014/09/29 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书