JavaScript学习——JavaScript 对象 数据类型总结03

JavaScript Array(数组) 对象

创建数组, 为其赋值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu博客园</title>
</head>
<body>

<script>
var i;
var myArray=new Array();
myArray[0]="河正宇";
myArray[1]="金玉石";
myArray[2]="朴日图";
for (i=0;i<myArray.length;i++){
	document.write(myArray[i] + "<br />");
}
</script>

</body>
</html>

 河正宇
金玉石
朴日图

什么是数组?

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

常用方式尚未声明

 var  myCars=new Array();//创建一个数组;

var myCars=new Array([size]);//创建一个数组并且指定长度 注意不是上限 是长度;

var myCars=new Array{"艾力绅","奥德赛","思域"};//创建一个数组 并且初始化数组的内容;

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

var myCars= new Array();
myCars[0]="艾力绅";
myCars[1]="奥德赛";
myCars[2]="思域";

2 : 简洁方式:

var myCars=new Array("艾力绅","奥德赛","思域");

 3: 字面:

var myCars=["艾力绅","奥德赛","思域"];
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>
<script type="text/javascript" >

var myarr =new Array();//创建一个空数组
 myarr[0]="aa";
 myarr[1]="bb";
 var myarr2=new Array(2);//创建并指定一个长度为2的数组
 myarr2[0]="cc";
 myarr2[1]="dd";
 myarr2[2]="ee";//myArr2虽然在声明时指明了长度为2,但是还是可以添加超过其指明长度的元素
 var myarr3=new Array("艾力绅","奥德赛","思域");//创建一个数组并初始化数组中的元素
 var myarr4 =[1,true,"String"];//Array的简化声明
 for(var i in myarr){
 document.write(myarr[i]+"<br/>");
 }
 document.write("-----------------------------------------------------------------------------<br/>");
 for(var i in myarr2){
 document.write(myarr2[i]+"<br/>");

 }
 document.write("-----------------------------------------------------------------------------<br/>");
 document.write("遍历arr1中的元素:<br/>");
 for(var i in myarr3){
 document.write(myarr3[i]+"<br/>");
 
 }
 document.write("-----------------------------------------------------------------------------<br/>");
 document.write("遍历arr1中的元素:<br/>");
 for(var i in myarr4){
 document.write(myarr4[i]+"<br/>");
 
 }
	
</script>
</body>
</html>

 

访问数组

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

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

var name= myCars[0];

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

myCars[0]="艾力绅";

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

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

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

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

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

数组方法和属性

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtime</title>
</head>
<body>
<p id="demo">单击按钮创建一个数组,调用 ucase()方法, 并显示结果。</p>
 <button onclick="myFunction()">点击我</button>
<script>
Array.prototype.myUcase=function(){
for(i=0; i<this.length; i++){

this[i]=this[i].toUpperCase();
}
}

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

</script>


</body>
</html>

合并两个数组 - concat()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>
	
<script>
var he = ["q", "w"];
var ale = ["c", "g", "j"];
var ch= he.concat(ale);
document.write(ch);
</script>
	
</body>
</html>

 合并三个数组 - concat()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<script>
var mm = ["a", "b"];
var dd = ["c", "d", "h"];
var gg = ["g", "t"];
var ff = mm.concat(dd, gg);
document.write(ff);
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

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

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

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

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

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

</body>
</html>

 

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

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

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p id="demo">单击按钮删除数组的第一个元素。</p>
<p id="demo2"></p>
<button onclick="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>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="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>

</body>
</html>

 

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="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>

</body>
</html>

原文地址:https://www.cnblogs.com/mtime2004/p/9753682.html