• 保存到桌面  加入收藏  设为首页
HTML5

js-json、数组相关操作

时间:2017-09-19 16:42:49   作者:江节胜   来源:胜行天下   阅读:394   评论:0
一、json与字符串相互转换
字符串对象:(注意key值不加引号)
var jsonString = {
key1 : 'value1',
key2 : 'value2'
} ;

JSON.stringify(jsonObj);//json转字符串
JSON.parse(jsonString);//字符串转JSON


二、json与数组组合数据
var arr1 = []; //定义一个数组对象
arr1.push({ index: 1, value: '111' });
arr1.push({ index: 2, value: '222' });
var arr2 = [];
arr2.push({ index: 1, value: '1111' });
arr2.push({ index: 2, value: '2222' });

console.log("test arr1[0]相关数据 index=" + arr1[0].index);
console.log("test arr1[0]相关数据 value=" + arr1[0].value);
var jsonobj = {}; //定义一个json对象
jsonobj.res = false;
jsonobj.arr1 = arr1;
jsonobj.arr2 = arr2;

console.log("json转字符串=" + JSON.stringify(jsonobj));
/*console.log("字符串转JSON=" + JSON.parse(jsonString));*/
打印:
login.html:269 test arr1[0]相关数据 value=111
login.html:275 json转字符串={"res":false,"arr1":[{"index":1,"value":"111"},{"index":2,"value":"222"}],"arr2":[{"index":1,"value":"1111"},{"index":2,"value":"2222"}]}


三、数组push添加元素:
var arrayObj = [ ];//定义数组
arrayObj.push({ name: "key" + index, path: "value" });//键值对方式
arrayObj.push(‘value1’,‘value2’);//都是值


四、数组删除元素:
var textArr = ['a','b','c','d'];
这时我想删除这个数组中的b元素:
   方法一:delete 删除数组
       delete textArr[1]  结果为: ["a",undefined,"c","d"]   
      只是被删除的元素变成了 undefined 其他的元素的键值还是不变。
  方法二:aplice 删除数组
     splice(index,len,[item])    注释:该方法会改变原始数组。
      index:数组开始下标        len: 替换/删除的长度       item:替换的值,删除操作的话 item为空
     textArr.splice(1,1);  结果为:["a","c","d"] 直接删除了数组 改变了数组的值。


五、清空数组
arrayObj.splice(0, arrayObj.length);


六、使用jQuery取data值并排序
 	//数组遍历及排序
  var arr = [];
  $(".ping").each(function(){
  arr.push($(this).attr("data_order"));
   });
  arr.sort();

  //根据业务需求自定义排序规则
  function sortNumber(a,b){
  return a - b
  }
  arr.sort(sortNumber);


七、数组中去除重复数据(过滤)
	/**
 	* 去除重复数组
 	*/
	function filterRepeat(filesArr) {
 
		for(var i = 0; i < filesArr.length - 1; i++) {
			for(var j = i + 1; j < filesArr.length; j++) {
				if(filesArr[i].path == filesArr[j].path) { !!!path换成要需要判断的key
				filesArr.splice(j, 1);
				filterRepeat(filesArr);//递归调用
			}
		}
	  }
	  return filesArr;
 	}


八、第二个数组中去除第一个数组中已存在的数据(如果是json数组,注意加上json key,暂不适合做公共方法)
			var arr = [22,33];
			var arrDest = [11, 22, 33];

			function filterArrayExceptFirst(arr, arrDest) {
				for(var i = 0, leni = arr.length; i < leni; i++) {
					splicedata(arr[i], arrDest);//arr[i] 根据需要需求加 json key
				}
				return arrDest;
			}
			function splicedata(arrdata, arrDest) {
				if(!arrDest) {
					return;
				}
				for(var j = 0, lenj = arrDest.length; j < lenj; j++) {
				  if(!arrDest || !arrDest[j]) {
				    return;
				  }
				  console.log("-----" + JSON.stringify(arrDest[j]));
				if(arrdata == arrDest[j]) {//arrDest[j] 根据需要需求加 json key
				  arrDest = arrDest.splice(j, 1);
				  console.log("-----" + j);
				  splicedata(arrDest);
				}
			   }
			}
			console.log("-----" + filterArrayExceptFirst(arr, arrDest));


