添加动态属性

给对象添加属性，名称动态变化怎么办？

  1. let obj = {};
  2. let index = 1;
  3. let key = `topic${index}`;
  4. obj[key] = 'topic';

ES6 中的对象属性名可以使用表达式，不用创建一个额外的变量

  1. let obj = {};
  2. let index = 1;
  3. obj[`topic${index}`] = 'topic';

Object对象转化为表单FormData对象

  1. /**
  2.  * 对象转化为formdata
  3.  * @param {Object} object
  4.  */
  6.  export function getFormData(object) {
  7.     const formData = new FormData()
  8.     Object.keys(object).forEach(key => {
  9.         const value = object[key]
  10.         if (Array.isArray(value)) {
  11.             value.forEach((subValue, i) =>
  12.                 formData.append(key + `[${i}]`, subValue)
  13.             )
  14.         } else {
  15.             formData.append(key, object[key])
  16.         }
  17.     })
  18.     return formData
  19. }

使用场景：上传文件时我们要新建一个FormData对象，然后有多少个参数就append多少次，使用该函数可以简化逻辑。使用：

  1. let req={
  2.     file:xxx,
  3.     userId:1,
  4.     phone:'15198763636',
  5.     //...
  6. }
  7. fetch(getFormData(req))

表单FormData对象转化为Object对象

  1. const formToObject = form =>
  2.   Array.from(new FormData(form)).reduce(
  3.     (acc, [key, value]) => ({
  4.       ...acc,
  5.       [key]: value
  6.     }),
  7.     {}
  8.   );
  10. formToObject(document.querySelector('#form'));
  11. // { email: 'test@email.com', name: 'Test Name' }

深拷贝

  2. function deepClone(obj, hash = new WeakMap()) {
  3.   if (obj === null) return obj; 
  4.   // 如果是null或者undefined我就不进行拷贝操作
  5.   if (obj instanceof Date) return new Date(obj);
  6.   if (obj instanceof RegExp) return new RegExp(obj);
  7.   // 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
  8.   if (typeof obj !== "object") return obj;
  9.   // 是对象的话就要进行深拷贝
  10.   if (hash.get(obj)) return hash.get(obj);
  11.   let cloneObj = new obj.constructor();
  12.   // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
  13.   hash.set(obj, cloneObj);
  14.   for (let key in obj) {
  15.     if (obj.hasOwnProperty(key)) {
  16.       // 实现一个递归拷贝
  17.       cloneObj[key] = deepClone(obj[key], hash);
  18.     }
  19.   }
  20.   return cloneObj;
  21. }
  22. let obj = { name: 1, address: { x: 100 } };
  23. obj.o = obj; // 对象存在循环引用的情况
  24. let d = deepClone(obj);
  25. obj.address.x = 200;
  26. console.log(d);
  1. // from  https://www.30secondsofcode.org/js/s/deep-clone/
  2. const deepClone = obj => {
  3.   if (obj === null) return null;
  4.   let clone = Object.assign({}, obj);
  5.   Object.keys(clone).forEach(
  6.     key =>
  7.       (clone[key] =
  8.         typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])
  9.   );
  10.   if (Array.isArray(obj)) {
  11.     clone.length = obj.length;
  12.     return Array.from(clone);
  13.   }
  14.   return clone;
  15. };
  17. const a = { foo: 'bar', obj: { a: 1, b: 2 } };
  18. const b = deepClone(a); // a !== b, a.obj !== b.obj

deepMerge

https://github.com/vuejs/create-vue/blob/main/utils/deepMerge.ts

  1. const isObject = (val) => val && typeof val === 'object'
  2. const mergeArrayWithDedupe = (a, b) => Array.from(new Set([...a, ...b]))
  4. /**
  5.  * Recursively merge the content of the new object to the existing one
  6.  * @param {Object} target the existing object
  7.  * @param {Object} obj the new object
  8.  */
  9. function deepMerge(target, obj) {
  10.   for (const key of Object.keys(obj)) {
  11.     const oldVal = target[key]
  12.     const newVal = obj[key]
  14.     if (Array.isArray(oldVal) && Array.isArray(newVal)) {
  15.       target[key] = mergeArrayWithDedupe(oldVal, newVal)
  16.     } else if (isObject(oldVal) && isObject(newVal)) {
  17.       target[key] = deepMerge(oldVal, newVal)
  18.     } else {
  19.       target[key] = newVal
  20.     }
  21.   }
  23.   return target
  24. }
  26. export default deepMerge