By welkin

Updated:

Contents

#一、json数据格式及json语法

####一个简单的json

1
2
var json = { name : 'leo', age : 32 };
 alert( json.name );//leo

####将数组改为json

1
2
3
4
5
6
7
8
//数组
var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
//json
var imgData = {
	url : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
	text : [ '小宠物', '图片二', '图片三', '面具' ]
};

####json的访问/读取格式

1
2
3
var json2 = { 'name' : 'miaov' };
 alert( json2.name );
 alert( json2['name'] );

####修改则直接赋值即可

####数组可包括json

var arr = [ { ‘name’ : ‘TM’, ‘age’ : 23 }, { ‘name’ : ‘leo’, ‘age’ : 32 } ];
alert( arr[0].name + ‘今年有’ + arr[1][‘age’] );

#二、for-in 遍历json

1
2
3
4
5
6
var json4 = { 'name' : 'miaov', 'age' : 3, 'fun' : '前端开发'  };

for ( var attr in json4  ) {
	 alert( attr );  //键名
     alert( json4[attr] );   //键值
}

1
2
3
4
5
6
7
8
9
10
var json5 = {
	'url' : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
	'text' : [ '小宠物', '图片二', '图片三', '面具' ]
};

for ( var attr in json5 ) {
	for ( var i=0; i < json5[attr].length; i++ ) {
		alert( json5[attr][i] );  //依次弹出每个键值
	}
}

####for-in可以遍历数组

1
2
3
4
5
var arr = [ 'a', 'b', 'c' ];

for ( var i in arr ) {
	alert( arr[i] );  //a,b,c
}

#三、数组的定义即清空数组效率问题

####定义数组

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

####清空数组
将arr的长度赋为0，则表示清空

1
2
3
4
var arr = [ 'aaa',2,3 ];
 alert( arr.length );			// 3
 arr.length = 0;           
 alert( arr );

####将数组的长度置空也表示清空

arr = [];

####数组长度

1
2
3
4
var arr = new Array(3);
alert( arr.length );//3
var arr = new Array('3');
alert( arr.length );//1

####对于字符串，将字符串长度设为0，无法清空

1
2
3
var str = 'aaaaa';
 str.length = 0;
alert(str);  //aaaaa

#四、数组的四个方法及技巧

###push：添加在数组的后边，其返回值为数组的长度

###unshift：添加在数组的前面，其返回值为数组的长度

###pop：删除数组最后一个，其返回值为删除的

###shift：删除数组前面的一个，其返回值为删除的

####push用法：

1
2
var arr = [ 1,2,3 ];
alert( arr.push( 'abc' ) );//1,2,3,abc

####unshift用法：

1
2
3
var arr = [ 1,2,3 ];
alert( arr.unshift( 0 ) );			// IE 6  7 不支持 unshift 返回值
 alert( arr );//0,1,2,3

####pop用法：

1
2
var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];
 alert( arr.pop() );    //'TM', '钟毅', '张森', '杜鹏'

####shift用法：

1
2
var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];
alert( arr.shift() );    //'钟毅', '张森', '杜鹏', 'Leo'

####数组元素右移

1
2
3
var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];
 arr.unshift(arr.pop()); 
 alert( arr );   //Leo,TM,钟毅,张森,杜鹏

####数组元素左移

1
2
3
var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];
arr.push(arr.shift())
 alert( arr );  //钟毅,张森,杜鹏,Leo,TM

#五、splice方法，数组去重

###solice：删除、替换、添加三种方法都有

####删除：

arr.splice(0,1);//删除第0位，删除1个，其返回值为删除的

####替换：
arr.splice(0,1,’abc’); //将第0位替换1个，替换成为abc

####添加：
arr.splice(1,0,’abc’); //在第1位添加abc

####注意：splice会修改数组长度

###利用splice进行数组去重

1
2
3
4
5
6
7
8
9
10
11
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 );  //1,2,4

#六、JS基础sort排序

####sort()：默认情况下是字符串排序

1
2
3
var arr = [ 'c', 'd', 'a', 'e' ];
 arr.sort();
 alert( arr ); //a,c,d,e

####sort字符串排序的bug

1
2
3
var arr2 = [ 4,3,5,5,76,2,0,8 ];
 arr2.sort();
 alert( arr2 );//0,2,3,4,5,5,76,8

####解决办法

1
2
3
arr2.sort(function ( a, b ) {
	return a - b;  //0,2,3,4,5,5,8,76
});

###注意：b - a 是从大到小排序

1
2
3
4
5
6
7
var arrWidth = [ '345px', '23px', '10px', '1000px' ];

arrWidth.sort(function ( a, b ) {
	return parseInt(a) - parseInt(b);
});

alert( arrWidth ); //10px,23px,345px,1000px

####随机排序

###Math.random()：是0 ~1的随机数

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

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

alert( arr );//将数组随机排序

#七、随机数及随机公式推理过程

###Math.round：四舍五入函数

####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之间的随机数：
alert( Math.round( Math.random()*(y-x) + x ) );

####0 ~ x之间的随机数：
alert( Math.round( Math.random()*x) );

####1 ~ x之间的随机数：
alert( Math.ceil( Math.random()*x) );

####celi：向上取整

#八、contact，reverse

###contact：连接数组

###reverse：颠倒数组元素位置

1
2
3
4
5
var arr1 = [ 1,2,3 ];
var arr2 = [ 4,5,6 ];
var arr3 = [ 7,8,9 ];

alert( arr1.concat( arr2, arr3 ) );//1,2,3,4,5,6,7,8,9

1
2
3
var arr1 = [ 1,2,3,4,5,6 ];
 arr1.reverse();
 alert( arr1 );//6,5,4,3,2,1

####利用数组方法将字符串进行颠倒
首先先将字符串转换为数组，进行颠倒后再转换为字符串

1
2
var str = 'abcdef';
 alert(str.split('').reverse().join(''));//fedcba

Contents