js 怎样用defaults为对象数组添加默认值

为 javascript 对象数组添加默认值的核心方法有三种：1. 使用 object.assign() 将默认值合并到每个对象的副本中，确保原始数据不变；2. 使用扩展运算符 ({ ...defaults, ...item }) 实现更简洁的浅层合并；3. 使用 lodash 的 defaultsdeep() 进行嵌套对象的深层合并。在添加默认值后，可通过类型检查、范围验证、必需属性检测、正则表达式、自定义函数或 yup 等验证库进行数据验证。处理大型数组时的性能优化策略包括：避免不必要的对象复制、使用 for 循环替代 map()、仅在属性缺失时添加默认值、利用 weakmap 缓存默认值、通过 web workers 避免阻塞主线程、分块处理大数据集以及避免深度克隆。添加默认值后可根据条件使用 filter()、reduce()、lodash 的 filter()、for 循环、位运算符组合条件，或 es2023 的 findlast() 和 findlastindex() 方法对数组进行过滤。所有操作应根据实际需求选择最合适的方法，并在必要时进行基准测试以确保性能最优。

为 JavaScript 对象数组添加默认值，核心在于遍历数组，然后使用

Object.assign()

解决方案：

以下是几种常用的方法，可以为 JavaScript 对象数组添加默认值：

方法一：使用

Object.assign()

这种方法通过

Object.assign()

Object.assign()

const data = [
  { name: 'Alice' },
  { age: 30 }
];

const defaults = {
  name: 'Unknown',
  age: null,
  city: 'Nowhere'
};

const result = data.map(item => Object.assign({}, defaults, item));

console.log(result);
// 输出:
// [
//   { name: 'Alice', age: null, city: 'Nowhere' },
//   { name: 'Unknown', age: 30, city: 'Nowhere' }
// ]

