This article is based on my guide to front-end interview and advancement for open source projects

Click the official account to get the latest updates of the document, and you can receive the front-end interview Manual and the most standard resume template matching this guide.

Parse the URL Params as an object

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* Result {user: 'anonymous', id: [123, 456], // Duplicate keys to array, can be converted to number type city: 'Beijing ', // Chinese decoding needs to be enabled: True, // The value key convention is not specified to be true} */

Copy the code
function parseParam(url) {
  const paramsStr = /. + \? (. +) $/.exec(url)[1]; / / will be? I'm going to pull out the string
  const paramsArr = paramsStr.split('&'); // Split the string with & and store it in the array
  let paramsObj = {};
  // Save params to the object
  paramsArr.forEach(param= > {
    if (/ = /.test(param)) { // Handle arguments with value
      let [key, val] = param.split('='); // Split key and value
      val = decodeURIComponent(val); / / decoding
      val = /^\d+$/.test(val) ? parseFloat(val) : val; // Determine whether to convert to a number

      if (paramsObj.hasOwnProperty(key)) { // Add a value if the object has a key
        paramsObj[key] = [].concat(paramsObj[key], val);
      } else { // If the object does not have this key, create the key and set the valueparamsObj[key] = val; }}else { // Handle arguments without value
      paramsObj[param] = true; }})return paramsObj;
}

Copy the code

Template Engine implementation

let template = 'I am {{name}}, age {{age}}, gender {{sex}}';
let data = {
  name: 'name'.age: 18
}
render(template, data); // I am name, age 18, gender undefined

Copy the code
function render(template, data) {
  const reg = /\{\{(\w+)\}\}/; // The template string is regular
  if (reg.test(template)) { // Check if there is a template string in the template
    const name = reg.exec(template)[1]; // Find the first template string field in the current template
    template = template.replace(reg, data[name]); // Render the first template string
    return render(template, data); // Recursively render and return the rendered structure
  }
  return template; // If the template does not have a template string
}

Copy the code

Convert to hump naming

var s1 = "get-element-by-id"

// Convert to getElementById
Copy the code
var f = function(s) {
    return s.replace(/-\w/g.function(x) {
        return x.slice(1).toUpperCase(); })}Copy the code

Find the most characters and number of occurrences in a string

Example: the most common abbcccDDDDd -> character is D, which occurs 5 times

let str = "abcabcabcbbccccc";
let num = 0;
let char = ' ';

 // Arrange them in a certain order
str = str.split(' ').sort().join(' ');
// "aaabbbbbcccccccc"

// Define a regular expression
let re = /(\w)\1+/g;
str.replace(re,($0, $1) = > {if(num < $0.length){
        num = $0.length;
        char = $1; }});console.log('the most characters are${char}Appeared,${num}Time `);

Copy the code

String lookup

Use the most basic traversal implementation to determine if string A is included in string B and return the position of its first occurrence (-1 if not found).

a='34'; b='1234567'; / / return 2
a='35'; b='1234567'; / / return 1
a='355'; b='12354355'; / / return 5
isContain(a,b);

Copy the code
function isContain(a, b) {
  for (let i in b) {
    if (a[0] === b[i]) {
      let tmp = true;
      for (let j in a) {
        if(a[j] ! == b[~~i + ~~j]) { tmp =false; }}if (tmp) {
        returni; }}}return - 1;
}

Copy the code

Implement thousands separator

// Keep three decimal places
parseToMoney(1234.56); // return '1,234.56'
parseToMoney(123456789); / / return '123456789'
parseToMoney(1087654.321); / / return '1087654321'

Copy the code
function parseToMoney(num) {
  num = parseFloat(num.toFixed(3));
  let [integer, decimal] = String.prototype.split.call(num, '. ');
  integer = integer.replace(/\d(? =(\d{3})+$)/g.'$&,);
  return integer + '. ' + (decimal ? decimal : ' ');
}

Copy the code

Regular expressions (which use the forward and anti-forward declarations of regex):

function parseToMoney(str){
    // Only the position is matched
    let re = / (? = (? ! \b)(\d{3})+$)/g; 
   return str.replace(re,', '); 
}
Copy the code

Check if it’s a phone number

function isPhone(tel) {
    var regx = /^1[34578]\d{9}$/;
    return regx.test(tel);
}

Copy the code

Verify whether it is a mailbox

function isEmail(email) {
    var regx = /^([a-zA-Z0-9_\-])+@([a-zA-Z0-9_\-])+(\.[a-zA-Z0-9_\-])+$/;
    return regx.test(email);
}

Copy the code

Verify id

function isCardNo(number) {
    var regx = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    return regx.test(number);
}

Copy the code

Reference:

  • Front-end interview encountered algorithm problems

The public,

If you want to pay close attention to the latest articles and the latest document updates, please pay attention to the programmer interview officer of the official account. The subsequent articles will be updated in the official account first.

Resume template: follow the public account reply “template” to obtain

“Front-end interview manual” : complete with this guide to the assault manual, concern public number reply “FED” to obtain