更新对象或数组的值的方法

一、数组的映射或更新

1. map(): 用于创建一个新数组，数组中的每个元素是对原数组元素执行函数后的结果。

   const arr = [1, 2, 3];
   const newArr = arr.map(item => item * 2); // [2, 4, 6]
   

2. forEach(): 用于遍历数组，对每个元素执行操作，但不返回新数组。

   const arr = [1, 2, 3];
   arr.forEach((item, index) => { arr[index] = item * 2 });
   console.log(arr); // [2, 4, 6]
   

3. filter(): 用于过滤数组，返回符合条件的新数组。

   const arr = [1, 2, 3, 4];
   const filteredArr = arr.filter(item => item > 2); // [3, 4]
   

二、对象的映射或更新

1. Object.keys() / Object.entries() / Object.values() + reduce() / map(): 使用 Object 方法遍历对象，结合 map 或 reduce 进行映射或更新。

   /**
   Object.keys(): 获取对象的键数组。
   Object.entries(): 获取对象的键值对数组。
   Object.values(): 获取对象的值数组。
   map(): 对数组中的每个元素进行处理，返回新数组。
   reduce(): 对数组中的元素进行汇总，返回单一结果。
   */
   
   // Object.keys() 方法返回一个包含对象所有可枚举属性名（键）的数组。
   // 使用场景：用于获取对象的所有键，常与 forEach()、map() 或 reduce() 一起使用来操作对象。
   // 代码：
   
   const obj = { a: 1, b: 2, c: 3 };
   const keys = Object.keys(obj); 
   console.log(keys);  // ['a', 'b', 'c']
   
   // 结合 map() 或 reduce() 来更新对象的值
   
   const obj = { a: 1, b: 2, c: 3 };
   const updatedObj = Object.keys(obj).map(key => {
     return { [key]: obj[key] * 2 };
   }).reduce((acc, curr) => Object.assign(acc, curr), {});
   console.log(updatedObj);  // { a: 2, b: 4, c: 6 }
   
   // Object.entries()返回一个包含对象所有可枚举属性的数组，每个元素是一个 [key, value] 的数组对。
   // 用于获取对象的键值对数组，适合与 reduce() 或 map() 一起操作来映射对象。
   // 基本操作：
   const obj = { a: 1, b: 2, c: 3 };
   const values = Object.values(obj); 
   console.log(values);  // [1, 2, 3]
   // map()创建一个新数组，数组中的每个元素是对原数组每个元素调用函数后的返回值
   // 基本操作
   const arr = [1, 2, 3, 4];
   const doubledArr = arr.map(value => value * 2);
   console.log(doubledArr);  // [2, 4, 6, 8]
   
   // 使用 map() 映射值
   const obj = { a: 1, b: 2, c: 3 };
   const updatedObj = Object.values(obj).map(value => value * 2);
   console.log(updatedObj);  // [2, 4, 6]
   // reduce() 方法对数组中的每个元素应用一个函数，将其结果汇总为单个值。
   // 基本操作
   const arr = [1, 2, 3, 4];
   const sum = arr.reduce((acc, value) => acc + value, 0); 
   console.log(sum);  // 10
   // 使用 reduce() 来更新对象
   const obj = { a: 1, b: 2, c: 3 };
   const updatedObj = Object.entries(obj).reduce((acc, [key, value]) => {
     acc[key] = value * 2;
     return acc;
   }, {});
   console.log(updatedObj);  // { a: 2, b: 4, c: 6 }
   // 进阶应用：
   const obj = { a: 1, b: 2 };
   const newObj = Object.entries(obj).reduce((acc, [key, value]) => {
     acc[key] = value * 2;
     return acc;
   }, {});
   console.log(newObj); // { a: 2, b: 4 }

2. Object.assign(): 更新对象的属性，浅拷贝。

   const obj = { a: 1, b: 2 };
   const updatedObj = Object.assign({}, obj, { b: 3 });
   console.log(updatedObj); // { a: 1, b: 3 }
   

三、对象和数组的嵌套更新

1. 嵌套对象更新（深拷贝）:

   const obj = { a: { x: 1 }, b: 2 };
   const updatedObj = { ...obj, a: { ...obj.a, x: 2 } };
   console.log(updatedObj); // { a: { x: 2 }, b: 2 }
   

2. 数组中的对象更新:

   const arr = [{ id: 1, value: 10 }, { id: 2, value: 20 }];
   const updatedArr = arr.map(item => item.id === 1 ? { ...item, value: 15 } : item);
   console.log(updatedArr); // [{ id: 1, value: 15 }, { id: 2, value: 20 }]
   

原文地址：https://blog.csdn.net/m0_72030584/article/details/143746512

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！