文档章节

javascript引用类型之Array类型

柳哥
 柳哥
发布于 2015/04/06 18:24
字数 2263
阅读 59
收藏 3
点赞 0
评论 0
js

除了Object之外,Array类型恐怕是javascript中最常用的类型了。而且,javascript中的数组与其他多数语言中的数组有着相当大的区别。javascript数组的每一项可以保存任何类型的数据。也就是说,可以用数组的第一个位置来保存字符串,用第二个位置来保存数值,用第三个位置来保存对象,以此类推。而且,javascript数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。

创建数组的基本方式有两种。第一种是使用Array构造函数:

var colors = new Array();

如果预先知道数组要保存的项目数量,也可以给构造函数传递该数量,得到的数组就会具有那么多的位置(其中每一项的初始值都是undefined):

var colors = new Array(20);

也可以向Array构造函数传递数组中应该包含的项:

var colors = new Array("red","blue","green");

另外,在使用Array构造函数时也可以省略new操作符:

var colors = Array(3);                                    //创建一个包含3项的数组
var names = Array("greg");                   //创建一个包含1项,即字符串“greg"的数组

创建数组的第二种基本方式是使用数组字面量表示法。数组字面量由一对包含数组项的方括号表示,多个数组项之间以逗号隔开,如下所示:

var colors = ["red","blue","green"];                //创建一个包含3个字符串的数组
var names = [];                                                //创建一个空数组

在读取和设置数组的值时,要使用方括号并提供相应值的基于0的数字索引:

var colors = ["red","blue","green"];
alert(colors[0]);                                            //显示第一项
colors[2] = "black";                                       //修改第三项
colors[3] = "brown";                                    //新增第四项

如果索引小于数组中的项数,则返回对应项的值。如果设置某个值的索引超过了数组现有的最大索引值,如上例,数组就会自动增加到该索引值加1的长度。数据的项数保存在其length属性中,这个属性始终会返回0或更大的值:

var colors = ["red","blue","green"];
var names = [];
alert(colors.length);            //3
alert(names.length);            //0

1. 转换方法

所有对象都具有toLocaleString(),toString()和valueOf()方法。其中,调用数组的toString()和valueOf()方法会返回相同的值,即由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串:

var colors = ["red","blue","green"];
alert(colors.toString());                           //red,blue,green
alert(colors.valueOf());                            //red,blue,green
alert(colors);                                            //red,blue,green

最后一行代码直接将数组传递给了alert()。由于alert()要接收字符串参数,所以它会在后台调用toString()方法。

如果使用join()方法,则可以使用不同的分隔符来构建这个字符串。join()方法只接收一个参数,即用分隔符的字符串:

var colors = ["red","blue","green"];
alert(colors.join(" "));                              //red blue green
alert(colors.join("||"));                           //red ||blue||green

2. 栈方法

javascript数组也提供了一种让数组的行为类似于其他数据结构的方法。具体来说,数组可以表现得就像栈一样。栈是一种LIFO(后进先出)的数据结构。栈中项的插入(叫做推入)和移除(叫做弹出),只发生在一个位置——栈的顶部。javascript为数组专门提供了push()和pop()方法,以便实现类似栈的行为。

push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。而pop()方法则从数组末尾移除最后一项,减少数组的length值,然后返回移除的项:

var colors = new Array();              //创建一个数组
var count = colors.push("red","green");    //推入两项
alert(count);            //2
count = colors.push("black");        //推入一项
alert(count);              //3
var item = colors.pop();                //取得最后一项
alert(item);                                    //"black"
alert(colors.length);            //2

3. 队列方法

栈数据结构的访问规则是LIFO(后进先出),而队列数据结构的访问规则是FIFO(先进先出)。队列在列表的末端添加项,从列表的前端移除项。由于push是向数组末端添加项的方法,因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是shift(),它能够移除数组中的第一个项并返回该项,同时将数组长度减1:

var colors = new Array();
var count = colors.push("red","green");            //推入两项
alert(count);                                                        //2
count = colors.push("black");
alert(count);                                                        //3
var item = colors.shift();                                    //取得第一项
alert(item);                                                          //"red"
alert(colors.length);                                           //2

javascript还为数组提供了一个unshift()方法。顾名思义,unshift()与shift()的用途相反:它能在数组前端添加任意个项并返回新数组的长度。因此,同时使用unshift()和pop()方法,可以从相反的方向来模拟队列,即在数组的前端添加项,从数组末端移除项:

var colors = new Array();
var count = colors.unshift("red","green");            //推入两项
alert(count);                                                             //2
count = colors.unshift("black");
alert(count);                                                              //3
var item = colors.pop();                                            //取得最后一项
alert(item);                                                                //“green”
alert(colors.length);                                                  //2

4. 重排序

数组中已经存在两个可以直接用来重排序的方法:reverse()和sort()。reverse()方法会反转数组项的顺序:

var values = [1,2,3,4,5];
values.reverse();
alert(values);                    //5,4,3,2,1

默认情况下,sort()方法按升序排列数组项——即最小的值位于最前面,最大的值排在后面。为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的 字符串(注意:比较的是字符串):

var values = [0,1,5,10,15];
values.sort();
alert(values);                //0,1,10,15,5

