**说明:**本文并没有对js处理数据进行深究,本人也不是专业前端人员,只是碰到js处理数据时,对当时的处理数据方式进行记录和总结,后续工作中碰到值得记录的会持续更新。
1、字符串转换成对象
代码:
var obj = JSON.parse(data);
console.log(JSON.stringify(data.data));
说明:
①php中json_encode()转换返回给前端页面时,用“.”读取不到,是因为返回的是字符串格式,就是最外层带了引号的json数据格式,可以用var obj = JSON.parse(data);
转换成对象,也可以用tp框架中的$this->ajaxReturn();
②另外在vue中,有时候打印对象或者数组时,可能会出现看不懂其数据结构,可以用console.log(JSON.stringify(data.data));
打印出来,再复制出来,格式化结构。
2、js 判断一个 object 对象是否为空
if (JSON.stringify(data) === '{}') {
return false // 如果为空,返回false,数组可以用同样的判断方式
}
if (Object.keys(object).length === 0) {
return false // 如果为空,返回false,Object.keys(object)会返回一个空数组[]
}
3、数组中添加元素
代码:arr.push();
说明:
可以用arr.push()
,在添加元素之前先确认变量arr是一个数组。可以自己定义var arr = [],并可以在数组中添加对象,例如arr.push({"aa":"bb"})
。
4、读取对象或这数组中的元素
var test = [{"a":"a"},{"b","b"}];
console.log(test[1].b);
console.log(test[1].['b']);//不能用test.1.b
当键名是数字时,不能用“.”点拼接,只能用[]
5、当两个数组要根据各自某一个字段进行排序
举个例子,表格的表头和表中的值,分为了两个数组(如下),表头和表中值要一一对应。另外,在Element的表格组件中,不用排序,其组件已做了排序的工作。
表头1 | 表头2 | 表头3 |
---|---|---|
1 | 2 | 3 |
… | … | … |
数组示例:数组1和数组2要根据key字段一一对应,可以根据这个字段先对两个数组进行排序,然后一一匹配,如冒泡排序等。
[
{
"tabelHeader":"表头1",
"key":"1"
},
{
"tabelHeader":"表头2",
"key":"2"
},
{
"tabelHeader":"表头3",
"key":"3"
}
]
[
{
"value":"2",
"key":"2"
},
{
"value":"1",
"key":"1"
},
{
"value":"3",
"key":"3"
}
]
//根据数组中某个键的值冒泡排序,还有其他更优排序方式,这里不一一示例,可以搜索相关算法排序方式。
function bubbleSort(arr,sortKey) {
//console.time('2.快速排序耗时');
var len = arr.length;
for (var i = 0; i < len; i++) {
for (var j = 0; j < len - 1 - i; j++) {
if (arr[j][sortKey] > arr[j+1][sortKey] ) { //相邻元素两两对比
var temp = arr[j+1]; //元素交换
arr[j+1] = arr[j];
arr[j] = temp;
}
}
}
//console.timeEnd('222222.快速排序耗时');
return arr;
}
6、转义与反转义兼容写法
代码:
//反转义
function HTMLDecode(text) {
var temp = document.createElement("div");
temp.innerHTML = text;
var output = temp.innerText || temp.textContent;
temp = null; return output;
}
//转义
function HTMLEncode(html) {
var temp = document.createElement ("div");
(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
var output = temp.innerHTML;
temp = null;
return output;
}
说明:前端相关朋友说这么写是兼容性写法,我这里就不深究了,亲测可用。
7、剔除数组中的某些元素
目前只找到循环剔除,把需要的元素用push
添加到新的数组中。使用splice
在循环中有问题,个人猜测是键名原因,未做深究,但我个人觉得肯定有更好方式,因为参照其他语言,都有更为简单的方式,知道的朋友请告知下,谢谢。
–更新–今天看到前端人员剔除数组中一些元素时,用到了filter函数,挺好用的。
8、将数组中字符串转换成整型
var arr = ["1","2","3"];
arr = arr.map(function (data) {
return +data;
});//此时arr变成[1,2,3]
map是个好方法,我个人对map理解不深,对其使用有些别扭。
9、判断对象或数组中元素是否存在
typeof data.archiveRecordPage !== undefined
一搬如果typeof后边是表达式,就要用括号括起来,否则不用括起来。另外一般要判断该层级之前的层级也要存在
----更新: hasOwnProperty也可以对象某对象是否存在
10、将时间戳转换为时间格式
在网上找的一个示例,如果是php写的接口,一般是需要在返回的时间戳字段上乘以1000的,java写的接口一般不需要,这个与精确度有关。一个是精确到秒,一个是精确到毫秒。当然,在框架VUE中另有其他写法,这里暂时不做深究。
formatDate(timestamp) {
var date = new Date(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + ' ';
var h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
var m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':';
var s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
return Y+M+D+h+m+s;
},
11、js判断数组中对象里的某一个值是否存在
function isInArray(arr,value){
for(var i = 0; i < arr.length; i++){
if(value === arr[i]['id']){
return true;
}
}
return false;
}
var arr = [{id: "ccjl1"},{id: "ccjl2"},{id: "ccjl3"}];
var test = isInArray(arr,'ccjl1');
console.log(test);