Those wonderful JavaScript code snippets

  • 2021-07-10 18:39:29
  • OfStack

Wonderful JavaScript code fragment, share it with you

1. According to the given conditions, get the new array on the original array


var a = [-1, -1, 1, 2, -2, -2, -3, -3, 3, -3];
function f(s, e) {
  var ret = [];
  for (var i in s) { //  Loop according to the original array length 
    ret.push(e(s[i]));
  }
  return ret;
}
f(a, function(n) {
  return n > 0 ? n : 0
}); //  Transmission 1 Anonymous functions as logical judgments 

2. More detailed type monitoring methods than native type or typeof


function type(p) {
  /function.(\w*)\(\)/.test(p.constructor); // Gets the corresponding type through its constructor. 
  return RegExp.$1;
}

3. Deep copy of an object or array, which is used to solve the problem that the value of 1 is changed completely when the object is referenced.


var copyObject = function(obj) {
  var result = {};
  for (var x in obj) {
    result[x] = typeof obj === "object" ? copyObject(obj[x]) : obj[x]
    // If the copied value is still 1 Objects , Repeat the current method. 
  }    
  return result;
}

4. Get the value of Cookie through a regular expression


function getCookie(name) {
  if (name && RegExp("(^| )" + name + "=([^;]*)(;|$)").exec(document.cookie)) return RegExp.$2;
  // (^| )  Mismatched number 1 A space. 
  // ([^;]*)  Matches only except ; All characters except the number. 
  // (;|$)  Match with ; Number or $ Is the ending character. 
}

5. Replace "parseInt" by shift operation


~~3.14 = > 3;

//~ ~ Rounded. ~ Take the inverse code of the current value, ~ ~ means to take the inverse again, that is, to get the current itself (note, the "bit" operation in JS will automatically convert the value to an integer)

6. Converts a numeric value to a hexadecimal string (often used for color)


(~~ (Math.random() * (1 << 24))).toString(16)

//~ ~ is rounded by bit operation.
// < < Left shift. Shifts the binary number of 1 to the left by 24 bits. And 1 < < 24 = = 2 ^ 24 (maximum number of colors that can be represented in RGB mode)
//toString (16) converts numeric values to hexadecimal string output.

7. Compatibility checking of object methods


if ('querySelector' in document) {}

8. Method for converting NodeList HTMLCollection Object to Array or with Array

NodeList: Refers to the list of DOM nodes obtained by the collection method, such as document. getElementsByTagNmae, document. forms … and so on.
HTMLCollection: HTML block, which is very similar to NodeList, but NodeList only supports numeric indexes, while HTMLCollection can support names as indexes.
NodeList is similar to HTMLCollection: it has the appearance of an array but no array method, has the length attribute, and supports indexes to read content


function makeArray(obj) {
  var rs = [],
    len = obj.length;
  try {
    rs = [].slice.call(obj, 0);
  } catch (e) { //for IE
    for (var i = 0; j = obj[i++];) {
      rs.push(j);
    }
  }
  return rs;
}

9. Regular Match Clears Spaces on Both Sides


var trim = function(v){
  var patrn = /^\s*(.*?)\s+$/;
  return (patrn.test(v))? RegExp.$1 : '
  null ';
}

10. Time Formatting


function dateFormat(t){    // t  Is a value in seconds. 
  var h = ~~(t/3600),    // t Divide by 3600 If you round it up, you get hours. 
    m = ~~(t%3600/60),  // t Finding surplus 3600 You get the number of seconds (minutes) that are left after you remove the hours  +  Seconds), divided by 60 If you round it up, you get minutes. 
    s = ~~(t%3600%60);  // t Finding surplus 3600 , and seek more 60 , the rest of nature is "seconds". 
 
   return h+' Hours '+m+' Points '+s+' Seconds ';
}


Related articles: