前端封装的方法

分享几个前端封装好的方法

1、将一个对象里面的键值对转换成url地址

export function tansParams(params) {

  let result = "";

  for (const propName of Object.keys(params)) {

    const value = params[propName];

    var part = encodeURIComponent(propName) + "=";

    if (value !== null && value !== "" && typeof value !== "undefined") {

      if (typeof value === "object") {

        for (const key of Object.keys(value)) {

          if (value[key] !== null && value[key] !== "" && typeof value[key] !== "undefined") {

            let params = propName + "[" + key + "]";

            var subPart = encodeURIComponent(params) + "=";

            result += subPart + encodeURIComponent(value[key]) + "&";

          }

        }

      } else {

        result += part + encodeURIComponent(value) + "&";

      }

    }

  }

  return result;

}

你可以将该函数作为一个工具函数，用于将一个 JavaScript 对象转换为 URL 查询参数格式的字符串。在前端开发中，我们常常需要通过 AJAX 或者跳转链接的方式将数据传递到服务器端，此时将数据转换成 URL 查询参数格式是一种常见的做法。

假设有一个 JavaScript 对象如下：

const params = {
  name: "Jack",
  age: 25,
  hobbies: ["swimming", "jogging"],
  address: {
    city: "Beijing",
    street: "Haidian",
  },
};

可以使用 tansParams 函数将其转换为 URL 查询参数格式的字符串，如下所示：

const str = tansParams(params);
console.log(str);
// 输出： name=Jack&age=25&hobbies[0]=swimming&hobbies[1]=jogging&address[city]=Beijing&address[street]=Haidian&

通过调用该函数，我们能够将 JavaScript 对象转换为经过序列化的 URL 查询参数格式的字符串，并且这个过程是通用的，适用于从前端到后端的服务端开发。

 2、是将两个对象数据覆盖，如果检测有就合并没有就不合并

export function objAssign(target, provide) {

  //注意这里遍历 target 的key

  Object.keys(target).forEach((key) => {

    if (Object.prototype.hasOwnProperty.call(provide, key)) {

      target[key] = provide[key];

    }                                                                                                                       

  });

}

跟obj.assign还是有一定的区别的

例如：

const target = { a: 1, b: 2 };
const provide = { b: 3, c: 4, d: 5 };
objAssign(target, provide);
console.log(target); // { a: 1, b: 3, c: 4 }