声明数组的方法:
var colors = new Array()
var colors = new Array(20) //长度为20的数组
var colors = new Array("red","blue","green")
var colors = ["red","blue","green"]
var colors = Array(3)
var colors = Array("bue")
arrays.length 可以获取colors数组的长度。这个长度不是只读的,而是可变的!
var arrays = ["red","blue","green"] // 有三个元素,长度为3
arrays.length = 2 //将arrays数组长度设为2后
alert(arrays[2]) //Undefined 第三个元素为Undefined
将长度增大或者缩短之后超出原来数组长度或者小于新数组长度的部分的值为undefined
检测当前对象事都是数组的方法:
if(value instanceif Array){
}
if(Array.isArray(value)){
}
value为要检测的对象
JavaScript的数组可以当做栈来处理,也可以当做队列或者双向队列处理,甚至能把栈,队列,双向队列的特点和方法集合起来。
我们可以用下面的一些方法来对数组进行任意的插入删除操作。
栈方法:后进先出
push() :方法可以接收任意数量的参数,把他们添加到数组末尾,并返回修改后数组的长度。
pop() :方法则从数组末尾移除最后一项,减少数组的length,然后返回移除的项。
队列方法:先进先出
shift():移除数组中的第一个项并返回该项,长度减1
结合使用shift()和push()方法,可以想使用队列一样使用数组,后端添加,前端删除
Unshift():在数组前端添加任意个项并返回新数组的长度
结合使用unshift()和pop()方法,从相反的方向来模拟队列,即在数组的前端添加项,在后端移除
var colors = new Array()
var count = colors.push("red","green")
alert(count) //2
var item = colors.shift() //队列出队操作
alert(item) //"red"
colors.unshift("red") //从前边插入
重排序方法:
sort()方法:
sort在排序时都用toString把数据转换成字符串形式:
var values = [0,1,5,10,15]
values.sort()
alert(values) // 0 ,1 ,10, 15 ,5
要实现对数的排序,需要写一个比较函数:
function compare(value1,value2){
if(value1 <value2){
return -1
}else if(value1 >value2){
return 1
}else return 0
}
values.sort(compare)
reverse()方法:反转数组项的顺序
操作方法:
1、contact():基于当前数组中的所有项创建一个新数组,而不是在当前数组上直接拼接。
colors.contact(["black","yellow"]) //contact用来拼接数组,把参数数组拼接到colors的后面
2、slice():基于当前数组中的一个或多个项创建一个新数组,可接收一或两个参数,即要返回项的起始和结束位置。若参数中有一个负数,则用数组长度加上该数来确定相应的位置
var colors = ["red","blue","green"]
var colors2 = colors.slice(1) //返回从数组下标1到最后缩构成的一个数组
var colors3 = colors.slice(1,4) //
返回从数组下标1--3构成的一个数组
3、splice()方法:删除、插入、替换
删除:当splice方法指定两个参数时,color.splice(1,3)表明删除从下标1开始连续三项
插入:当splice指定三个参数:起始位置、0、插入的项,color.splice(2,0,"red","green") 表明从下标2开始插入“red”和“green”
替换:color.splice(1,2,"red","green") 表明先删除下标1开始的连续两项,在从下标1开始插入“red”和“green”
位置方法:
indexOf()方法:
colors.indexOf(value) 从数组开头开始查找value,返回value的下标,如果没找到返回-1 。在查找时要求严格查找,相当于===
lastIndexOf()方法:从数组的末尾开始向前查找
js的数组合并有三种方法,任何一种都可以做到你需要的结果,如下:
concat 方法
var arr1=[{"msg":"你也好","from":"libai"},{"msg":"我是李白,你是谁","from":"libai"}]
var arr2=[{"msg":"你好","from":"admin"},{"msg":"LOL吗","from":"admin"},{"msg":"我是系统管理员,你是李白吗","from":"admin"}]
var arr=arr1.concat(arr2)console.log(c)//你要的结果,不改变arr1和arr2
循环遍历
var arr1=[{"msg":"你也好","from":"libai"},{"msg":"我是李白,你是谁","from":"libai"}]
var arr2=[{"msg":"你好","from":"admin"},{"msg":"LOL吗","from":"admin"},{"msg":"我是系统管理员,你是李白吗","from":"admin"}]
for(var i=0i<arr2.lengthi++){
arr1.push(arr2[i])
}
console.log(arr1)//你要的结果,但是这个是直接改变了arr1这个数组
apply方法
合并数组arr1和数组arr2,使用Array.prototype.push.apply(arr1,arr2) or arr1.push.apply(arr1,arr2)
var arr1=[{"msg":"你也好","from":"libai"},{"msg":"我是李白,你是谁","from":"libai"}]
var arr2=[{"msg":"你好","from":"admin"},{"msg":"LOL吗","from":"admin"},{"msg":"我是系统管理员,你是李白吗","from":"admin"}]
Array.prototype.push.apply(arr1,arr2) //或者 arr1.push.apply(arr1,arr2)
console.log(arr1) //改变了arr1
<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>zBabyCare</title>
<meta name="description" content="Free Responsive Html5 Css3 Templates ">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/zerogrid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/lightbox.css">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/menu.css">
<script src="js/jquery1111.min.js" type="text/javascript"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrap-body">
<div class="header">
<div id='cssmenu' >
<ul>
<li><a href='index.html'><span>zBabyCare</span></a></li>
<li class=' has-sub'><a href='#'><span>Category</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Item 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Item 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='gallery.html'><span>Gallery</span></a></li>
<li><a href='single.html'><span>About</span></a></li>
<li class='last active'><a href='contact.html'><span>Contact</span></a></li>
</ul>
</div>
</div>
<!--Container-->
<section id="container">
<div class="wrap-container">
<div class="zerogrid">
<div class="row">
<h1 class="color-red" style="margin: 20px 0">Contact</h1>
<div class="col-full">
</div>
<div class="col-1-3">
<div class="wrap-col">
<h3 class="color-blue" style="margin: 20px 0">Contact Info</h3>
<span>SED UT PERSPICIATIS UNDE OMNIS ISTE NATUS ERROR SIT VOLUPTATEM ACCUSANTIUM DOLOREMQUE LAUDANTIUM, TOTAM REM APERIAM.</span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque la udantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>
<p>JL.Kemacetan timur no.23. block.Q3<br>
Jakarta-Indonesia</p>
<p>+6221 888 888 90 <br>
+6221 888 88891</p>
<p>info@yourdomain.com</p>
</div>
</div>
<div class="col-2-3">
<div class="wrap-col">
<div class="contact">
<h3 class="color-green" style="margin: 20px 0 20px 30px">Contact Form</h3>
<div id="contact_form">
<form name="form1" id="ff" method="post" action="contact.php">
<label class="row">
<div class="col-1-2">
<div class="wrap-col">
<input type="text" name="name" id="name" placeholder="Enter name" required="required" />
</div>
</div>
<div class="col-1-2">
<div class="wrap-col">
<input type="email" name="email" id="email" placeholder="Enter email" required="required" />
</div>
</div>
</label>
<label class="row">
<div class="col-2-4">
<div class="wrap-col">
<input type="text" name="subject" id="subject" placeholder="Subject" required="required" />
</div>
</div>
<div class="col-1-4">
<div class="wrap-col">
<input type="date" name="date" id="date" placeholder="Date"/>
</div>
</div>
<div class="col-1-4">
<div class="wrap-col">
<input type="time" name="time" id="time" placeholder="Time"/>
</div>
</div>
</label>
<label class="row">
<div class="wrap-col">
<textarea name="message" id="message" class="form-control" rows="4" cols="25" required
placeholder="Message"></textarea>
</div>
</label>
<center><input class="sendButton" type="submit" name="Submit" value="Submit"></center>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<hr class="line">
<!--/Footer-->
<footer>
<div class="wrap-footer">
<div class="zerogrid">
<div class="row">
<div class="col-1-3">
<div class="wrap-col">
<p>Copyright &copy2019.Company name All rights reserved.<a target="_blank" href="http://www.programb.com/">&#x7F51&#x9875&#x6A21&#x677F</a></p>
</div>
</div>
<div class="col-1-3">
<div class="wrap-col">
<ul class="social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-1-3">
<div class="wrap-col">
<ul class="quick-link">
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>