js - 代码技巧

1.  InputNumber 只允许输入正整数

  const limitDecimals = (value: string | undefined | number) => {
    return String(value).replace(/^(0+)|[^\d]+/g, "");
  };

 <InputNumber
            placeholder="请输入"
            className={styles.input}
            min={0}
            onChange={(value) => setConfigId(value)}
            formatter={limitDecimals}
            parser={limitDecimals}
            value={configId}
          />

---

2.  forEach中不能使用async / await

现象： 在forEach中使用async/ await调用接口，将获取的数据渲染到页面上，发现无法渲染

解决：async/await不能在forEach中使用,用for of代替

---

3. map和forEach不能终止循环，但是可以不返回值（直接return）达到同样的效果

---

4. 实现点击按钮，滚动到底部效果

    const ele = document.getElementsByClassName('tree-node-eidt')[0];
    ele.scrollIntoView(true / obj)

developer.mozilla.org/zh-CN/docs/…

---

6. antd - 这个修的太不容易了，真的要多看一下

 {getFieldDecorator(
                              'qualityCheckModelDTO.timeRange',
                              {
                                rules: [
                                  {
                                    required: true,
                                    message: i18nAtc(
                                      'quality.Component.ProjectForm.bi_tian'
                                    )
                                  }
                                ],
                                initialValue:
                                  shouldRefill &&
                                  dataSource.qualityCheckModelDTO
                                    ? dataSource.qualityCheckModelDTO.timeRange
                                    : [
                                      moment('00:00:00', 'HH:mm:ss'),
                                      moment('23:59:59', 'HH:mm:ss')
                                    ]
                              }
                            )(
                              <RangePicker
                                ref={el => {
                                  this.rangePicker = el;
                                }}
                                style={{ width: '100%' }}
                                format="YYYY-MM-DD HH:mm:ss"
                                disabledDate={currentDate => {
                                  return this.isDateDisAble(currentDate);
                                }}
                                showTime={{
                                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
                                }}
                                onCalendarChange={(dates) => {
                                  let newDate
                                  if (dates.length === 1) {
                                    newDate = dates[0].hours(0).minutes(0).seconds(0)
                                  } else {
                                    newDate = dates[0]
                                  }
                                  setFieldsValue({
                                    'qualityCheckModelDTO.timeRange': [newDate, dates[1]]
                                  })
                                  this.changeRange([newDate, dates[1]]);
                                }}
                              />
                            )}

---

7. 配置标题

 <>
   {actionType === "sms" && "短信配置"}
   {actionType === "qianniu" && "千牛配置"}
   {actionType === "alimeMessage" && "小蜜消息"}
   {actionType === "outbound" && "智能外呼"}
<>

---

8. 遍历 变量?.map, -> 防止变量为undefined或者null的情况。

---

9. {key: value} 的展示 Object.keys().map

---

10. 利用二维数组初始化Map

const ruleTypeTagMap: Map<RuleType, TagModel> = new Map([
  [
    RuleType.Keyword,
    {
      background: '#006DD5',
      text: '词表',
    },
  ],
]);

Map 与数组的关系
let kvArray = [["key1", "value1"], ["key2", "value2"]];

// 使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象
let myMap = new Map(kvArray);

myMap.get("key1"); // 返回值为 "value1"

// 使用Array.from函数可以将一个Map对象转换成一个二维键值对数组

console.log(Array.from(myMap)); // 输出和kvArray相同的数组

// 更简洁的方法来做如上同样的事情，使用展开运算符 console.log([...myMap]);

// 或者在键或者值的迭代器上使用Array.from，进而得到只含有键或者值的数组
console.log(Array.from(myMap.keys())); // 输出 ["key1", "key2"]

---

11. null和undefined不能用在Object.keys中
    Object.keys(UtouchMainBO.DynEventAttrDO || {})
    这次真的是血的教训， 一个成熟的程序员要切记哦