1.把对象数组改造为 map表供查询

把一个 obj array 构造成一个 map，obj其中某一个属性作为 key，剩下的属性合成一个对象作为value

// 原始的对象数组
const originalArray = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

// 使用 reduce 方法将对象数组转换为 Map：不断给一个空的 Map 累加 k-v键值对
const resultMap = originalArray.reduce((map, obj) => {
  const { id, ...rest } = obj; // 提取 id 属性作为键，剩余属性作为值
  map.set(id, rest); // 将键值对添加到 Map 中
  return map;
}, new Map());
//注意：...rest这里，rest 代表一个对象，...rest就代表对象展开的变量，也就是剩余的所有属性！

// 使用 forEach 方法将对象数组转换为 Map
const resultMap = new Map();

originalArray.forEach(obj => {
  const { id, ...rest } = obj; // 提取 id 属性作为键，剩余属性作为值
  resultMap.set(id, rest); // 将键值对添加到 Map 中
});

示例：

try {
  let res = await getTeamScheduleDates({ param: "" });
  if (res.code == 0) {
    this.enableDateList = res.data.map((e) => e.ymd.split(" ")[0]); //列表
    // 使用 reduce 方法将对象数组转换为 Map
    this.enableDateMap = res.data.reduce((map, obj) => { //集合
      const { ymd, ...rest } = obj; // 提取 id 属性作为键，剩余属性作为值
      map.set(ymd.split(" ")[0], rest); // 将键值对添加到 Map 中
      return map;
    }, new Map());
    console.log(this.enableDateMap);
  }
} catch (error) {
  console.error(error, "error getOpenIdUrl");
  Toast(error);
}

map 的取值和赋值：

// 创建一个示例的 Map
const resultMap = new Map();
resultMap.set('key1', 'value1');
resultMap.set('key2', 'value2');
resultMap.set('key3', 'value3');

// 根据键获取对应的值
const value = resultMap.get('key2');
console.log(value);

2.动态设置 Vant 组件中 van-calendar 的 min-date 属性

注意：minDate的初始值不能设置为“”，否则会报错

<template>
  <div>
    <van-calendar :min-date="minDate"></van-calendar>
    <button @click="updateMinDate">更新最小日期</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      minDate: new Date() // 初始最小日期为当前日期
    };
  },
  methods: {
    updateMinDate() {
      // 动态更新最小日期
      const newMinDate = new Date(); // 设置为当前日期
      this.minDate = newMinDate;
    }
  }
};
</script>

注意：还可以设置:default-date="defaultDate"为当前时间，保证在点开日历的时候滚动到当前

3.css选择器+和~的区别

• + 选择器选择紧接在指定元素后的第一个兄弟元素。
• ~ 选择器选择指定元素后的所有兄弟元素其中的某一个或者某几个。

4.withRouter和 connect 一起用

export default withRouter(
  connect(
    (state) => ({
      userInfo: state.user,
      token: state.token,
    }),
    {
      removeToken, //会默认分发（dispatch）
      remove,
    }
  )(BaseHeader)
);

为什么要一起用？

因为我们要使用 history 属性做编程式路由导航

this.props.history.push("/login");

5.!important不要随便用

尽管 !important 在某些情况下可能会有用，但它也存在一些潜在的问题和坏处，包括：

1. 特殊性困扰：!important 可能导致特殊性（specificity）问题。CSS 样式规则通常按照特殊性的优先级来应用，通过 !important 强制应用样式会覆盖其他规则，破坏了正常的特殊性级别，导致难以预测和维护的样式。
2. 维护困难：当使用 !important 时，可能会导致样式规则之间的依赖关系变得混乱和难以理解。如果多个样式规则都使用了 !important，并且它们之间有冲突，那么很难确定最终的样式会如何应用。
3. 可读性和可维护性下降：使用 !important 可能会降低代码的可读性和可维护性。当样式规则中出现多个 !important，或者后续需要修改样式时，很难理解和追踪影响该样式的因素。
4. 难以覆盖：如果某个样式使用了 !important，那么要覆盖该样式将需要使用更高特殊性或更具体的选择器来达到目的。这增加了代码的复杂性，并可能引入更多的特殊性问题。

因此，建议尽量避免频繁使用 !important，而是优先使用正确的特殊性和层叠顺序来管理样式。仅在必要的情况下使用 !important，并在使用之前，仔细考虑它可能带来的影响和潜在问题。保持 CSS 代码的结构清晰和可维护性对于长期的代码维护和可扩展性至关重要。