一、数组
- 1.1、数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的
- 1.2、定义数组的方法
//对象的实例创建 var aList = new Array(1,2,3); //直接量创建 var aList2 = [1,2,3,'asd'];
- 1.3、操作数组中数据的方法
- <1>、获取数组的长度:aList.length;
var aList = [1,2,3,4,5]; alert(aList.length); // 弹出5
- <2>、用下标操作数组的某个数据:aList[3];
var aList = [1,2,3,4]; alert(aList[3]); // 弹出4
- <3>、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4]; alert(aList.join('-')); // 弹出 1-2-3-4
- <4>、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4]; aList.push(5); alert(aList); //弹出1,2,3,4,5 aList.pop(); alert(aList); // 弹出1,2,3,4
- <5>、unshift()和 shift() 从数组前面增加成员或删除成员
var aList = [1,2,3,4]; aList.unshift(5); alert(aList); //弹出5,1,2,3,4 aList.shift(); alert(aList); // 弹出1,2,3,4
- <6>、reverse() 将数组反转
var aList = [1,2,3,4]; aList.reverse(); alert(aList); // 弹出4,3,2,1
- <7>、indexOf() 返回数组中元素第一次出现的索引值(也就是数组中有多个相同的元素,在相同的元素中第一次出现的元素的索引值),如下面的4,第一次出现是索引值
3
,后面4
的indexOf()返回值都是3
var aList = [1,2,3,4,1,3,4,5,8,9,4]; alert(aList.indexOf(4));
- <8>、splice() 在数组中增加或删除成员
var aList = [1,2,3,4]; aList.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素 alert(aList); //弹出 1,2,7,8,9,4
- 1.4、多维数组:多维数组指的是数组的成员也是数组的数组
var aList = [[1,2,3],['a','b','c']]; alert(aList[0][1]); //弹出2;
二、循环语句:程序中进行有规律的重复性操作,需要用到循环语句
- 2.1、for循环
for(var i=0;i<len;i++) { ...... }
- 2.2、数组去重(利用
indexOf()
返回数组中元素第一次出现的索引值)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组去重练习</title> <script type="text/javascript"> var aList = [1,2,3,4,1,3,4,5,8,9,4]; var aList2 = []; for(var i=0;i<aList.length;i++) { if(aList.indexOf(aList[i])==i) { aList2.push(aList[I]); } } alert(aList2); </script> </head> <body> </body> </html>
- 2.3、将数组中的数据放入到页面中的列表中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>将数组中的数据放入到页面中的列表中</title> <script type="text/javascript"> window.onload = function () { var oUl = document.getElementById('list1'); var aList = ['美人鱼','疯狂的动物城','侠岚']; var iLen = aList.length; var sTr = ''; for (var i=0;i<iLen;i++){ sTr += '<li>' + aList[i] + '</li>'; } oUl.innerHTML = sTr; } </script> <style type="text/css"> .list{ list-style: none; margin: 50px auto 0; padding: 0px; width: 300px; height: 305px; } .list li{ height: 60px; border-bottom: 1px dotted #000; line-height: 60px; font-size: 16px; } </style> </head> <body> <ul id="list" id="list1"> <li>小孩儿</li> <li>小孩儿</li> <li>小孩儿</li> </ul> </body> </html>