作为一种线性数据结构,几乎每一种编程语言都支持数组类型。和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. ROS-Gazebo-turtlebot3仿真

    前言:Gazebo是一款强大的3D仿真器,支持机器人开发所需的机器人.传感器和环境模型,并且通过搭载的物理引擎可以得到逼真的仿真结果.即便Gazebo是一款开源仿真器,却具有高水准的仿真性能,因此在机 ...

  2. 基于任务的编程模型TAP

    一.引言 在上两个专题中我为大家介绍.NET 1.0中的APM和.NET 2.0中的EAP,在使用前面两种模式进行异步编程的时候,大家多多少少肯定会感觉到实现起来比较麻烦, 首先我个人觉得,当使用AP ...

  3. Rabbit MQ 学习 (一)Window安装Erlang环境

    之前也没有用过Rabbit MQ ,最近正在学习中,记性不好,特意记一下. 百度一下 先得 安装 Erlang 并且 设置环境变量. 在Erlang 官网去下载,那个慢呀... 还好CSDN 里有人提 ...

  4. 使用最新vue_cli搭建的模版

    使用最新vue_cli搭建的模版,包含了常用的插件,router和axiox与测试插件.项目的结构如下: 使用之前请打开 REAMME.md 看看. 已经搭建好的框架的下载地址:https://sha ...

  5. 使用 Shiro 设计基于用户、角色、权限的通用权限管理系统

    一.前言 在大型的信息管理系统中,经常涉及到权限管理系统 下面来个 demo,很多复杂的系统的设计都来自它 代码已经放到github上了,地址:https://github.com/larger5/s ...

  6. vim配置C++开发环境 win10

    资料一 —— vim插件的安装 https://www.cnblogs.com/tianzhiyi/p/5338032.html 资料二 —— vim多窗口操作: https://blog.csdn. ...

  7. ES modules

    注意:这篇文章讲的是正经的es module规范 及浏览器的实现!webpack项目中es module会被parse成commonjs,和这个没大关系! 总结: ES模块加载的主要过程: 构造 —— ...

  8. python的迭代器、生成器、三元运算、列表解析、生成器表达式

    一 迭代的概念 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前 ...

  9. 虚拟机安装mac

    没成功,把几篇不错的文章先记录下地址 http://bbs.pcbeta.com/forum.php?mod=viewthread&tid=1437039 http://bbs.pcbeta. ...

  10. BlogEngine.NET架构学习:Extension扩展实现

    之前有个系列文章介绍过BlogEngine.NET,其中也有关于插件的介绍:"BlogEngine.Net架构与源代码分析系列part9:开发扩展(上)--Extension与管理上的实现& ...