JavaScript基础（五）json、for in、数组操作

json

var json = {
	name: 'test',
	age: 0,
	say: function(){
		alert('abc');
	},
	obj: {
		hobby: [0, 1, 2]
	},
	'a.b': 'csdn'
};
alert(json.name+'===='+json.say());
// 输出结果  abc
//         test undefined
alert(json['a.b']);

for in

可以用来遍历数组或json对象

for(var key in json){
	// console.log(typeof key);
	alert(key+'===='+json[key]);
	// 输出结果 name====test
	//          age====0
	//          say====function(){alert('abc')}
	//          obj====[object Object]
	//          a.b====csdn
}

小案例：简单封装jQuery的css方法

<div id="box"></div>
window.onload = function(){
	var oBox = document.getElementById('box');
	oBox.css({
		width: 100,
	height: '100px',
	border: '1px solid red',
	background: 'yellow'
	});

}

Object.prototype.css = function(json){
	for(var key in json){
		var value = json[key];
		if(typeof value==='number'){
			value = value + 'px';						
		}
		this.style[key] = value;
	}
}

数组

数组的基本用法

var arr = [1, 3, '4', function(){alert(12)}, undefined, {}, null];
// alert(arr); // 1,3,4,function(){alert(12)},,[object Object],
alert(arr.length); // 7

var a = [1, 2, 3];
var b = new Array(3); // *,*,*
var c = new Array(3, 2); // 3, 2
alert(a);	// 1, 2, 3
alert(b);	// ,,
alert(c);	// 3, 2

var a = 'yw';
var b = 10;
var c = false;
var d = [1, 3, 5];
var arr = [a, b, c, d];
alert(arr); // yw,10,false,1,3,5b
alert(arr.length); // 4

var arr = ['a', 'b', 'c'];
// arr[1] = 'd';
// alert(arr); // a,d,c
arr = ['a', 'b', 'c'];
// arr[3] = 'f';
// alert(arr); // a,b,c,f
arr = ['a', 'b', 'c'];
arr[5] = 'g';
alert(arr); // a,b,c,,,g

var arr = ['a', 'b', 'c'];
delete arr[1];
console.log(arr, arr.length); // ["a", empty, "c"] 3
// 数组清空
arr = [];

数组的常用方法

push

var arr = [1, 2, 3];
// 添加数组元素的方法
// push：在数组末尾添加
arr.push(4);
alert(arr); // 1,2,3,4

unshift

var arr = [1, 2, 3];
// unshift：在数组头部添加
arr.unshift(4);
alert(arr); // 4,1,2,3

delete

var arr = [1, 2, 3];
// 删除数组元素的方法
// delete：delete arr[index] 逻辑删除 只是删除了值，还占住了坑
delete arr[1];
console.log(arr); // [1, empty, 3]

pop

var arr = [1, 2, 3];
// pop：物理删除，删除末尾的最后一个元素，并且返回删除的元素
var a = arr.pop();
alert(arr); // 1,2
alert(a); // 3

shift

var arr = [1, 2, 3];
// shift：物理删除，删除开始的一个元素，并且返回删除的元素
var a = arr.shift();
alert(arr); // 2,3
alert(a); // 1

splice

// splice
arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
// 一个参数
// 若参数为正，索引以及索引后面的元素全部删除
// 若参数为负，且绝对值小于或等于数组长度的时候，参数=length+参数，然后遵从第一条规则；如果参数绝对值大于长度，参数=0
console.log(arr.splice(2), arr); // 输出结果：[2, 3, 4, 5, 6, 7, 8, 9]    [0, 1]
console.log(arr.splice(0), arr); // 输出结果：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]    []
console.log(arr.splice(100), arr); // 输出结果：[]   [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr.splice(-2), arr); // 10-2==>8 ==>输出结果：[8, 9]    [0, 1, 2, 3, 4, 5, 6, 7]
console.log(arr.splice(-11), arr); // |-11| > length=10 ===> -11=>0 ==>输出结果：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]    []
// 两个参数
// 一参：剪切索引位置，二参：剪切个数，
// 如果一参<0，按照一个参数为负数情况进行处理，后面参数还是代表删除的个数
console.log(arr.splice(1, 3), arr); // 从索引1位置开始剪切掉3个元素  ==> [1, 2, 3]   [0, 4, 5, 6, 7, 8, 9]
console.log(arr.splice(4, -1), arr); // 从索引4位置开始剪切掉-1个元素  ==> []   [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// 三个参数
// 一参：剪切索引位置，二参：剪切个数，三参及以后：替换的元素
console.log(arr.splice(0, 1, 'a'), arr); // [0]   ["a", 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr.splice(2, 2, 'a'), arr); // [2, 3]   [0, 1, "a", 4, 5, 6, 7, 8, 9]
console.log(arr.splice(2, 2, 'a', 'b', 'c', 'd'), arr); // [2, 3]   [0, 1, "a", "b", "c", "d", 4, 5, 6, 7, 8, 9]

数组的其他方法

sort

// sort：排序
arr.sort();
// 字符（ascii）编码进行排序
console.log(arr); // [0, 2, 4, 5, "a", "b", "c", "d", "e"]

isArray

// Array.isArray()：判断是否是数组 但是IE678不兼容
// console.log( Array.isArray(arr) ); // true
// 自己封装数组判断方法
function isArray(param){
	return typeof param=='object' &&
	param.constructor.toString().toLowerCase().indexOf('array')!=-1;
}
console.log( isArray(arr) ); // true

reverse

// 数组的反转
arr.reverse();
console.log(arr); // [2, 4, 5, 0, "c", "b", "a", "e", "d"]

sort升级

arr = [1, 2, 3, 5, 4, 78, 69, 48];
// 数字排序
// 升序
arr.sort(function(a, b){
	return a-b;
});
console.log(arr); // [1, 2, 3, 4, 5, 48, 69, 78]
// 降序
arr.sort(function(a, b){
	return b-a;
});
console.log(arr); // [78, 69, 48, 5, 4, 3, 2, 1]

// 对象排序
var json1 = {name: 'a', age: 18};
var json2 = {name: 'b', age: 23};
var json3 = {name: 'c', age: 3};
var arr = [];
arr.push(json1, json2, json3);
arr.sort(function(a, b){
	var ageA = a.age;
	var ageB = b.age;
	return ageA - ageB;
});
console.log(JSON.stringify(arr)); // [{"name":"c","age":3},{"name":"a","age":18},{"name":"b","age":23}]

排序的应用-input输入框排序

<div id="box">
	<input type="text" value="5" oid="1">
	<input type="text" value="3" oid="2">
	<input type="text" value="1" oid="3">
	<input type="text" value="2" oid="4">
	<input type="text" value="4" oid="5">
</div>
<input type="button" value="排序" id="btn">

window.onload = function(){
	var oBtn = document.getElementById('btn');
	oBtn.onclick = function(){
		sort();
	}
}
function sort(){
	var oBox = document.getElementById('box');
	// var inputs = oBox.getElementsByTagName('input');
	var inputs = oBox.children;
	var arr = [];
	var len = inputs.length;
	for(var i=0; i<len; i++){
		arr.push(inputs[i]);
	}
	arr.sort(function(a, b){
		return a.value - b.value;
	});
	oBox.innerHTML = '';
	for(var i=0; i<len; i++){
		oBox.appendChild(arr[i]);
	}
};