出來混老是要還的-JS正則前傳

前言: 正則表達式一直是我的痛點, 相信不少人 ( 說的就是你 ) 跟我同樣存在相似的狀況, 正則是反覆學, 反覆忘, 從我的角度看主要的緣由仍是：較少的使用場景, 若是像數組的幾個經常使用方法同樣, 絕大多數人確定能熟練運用。 最近迫使我拿起正則這把屠龍刀的原由是( 時間充足和一道小的面試題 ), 那我們就先從這道面試題提及

Demo1

// 觀察以下規律, 寫一個函數`accum`
// accum("abcd"); // "A-Bb-Ccc-Dddd"
// accum("helloWorld"); // "H-Ee-Lll-Llll-Ooooo-Wwwwww-Ooooooo-Rrrrrrrr-Lllllllll-Dddddddddd"
// accum("China"); // "C-Hh-Iii-Nnnn-Aaaaa"
複製代碼

看到題的第一反應就是, 握草這還不簡單, 兩層循環加上珍藏多年的字符串拼接技術(-_-||), 妥妥的解決這個問題

const accum = str => {
  let result = "";
  str.toLowerCase().split("").forEach((el, idx) => {
      for (let i = 0; i <= idx; i++) {
        if (i == 0) {
          result += el.toUpperCase();
        } else {
          result += el;
        }
      }
      result += el + "-";
    });
  return result.slice(0, -1);
  // 看到slice慌不慌?是否是忘記這鬼東西是幹什麼的了?和substr/string有什麼區別?
};
console.log(accum("CHina"));
複製代碼

寫完而且測試結果正確, 就開始沾沾自喜, 感受萬事大吉。( 這種狀態很像在工做中, 寫完功能不去優化同樣 )

上面的一坨代碼, 對, 就是一坨代碼, 一坨像極了業務功能的邏輯代碼, 沒有精巧的思路, 沒有精緻的寫法。 這踏馬跟鹹魚有什麼區別?

優雅的循環

const accum = str => {
  let result = "";
  for (let i = 0; i < str.length; i++) {
    const temp = str[i];
    result += temp.toUpperCase();
    for (let j = i; j > 0; j--) {
      result += temp.toLowerCase();
    }
    result += "-";
  }
  return result.slice(0, -1);
};
console.log(accum("CHina"));
複製代碼

優雅的循環, 優雅的循環, 優雅的循環 啊、啊、啊！

精緻的利己主義者

const accum = str => {
  return Array.from(str.toLowerCase(), (item, index) => {
    return (
      item.toUpperCase() + Array.from({length: index}, () => {
          return item;
        }
      ).join("")
    );
  }).join("-");
};
console.log(accum("CHina"));
複製代碼

放蕩不羈的 reduce

const accum = str => {
  return Array.from(str.toLowerCase()).reduce((accu, cur, idx) => {
      accu.push(cur.toUpperCase().padEnd(idx + 1, cur));
      return accu;
    }, []).join("-");
};
console.log(accum("CHina"));
複製代碼

百辟匕首( RegExp )

匹配與獲取字符串方法

const accum = str => {
  return str.toLowerCase().replace(/\w{1}/gi, (item, idx) => {
      let temp = "";
      Array.from(new Array(idx)).map(() => {
        temp += item;
      });
      return `${item.toUpperCase()}${temp}-`;
    }).slice(0, -1);
};
console.log(accum("CHina"));
複製代碼

怎麼樣, 最後幾種方案看的是否是很刺激、很驚喜, 其實就是一堆奇葩操做, 這是 API 操做者的狂歡, 也是 JS 開發者的基本功^_^

這幾個方案裏面最使人驚喜的仍是 replace, 當第二個參數是一個函數, 當第一個參數爲正則表達式而且爲全局匹配模式時, 這個方法每次匹配都會被調用。

replace 應該是正則的 6 個經常使用 API 中最強大的一個, 它能夠拿到你想要的信息, 而且假借替換之名, 作一些神奇操做

傳送門 -> JS正則經常使用的有四種操做： 驗證、切分、提取、替換

注：

1. \w 匹配單詞字符, 等價於[0-9a-ZA-Z_], 數字字母下劃線
2. {1} 連續出現 1 次

夯實基礎