妙味课堂:JavaScript初级--第12课：json与数组
1、json数据格式及json语法
<!DOCTYPE html>
<html >
<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 >
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 >
<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 >
<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 >
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 >
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 > 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 >
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>