方法二：使用扩展运算符 (

...

扩展运算符提供了一种更简洁的方式来合并对象。与

Object.assign()

const data = [
  { name: 'Alice' },
  { age: 30 }
];

const defaults = {
  name: 'Unknown',
  age: null,
  city: 'Nowhere'
};

const result = data.map(item => ({ ...defaults, ...item }));

console.log(result);
// 输出:
// [
//   { name: 'Alice', age: null, city: 'Nowhere' },
//   { name: 'Unknown', age: 30, city: 'Nowhere' }
// ]

方法三：使用 Lodash 的

defaultsDeep()

Lodash 是一个流行的 JavaScript 实用工具库，它提供了

defaultsDeep()

const _ = require('lodash'); // 确保你已经安装了 lodash: npm install lodash

const data = [
  { name: 'Alice', address: { street: 'Main St' } },
  { age: 30 }
];

const defaults = {
  name: 'Unknown',
  age: null,
  city: 'Nowhere',
  address: {
    street: 'Unknown',
    zip: '00000'
  }
};

const result = data.map(item => _.defaultsDeep({}, item, defaults));

console.log(result);
// 输出:
// [
//   { name: 'Alice', address: { street: 'Main St', zip: '00000' }, age: null, city: 'Nowhere' },
//   { name: 'Unknown', age: 30, address: { street: 'Unknown', zip: '00000' }, city: 'Nowhere' }
// ]

选择哪种方法？

• 如果只需要浅层合并，

  Object.assign()

  登录后复制

  登录后复制

  登录后复制

  登录后复制

  登录后复制

  登录后复制
  或扩展运算符通常足够。
• 如果需要递归地合并嵌套对象，

  Lodash

  登录后复制
  的

  defaultsDeep()

  登录后复制

  登录后复制

  登录后复制
  是一个不错的选择。

对象数组添加默认值后如何进行数据验证？

在为对象数组添加默认值之后，进行数据验证是确保数据质量的关键步骤。以下是一些常见的数据验证方法和策略：

1. 类型检查： 确保每个属性的值都符合预期的类型。例如，如果

   age

   登录后复制
   属性应该是数字，则验证它是否确实是数字类型。可以使用

   typeof

   登录后复制
   运算符或更高级的类型检查库（如

   yup

   登录后复制

   登录后复制
   或

   joi

   登录后复制

   登录后复制
   ）来实现。

   const validateType = (item) => {
     if (typeof item.age !== 'number' && item.age !== null) {
       console.warn('Invalid age type:', item);
       return false;
     }
     return true;
   };
   
   const isValid = result.every(validateType);
   console.log('Are all items valid?', isValid);

   登录后复制

2. 范围检查： 验证数值是否在允许的范围内。例如，年龄不能为负数或超过一个合理的上限。

   const validateRange = (item) => {
     if (item.age !== null && (item.age < 0 || item.age > 150)) {
       console.warn('Invalid age range:', item);
       return false;
     }
     return true;
   };
   
   const isValid = result.every(validateRange);
   console.log('Are all items valid?', isValid);

   登录后复制

3. 必需属性检查： 确保所有必需的属性都存在且不为空。

   const validateRequired = (item) => {
     if (!item.name) {
       console.warn('Missing required property: name', item);
       return false;
     }
     return true;
   };
   
   const isValid = result.every(validateRequired);
   console.log('Are all items valid?', isValid);

   登录后复制

4. 正则表达式验证： 对于字符串类型的属性，可以使用正则表达式来验证其格式是否正确。例如，验证电子邮件地址或电话号码的格式。

   const validateEmail = (item) => {
     if (item.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(item.email)) {
       console.warn('Invalid email format:', item);
       return false;
     }
     return true;
   };
   
   const isValid = result.every(validateEmail);
   console.log('Are all items valid?', isValid);

   登录后复制

5. 自定义验证函数： 可以编写自定义的验证函数来执行更复杂的验证逻辑。例如，验证两个属性之间的关系是否满足特定条件。

   const validateCustom = (item) => {
     if (item.startDate && item.endDate && item.startDate > item.endDate) {
       console.warn('Invalid date range: startDate is after endDate', item);
       return false;
     }
     return true;
   };
   
   const isValid = result.every(validateCustom);
   console.log('Are all items valid?', isValid);

   登录后复制

6. 使用验证库： 可以使用专门的验证库（如

   yup

   登录后复制

   登录后复制
   、

   joi

   登录后复制

   登录后复制
   或

   validator.js

   登录后复制
   ）来简化数据验证过程。这些库提供了丰富的验证规则和易于使用的 API。

   const yup = require('yup');
   
   const schema = yup.object().shape({
     name: yup.string().required(),
     age: yup.number().nullable().positive().integer(),
     email: yup.string().email().nullable(),
   });
   
   const validateYup = async (item) => {
     try {
       await schema.validate(item);
       return true;
     } catch (error) {
       console.warn('Yup validation error:', error.message, item);
       return false;
     }
   };
   
   const isValid = await Promise.all(result.map(validateYup));
   console.log('Are all items valid?', isValid);

   登录后复制

怎样处理添加默认值时可能出现的性能问题，尤其是在处理大型数组时？

处理大型数组时，添加默认值可能会成为性能瓶颈。以下是一些优化策略：

1. 避免不必要的对象复制： 如果原始对象不需要保持不变，可以直接修改它们，而不是创建新的对象。这可以减少内存分配和垃圾回收的开销。

   data.forEach(item => Object.assign(item, defaults)); // 直接修改原始对象

   登录后复制

   但是，请注意，这种方法会改变原始数组，因此需要谨慎使用。

2. 使用循环而不是

   map()

   登录后复制

   登录后复制
   ： 对于非常大的数组，使用

   for

   登录后复制

   登录后复制

   登录后复制
   循环或

   forEach()

   登录后复制
   循环可能比

   map()

   登录后复制

   登录后复制
   更有效率，因为它们避免了创建新的数组。

   for (let i = 0; i < data.length; i++) {
     Object.assign(data[i], defaults);
   }

   登录后复制

3. 减少不必要的属性复制： 仅当属性在原始对象中不存在时才添加默认值。这可以通过检查属性是否存在来避免不必要的复制操作。

   const addDefaults = (item) => {
     for (const key in defaults) {
       if (!item.hasOwnProperty(key)) {
         item[key] = defaults[key];
       }
     }
     return item;
   };
   
   data.forEach(addDefaults);

   登录后复制

4. 使用

   WeakMap

   登录后复制

   登录后复制
   缓存默认值： 如果需要多次为同一类型的对象添加默认值，可以使用

   WeakMap

   登录后复制

   登录后复制
   来缓存默认值。这可以避免重复创建默认值对象。

   const defaultsCache = new WeakMap();
   
   const addDefaultsCached = (item, defaultObj) => {
     if (!defaultsCache.has(defaultObj)) {
       defaultsCache.set(defaultObj, Object.assign({}, defaultObj)); // 缓存默认值的副本
     }
     const cachedDefaults = defaultsCache.get(defaultObj);
     return Object.assign({}, cachedDefaults, item);
   };
   
   const result = data.map(item => addDefaultsCached(item, defaults));

   登录后复制

5. 使用 Web Workers： 对于非常大的数组，可以将添加默认值的操作放在 Web Workers 中执行，以避免阻塞主线程。这可以提高用户界面的响应性。

   // 主线程
   const worker = new Worker('worker.js');
   worker.postMessage({ data, defaults });
   
   worker.onmessage = (event) => {
     const result = event.data;
     console.log('Result from worker:', result);
   };
   
   // worker.js
   onmessage = (event) => {
     const { data, defaults } = event.data;
     const result = data.map(item => Object.assign({}, defaults, item));
     postMessage(result);
   };

   登录后复制

6. 分块处理： 将大型数组分成较小的块，然后逐个处理这些块。这可以减少单次操作的内存占用，并允许浏览器更频繁地进行垃圾回收。

   const chunkSize = 1000;
   for (let i = 0; i < data.length; i += chunkSize) {
     const chunk = data.slice(i, i + chunkSize);
     const resultChunk = chunk.map(item => Object.assign({}, defaults, item));
     // 处理 resultChunk
   }

   登录后复制

7. 避免深度克隆： 如果默认值对象包含嵌套对象，避免进行深度克隆，除非绝对必要。浅克隆通常足够，并且可以显著提高性能。

8. 基准测试： 在应用任何优化策略之前，进行基准测试以确定哪些策略对你的特定用例最有效。可以使用

   console.time()

   登录后复制
   和

   console.timeEnd()

   登录后复制
   来测量代码的执行时间。

添加默认值后，如何根据特定条件过滤对象数组？

在为对象数组添加默认值之后，根据特定条件过滤数组是常见的操作。以下是一些过滤方法：

1. 使用

   Array.prototype.filter()

   登录后复制
   ： 这是最常用的过滤方法。它创建一个新数组，其中包含所有满足提供的测试函数的元素。

   const filteredData = result.filter(item => item.age >= 18); // 过滤出年龄大于等于 18 的对象
   console.log(filteredData);

   登录后复制

2. 使用

   Array.prototype.reduce()

   登录后复制
   ：

   reduce()

   登录后复制
   方法可以将数组中的元素归约为单个值。虽然主要用于累加，但也可以用于过滤。

   const filteredData = result.reduce((acc, item) => {
     if (item.city === 'Nowhere') {
       acc.push(item);
     }
     return acc;
   }, []); // 过滤出城市为 'Nowhere' 的对象
   console.log(filteredData);

   登录后复制

3. 使用 Lodash 的

   filter()

   登录后复制

   登录后复制

   登录后复制
   ： Lodash 提供了更强大的

   filter()

   登录后复制

   登录后复制

   登录后复制
   函数，可以接受多种类型的条件，包括对象属性匹配和自定义函数。

   const _ = require('lodash');
   const filteredData = _.filter(result, { city: 'Nowhere' }); // 过滤出城市为 'Nowhere' 的对象
   console.log(filteredData);
   
   const filteredData2 = _.filter(result, item => item.age > 25 && item.name.startsWith('A')); // 使用自定义函数过滤
   console.log(filteredData2);

   登录后复制

4. 使用

   for

   登录后复制

   登录后复制

   登录后复制
   循环： 对于性能敏感的场景，使用

   for

   登录后复制

   登录后复制

   登录后复制
   循环可能比

   filter()

   登录后复制

   登录后复制

   登录后复制
   更快。

   const filteredData = [];
   for (let i = 0; i < result.length; i++) {
     if (result[i].age !== null && result[i].age < 35) {
       filteredData.push(result[i]); // 过滤出年龄小于 35 的对象
     }
   }
   console.log(filteredData);

   登录后复制

5. 使用位运算符进行多条件过滤： 如果需要根据多个布尔条件进行过滤，可以使用位运算符来组合条件。这可以提高代码的可读性和性能。

   const FLAG_NAME_STARTS_WITH_A = 1 << 0; // 1
   const FLAG_AGE_OVER_18 = 1 << 1; // 2
   
   const filteredData = result.filter(item => {
     let flags = 0;
     if (item.name.startsWith('A')) {
       flags |= FLAG_NAME_STARTS_WITH_A;
     }
     if (item.age > 18) {
       flags |= FLAG_AGE_OVER_18;
     }
     return (flags & (FLAG_NAME_STARTS_WITH_A | FLAG_AGE_OVER_18)) === (FLAG_NAME_STARTS_WITH_A | FLAG_AGE_OVER_18); // 同时满足两个条件
   });
   console.log(filteredData);

   登录后复制

6. 使用 ES2023 的

   Array.prototype.findLast()

   登录后复制
   和

   Array.prototype.findLastIndex()

   登录后复制
   ： 如果只需要找到满足条件的最后一个元素或其索引，可以使用这两个新方法。

   const lastItem = result.findLast(item => item.age < 30); // 找到年龄小于 30 的最后一个对象
   console.log(lastItem);
   
   const lastIndex = result.findLastIndex(item => item.city === 'Nowhere'); // 找到城市为 'Nowhere' 的最后一个对象的索引
   console.log(lastIndex);

   登录后复制

以上就是js 怎样用defaults为对象数组添加默认值的详细内容，更多请关注php中文网其它相关文章！