js第十二节-数组的方法
来源:互联网 发布:增值税发票查询平台js 编辑:程序博客网 时间:2024/06/06 05:07
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] +'.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的中级课程,谢谢大家。
- js第十二节-数组的方法
- js数组的方法
- JS数组的方法
- js数组的方法
- js数组的方法
- JS数组的方法
- js数组的方法
- js数组的splice方法
- js Array数组的方法
- js数组的扩展方法
- js数组的splice方法
- js Array数组的方法
- JS数组的遍历方法
- js数组对象的方法
- JS数组的声明方法
- js数组常用的方法
- js数组的forEach()方法
- js中数组的方法
- 链接汇总-Android数据库
- jQuery.ajax 中的error
- 汇编指令(上)
- 过滤器
- 0407学习笔记--return练习
- js第十二节-数组的方法
- 设计模式——单例设计模式
- sp&wp 的三板斧
- 《JAVA并发编程实践》学习笔记(第八.九章)
- 对软件工程需求分析的意见
- 【REACT NATIVE 跨平台应用开发】环境搭建问题记录&&XCODE7模拟器上COMMAND+R失效的几种替换方法
- c++第三次上机-1
- 第68课:SparkSQL JDBC实战详解学习笔记
- anr学习