发布日期:2015-11-18 09:40 来源: 标签: 网页技术 JavaScript教程 JavaScript对象 数组Array
本章我们主要学习什么是数组?JavaScript中如何创建数组?数组的常用属性和方法有哪些?下面我们就做一下具体讲解,希望大家多多支持中国站长网络学院。

数组对象的作用是:使用单独的变量名来存储一系列的值。


什么是数组?

数组对象是使用单独的变量名来存储一系列的值。

如果你有一组数据(例如:车名字),存在单独变量如下所示:

varcar1="Saab";
varcar2="Volvo";
varcar3="BMW";

然而,如果你想从中找出某一辆车?并且不是3辆,而是300辆呢?这将不是一件容易的事!

最好的方法就是用数组。

数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。


创建一个数组

创建一个数组,有三种方法。

下面的代码定义了一个名为 myCars的数组对象:

1: 常规方式:

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];


访问数组

通过指定数组名以及索引号码,你可以访问某个特定的元素。

以下实例可以访问myCars数组的第一个值:

varname=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel";

lamp[0] 是数组的第一个元素。[1] 是数组的第二个元素。


在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此,你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组:

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;


数组方法和属性

使用数组对象预定义属性和方法:

var x=myCars.length             // the number of elements in myCars
var y=myCars.indexOf("Volvo")   // the index position of "Volvo"


创建新方法

原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。

实例:创建一个新的方法。

Array.prototype.ucase=function()
{
  for (i=0;i<this.length;i++)
  {this[i]=this[i].toUpperCase();}
}

上面的例子创建了新的数组方法用于将数组小写字符转为大写字符。

程序实例:

1)合并两个数组 - concat()

<p id="demo">点击按钮合并数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
var x=document.getElementById("demo");
x.innerHTML=children;
}

2)合并三个数组 - concat()

var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);

3)用数组的元素组成字符串 - join()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=document.getElementById("demo");
x.innerHTML=fruits.join();

4)删除数组的最后一个元素 - pop()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction()
{
fruits.pop();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}

5)数组的末尾添加新的元素 - push()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction()
{
fruits.push("Kiwi")
var x=document.getElementById("demo");
x.innerHTML=fruits;
}

6)将一个数组中的元素的顺序反转排序 - reverse()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

function myFunction()
{
fruits.reverse();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}

7)删除数组的第一个元素 - shift()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction()
{
fruits.shift();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}

8)从一个数组中选择元素 - slice()

function myFunction()
{
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
var x=document.getElementById("demo");
x.innerHTML=citrus;
}

9)数组排序(按字母顺序升序)- sort()

function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}

10)数字排序(按数字顺序升序)- sort()

function myFunction()
{
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
var x=document.getElementById("demo");
x.innerHTML=points;
}

11)数字排序(按数字顺序降序)- sort()

function myFunction()
{
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
var x=document.getElementById("demo");
x.innerHTML=points;
}

12)在数组的第2位置添加一个元素 - splice()

function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}

13)转换数组到字符串 -toString()

function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.toString();
var x=document.getElementById("demo");
x.innerHTML= str;
}

14)在数组的开头添加新元素 - unshift()

function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}



相关评论

专题信息
    JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。JavaScript 非常容易学。JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。本教程将教你学习从初级到高级JavaScript知识。