vue3中ref获取不到组件实例&&数组中对象的属性值去重

1、vue3中ref获取不到组件实例

原因：使用语法糖的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在<script setup>中声明的绑定。

解决方法: 为了在 语法糖组件中明确要暴露出去的属性，使用 defineExpose 编译器宏将需要暴露出去的变量与方法放入暴露出去就可以了

jsdefineExpose({
    getList,
})

2、数组中对象的属性值去重

方法一：

let list = [
        {name:'张三',age:1,},
        {name: '李四',age: 10,},
        {name: '王二',age: 15,},
        {name: '赵五',age: 17,},
        {name: '王二',age: 5,},
        {name: '李四',age: 19,},
    ];
let newList = [];
list.forEach((item) => {
    newList.push(item);
    // 去重
    const ChangeArr = (data) => {
        const newobj = {};
        if (data && data.length > 0) {
            data.forEach((item) => {
                newobj[item.name] = item;
            });
        }
        return newobj;
    };
    let obj = ChangeArr(newList);
    newList = Object.values(obj);
});
console.log('🚀', newList)

方法二：

let list = [
   {name:'张三',age:1,},
   {name: '李四',age: 10,},
   {name: '王二',age: 15,},
   {name: '赵五',age: 17,},
   {name: '王二',age: 5,},
   {name: '李四',age: 19,},
 ];
let obj = {};
list = list.reduce(function (item, next) {
    obj[next.name] ? '' : obj[next.name] = true && item.push(next);
    return item;
}, []);
console.log('🚀', list)

筛选符合需要的字段并添加到新数组中(动态添加表单)

let arr = [];
Object.getOwnPropertyNames(this.msgTypeInData).forEach((item,index) => {
     if(item.indexOf('cardNum') !== -1) {
     arr.push({
        amount:this.msgTypeInData.amount,
        cardNum: this.msgTypeInData[item],
        })
     }
})
console.log('🚀', arr)

Object.getOwnPropertyNames(obj)返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组

JSON实用技巧

隐藏某些属性 我们知道JSON.stringify()支持第二个参数，用来处理JSON中的数据：

const user = {
  "name": "John",
  "password": "12345",
  "age": 30
};

console.log(JSON.stringify(user, (key, value) => {
    if (key === "password") {
       return;
    }
    return value;
}));

// 输出结果：{"name":"John","age":30}

将第二个参数抽离成一个函数：

function stripKeys(...keys) {
    return (key, value) => {
        if (keys.includes(key)) {
           return;
        }
        return value;
    };
}

const user = {
  "name": "John",
  "password": "12345",
  "age": 30,
  "gender": "male"
};

console.log(JSON.stringify(user, stripKeys('password', 'gender')))

// 输出结果：{"name":"John","age":30}

过滤结果

当JSON中的内容很多是，想要查看指定字段是比较难的。我们可以借助JSON.stringify()的第二个属性来获取指定值，只需传入指定一个包含要查看的属性 key 的数组即可：

const user = {
    "name": "John",
    "password": "12345",
    "age": 30
}

console.log(JSON.stringify(user, ['name', 'age']))

// 输出结果：{"name":"John","age":30}