您的位置：首页 > Web前端 > JavaScript

js第十二节-数组的方法

2016-04-08 23:49 489 查看

js第十二节-数组的方法

一、数组的知识点介绍

数组

1.json的格式

var json2 = { 'name' : 'miaov' };

json2.name = '妙味';

json2['name'] = 'miaov';

var json4 = { 'name' : 'miaov', 'age' : 3, 'fun' : '前端开发'  };

for ( var attr in json4  ) {

    // alert( attr );

    // alert( json4[attr] );

}

var json5 = {

    'url' : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],

    'text' : [ '小宠物', '图片二', '图片三', '面具' ]

};

// var arr = [ {}, {}, {} ];

for ( var attr in json5 ) {

    for ( var i=0; i < json5[attr].length; i++ ) {

        alert( json5[attr][i] );

    }

}

2.for-in遍历document

var str = '';

var num = 0;

for ( var attr in document ) {

    str += num + '. ' + attr + ':' +document[attr] + '<br />';

    num ++;

}

document.body.innerHTML = str;

3.数组的for -in

var arr = [ 'a', 'b', 'c' ];

for ( var i in arr ) {

    alert( arr[i] );

}

4.数组定义

1)表现形式

① var arr = [ 1,2,3 ];

②var arr = new Array(1,2,3);

2)数组的清空

①arr.length = 0;

②arr = [];

3)数组的添加方法

①arr.push( 'abc' ) //往数组后面添加

②alert( arr.unshift( 0 ) );// IE 6  7 不支持 unshift 返回值。往数组前面添加

4)数组的删除方法

①alert( arr.pop() );//抛出最后一个元素。返回抛出的元素

②alert( arr.shift() );//抛出最前一个元素。返回抛出的元素

5)数组的循环排队

①arr.unshift(arr.pop());

②arr.push(arr.shift())

6)splice(index,index1,...)

index--->操作的是数组的第几个索引值

index1--->操作的是数组中几位数

...--->表示的是需要改变的数

arr = ['aa','bb','cc'];

①添加

splice(2,0,'dd');

alert(arr)--->aa,bb,dd,cc

②更改

splice(2,1,'dd')

alert(arr)--->aa,bb,dd

③替换

splice(0,2,'dd')

alert(arr);--->dd,cc

④删除

splice(0,1)

alert(arr);--->bb,cc

注意：splice的返回值是其删除的元素

7)数组的去重()

var arr = [ 1,2,2,4,2 ];

for ( var i=0; i<arr.length; i++ ) {

    for ( var j=i+1; j<arr.length; j++ ) {

        if ( arr[i] == arr[j] ) {

            arr.splice( j, 1 );

            j--;

        }

    }

}

alert( arr );

8)sort排序

var arr2 = [ 4,3,5,5,76,2,0,8 ];

arr2.sort(function ( a, b ) {

    return a - b;

});

var arrWidth = [ '345px', '23px', '10px', '1000px' ];

arrWidth.sort(function ( a, b ) {

    return parseInt(a) - parseInt(b);

});

alert( arrWidth );

9)随机排序

var arr = [ 1,2,3,4,5,6,7,8 ];

arr.sort(function ( a, b ) {

    return Math.random() - 0.5;

});

alert( arr );

10)随机函数

/ alert( Math.round(3.4) );

// 0~1 : Math.round(Math.random());

// 0~10

// alert( Math.round(Math.random()*10) );

// 5~10

// alert( Math.round( Math.random()*5 + 5 ) );

// 10~20

// alert( Math.round( Math.random()*10 + 10 ) );

// 20~100

// alert( Math.round( Math.random()*80 + 20 ) );

// x ~ y

var x = 3;

var y = 49;

// alert( Math.round( Math.random()*(y-x) + x ) );

// 0~x

// alert( Math.round( Math.random()*x) );

// 1~x

alert( Math.ceil( Math.random()*x) );

// 课上小练习：

// 随机产生 100 个从 0 ~ 1000 之间不重复的整数

// var str = 'aaasdlfjhasdlkfs';

// indexOf('s') —— 为数组编写该方法：indexOf('img/1.jpg')

11)concat方法

var arr1 = [ 1,2,3 ];

var arr2 = [ 4,5,6 ];

var arr3 = [ 7,8,9 ];

alert( arr1.concat( arr2, arr3 ) );

12)reverse方法以及字符串的反转方法

var arr1 = [ 1,2,3,4,5,6 ];

// arr1.reverse();

// alert( arr1 );

var str = 'abcdef';

// alert(str.split('').reverse().join(''));

二、作业评析

1.自定义字体形状



代码分享：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定义字体形状</title>
<script>
window.onload = function(){
var oP = document.getElementById('op');
var aInput = document.getElementsByTagName('input');
var arr = ['red','blue','yellow','green','#c0c0c0','#cfg'];
var arr1 = [];
aInput[1].onclick = function(){
arr1 = [];
arr1 = aInput[0].value.split('');

for(var i = 0;i < arr1.length;i++ )
arr1[i] = '<span style="background:'+ arr[i%5]+'">'+arr1[i]+'</span>';
alert(arr1);
oP.innerHTML += arr1.join('');

};
};
</script>
<style>
p{margin:0;padding:0;}
#op{width:300px;height:100px;overflow:auto;border:1px solid #000;}
.in1{width:250px;height:30px;}
.in2{width:50px;height:30px;}
</style>
</head>

<body>
<p id='op'></p>
<input type='text' class='in1'/><input type='button' value='提交' class='in2'/>
</body>
</html>

2.图片排序



代码分享：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>排序</title>
<script>
window.onload = function(){
var oBtn1 = document.getElementById('bt1');
var oBtn2 = document.getElementById('bt2');
var oWrap = document.getElementById('wrap');
var aImg = oWrap.getElementsByTagName('img');
var arr = [1,2,3,4];
for(var i = 0;i < arr.length;i++){
aImg[i].src = 'img/'+ arr[i] +'.jpg'
}
oBtn1.onclick = function(){
arr.sort(function(a,b){
return b - a;
});

for(var i = 0;i < arr.length;i++){
aImg[i].src = 'img/'+ arr[i] +
9e75
'.jpg'
}
};

oBtn2.onclick = function(){
arr.sort(function(a,b){
return Math.random() - 0.5;;
});

for(var i = 0;i < arr.length;i++){
aImg[i].src = 'img/'+ arr[i] +'.jpg'
}
};
};
</script>
</head>

<body>
<span id='bt1' style="background:red;cursor:pointer;">从大到小排列</span>     <span id='bt2' style="background:red;cursor:pointer;">乱序</span>
<div id='wrap' style="width:850px;border:1px solid #c0c0c0;">
<img src='' style="width:200px;height:100px; border:1px solid #000;" />
<img src='' style="width:200px;height:100px; border:1px solid #000;" />
<img src='' style="width:200px;height:100px; border:1px solid #000;" />
<img src='' style="width:200px;height:100px; border:1px solid #000;" />
</div>
</body>
</html>
</span>       这一节是我们js基础部分的最后一节，陈明吕老师很高兴的告诉大家，你们的js基础部分已经学完了，后面我们将带大家一起进入js的中级部分，后续陈明吕老师会继续更新js的中级课程，谢谢大家。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 前端js学习 梦想创业俱乐部 陈明吕 js数组的应用
相关文章推荐
新的分享
章节导航