作为一种线性数据结构,几乎每一种编程语言都支持数组类型。和c++、java这些强类型的语言相比,JavaScript数组有些不同,它可以存放任意类型的值。上节中有提到过JS中任意类型的值都可以赋值给任何一个变量,所以从数组中取出不同类型的值时也就不存在类型转换安全问题。

JS数组的使用非常简单,只是有些细节可能容易被忽略,下面是数组的定义:

    <script type="text/javascript">
function func(){
console.log("func function!");
}
var obj = {
name:"Jane",
age:30
}
var arr = [1,func,obj];
alert(typeof arr[1]);//function
alert(arr.length);//3
</script>

数组定义很简单,通过一个中括号[ ]来声明,可以在声明时指定元素值,每个元素用逗号隔开,元素可以是任意类型。上节提到过,数组也属于object类型,我们可以通过它的length属性来获取数组的长度。

JS数组的长度是不固定的,可以在程序中随意增加或减少数组长度。

    <script type="text/javascript">
var arr = [];
arr[0] = 1;
arr[1] = 2;
alert(arr.length);//2
arr[2] = 3;
alert(arr.length);//3
</script>

在c++、java这些强类型的语言中数组的下标只能是整型或者char类型,JS数组并不是这样的,它的下标可以是上节讲到的数据类型中的任何一种,看下面的例子:

    <script type="text/javascript">
function func(){
};
var arr = [];
arr[0] = 1;
arr[1.3] = 3;
alert(arr[1.3]);//3
arr["age"] = 23;
alert(arr["age"]);//23
alert(arr.age);//23
arr[undefined] = "undef";
alert(arr[undefined]);//undef
arr[func] = "func";
alert(arr[func]);//func
alert(arr.length);//1
</script>

有点凌乱了吧,我们可以將一个小数作为数组下标arr[1.3]=3,然后可以通过arr[1.3]获取下标的值。字符串作为下标时稍微特殊一点,我们不仅可以通过arr[“age”]来获取下标对应的值,还可以使用arr.age这种形式。我们甚至可以定义一个函数func,使用函数名作为下标。

最后我们使用arr.length获取数组的长度,发现长度为1,这是怎么回事呢?

我们来通过代码分析一下:

    <script type="text/javascript">
function func(){};
var arr1 = [];
arr1[0] = 1;
arr1[4.3] = 1;
alert(arr1.length);//1 var arr2 = [];
arr2[0] = 1;
arr2[4] = 1;
alert(arr2.length);//5 var arr3 = [];
arr3[0] = 1;
arr3[4] = 1;
arr3["hello"] = "hello";
alert(arr3.length);//5
</script>

可以看到通过length属性获得数组的长度实际上并不准确,它的值是数组的最大整数下标+1。

为了避免数组下标出现不连续的情况,我们通常將数组作为栈来操作,需要增加数组长度并向数组中添加元素时调用push函数,减少数组长度同时移除元素可以调用pop方法。

案例代码如下:

    <script type="text/javascript">
var func = function(){};
var arr = [];
arr.push(func);
arr.push(1);
arr.push(10);
arr.push("hello");
arr.push("world");
for(i=0;i<arr.length;i++)
{
document.writeln(arr[i]);
}
arr.pop();//去除最后一个元素,并返回元素值
document.writeln("<br/>");
for(i=0;i<arr.length;i++)
{
document.writeln(arr[i]);
}
</script>

页面输出:

