Javascript 数组的工作方式与大多数编程语言的数组类似。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>learn4Array</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9.     //创建和填充数组
  10.     var myArray = new Array();
  11.     myArray[0] = 100;
  12.     myArray[1] = "Luka";
  13.     myArray[2] = true;
  14. </script>
  15. </body>
  16. </html>

创建数组的时候不需要声明数组中元素的个数。 Javascript数组会自动调整大小以便容纳所有元素。

不必声明数组所含数据的类型。JavaScript数组可以混合包含各种数据的类型 。

1. 使用数组字面量

使用字面量，可以在一条语句中创建和填充数组。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>learn4Array</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9.     var myArray = [100,"Luka",true];
  10. </script>
  11. </body>
  12. </html>

此例通过在一对方括号（[ 和 ]）之间指定所需要数组元素的方法创建了一个新数组，并将其赋给变量 myArray 。

2. 读取和修改数组内容

要读取指定索引位置的数组元素值，应使用一对方括号（[ 和 ]）并将索引值放在方括号间。JavaScript数组的索引值从0开始。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>learn4Array</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9.     var myArray = [100,"Luka",true];
  10.  
  11.     //读取指定索引位置的数组元素值
  12.     document.writeln("Index 0:"+myArray[0]+"<br />");
  13.  
  14.     //修改数组
  15.     myArray[0] = "Monday";
  16.     document.writeln("Index 0:"+myArray[0]);
  17. </script>
  18. </body>
  19. </html>

输出结果：

  1. Index 0:100
  2. Index 0:Monday

3. 枚举数组内容

可以用 for 循环枚举数组内容。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>learn4Array</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9.     var myArray = [100,"Luka",true];
  10.  
  11.     for(var i= 0;i < myArray.length;i++){
  12.         document.writeln("Index "+i+": "+myArray[i]+"<br />")
  13.     }
  14. </script>
  15. </body>
  16. </html>

输出结果：

  1. Index 0: 100
  2. Index 1: Luka
  3. Index 2: true

3. 使用内置的数组方法

Javascript 中的Array 对象定义了许多方法。下图罗列了一些最常用的方法。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>learn4Array</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9.     var myArray1 = [100,"Luka"];
  10.     var myArray2 = [true];
  11.  
  12.     //concat(<otherArray>)
  13.     var myArray = myArray1.concat(myArray2);
  14.     for(var i= 0;i < myArray.length;i++){
  15.         document.writeln("myArray["+i+"]: "+myArray[i]+"<br />")
  16.     }
  17.     document.writeln("<br />");
  18.  
  19.     //join(<separator>)
  20.     var strArray = myArray.join('-');
  21.     document.writeln(strArray+"<br />");
  22.     document.writeln("<br />");
  23.  
  24.     //pop()
  25.     myArray.pop();
  26.     document.writeln(myArray+"<br />");
  27.     document.writeln("<br />");
  28.  
  29.     //push(<item>)
  30.     myArray.push("Hello Javascript",200);
  31.     document.writeln(myArray+"<br />");
  32.     document.writeln("<br />");
  33.  
  34.     //reverse()
  35.     myArray = myArray.reverse();
  36.     document.writeln(myArray+"<br />");
  37.     document.writeln("<br />");
  38.  
  39.     //shift()
  40.      myArray.shift();;
  41.     document.writeln(myArray+"<br />");
  42.     document.writeln("<br />");
  43.  
  44.     //slice(<start>,<end>)
  45.     document.writeln( myArray.slice(1,3)+"<br />");
  46.     document.writeln( myArray.slice(0)+"<br />");
  47.     document.writeln("<br />");
  48.  
  49.     //sort()
  50.     function sortNumber(a,b)
  51.     {
  52.         return b - a;
  53.     }
  54.     var myArray3 = ["George","John","Thomas","James","Adrew","Martin"];
  55.     var myArray4 = [10,5,40,25,1000,1];
  56.     document.writeln( myArray3.sort()+"<br />");
  57.     document.writeln( myArray4.sort()+"<br />");
  58.     //使用一个排序函数,按照数值的大小对数字进行排序
  59.     document.writeln( myArray4.sort(sortNumber)+"<br />");
  60.     document.writeln("<br />");
  61.  
  62.     //unshift(<item>)
  63.     myArray.unshift(1,2);
  64.     document.writeln(myArray+"<br />");
  65.  
  66. </script>
  67. </body>
  68. </html>

输出结果：

  1. myArray[0]: 100
  2. myArray[1]: Luka
  3. myArray[2]: true
  4.  
  5. 100-Luka-true
  6.  
  7. 100,Luka
  8.  
  9. 100,Luka,Hello Javascript,200
  10.  
  11. 200,Hello Javascript,Luka,100
  12.  
  13. Hello Javascript,Luka,100
  14.  
  15. Luka,100
  16. Hello Javascript,Luka,100
  17.  
  18. Adrew,George,James,John,Martin,Thomas
  19. 1,10,1000,25,40,5
  20. 1000,40,25,10,5,1
  21.  
  22. 1,2,Hello Javascript,Luka,100

