Q: Parses URL Params as objects

Parse all parameters of an arbitrary URL as Object as fully and correctly as possible, paying attention to the processing of boundary conditions.

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], // Result {user: 'anonymous', id: [123, 456], // Result {user: 'anonymous', id: [123, 456], True, // not specifying worthy key convention is true} */
Copy the code

A:

function parseParam(url) {
  const paramsStr = /. + \? (. +) $/.exec(url)[1]; / / will be? I'm going to take the strings that follow
  const paramsArr = paramsStr.split('&'); // Store the string in an array, split by &
  let paramsObj = {};
  // Save params to an object
  paramsArr.forEach(param= > {
    if (/ = /.test(param)) { // Process parameters with value
      let [key, val] = param.split('='); // Separate 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 { // Process parameters without value
      paramsObj[param] = true; }})return paramsObj;
}
Copy the code

Template rendering

Q: Implement a simple template engine:

let template = 'I'm {{name}}, age {{age}}, sex {{sex}}';
let data = {
  name: 'name'.age: 18
}
render(template, data); // My name is name, age 18, gender undefined
Copy the code

The answer:

  • Simple implementation

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

  • One-line code implementation

    function render(template, data) {
  return template.replace(new RegExp('{{(. *?) }} '.'g'), (match, key) => data[key.trim()]);
}
Copy the code
reference

A single line of code implements a simple template string replacement

Q: Implement a simple virtual DOM rendering

let domNode = { tagName: 'ul', props: { class: 'list' }, children: [{ tagName: 'li', children: ['item1'] }, { tagName: 'li', children: ['item1'] }] }; Dom <ul class="list"> <li>item1</li> </li> </li> </li>Copy the code

The answer:

function render(domNode) {
  if(! domNode)return document.createDocumentFragment();
  let $el
  if (typeof domNode === 'object') {
    $el = document.createElement(domNode.tagName);

    if (domNode.hasOwnProperty('props')) {
      for (let key indomNode.props) { $el.setAttribute(key, domNode.props[key]); }}if (domNode.hasOwnProperty('children')) {
      domNode.children.forEach(val= > {
        const$childEl = render(val); $el.appendChild($childEl); }}})else {
    $el = document.createTextNode(domNode);
  }

  return $el;
}
Copy the code

Q: String lookup

Use a basic traversal implementation to determine whether string A is contained in string B and return the first occurrence (-1 if not found).

Example:

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

The answer:

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

Q: Change an arbitrarily long number into a comma separated format

Example:

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

A:

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

Q: The basic implementation of data binding

// Implement a method to add dynamic binding events to all properties of OBj, which will be triggered when the property value changes
let obj = {
  key_1: 1.key_2: 2
}
function func(key) {
  console.log(key + The value of 'has changed:' + this[key]);
}
bindData(obj, func);
obj.key_1 = 2; // The value of key_1 has changed: 2
obj.key_2 = 1; // The value of key_2 has changed: 1
Copy the code

A:

function bindData(obj, fn) {
  for (let key in obj) {
    Object.defineProperty(obj, key, {
      set(newVal) {
        if (this.value ! == newVal) {this.value = newVal;
          fn.call(obj, key);
        }
      },
      get() {
        return this.value; }}}})Copy the code

Q: Data structure processing

There is an ancestor tree json object. If a person has one son, the child is the son object, and if there are more than one son, the child is an array of son objects.

Implement a function that finds the names of all the people in the family who have multiple sons and outputs an array of names.

// Sample data
let data = {
  name: 'jack'.child: [{name: 'jack1' },
    {
      name: 'jack2'.child: [{
        name: 'jack2-1'.child: { name: 'jack2-1-1'}}, {name: 'jack2-2'}]}, {name: 'jack3'.child: { name: 'jack3-1'}}}]Copy the code

The answer:

  • Using a recursive

    function findMultiChildPerson(data) {
  let nameList = [];

  function tmp(data) {
    if (data.hasOwnProperty('child')) {
      if (Array.isArray(data.child)) {
        nameList.push(data.name);
        data.child.forEach(child= > tmp(child));
      } else {
        tmp(data.child);
      }
    }
  }
  tmp(data);
  return nameList;
}
Copy the code

  • non-recursive

    function findMultiChildPerson(data) {
  let list = [data];
  let nameList = [];

  while (list.length > 0) {
    const obj = list.shift();
    if (obj.hasOwnProperty('child')) {
      if (Array.isArray(obj.child)) {
        nameList.push(obj.name);
        list = list.concat(obj.child);
      } else{ list.push(obj.child); }}}return nameList;
}
Copy the code