工作总结 6.16

敏感数据已脱敏

API 组织

const APIGetter = (name) => {
  const URL = "http://example.com";
  const API = {
    运行态势: { path: "/api/Exhibition/GetDeliveryTime", method: "POST" },
    成效分析: { path: "/api/Exhibition/ResultsAnalysis", method: "POST" },
    异常情况: { path: "/api/Exhibition/GetAbnormalSituation", method: "POST" },
    工单列表: { path: "/api/Exhibition/GetWorkList", method: "POST" },
    设备列表: { path: "/api/Exhibition/GetMachineList", method: "GET" },
    厢房基本资料: { path: "/api/Exhibition/GetWingBasic", method: "POST" },
    物业人员: { path: "/api/Exhibition/GetPropertyPeople", method: "POST" },
    维保人员: { path: "/api/Exhibition/GetMaintenancePeople", method: "POST" },
  };
  return {
    url: URL + API[name].path,
    method: API[name].method,
  };
};

对 Fetch 通用方法的封装

// declareation
export const fetchDataSource = (name, params = {}) => {
  // API method 方法校验
  if (!APIGetter(name).method) {
    throw new Error("API " + name + " request's method must be declared.");
  }
  // 请求发送格式
  let options =
    APIGetter(name).method === "GET"
      ? {
          method: "GET",
          headers: new Headers({
            "Content-Type": "application/json",
          }),
        }
      : {
          method: "POST",
          headers: new Headers({
            "Content-Type": "application/json",
          }),
          body: JSON.stringify(params),
        };
  return new Promise((resolve, reject) => {
    fetch(APIGetter(name).url, options)
      .then((res) => res.json())
      .then((rawdata) => {
        if (Number(rawdata?.code) !== 200 || !rawdata.data) {
          console.error("This Data source has something wrong.");
        }
        resolve(rawdata.data);
      });
  });
};
// call (Get method)
[Module].fetchDataSource("name").then((res) => console.log(res));
// call (Post method)
[Module].fetchDataSource("name", params).then((res) => console.log(res));

ES6 中的循环-警惕 forEach 的滥用

forEach 在除 throw Error 外任何时候都不能跳出循环。

const mycars = [
  {
    name: "Volvo",
    value: 1,
  },
  {
    name: "Benz",
    value: 2,
  },
  {
    name: "Honda",
    value: 3,
  },
];

console.log("-------- for of iterator --------");

for (let x of mycars) {
  if (x.name === "Benz") break;
  console.log(x);
}

console.log("-------- for each iterator --------");

mycars.forEach((x) => {
  if (x.name === "Benz") return;
  console.log(x);
});

结果：

-------- for of iterator --------
{ name: 'Volvo', value: 1 } // 跳出了循环
-------- for each iterator --------
{ name: 'Volvo', value: 1 }
{ name: 'Honda', value: 3 } // 没跳出循环,只有 Benz 被 return 掉

MDN 上对 forEach 的注释

注意： 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。

若你需要提前终止循环，你可以使用：

一个简单的 for 循环

• for...of / for...in 循环
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.find()
• Array.prototype.findIndex()

这些数组方法则可以对数组元素判断，以便确定是否需要继续遍历：

• every()
• some()
• find()
• findIndex()

译者注：只要条件允许，也可以使用 filter() 提前过滤出需要遍历的部分，再用 forEach() 处理。

循环的选择

引用某高手的话：

取多个用 filter，单个用 find，单个 index 用 findIndex ，存不存在用 some 。引用相同时，存不存在用 includes ，单个 index 用 indexOf

对于some 和 includes 区别：

[{ a: 1 }, { a: 2 }, { a: 3 }]
  .some((n) => n.a === 3) // true

  [({ a: 1 }, { a: 2 }, { a: 3 })].includes({ a: 3 }); // false

const obj = { a: 3 };
[{ a: 1 }, { a: 2 }, obj].includes(obj); // true