记录一下 JS 常用到的方法

使用 Array 中的 find() 方法和箭头函数，用对象的属性查找数组里的对象

const data = [
        {name:'张三',age:'20'},
        {name:'李四',age:'21'},
        {name:'王五',age:'22'},
]
const list = data.find(obj=>obj.name === '张三')
console.log(list)

// 使用 Array 中的 find() 方法和箭头函数，用对象的属性查找数组里的对象的值
const option = [
  { label: '哈哈哈', value: 'ha', key: 'ha' },
  { label: '哒哒哒', value: 'da', key: 'da' },
  { label: '呵呵呵', value: 'he', key: 'he' },
  { label: '嘿嘿嘿', value: 'hei', key: 'hei' },
];
option.find(obj => obj.value === text).label

使用Array.includes 来处理多重条件的 if 语句

const name = 'abc'
let color = 'red'
// 如果想要匹配更多的条件的话，需要用更多的 || 来拓展语句
if (name === 'abc' || name === 'def' || name === 'ghi' || name === 'jkl') {
        color = 'blue'
}
// 可以使用更简洁的语法，Array.includes(Array.includes)重写以上的条件语句
if (['abc', 'def', 'ghi', 'jkl'].includes(name)) {
        color = 'blue'
}
console.log(color) // blue

检查对象中是否存在某个属性

const persons = {
        id:'001',
        name:'ak47'
}
console.log('name' in persons) // true
console.log('isActiver' in persons) // false

通过条件判断向对象添加属性

const isValid = false
const age = 18
const persons = {
        id: '001',
        name: 'ak47',
        ...(isValid && { isActive: true }),
        ...((age >= 18 || isValid) && { cart: 0 })
}
console.log(persons) // { "id": "001", "name": "ak47",  "cart": 0 }

通过 Array.reduce 和 Array.some 去除重复数据

let accountCache= [
  { "code": "济宁XXXX公司","name": "济宁XXXX公司" },
  { "code": "山东XXXX有限公司","name": "山东XXXX有限公司"},
  { "code": "山东XXXX有限公司","name": "山东XXXX有限公司"},
]
// 去除重复的数据
accountCache = accountCache.reduce((acc, cur) => {
  !acc.some(v => v.name === cur.name) && acc.push(cur);
  return acc;
}, []);
console.log(accountCache) 
[ 
    { "code": "济宁XXXX公司","name": "济宁XXXX公司" },
    { "code": "山东XXXX有限公司","name": "山东XXXX有限公司" }
]

使用 Object.prototype.hasOwnProperty.call()方法查询对象内是否包含某个属性

const obj = { foo: 'foo', hasOwnProperty: false, };
console.log(Object.prototype.hasOwnProperty.call(obj,'foo'))  // true
console.log(Object.prototype.hasOwnProperty.call(obj,'foos'))  // false

使用 Array.splice() 向数组添加或删除元素（第一个参数：插入的位置；第二个参数：需要删除的元素；第三个参数：要添加到数组的新元素）

const arr = [
    {name:'张三',age:'18'},
    {name:'李四',age:'18'},
]
arr.splice(1,0,{name:'王五',age:'18'})
console.log(arr)

使用 空值运算符 进行输入框的非空判断

const value = ''
// 优化前
if (value !== null && value !== undefined && value !== '') {
    console.log('222')
}
// 优化后
if ((value ?? '') !== '') {
    console.log('111')
}

根据条件修改数组的内容

const id = 1;
const arrays = [
    {id:1,text:'222',status:0},
    {id:2,text:'333',status:1},
    {id:3,text:'111',status:2},
]
// id 匹配之后，直接去修改原来数组里面对应的数据的参数
arrays.map((item,index)=>{
    if(item.id === id) arrays[index].text = 'hhhhh'
})
// 返回的内容
[
    { "id": 1, "text": "hhhhh","status": 0},
    { "id": 2, "text": "333", "status": 1},
    { "id": 3, "text": "111", "status": 2 }
]

往数组里面的对象添加属性，Object.assign(target, ...sources) 合并对象

const diyformItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 7 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
    md: { span: 10 },
  },
};

/**
 * Object.assign(target, ...sources)
 * target：目标对象，接收源对象属性的对象，也是修改后的返回值。
 * 源对象，包含将被合并的属性。
 */
columns.forEach(obj => Object.assign(obj, { diyformItemLayout }));