【Javascript 基础】使用数组的更多相关文章

  1. JavaScript 基础回顾——数组

    JavaScript是无类型语言,数组元素可以具有任意的数据类型,同一个数组的不同元素可以具有不同类型.数组的元素设置可以包含其他数组,便于模拟创建多维数组. 1.创建数组 在JavaScript中, ...

  2. javascript基础知识-数组

    1.javascript创建数组时无需声明数组大小或者在数组大小变化时重新分配 2.javascript数组是无类型的 3.数组元素不一定要连续 4.针对稀疏数组,length比所有元素的索引都要大 ...

  3. JavaScript基础——使用数组

    Array对象提供存储和处理一组其他对象的一种手段.数组可以存储数值.字符串或其他JavaScript对象.创建JavaScript数组有几种不同的方法.例如,下面的语句穿件同样的驻足的3个相同的版本 ...

  4. JavaScript 基础(二)数组

    字符串, JavaScript 字符串就是用'' 和""括起来的字符表示. 字符字面量, \n 换行, \t 制表, \b 退格, \r 回车, \f 进纸, \\ 斜杠,\' 单 ...

  5. JavaScript基础之数组常用方法

    目录 JS 数组常用API 常用属性 常用方法 常见方法语法解释 from方法 isArray concat every fill filter find forEach indexOf join k ...

  6. javascript基础之数组一

    <script type="text/javascript"> //求数组中最大的数 var arr=[123,456,789,657,432,564]; var ar ...

  7. javascript基础之数组对象

    一.定义数组的方法: 定义了一个空数组: var myArray =new Array(); 指定有n个空元素的数组: var myArray=new Array(n); 定义数组并赋值: var m ...

  8. JavaScript 基础(六) 数组方法 闭包

    在一个对象中绑定函数,称为这个对象的方法.在JavaScript 中,对象的定义是这样的: var guagua = { name:'瓜瓜', birth:1990 }; 但是,如果我们给瓜瓜绑定一个 ...

  9. JavaScript基础04——数组的创建及方法

    数组的概念及定义 数组的概念:         一组数据,数据的组和         哪些数据的组和,只要是数据(所有数据),就可以放在数组中 数组的意义:         可以同时操作多个数据 数组 ...

  10. javascript基础系列(入门前须知)

    -----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...

随机推荐

  1. 口红游戏 插口红游戏 h5页面开发

    目前火热的口红机游戏,需要在设备前参与,然后成功后即可赢得口红,作为平台运营者来说还是比较重资产的,目前我们将它搬到了线上.每个人都可以远程玩这样的口红机游戏了.直接在手机微信里试玩,成功后,后台即可 ...

  2. atan 和 atan2

     转自http://blog.csdn.net/chinabinlang/article/details/6802686 atan函数与atan2函数的一点区别 . atan 和 atan2 都是求反 ...

  3. xshell设置使用

    一.首先您的xshell先连接上需要远程连接的服务器. 二.打开连接,出现下记页面,就证明与服务器连接正常了. 三.接下来,我们就可以使用命令做一系列操作了. 3-1:cd 是进入下一级目录命令 例如 ...

  4. 【IDEA】IDEA设置修改完JS和JSP不用重启的办法(IDEA热部署)

    修改完JS和JSP不停的重启服务器真的很烦,所以设置修改完之后不用重启也生效: 前提有两个: 确保使用的是debug模式. 确保tomcat是由idea实例化的.也就是说tomcat是在idea中配置 ...

  5. v4l2 spec 中文 Ch01【转】

    转自:http://blog.csdn.net/wuhzossibility/article/details/6638245 目录(?)[-] Chapter 1 通用APICommon API El ...

  6. Visual Studio Code 好用的 source code editor

    short cut https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf go to definition : F1 ...

  7. C++11 lambda表达式（19篇C++11文章）

    C++11引入了lambda表达式,使得程序员可以定义匿名函数,该函数是一次性执行的,既方便了编程,又能防止别人的访问. Lambda表达式的语法通过下图来介绍: 这里假设我们定义了一个如上图的lam ...

  8. thinkphp函数学习（2）——microtime, memory_get_usage, dirname, strtolower, is_file

    1. microtime() 返回  微秒 秒  这种格式的内容 例子 <?php echo(microtime()); ?> 输出: 0.25139300 1138197510 // 前 ...

  9. IE浏览器Cookie信息提取工具Galleta

    IE浏览器Cookie信息提取工具Galleta   浏览器Cookie中保存着用户访问网站的各项敏感信息,如用户登录凭证.提取这些信息后,就可以以该用户的身份访问对应的网站.为了方便信息获取,Kal ...

  10. http 头信息详解（转）

    HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内容请参考RFC2616.HTTP协议采用了请求/响应模型.客户 ...