JavaScript Array 对象[数组]

Array 对象

Array 对象用于在变量中存储多个值:

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

第一个数组元素的索引值为 0,第二个索引值为 1,以此类推。

数组属性

属性描述
constructor返回创建数组对象的原型函数。
length设置或返回数组元素的个数。
prototype允许你向数组对象添加属性或方法。

 

Array 对象属性

方法描述
concat()连接两个或更多的数组,并返回结果。
copyWithin()从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()返回数组的可迭代对象。
every()检测数值元素的每个元素是否都符合条件。
fill()使用一个固定值来填充数组。
filter()检测数值元素,并返回符合条件所有元素的数组。
find()返回符合传入测试(函数)条件的数组元素。
findIndex()返回符合传入测试(函数)条件的数组元素索引。
forEach()数组每个元素都执行一次回调函数。
from()通过给定的对象中创建一个数组。
includes()判断一个数组是否包含一个指定的值。
indexOf()搜索数组中的元素,并返回它所在的位置。
isArray()判断对象是否为数组。
join()把数组的所有元素放入一个字符串。
keys()返回数组的可迭代对象,包含原始数组的键(key)。
lastIndexOf()返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
map()通过指定函数处理数组的每个元素,并返回处理后的数组。
pop()删除数组的最后一个元素并返回删除的元素。
push()向数组的末尾添加一个或更多元素,并返回新的长度。
reduce()将数组元素计算为一个值(从左到右)。
reduceRight()将数组元素计算为一个值(从右到左)。
reverse()反转数组的元素顺序。
shift()删除并返回数组的第一个元素。
slice()选取数组的的一部分,并返回一个新数组。
some()检测数组元素中是否有元素符合指定条件。
sort()对数组的元素进行排序。
splice()从数组中添加或删除元素。
toString()把数组转换为字符串,并返回结果。
unshift()向数组的开头添加一个或更多元素,并返回新的长度。
valueOf()返回数组对象的原始值。

 

 

JavaScript Array(数组) 对象


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


Examples

在线实例

创建数组, 为其赋值:

实例

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


尝试一下 »

页面底部你可以找到更多的实例。


什么是数组?

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

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

var car1="Saab";
var car2="Volvo";
var car3="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数组的第一个值:

var name=myCars[0];

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

myCars[0]="Opel";

 

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

 


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

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

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

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

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

 


数组方法和属性

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

var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值

 

 

代码实例:

一、合并两个数组:

<script>
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
document.write(children);
</script>

运行结果:Cecilie,Lone,Emil,Tobias,Linus

二、合并三个数组:concat

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

运行结果:Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone

三、用数组的元素组成字符串join

<body>

<p id="demo">点击按钮将数组作为字符串输出。</p>
<button οnclick="myFunction()">点我</button>
<script>
function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x=document.getElementById("demo");
    x.innerHTML=fruits.join();
}
</script>

</body>

运行结果:Banana,Orange,Apple,Mango

四、单击按钮删除数组的最后一个元素。pop

<body>

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button οnclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
    fruits.pop();
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>

</body>

运行结果:Banana,Orange,Apple

五、向末尾添加新元素push

<p id="demo">单击按钮给数组添加新的元素。</p>
<button οnclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
    fruits.push("Kiwi")
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>

运行结果:Banana,Orange,Apple,Mango,Kiwi

六、删除数组第一个元素shift

<p id="demo">单击按钮删除数组的第一个元素。</p>
<p id="demo2"></p>
<button οnclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
    var delell = fruits.shift();
    var x=document.getElementById("demo");
    x.innerHTML= '删除后数组为:' +  fruits;
    document.getElementById("demo2").innerHTML= '删除的元素是:' +  delell;
}
</script>

运行结果:

删除后数组为:Orange,Apple,Mango

删除的元素是:Banana

七:将顺序反转reverse

<p id="demo">单击按钮将数组反转排序。</p>
<button οnclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
    fruits.reverse();
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}

七、从数组中选择元素slice

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button οnclick="myFunction()">点我</button>
<script>
function myFunction(){
    var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var citrus = fruits.slice(1,3);
    var x=document.getElementById("demo");
    x.innerHTML=citrus;
}
</script>

运行结果:Orange,Lemon(此方法1-3下标只包含1,2)

八、按升序排列sort

<p id="demo">单击按钮升序排列数组。</p>
<button οnclick="myFunction()">点我</button>
<script>
function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.sort();
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}

运行结果:Apple,Banana,Mango,Orange

九、按照降序排列

<p id="demo">单击按钮降序排列数组。</p>
<button οnclick="myFunction()">点我</button>
<script>
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;
}
</script>

运行结果:100,40,25,10,5,1

十、在数组的第二位置添加一个元素splice

<p id="demo">点击按钮向数组添加元素。</p>
<button οnclick="myFunction()">点我</button>
<script>
function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.splice(2,0,"Lemon","Kiwi");
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>

运行结果:Banana,Orange,Lemon,Kiwi,Apple,Mango

十一、转换数组到字符串 toString

<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button οnclick="myFunction()">点我</button>
<script>
function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var str = fruits.toString();
    var x=document.getElementById("demo");
    x.innerHTML= str;
}

运行结果:Banana,Orange,Apple,Mango

十二、在数组开头添加新元素unshift

<p id="demo">单击按钮在数组中插入元素。</p>
<button οnclick="myFunction()">点我</button>
<script>
function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.unshift("Lemon","Pineapple");
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本,插入的值将被返回成<em> undefined </em>。</p>

运行结果:Lemon,Pineapple,Banana,Orange,Apple,Mango

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值