Jacinda

Appearance

On this page
🎨 作者：Jacinda 📔 阅读量：

总结，关于对象的相关方法 ​

键值对处理 ​

主要是针对接口返回值类型，对数据做处理

有时候会遇到后端返回数据是 obj 类型，并且 key 值，带中文。

js
{
    温度： 25，
    氮： 10
    ...
}

数据格式 ​

在 data 中先定义好的数据格式 （以便于空的值需要通过后端，把值填入进去）

javascript
monitorDataList: [
    [
        { key: '气压', value: '' },
        { key: '光照', value: '' },
        { key: '气温', value: '' },
        { key: '风向', value: '' },
        { key: '风速', value: '' },
    ],
    [
        { key: '氮', value: '' },
        { key: '磷', value: '' },
        { key: '钾', value: '' },
        { key: 'PH值', value: '' },
    ],
    [
        { key: '电导率', value: '' },
        { key: '土壤温度', value: '' },
        { key: '土壤湿度', value: '' },
        { key: '空气湿度', value: '' },
        { key: '5分钟时段雨量', value: '' },
    ],
],

处理方法 ​

javascript
getObjectValue(obj) {
    // 获取 key 值
    let arr = Object.keys(obj);
    arr.forEach( (item,index) => {
        // 这里打印出来的 item，就是键值对的 key 值
        // console.log(item)
        // 下面这步，主要是对 data 中 已经写好数据格式做遍历
        this.monitorDataList.forEach( (child,childIndex) => {
            child.forEach( (sec,secIndex) => {
                //判断每一项的名称是否相等，相等就把后端获取的值赋值进去
                if(sec.key == item) {
                    // obj[item] 拿键值对的 value 值
                    sec.value = obj[item];
                }
            })
        })
    })
}

Object.assign() 对象合并 ​

可以实现对象的合并

Object.assign(target, ...sources) 会将逗号右边的值，添加到左边的目标中去。

⚠️ 如果sources与target有属性重名，则sources会覆盖target里的属性。同时后续的source会覆盖前面的source的同名属性。

javascript
var obj = {};
var o1 = { a: 1 };
var o2 = { b: 2 };
var obj = Object.assign(obj, o1, o2);
//obj { a: 1, b: 2 }

const target = { a: { b: 'c', d: 'e' } }
const source = { a: { b: 'hello' } }
Object.assign(target, source)

// { a: { b: 'hello' } }

⚠️ 需要注意的是，如果拷贝的对象里包含对象的引用(如: a属性里，还再嵌套了一层属性)。那么，属性值就是一个引用类型，那么复制的其实是引用地址，就会存在引用共享的问题。

javascript
let srcObj = {'name': 'lilei', 'grade': {'chi':"80", 'eng':"100"}};
let copyObj2 = Object.assign({}, srcObj);

srcObj.name="zhangsan";
srcObj.grade.chi="10";
console.log('srcObj', srcObj);		//name: "zhangsan" grade: {chi: "10", eng: "100"}
console.log('copyObj2', copyObj2);	//name: "lilei" grade: {chi: "10", eng: "100"}

copyObj2.name="zhangsan";
copyObj2.grade.chi="50";
console.log('srcObj', srcObj);		//name: "lisi" grade: {chi: "50", eng: "100"}
console.log('copyObj2', copyObj2);	//name: "zhangsan" grade: {chi: "50", eng: "100"}

上述代码可以看到，当我们修改目标对象的属性值时，源对象的name没有变化，但是grade.chi却被改变了（修改源对象的属性也是同理）。

常见的用法 ​

  1. 为对象添加新的属性
  2. 合并对象

📖 参考文档 ​

判断数组对象中，所有属性，是否有值为空 ​

💡 处理方法 ​

javascript
// 判断对象里的属性是否为空 此方法可以单独使用
judgeObjectComplete(ObjectValue) {
    let flag = new Boolean()
    flag = true
    for (let key in ObjectValue) {
        if (ObjectValue[key]) {} else {
            flag = false;
            showToast('请把记录信息填写完整')
        }
    }
    if (!flag) {
        return false
    } else {
        return true
    }
},

// 用于传入需要判断的数组，调用上面的方法，返回 true/false
judgeListComplete(list) {
    let isNotComplete = list.findIndex(item => {
        return this.judgeObjectComplete(item) === false
    })
    if (isNotComplete > -1) {
        return false
    } else {
        return true
    }
},

// 表单提交
handleSubmit() {
    // 记录flag
    let fertilizeRecFlag = this.judgeListComplete(this.params.fertilizeRec.recorders)

    // 如果为 true，说明验证通过，属性里有值。
    if(fertilizeRecFlag) {
        // 与后端接口进行交互
    }
}

📖 参考文档 ​

对象数组 分组 ​

通过某个属性值对【对象数组】进行分组

有时候，我们会遇到后端传回来的数据是以下这种格式，并且不是我们自己想要的数组类型。

在这里，我想要的数据格式是能根据日期，对月份进行分组，但是显然后端的数据格式并不是这样的。因此，需要我们自己对后端传回的数组进行格式修改

javascript
{
    dateList: [
        {
            date: '2023-06-01',
            content: 'xxx'
        },
        {
            date: '2023-06-02',
            content: 'xxx'
        },
        {
            date: '2023-07-02',
            content: 'xxx'
        },
    ],
}

方法一 ​

javascript
arrGroup(arr, fn) {
    const obj = {};
    arr.forEach(item => {
        const key = JSON.stringify(fn(item));
        obj[key] = obj[key] || [];
        obj[key].push(item)
    });
    return Object.keys(obj).map(k => {
        return obj[k];
    })
}

// 使用方法，传入 数组、需要分组的属性
const newArr = arrGroup(list, (item) => item.date)

方法二 ​

javascript
arrGroup (arr, fn) {
    const keyArr = [...new Set(arr.map(item => fn(item)))];
    // filter里过滤的内容 就是分组属性判断
    return keyArr.map(key => arr.filter(i => i.date === key));
}

方法三 ​

javascript
dataResort(data) {
    // 定义空数组，用于存储新组装的数据
    let newArr = [];
    // 遍历数组
    data.forEach((item, i) => {
        // 默认当前操作的数据下标 -1 
        let index = -1;
        // 判断数组中是否已经存在当前遍历数据的时间
        let isExists = newArr.some((newItem, j) => {
            if (item.date == newItem.date) {
                // 存在就保存当前数据下标  用于插入数据
                index = j;
                return true;
            }
        })

        // 如果没有就存储一条新对象数据
        if (!isExists) {
            newArr.push({
                date: item.date,
                subList: [item]
            })
        } else {
            // 如果有就插入到已存在的对象中
            newArr[index].subList.push(item);
        }
    })
    // 返回新数组
    return newArr
},

// 使用方法，传入数组即可，但是具体需要分组的属性值，是直接写在上述方法里的。所以此方法偏唯一性
const newArr = this.dataResort(arr);

📖 参考文档 ​

Copyright © 2023-present Jacinda