【基础】数组基本操作
数组的常见基本操作分为：赋值，查长度，添加push，删除delete，遍历for-in等。简单数组是一维的，但是实际工作中，数组总是与对象结合使用，叫：数组对象。
类型操作分为：
- 取，对已有数组进行读取；读取分为取某一个下标或遍历；【见： 进阶1，进阶1】
- 赋，创建一个新数组，让其他元素的值添加到此数组；【见： 进阶3】
基本操作如下：
清空整个数组（巧妙利用截取和数组长度来全部删除）
arr.splice(0,arr.length);
// 稀疏数组
// var a=[1,2,3,,]
// alert(a.length) //返回4
// var b = new Array(5)
// alert(b.length) //返回5
// var b = new Array(5)
// b = []
// alert(b.length) //返回0
// var a1=[,,,]
// alert(a1[0]) //返回undefined
// alert(a1.length)//返回3
//【长度】-数组长度 （特别注意：length不仅仅能获取数组的个数，还能删除数组元素；）
// a = [1,2,3,4,5]
// a.length=3 //设置数组a长度为3（此操作会将多的删除）
// alert(a)
//【赋值】-数组元素的赋值
// var a = [1,2,3,4,5]
// alert(a[1]) //返回2
// a[1]="chai" //赋值----索引赋值
// alert(a[1]) //返回chai
//【添加】-数组元素的添加
// var a = [1,2,3,4,5]
// a.push("chai") //在数组的末尾一个元素
// alert(a[5])
// a.push("yu","long") //在数组的末尾多个元素
// alert(a) //返回1,2,3,4,5,chai,yu,long
//【删除】-数组元素的删除（特别注意：删除元素并不会影响数组的length）
// var a = [1,2,3,4,5]
// delete a[0] //返回
// alert(a) //返回,2,3,4,5
// alert(a[0])//返回undefined
// alert(a.length) //返回5
//如何删除数组的最后一个元素?
//【遍历】-数组遍历 for in 遍历出元素
// var a = ["chai","yu","s","cool","hi"]
// var x
// for (x in a)
// {
// alert(a[x]) //这里的x是元素；
// }
//【遍历】-数组遍历 for 遍历出元素
// var a = ["chai","yu","s","cool","hi"]
// alert(a[3])
// for (var i=0; i<a.length;i++) {
// alert(a[i]) //i带过来的只是数字，因为静态的读取是：数组名[索引值]的方式；遍历时，将i反复带进来，即可得遍历。
//
// }
//【查找索引值】-查找指定元素的索引值
// var a = ["chai","yu","long","ni","hao"]
// alert(a.indexOf("yu"))
//【截取】-根据数组-索引值-截取----返回新数组
// var a = ["chai","yu","long","ni","hao"]
//
// var b = a.slice(0,3) //从索引0开始，到索引2结束，但不包括索引3:
// alert(b) //返回截取后的数组；
//
// var c = a.slice(3) //从索引3开始，截取到最后。
// alert(c) //返回截取后的数组；
//
// var d = a.slice() //不传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array：
// alert(d) //返回整个数租
//【尾部删除若干 push 和 尾巴删除一个 pop】
// var a = ["chai","yu","long","ni","hao"]
// a.push("ma","?") //在尾部添加一个或多个元素；
// alert(a) //返回全部 chai,yu,long,ni,hao,ma,?
// a.pop(); //删除最后一个
// alert(a) //返回 chai,yu,long,ni,hao,ma
//【头部添加若干unshift 和 头部删除一个shift】
// var a = ["chai","yu","long","ni","hao"]
// a.unshift("big","big2")
// alert(a)
// a.shift()
// alert(a)
//【排序：sort reverse-正序-倒序】
// var a = ["chai","yu","long","ni","hao"]
// a.sort()
// alert("正序:"+a)
// a.reverse()
// alert("倒序:"+a)
//【splice:简单将：删除-添加。它可以从指定的 (索引) 开始 (删除 -若干) 元素，然后再从该位置(添加-若干)元素：】
// var a = ["chai","yu","long","ni","hao"]
// a.splice(0,3,"gao","jing") //返回 gao,jing,ni,hao
// alert(a)
//【concat：数组连接】
//请注意，concat()方法并没有修改当前Array，而是返回了一个新的Array。
// var a = ["chai","yu","long"]
// var b = a.concat(["gao","jing"])
// alert(b)
//【join：当前数组字符串链接】
//把当前Array的每个元素都用指定的字符串连接起来，然后（返回连接后的字符串）：
//如果Array的元素不是字符串，将自动转换为字符串后再连接。
// var a = ["chai","yu","long",11,22]
//
// alert(a.join("/") ) //返回含有分隔符的数组 ：chai/yu/long/11/22
// alert(a.join("") ) //可以保留为空，则返回：chaiyulong1122
//
//接下来按这个博客来练习。
// http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449921138898cdeb7fc2214dc08c6c67827758cd2f000
var a = ["chai","yu","long",11,22]
// alert(a.join("/") ) //返回含有分隔符的数组 ：chai/yu/long/11/22
// alert(a.join("") ) //可以保留为空，则返回：chaiyulong1122
数组删除详讲：
数组的删除delete和splice用法区别 https://my.oschina.net/u/583531/blog/1573906
--------------------------------------------------------------------------
【进阶1】JavaScript-for遍历数组添加到指定dom内容中
已有数组遍历
projects=["更换机油","更换机滤","维修发动机","维修钣金"];
for (var i=0;i<projects.length;i++)
{
$("#box1").append(projects[i] + "<br>");
}【进阶2】JavaScript-for-in遍历数组
已有数组遍历
注意以下2种方式的区别：
//输出数组下标
var a = [1, 2, 3];
for (x in a) {
console.log(x);
} |
//输出数组值
var a = [1, 2, 3];
for (x in a) {
console.log(a[x]);
} |
//弹出索引值
// var projects=["更换机油","更换机滤","维修发动机","维修钣金"];
// for(var e in projects){
// alert(e);
// }
//输出数组值
var projects=["更换机油","更换机滤","维修发动机","维修钣金"];
for(var e in projects){
alert(projects[e]); //因为数组访问是用数组名+索引值方式：如 projects[2] 来操作的。
$("#box2").append(projects[e] + "<br>"); //塞进dom中
}【进阶3】从dom中取值---》塞到数组中
js如下
var arr = [] //创建一个空数组
var box_all_li = $(".box ul li")
var box_all_li_len = $(".box ul li").length;
box_all_li_len = box_all_li_len-1
//alert( box_all_li_len )
//alert(box_all_li_len)
// 遍历从dom中取到文本,并追加到数组中
for( var i=0;i<box_all_li_len;i++)
{
//alert($(".box li").eq(i).text()) 取值
arr.push( $(".box ul li").eq(i).text() ) //向数组添加取到的值
}html
<div class="box">
<ul>
<li>空气滤芯</li>
<li>汽油滤清</li>
<li>刹车片</li>
<li>雨刮</li>
<li>轮胎</li>
<li>玻璃水</li>
</ul>
</div>【实例】数组遍历图片展示实例
实例：01
- 遍历取到数组的值；
- 然后全部塞进dom中。
js
$(function(){
function img_show(){
var img_group = ["1","2","3"]
for(var i =0;i<img_group.length;i++){
img ='<img src='+'img/'+img_group[i]+'.jpg>';
$(".box").append(img);
}
}
$(".btn").click(function(){
img_show()
})
})
html
<button class="btn">显示</button>
<div class="box" style="border: 1px solid #000;">
</div>
实例：02
- 图片名称放在数组；
- 按钮上一步下一步获取索引值；
- 然后根据索引值读取数组，
- 通过字符串拼接把改变src
效果如图：
js：
$(function(){
var imgarr = ["fd","jkc","vw","ly"]
var n = 0;
var len = imgarr.length
//alert(len)
$(".btn-next").click(function(){
if(n>=(len-1))
{
return false;
}
//alert("当前下标是："+n)
n++;
var img_src = "img/"+imgarr[n]+".jpg"
$(".img").attr("src",img_src)
})
$(".btn-pre").click(function(){
if(n<=0)
{
return false;
}
n--;
var img_src = "img/"+imgarr[n]+".jpg"
$(".img").attr("src",img_src)
})
})
html
<button class="btn-pre">上一张</button>
<button class="btn-next">下一张</button>
<div class="box" style="border: 1px solid #000;">
<img src="img/fd.jpg" class="img">
</div>
【拓展】jquery对数组的方法
jquery有专门对数组操作的方法：$.each(object, [callback])
/// 专门针对数组的方法
//前面为数组（数组内置），i为数组索引值，n为内容
// $.each( ["超人","熊大","熊二"], function(i, n){
// alert( "它们是" + i + ": " + n );
// });
//通上，但是数组被外置了；这种写法更规范；
var arr = ["超人","熊大","熊二"]
$.each(arr, function(i, n){
alert( n ); //此处只读内容
});
来源：oschina
链接：https://my.oschina.net/u/583531/blog/1525474