详解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 相关文章推荐
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
DOM事件探秘篇
Feb 15 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
node.js中npm包管理工具用法分析
Feb 14 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
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
JQuery 入门实例1
2009/06/25 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
js中日期的加减法
2015/05/06 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
Python ZipFile模块详解
2013/11/01 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python书单 不将就
2017/07/11 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
python如何写出表白程序
2020/06/01 Python
python实现批量转换图片为黑白
2020/06/16 Python
写给爸爸的道歉信
2014/01/15 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python