1、json数据格式及json语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var arr1 = [ 1,2,3 ]; var arr2 = [ 4,5,6 ]; var arr3 = [ 7,8,9 ]; alert( arr1.concat( arr2, arr3 ) ); var arr1 = [ 1,2,3,4,5,6 ]; // arr1.reverse(); //可以运用这个反转字符串。先字符串转换为数组，翻转后，在变成字符串 var str = 'abcdef'; // alert(str.split('').reverse().join('')); // 课上小练习： // 随机产生 100 个从 0 ~ 1000 之间不重复的整数 // var str = 'aaasdlfjhasdlkfs'; // indexOf('s') —— 为数组编写该方法：indexOf('img/1.jpg') </body> </html>
2、for-in遍历json
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 var json4 = { 'name' : 'miaov', 'age' : 3, 'fun' : '前端开发' }; 10 11 for ( var attr in json4 ) { 12 // alert(attr) //找到键名 13 alert( json4[attr] );//找到值 attr加''就代表访问json里attr属性的值，不加引号就是遍历，找子集 14 } 15 16 17 //for in 里可以嵌套for循环 18 var json5 = { 19 'url' : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ], 20 'text' : [ '小宠物', '图片二', '图片三', '面具' ] 21 }; 22 for ( var attr in json5 ) { 23 for ( var i=0; i < json5[attr].length; i++ ) { 24 alert( json5[attr][i] ); 25 } 26 } 27 </script> 28 </body> 29 </html>
3、for-in遍历对象属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var str = ''; var num = 0; for ( var attr in document ) { str += num + '. ' + attr + ':' +document[attr] + '<br />'; num ++; } document.body.innerHTML = str; </script> </body> </html>
4、关于for循环和for-in的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var json = { 'url' : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ], 'text' : [ '小宠物', '图片二', '图片三', '面具' ] }; alert(json.length) //undefined json没有长度属性 不能使用for循环 var arr = [ 'a', 'b', 'c' ]; //数字可以使用for循环也可以使用for in for ( var i in arr ) { alert( arr[i] ); } </script> </body> </html>
5、数组的定义及清空数组效率问题
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 var arr = [ 1,2,3 ]; 10 var arr = new Array(1,2,3); //数组的对象定义 11 alert( arr ); 12 13 // var arr = new Array(3); //解析成长度为3 14 // var arr = new Array('3'); 15 // alert( arr.length ); //解析成长度为1 16 17 //数组的长度可以读 也可以写 18 var arr = [ 'aaa',2,3 ]; 19 // alert( arr.length ); // 3 20 // arr.length = 0; //清空了数组 21 // arr = []; //效率高点 22 23 //字符串长度是不能写的 24 var str = 'aaaaa'; 25 // str.length = 1; 26 alert(str.length); 27 28 29 </script> 30 </body> 31 </html>
6、数组方法与技巧
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 //1数组的添加 10 var arr = [ 1,2,3 ]; 11 // alert( arr.push( 'abc' ) ); //往数组的最后一位添加 返回值是数组新的长度 12 //往数组前面添加 13 arr.unshift( 0 ) 14 // alert( arr.unshift( 0 ) ); //返回值也是数组新的长度4 IE 6 7 不支持 unshift 返回值 15 16 //2数组的删除 17 var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ]; 18 // alert( arr.pop() ); //删除最后一个 19 // alert( arr ); 20 alert( arr.shift() ); //删除最前面的一个 21 // arr.shift(); 22 alert( arr ); 23 24 //3数组排队走 25 // arr.unshift(arr.pop()); //把最后一个扔到开头 26 // arr.unshift(arr.pop()); 27 28 arr.push(arr.shift()) //把最前面的扔到后面 29 30 // alert( arr ); 31 32 //4、数组的删除、替换、添加 33 34 arr.splice( 0, 2) //从第0位开始删除2个 返回值是删除的两个值 35 arr.splice( 0, 1,'mm') //mm替换了第一个 返回值是被替换的值 36 arr.splice( 1, 0, '钟毅媳妇儿~', '钟毅媳妇们~' ) //往第一个位置塞 37 38 //5、数组去重 39 var arr = [ 1,2,2,4,2 ]; 40 41 for ( var i=0; i<arr.length; i++ ) { 42 for ( var j=i+1; j<arr.length; j++ ) { 43 if ( arr[i] == arr[j] ) { //第一个与第二个比较，相等就干掉一个 44 arr.splice( j, 1 ); 45 j--; 46 } 47 } 48 } 49 alert( arr ); 50 //6、数组排序 51 var arr = [ 'c', 'd', 'a', 'e' ]; 52 arr.sort(); //按照字符的编码排序 53 var arr2 = [ 4,3,5,5,76,2,0,8 ]; 54 arr2.sort();//先按字符串的方式比较'76'与8比较，7<8 需设置个函数 55 arr2.sort(function ( a, b ) { 56 return a - b; //由小到大排序 如果是整数就换下位置 57 }); 58 // alert( arr2 ); 59 60 //字符串式比较 61 var arrWidth = [ '345px', '23px', '10px', '1000px' ]; 62 arrWidth.sort(function ( a, b ) { 63 return parseInt(a) - parseInt(b); 64 }); 65 alert( arrWidth ); 66 //7、数组随机排序 67 var arr = [ 1,2,3,4,5,6,7,8 ]; 68 arr.sort(function ( a, b ) { 69 return Math.random() - 0.5;//正值交换负值 70 }); 71 alert( arr ); 72 73 // alert( Math.random() );//返回0-1之间的数字 74 75 </script> 76 </body> 77 </html>
7、随机函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <script> 10 // alert( Math.round(3.4) ); //四舍五入 11 // 0~1 : Math.round(Math.random()); //0 1随机 12 13 // alert( Math.round(Math.random()*10) ); //0-10之间随机数 14 15 16 // alert( Math.round( Math.random()*5 + 5 ) ); // 5~10之间随机数 17 18 19 // alert( Math.round( Math.random()*10 + 10 ) ); // 10~20之间随机数 20 21 22 // alert( Math.round( Math.random()*80 + 20 ) ); // 20~100之间随机数 23 24 // x ~ y 25 var x = 3; 26 var y = 49; 27 // alert( Math.round( Math.random()*(y-x) + x ) ); //可以返回x-y之间的随机数 28 29 // alert( Math.round( Math.random()*x) ); //0~x之间的随机数 30 31 alert( Math.ceil( Math.random()*x) ); //1~x之间的随机数 32 33 34 35 36 </script> 37 38 39 </body> 40 </html>
8、链接数组contact与反转数组reverse
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 10 var arr1 = [ 1,2,3 ]; 11 var arr2 = [ 4,5,6 ]; 12 var arr3 = [ 7,8,9 ]; 13 14 alert( arr1.concat( arr2, arr3 ) ); 15 var arr1 = [ 1,2,3,4,5,6 ]; 16 17 // arr1.reverse(); 18 //可以运用这个反转字符串。先字符串转换为数组，翻转后，在变成字符串 19 var str = 'abcdef'; 20 // alert(str.split('').reverse().join('')); 21 22 23 24 // 课上小练习： 25 // 随机产生 100 个从 0 ~ 1000 之间不重复的整数 26 // var str = 'aaasdlfjhasdlkfs'; 27 // indexOf('s') —— 为数组编写该方法：indexOf('img/1.jpg') 28 29 </body> 30 </html>