因为数值5虽然小于10,但在进行字符串比较时,“10"则位于"5"的前面。不用说,这种排序方式在很多情况下都不是好方案。因此sort()方法可以接收一个比较函数作为参数:

function compare(value1,value2){
    if(value1 < value2){
        return -1;
    }else if(value1 > value2){
         return 1;
    }else{
        return 0;
    }
}
var values = [0,1,5,10,15];
values.sort(compare);
alert(values);                        //0,1,5,10,15

5. 操作方法

javascript为操作已经包含在数组中的项提供了很多方法。其中concat()方法可以基于当前数组中的所有项创建一个新数组。具体来说,这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给concat()方法传递参数的情况下,它只是复制当前数组并返回副本。如果传递给concat()方法的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾:

var colors = ["red","green","blue"];
var colors2 = colors.concat("yellow",["black","brown"]);

下一个方法是slice(),它能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。注意,slice()方法不会影响原始数组:

var colors = ["red","green","blue","yellow","purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2);                //green,blue,yellow,purple
alert(colors3);                //green.blue,yellow

如果slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置。例如,在一个包含5项的数组上调用slice(-2,-1)与调用slice(3,4)得到的结果相同。如果结束位置小于起始位置,则返回空数组。

下面介绍splice()方法,这个方法恐怕要算是最强大的数组方法了,它有很多种用法:

  • 删除:可以删除任意数量的项,只需指定2个参数,要删除的第一项的位置和要删除的项数。

  • 插入:可以向指定位置插入任意数量的项,只需提供3个参数,起始位置,0(要删除的项数)和要插入的项。如果要插入多个项,可以再传入第四,第五,以至任意多个项。

  • 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数。起始位置,要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。

var colors = ["red","green","blue"];
var removed = colors.splice(0,1);                   //删除第一项
alert(colors);                //green,blue
alert(removed);            //red,返回的数组中只包含一项
removed = colors.splice(1,0,"yellow","orange");            //从位置1开始插入两项
alert(colors);            //green,yellow,orange,blue
alert(removed);        //返回的是一个空数组
removed = colors.splice(1,1,"red","purple");        //插入两项,删除一项
alert(colors);        //green,red,purple,orange,blue
alert(removed);        //yellow,返回的数组中只包含一项


© 著作权归作者所有

共有 人打赏支持
柳哥
粉丝 202
博文 394
码字总数 347782
作品 0
杭州
技术主管
JavaScript 数据类型判断

1.1 JavaScript 数据类型 简单数据类型(基本数据类型): Undefined ; Null ; Boolean ; Number ; String ; Symbol(ES6新增) 复杂数据类型:Object,Object 本质上是由一组无序的名值对组成...

piada ⋅ 05/18 ⋅ 0

React Native 与原生模块数据通信(一)(iOS)

(一)iOS日历模块封装演示 下面开始演示如何封装一个iOS日历原生模块,让JavaScript可以进行访问到iOS平台日历的功能。 在React Native中,原生模块就是一个Objective-C类,该实现了RCTBridge...

manofit ⋅ 05/24 ⋅ 0

由js数组类型判断触发的浪漫思绪

一、前言 众所周知,js是门“动态”、“弱类型”编程语言,这意味着在js中可以很任性的定义变量,任性的同时也意味着需常在开发中对变量做类型判断,曾几何时,对数组变量的类型的判断是件很...

hanmin ⋅ 06/08 ⋅ 0

WEB前端学习面试加分题:同学,你了解TypeScript吗?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/11 ⋅ 0

JavaWeb01-HTML篇笔记(七)

.1 案例三:完成对注册页面的数据的简单校验.1.1.1 需求: 对注册页面的数据进行非空的简单校验!!!如果有某个值没有输入,点击提交,弹出一个对话框进行提示!! 1.1.2 分析:1.1.2.1 技术分...

我是小谷粒 ⋅ 04/28 ⋅ 0

JavaScript 内存机制(前端同学进阶必备)

简介 每种编程语言都有它的内存管理机制,比如简单的C有低级的内存管理基元,像,。同样我们在学习JavaScript的时候,很有必要了解JavaScript的内存管理机制。 JavaScript的内存管理机制是:内...

梁音 ⋅ 06/01 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 06/19 ⋅ 0

由Object.prototype.toString.call( )引发关于toString( )方法的思考

引言 前端面试中有这么一道经典的问题,如何判断一个对象是否为数组? ES5提供了一个确定对象是否为数组的函数 其中,object是必须的,表示要测试的对象 但是,当我们考虑到浏览器兼容性问题...

wangpf ⋅ 05/11 ⋅ 0

精读《你不知道的javascript》中卷

前言 《你不知道的 javascript》是一个前端学习必读的系列,让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途。本书《你不知道的javascript》中卷介...

程序员解决师 ⋅ 06/20 ⋅ 0

JavaScript核心概念归纳整理

原文出处: 熊俊漉 JavaScript语言本身是一个庞大而复杂的知识体系,复杂程度不低于任何一门后端语言,本文针对JavaScript语言的核心概念进行简单的梳理,对应的每个知识点仅仅点到为止,不作...

音乐宇Code ⋅ 05/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部