成熟稳重的好男人

文章 评论 浏览 791

成熟稳重的好男人 2022-05-04 13:55:51

处理中文输入,再加个防抖。如果用数据驱动视图,可以“原地复用”,才是最优解。

<body>
    <input type="text" />
    <div></div>
    <script>
      let list = [
        { id: 1, name: "部门A", parentId: 0 },
        { id: 2, name: "部门B", parentId: 0 },
        { id: 3, name: "部门C", parentId: 1 },
        { id: 4, name: "部门D", parentId: 1 },
        { id: 5, name: "部门E", parentId: 2 },
        { id: 6, name: "部门F", parentId: 3 },
        { id: 7, name: "部门G", parentId: 2 },
        { id: 8, name: "部门H", parentId: 4 }
      ];
      input.addEventListener("input", handleSearch);
      input.addEventListener("compositionstart", handleStart);
      input.addEventListener("compositionend", handleEnd);

      function regLikeSearch(str) {
        let htmls = "";
        list.forEach(item => {
          const match = item.name.replace(
            new RegExp(str, "ig"),
            (all, match) => {
              return `<span style="color: red">${all}</span>`;
            }
          );
          htmls += `<p>${match}</p>`;
        });
        box.innerHTML = htmls;
      }

      let isZhcn = false;
      function handleSearch(e) {
        if (!isZhcn) {
          const val = e.target.value;
          console.log("handleSearch", val);
          regLikeSearch(val);
        }
      }
      function handleStart(e) {
        isZhcn = true;
      }
      function handleEnd(e) {
        isZhcn = false;
        handleSearch(e);
      }
    </script>
  </body>

第 90 题:实现模糊搜索结果的关键词高亮显示

成熟稳重的好男人 2022-05-04 13:55:09
function getMaxCharacters(str) {
  const map = {}
  var arr = str.match(/(w)1+/g)
  var max = arr[0].length
  const maxArr = arr.filter(v => v.length === max)

  maxArr.forEach(v => {
    map[v] = v.length
  })
  return map
}

最终简化版

第 114 题:找出字符串中连续出现最多的字符和个数

成熟稳重的好男人 2022-05-04 13:54:20

实现

/**
 * 
 * @param {Array<() => any>} funcArray
 * @param {number} limit 最大请求次数
 */
export function promiseLimit(funcArray, limit = 5) {
  return new Promise((resolve) => {
    let i = funcArray.length >= limit ? limit : funcArray.length
    const result = []
    function execFunc(func) {
      if (i > funcArray.length) return resolve(result)
      let p = func()
      p = p instanceof Promise ? p : Promise.resolve(p)
      p.then(
        () => execFunc(funcArray[i++]),
        () => execFunc(funcArray[i++])
      )
      result.push(p)
    }
    result.concat(funcArray.slice(0, i).map(func => execFunc(func)))
  })
}

测试

function testPromiseLimit(base) {
  let a = []
  for (let i = 0; i < base; i++) {
    a.push(() => {
      console.log(`开始 ${i}`)
      return new Promise((resolve, reject) => {
        Math.random() > 0.5 ? setTimeout(() => resolve('success'), i * 500) : setTimeout(() => reject('fail'), i * 500)
      })
    })
  }
  return a
}
promiseLimit(testPromiseLimit(3))
promiseLimit(testPromiseLimit(5))
promiseLimit(testPromiseLimit(20))

第 153 题:实现一个批量请求函数 multiRequest(urls, maxNum)

成熟稳重的好男人 2022-05-04 13:54:10
function getIndex(arr) {
  const min = Math.min(...(arr.filter(i => i > 0)));
  const index = arr.indexOf(min);
  return index + ',' + min;
}

const arr = [10,21,0,-7,35,7,9,23,18];
console.log(getIndex(arr));

第 161 题:用最精炼的代码实现数组非零非负最小值 index

成熟稳重的好男人 2022-05-04 13:50:20

@Panzhipeng1 如果传入一组正确的参数给Math.max方法,返回的结果都是"number"类型的,而你这个并没有进行类型转化,两者的结果并不一致。当然这得看实际的需求需不需要进行类型转化,以及“最大”和“最小”是依据什么来判断的。

JavaScript 专题之如何求数组的最大值和最小值

成熟稳重的好男人 2022-05-04 08:44:17

补充:株连性
如果祖先元素遭遇某祸害,则其子孙孙无一例外也要遭殃,比如:
opacity:0和display:none,若父节点元素应用了opacity:0和display:none,无论其子孙元素如何挣扎都不会再出现在大众视野;
而若父节点元素应用visibility:hidden,子孙元素应用visibility:visible,那么其就会毫无意外的显现出来。

第 57 题:分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文