javascript_forEach踩坑

需求描述

• 现在有一些特殊字符 为了便于区分 使用{}包裹；

• 

• 如上图所示

  • 用户点击 插入特殊字符 按钮时，下方显示特殊字符文本按钮 ； 用户点击特殊字符文本按钮—>input框中添加特殊字符
    • eg:点击早上 —> input框中添加字符串 {早上}
  • 用户也可手动在input框中输入普通字符or特殊字符
    • eg: 可输入 {早上}111{test}
      • 这边表示 早上和test为特殊字符，111为普通字符
        • 但是test不是特殊字符，因此需要在保存时做校验，提醒用户输入符合规定的特殊字符！

校验实现

 /**
     * arr : 特殊字符数组
     * str : 用户选择+输入的文本
     * 返回值为Boolean:为true表示所有全部符合规定，false表示存在不符合规定的特殊字符
     */
    checkout(arr,str){
      const specificCH = arr.map(item => `{${item}}`)
      // 找出用户输入的特殊字符
      const userStr = str.match(/{(.*?)\}/g)
      userStr.forEach(item=>{
        if(!specificCH.includes(item)){
          return false
        }
      })
      return true
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

问题

• 调用方法-存在不符合的特殊字符test

  • this.checkout(['春季','夏季', '秋季', '冬季', '时间', '早上', '中午', '晚上', '日期', '序号', '排序', '啦啦'], '{时间}111{test}{早上}')
    1

  • 发现返回值为true

原因

• 当使用forEach进行数组遍历时，return并不能终止函数执行后续代码；
• 在forEach方法函数中
  • return true 相当于 for循环中的break，终止循环；
  • return false 相当于for循环的continue, 终止当前循环；
• 在上述例子中，当循环到{test}时，由于return false—>会跳出当前循环继续执行下一次循环而不是终止forEach执行！

解决

/**
     * arr : 特殊字符数组
     * str : 用户选择+输入的文本
     * 返回值为Boolean:为true表示所有全部符合规定，false表示存在不符合规定的特殊字符
     */
    checkout(arr,str){
      const specificCH = arr.map(item => `{${item}}`)
      // 找出用户输入的特殊字符
      const userStr = str.match(/{(.*?)\}/g)
      for(let i =0;i<userStr.length;i++){
        const item = userStr[i]
        if(!specificCH.includes(item)){
          return false
        }
      }
      return true
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

知识点

知识点1-match方法

match方法是String构造函数原型上的方法；

知识点2-forEach方法

forEach方法是for循环遍历的封装；

知识点3-正则表达式

正则表达式