详解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 String 的扩展方法集合
Jun 01 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
ES6 解构赋值的原理及运用
May 25 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 foreach如何跳出两层循环(详解)
2016/11/05 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python自动翻译实现方法
2016/05/28 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python 字符串常用方法汇总详解
2019/09/16 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
会话Bean的种类
2013/11/07 面试题
中间件分为哪几类
2016/09/18 面试题
小学新学期教师寄语
2014/01/18 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
美食节策划方案
2014/05/26 职场文书
会计毕业生自荐书
2014/06/12 职场文书
华清池导游词
2015/02/02 职场文书
初中毕业生感言
2015/07/31 职场文书
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android