你不知道的JavaScript(二)数组的更多相关文章

  1. 你不知道的JavaScript 二

    词法作用域 上次说到作用域,将其定义为一套规则,这套规则用来管理引擎如何在当前作用 域以及嵌套的子作用域中根据标识符名称进行变量查找. 作用域共有两种主要的工作模型.第一种是最为普遍的,被大多数编程语 ...

  2. 《你不知道的JavaScript》整理(二)——this

    最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,这次研究了一下“this”. 当一个函数被调用时,会创建一个活动记录(执行上下文). 这个记录会包含函 ...

  3. javascript 二维(多维)数组的复制问题

    最近在项目中遇到一个动画暂停的效果,需要在动画停止的时候检测当前坐标和已经运行的时间,从而调节时间轴为再次运行时加速. 但是在数组保存方面折腾了半天. var orbitArray = [], lin ...

  4. 读《你不知道的JavaScript(上卷)》后感-作用域闭包(二)

    github原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们, ...

  5. JS闭包—你不知道的JavaScript上卷读书笔记(二)

    关于闭包,初学者会被绕的晕头转向,在学习的路上也付出了很多精力来理解. 让我们一起来揭开闭包神秘的面纱. 闭包晦涩的定义 看过很多关于闭包的定义,很多讲的云里雾里,晦涩难懂.让不少人以为闭包是多么玄乎 ...

  6. 读书笔记-你不知道的JavaScript(上)

    本文首发在我的个人博客:http://muyunyun.cn/ <你不知道的JavaScript>系列丛书给出了很多颠覆以往对JavaScript认知的点, 读完上卷,受益匪浅,于是对其精 ...

  7. 《你不知道的 JavaScript 上卷》 学习笔记

    第一部分: 作用域和闭包 一.作用域 1. 作用域:存储变量并且查找变量的规则 2. 源代码在执行之前(编译)会经历三个步骤: 分词/此法分析:将代码字符串分解成有意义的代码块(词法单元) 解析/语法 ...

  8. 《你不知道的JavaScript》整理(一)——作用域、提升与闭包

    最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,里面分析了很多基础性的概念. 可以更全面深入的理解JavaScript深层面的知识点. 一.函数作用域 ...

  9. javascript中数组的22种方法

    × 目录 [1]对象继承 [2]数组转换 [3]栈和队列[4]数组排序[5]数组拼接[6]创建数组[7]数组删改[8]数组位置[9]数组归并[10]数组迭代[11]总结 前面的话 数组总共有22种方法 ...

  10. 你不知道的javascript

    一.对象 JavaScript简单类型有数字.字符串.布尔值.null.undefined,其他所有的值都是对象(数组.函数.正则表达式都是对象). 数字.字符串.布尔值虽然拥有方法(包装对象),但并 ...

随机推荐

  1. 如何用写js弹出层 ----2017-03-29

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. jetty服务器数据源配置JNDI-Oracle,MySQL,SQLServer,DB2等 (转)

    下载jetty 下载jetty服务器(8.1.0.RC2),解压到任意目录下 http://dist.codehaus.org/jetty/jetty-hightide-8.1.0/jetty-hig ...

  3. html5 好用功能总结

    1.表格元素 a.<caption>设置表格标题 b.<colgroup> . <col> 设置列 //style span 2.分组元素 a.<blockq ...

  4. DB2导出表结构、表数据小结

    一.DB2命令行导出数据库全库表结构 ① Win+R进入到DB2安装目录的BIN目录下,执行命令:DB2CMD,进入到DB2 CLP窗口. 命令:DB2CMD ② 创建一个data文件夹 命令:MKD ...

  5. codeforces 277 A Learning Languages 【DFS 】

    n个人,每个人会一些语言,两个人只要有会一门相同的语言就可以交流,问为了让这n个人都交流,至少还得学多少门语言 先根据n个人之间他们会的语言,建边 再dfs找出有多少个联通块ans,再加ans-1条边 ...

  6. Thingworx新建Thing的数据库表变化

    为了在Thingworx的基础上建立统一的可视化平台,并且对软件产品具有自主控制权,不依赖于Thingworx软件(防止因Thingworx的升级.Bug导致的自主扩展功能受制),所以最近在研究Thi ...

  7. RocketMQ学习笔记(12)----RocketMQ的Consumer API简介

    由于消息的消费方式有两种,所以两种方式也有不同的API: 1. PushConsumer的配置 1. consumerGroup: 默认值为DEFAULT_CONSUMER,Consumer组名,多个 ...

  8. day08 数字,字符串类型内置方法

    目录 数字类型内置方法 为什么要有数据类型? 定义方式 方法 储存一个值or多个值? 有序or无序?(有序:有索引, 无序:无索引) 可变or不可变(可变:值变id不变,不可变:值变id也变) 字符串 ...

  9. Django配置MariaDB数据库

    Django中配置MariaDB数据库.配置文件如下: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': ...

  10. HDU-5534 Partial Tree 完全背包 设定初始选择

    题目链接:https://cn.vjudge.net/problem/HDU-5534 题意 放学路上看到n个节点,突然想把这几个节点连成一颗树. 树上每个节点有一个清凉度,清凉度是一个关于节点度的函 ...