侧边栏壁纸
博主头像
KLCode

水到绝处是风景,人到绝处是重生

  • 累计撰写 24 篇文章
  • 累计创建 17 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

JS数据场景记录

比较两个数组,输出不同的元素,相同的元素是什么(求数组的交集和差集)

a = [1, 2, 3],b = [2, 4, 5]
// 并集
let union = a.concat(b.filter(v => !a.includes(v))) // [1,2,3,4,5]
//[1,2,3,5]

// 交集
let intersection = a.filter(v => b.includes(v))
// [2]

// ab差集
let difference = a.concat(b).filter(v => !a.includes(v) || !b.includes(v)) 
// [1,3,4,5]

一个数组中存在方法,如何将数组的元素深拷贝到另一个数组

深拷贝:用于嵌套数组或对象,
浅拷贝:只拷贝引用类型的第一层数据,下层数据改变,会影响原数组
...解构属于浅拷贝

JSON.parse(JSON.stringify()) 使用注意:用于实现深拷贝得到一个对象;
1.如果obj里面有时间对象,则序列化的结果只是字符串的形式,而不是时间对象;
2.如果obj里有RegExp、Error对象,则序列化的结果将只得到空对象;
3.如果obj里有function,undefined,则序列化的结果会把函数或 undefined丢弃;
4.如果obj里有NaN、Infinity和-Infinity,则序列化的结果会变成null;
5.JSON.stringify()只能序列化对象的可枚举的自有属性;
6.如果对象中存在循环引用的情况也无法正确实现深拷贝。

如何判断一个对象是否是空对象

Object.keys(obj).length === 0

是否为一个空对象、空数组、空字符串

//空对象 
//typeof obj === 'object'后可能是 null、数组、对象
typeof obj === 'object' && !Array.isArray(obj) && obj !== null && Object.keys(obj).length === 0

//空数组 
Array.isArray(arr) && arr.length === 0

//空字符串
typeof str === 'string' && str.trim().length === 0

如何深拷贝一个函数

  • structuredClone() :2022 年引入的一个全局函数
  • lodash 的_.cloneDeep()
  • 递归复制
//递归复制
function deepCloneFunction(func) {
  const funcString = func.toString();
  return new Function(`return ${funcString}`)();
}
const clonedFunc = deepCloneFunction(originalFunc);

删除数组中指定的元素

indexOf() //查找下标
array.splice(index, 1) //删除

替换字符串中的指定内容为自己定义的内容

replace()

对象数组,删除所有对象元素的指定属性

方法是否删除属性性能适用场景
delete✔️较慢需彻底移除属性
解构赋值创建新对象❌(新建对象)不修改原数据时
设置 undefined❌(保留键)最快仅需隐藏属性值
1.arr.forEach(t => delete t.pk)
2.const newArr = arr.map(({pk, ...rest}) => rest)
3.arr.forEach(t => t.pk = undefined)

对象数组,删除符合条件的对象元素

//1.直接修改原数组 删除匹配的第一个元素
const index = arr.findIndex(item=> item.id === targetId)
if (index !== -1) {
  arr.splice(index, 1); // 删除匹配的第一个元素
}

//2.创建新数组 删除所有匹配项
const newArr = arr.filter(item => item.id !== targetId);

对象数组去重的方法

function uniqueFunc(arr, uniId){
  const res = new Map();
  return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
}

两数组合并并去重

Array.from(new Set([...arr, ...arr2]));

连接数组中指定元素,为字符串

const str = arr.map(item => item.name).join('、');

对象数组转换为键值对对象/键值对对象转换为对象数组

示例:[{label:’’,value:’},....’] 转 {label:value} / {label:value} 转 [{label:’’,value:’},....’]

//对象数组 转 键值对对象
formArr.map(function (item) {
 console.log(item.label);
 obj[item.label] = item.value;
});

//键值对对象 转 对象数组
Object.entries(obj).map([key,val] => [k, obj[k]]);

判断表单中属性值是否相等/改变

  • 深比较:lodash _.isEqual()

  • 浅比较:ES6+

//浅比较
const isEqual = (obj1, obj2) => {
  const entries1 = Object.entries(obj1);
  const entries2 = Object.entries(obj2);
  
  // 检查属性数量是否一致
  if (entries1.length !== entries2.length) return false;
  
  // 检查每个键值对是否相等
  return entries1.every(([key, value]) => obj2[key] === value);
};

过滤对象中的,”“、null、 undefined,并返回新对象

const filterEmpty = (obj) => 
  Object.entries(obj).reduce((acc, [key, value]) => {
    if (value !== "" && value !== null && value !== undefined) {
      acc[key] = value;
    }
    return acc;
  }, {});
0

评论区