九、关于json中动态设置key值的说明(相当于把{}转成数组了?)
	key值动态设置用[ ],取值也用[ ]
	var jsonobj = {};
	var keyobj="thisiskey";
	jsonobj[keyobj] ="this is value";
	
	console.log('test:' + jsonobj.thisiskey);
	var keynew = getKey(keyobj);
	console.log('test:' + jsonobj[keynew]);

	function getKey(p) {
		if(p.indexOf('"') == 0) {
			return p.substring(0, p.length);
		} else {
			return p;
		}
	}
	 
	补充:在js操作style时, xxxObj.style.width="20"+px;
	也可以使用 xxxObj.style["width"] ="20" +px;
	html中的DOM对象实质就是json对象

	遍历json使用 for-in,(扩展:php中使用for-as)
	var  json = {a:12,b:34};
	for(var index in json ){
	     console.log("the key:"+index+",the value:"+json[index ]); 
	}

十、数组合并相关
 
    1、concat
    js的Array对象提供了一个叫concat()方法,连接两个或更多的数组,并返回结果。 
	var c = a.concat(b);
  2、for循环
    大概的思路是:遍历其中一个数组,把该数组中的所有元素依次添加到另外一个数组中。直接上代码:

	for(var i in b){
    a.push(b[i]);
}

    这样的写法可以解决第一种方案中对内存的浪费,但是会有另一个问题:丑!这么说不是没有道理,如果能只用一行代码就搞定,岂不快哉~
  3、apply
    函数的apply方法有一个特性,那就是func.apply(obj,argv),argv是一个数组。所以我们可以利用这点,直接上代码:

	a.push.apply(a,b);

    调用a.push这个函数实例的apply方法,同时把,b当作参数传入,这样a.push这个方法就会遍历b数组的所有元素,达到合并的效果。
    这里可能有点绕,我们可以把b看成[4,5,6],变成这样:

	a.push.apply(a,[4,5,6]);

    然后上面的操作就等同于:

	a.push(4,5,6);

    这样就很清楚了!
  另外,还要注意两个小问题:
  1)以上3种合并方法并没有考虑过a、b两个数组谁的长度更小。
  所以好的做法是预先判断a、b两个数组哪个更大,然后使用大数组合并小数组,这样就减少了数组元素操作的次数!
  2)有时候我们不希望原数组(a、b)改变,这时就只能使用concat了。


十一、json数组排序(苹果环境下 sort方法无效,需要重写)
	var data = [ {"key":"a"}, {"key":"b"}, {"key":"c"}]

	data.sort( function(a,b){//data此时已经是排序后的对象
	return a.key-b.key;//字符号好像不需要强制转成int,结果: -1 0 1(要通过计算返回取到 -1 0 1)
	});
     示例:
     function _sortData(data) {
	if(!data) {
		return data;
	}
	//按照时间和_stateflag值都降序排列,最终只要一个return
	data.sort(function(a, b) { //data此时已经是排序后的对象
		var _stateflag = _getstateflag(b.ManTaskState, a.TaskState);
		if(checkDateValid(b.TaskDealDatetime, a.TaskDealDatetime) && _stateflag == 0) {
			return -1;
		} else if(checkDateValid(b.TaskDealDatetime, a.TaskDealDatetime) == false && _stateflag == 2) {
			return 1;
		} else {//加上&&条件,让整体判断有机会往下走
			if(_stateflag == 0) { 
				return -1;
			} else if(_stateflag == 1) {
				return 0;
			} else { //2
				return 1;
			}
		}
	});
     }
     更多访问 http://blog.csdn.net/salonzhou/article/details/50801745


     重写sort方法:
     ;(function(w) {
	var _sort = Array.prototype.sort;
	Array.prototype.sort = function(fn) {
		if(!!fn && typeof fn === 'function') {
			if(this.length < 2) return this;
			var i = 0,
				j = i + 1,
				l = this.length,
				tmp, r = false,
				t = 0;
			for(; i < l; i++) {
				for(j = i + 1; j < l; j++) {
					t = fn.call(this, this[i], this[j]);
					r = (typeof t === 'number' ? t : !!t ? 1 : 0) > 0 ? true : false;
					if(r) {
						tmp = this[i];
						this[i] = this[j];
						this[j] = tmp;
					}
				}
			}
			return this;
		} else {
			return _sort.call(this);
		}
	};
     })(window);


十二、把一个数组赋值另一个数组
	arr1 = arr2;//某些情况会出错
	优化: 
	arr1= arr2.slice(); //使用前不要对arr1 splice清空数组 
		            //注意arr2是数据源,不要写成arr1= arr1.slice(arr2)!


有任何疑问或技术合作都可联系我

微信:yanfahezuo 【推荐】

QQ:596957738


标签:js  json  数组  
相关评论

加我微信 596957738 (QQ同号)加我微信     QQ联系:596957738    地址:江苏省南京市浦口区

苏ICP备2023050353号

   

苏公网安备32011402010305号

江节胜的Gitee,江节胜的Git地址