前端常用的数据处理（基础版）

1、字符串、数组互转

//字符串转数组
let str = '一公司，二公司，三公司';
console.log(str.split(',')); //['一公司，二公司，三公司']
// console.log(Array.from(str));
// console.log([...str]);

//数组转字符串
let strArr = ['一公司','二公司','三公司'];
console.log(strArr.join());//一公司,二公司,三公司
// console.log(strArr.toString());

2、数组、对象互转

//数组转对象
const arr = [
  { label: '男', value: 0 },
  { label: '女', value: 1 }
];
const arrObj = {};
for(let i = 0; i < arr.length; i++) {
   arrObj[arr[i].value] = arr[i].label;
}
console.log(arrObj);
//{0: '男', 1: '女'}

//对象转数组
const obj = { 0: '男', 1: '女' };
let objArr = [];
for (let key in obj) {
   objArr.push({ label: obj[key], value: +key })
}
console.log(objArr);

3、数组合并、对象合并

//数组合并
let m1 = ['js', 'es', 'ts'], m2 = ['vue','react'];
let mergeM = m1.concat(m2);
console.log(mergeM);
//['js', 'es', 'ts', 'vue', 'react']

//对象合并
let o1 = { a: 1, b: 2 }, o2 = { c: 3, d: 4 };
let mergeO = Object.assign(o1, o2);
console.log(mergeO);
//{a: 1, b: 2, c: 3, d: 4}

4、判断是否是空数组、空对象

//判断是否是空数组
let a1 = [], a2 = [1,2,3];
function isArray(arr) {
     if (arr instanceof Array && arr.length === 0) return true;
     return false;
}
console.log(isArray(a1));//true
console.log(isArray(a2));//false

//判断是否是空对象-利用hasOwnProperty
let u1 = {}, u2 = { p:9 };
function isObject(obj) {
     for(let key in obj) {
        //如果有key属性代表不是一个空对象，返回false
    if (obj.hasOwnProperty(key)) return false;
     }
     return true;
}
console.log(isObject(u1));//true
console.log(isObject(u2));//false
 
//判断是否是空对象-利用Object.keys
function isObject2(obj) {
     if (Object.keys(obj).length === 0) return true;
     return false;
}
console.log(isObject2(u1));//true
console.log(isObject2(u2));//false

5、将时间戳转成日期格式

function getExactTime(time) {
    //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    // var date = new Date(time);
    var date = new Date(time * 1000);
    var year = date.getFullYear() + '年';
    var month =  (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
    var day = date.getHours() + '日';
    var hour = date.getDate() + '时';
    var min = date.getMinutes() + '分';
    var second = date.getSeconds() + '秒';
    return year + month + day + hour + min + second;
}
console.log(getExactTime(1651373079));
//2022年05月10日1时44分39秒

6、数组去重

//第一种
let fiveNumber = [1,2,3,3,2,1,1,2,3,4,5,6,7];
function unique1(fiveNumber) {
    let s = new Set(fiveNumber);
    return Array.from(s);
}
function unique2(fiveNumber){
  return fiveNumber.reduce((pre, cur) => {
    return pre.includes(cur) ? pre : pre.concat(cur);
  }, [])
}
console.log(unique1(fiveNumber));
console.log(unique2(fiveNumber));
//[1, 2, 3, 4, 5, 6, 7]
 
//第二种
const jordan = [
    { goodsId: '1', user: 'jack', uniId: 20 },
    { goodsId: '2', user: 'tom', uniId: 20 },
    { goodsId: '1', user: 'jack', uniId: 20 },
    { goodsId: '3', user: 'rose', uniId: 20 },
    { goodsId: '1', user: 'jack', uniId: 20 },
]
function uniqueJordan(jordan) {
    let obj = {};
    return jordan.reduce((pre, cur) => {
        obj[cur.goodsId]  ? '' : obj[cur.goodsId] = true && pre.push(cur);
        return pre;
    }, [])
}
console.log(uniqueJordan(jordan))

7、数组扁平化

let six = [1, [2, [3, 4]],[5,6],[7]];
function flatten(six) {
    return six.reduce((pre, cur) => {
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
    }, [])
}
console.log(flatten(six));
//[1, 2, 3, 4, 5, 6, 7]

8、数字千分位格式化

let n = '1234567';
function formatNum(n) {
    return n.split('').reverse().reduce((cur, next, index) => {
        //看index是否能被3整除
        return ((index % 3) ? next : (next + ',')) + cur
    })
}
console.log(formatNum(n));//1,234,567

9、url参数转对象

let query = 'http://www.bd.com/?user=rose&id=123&pid=01&city=beijing';
function getQueryParams(query) {
    /*
    ?user=rose&id=123&pid=01&city=beijing
    [?&]        带有?和&的
    [^?&]+=     非问号&号的（多个）和等号
    */
    const result = {};
    const reg = /[?&][^?&]+=[^?&]+/g;
    const found = query.match(reg);
    if (found) {
        found.forEach(item => {
            let temp = item.substring(1).split('=');
            console.log(temp, 'LOG')
            let key = temp[0], val = temp[1];
            result[key] = val;
        })
    }
    return result;
}
console.log(getQueryParams(query));
//{user: 'rose', id: '123', pid: '01', city: 'beijing'}

10、一维数组转树形结构

let data = [
    { id: 1, parent: null, text: '菜单1' },
    { id: 11, parent: 1, text: '菜单1-1' },
    { id: 12, parent: 1, text: '菜单1-2' },
    { id: 2, parent: null, text: '菜单2' },
    { id: 21, parent: 2, text: '菜单2-1' },
    { id: 22, parent: 2, text: '菜单2-2' }
]
function jsonTree(data, p, list) {
    for (let item of data) {
        if (item.parent == p) list.push(item);
    }
    console.log(list, '-----')
    for (let i of list) {
        i.children = [];
        //递归
        jsonTree(data, i.id, i.children);
        if(i.children.length == 0) delete i.children;
    }
    return list;
}
//调用的三个参数分别为源数据、父级节点的标识、默认[]
//jsonTree(data, null, []);
console.log(jsonTree(data, null, []));