• 1、输入框防止元素标记注入

  // Prevents input from having injected markup
  function cleanInput(input) {
      return $('<div/>').text(input).text());
  }
  

• 2、btoa和atob

  将ascii字符串或二进制数据转换成一个base64编码过的字符串, 该方法不能直接作用于Unicode字符串.

  function utf8_to_b64( str ) {
    return window.btoa(unescape(encodeURIComponent( str )));
  }
  function b64_to_utf8( str ) {
    return decodeURIComponent(escape(window.atob( str )));
  }
  
  or
  
  function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
      return String.fromCharCode('0x' + p1);
    }));
  }
  
  b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
  

• 3、String.prototype.charCodeAt()和String.fromCharCode()

  charCodeAt() 返回指定索引处字符的 Unicode 数值，String.fromCharCode() 静态方法根据指定的 Unicode 编码中的序号值来返回一个字符串。 String.prototype.charAt() 方法从一个字符串中返回指定的字符。 String.prototype.codePointAt() 方法返回 一个 Unicode 编码点值的非负整数。 String.fromCodePoint() 静态方法返回使用指定的代码点序列(一串 Unicode 编码位置)创建的字符串。

• 4、encodeURIComponent和encodeURI的区分

  var arr = [];
  for(var i=0;i<2568;i++) {
    var char=String.fromCharCode(i);
    if(encodeURI(char)!==encodeURIComponent(char)) {
      arr.push({
        character:char,
        encodeURI:encodeURI(char),
        encodeURIComponent:encodeURIComponent(char)
      });
    }
  }
  console.table(arr);
  

• 5、获取查询字符串的值

  function getParameterByName(name,search) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),  //[^&#]，非&且非#
  
      results = regex.exec(search || location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
  
  $.urlParam = function(name[, url]){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(url || window.location.href) || '';
    return results[1] || 0;
  }
  
  /*列出所有的查询字符串*/
  var urlParams;
  (window.onpopstate = function () {
    var match,
      pl = /\+/g, // Regex for replacing addition symbol with a space
  
      search = /([^&=]+)=?([^&]*)/g,
      decode = function (s) { 
        return decodeURIComponent(s.replace(pl, " ")); 
      },
      query  = window.location.search.substring(1);
  
    urlParams = {};
    while (match = search.exec(query))
      urlParams[decode(match[1])] = decode(match[2]);
  })();
  
  // 更新查询字符串
  function updateQueryStringParameter(uri, key, value) {
    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";
    if (uri.match(re)) {
      return uri.replace(re, '$1' + key + "=" + value + '$2');
    }
    else {
      return uri + separator + key + "=" + value;
    }
  }
  if ('URLSearchParams' in window) {
      var searchParams = new URLSearchParams(window.location.search);
      searchParams.set("foo", "bar");
      window.location.search = searchParams.toString();
  }
  

• 6、parseInt使用时尽量指定进制位数，避免出现parseInt(“0x10”);//16。而parseFloat则不会这样。

• 7、String.prototype.anchor(name) vs String.prototype.link(url)

  一个传递name属性，一个传递href属性，创建一个超链接，存在一个问题就是不传都会在属性里填充undefined.

• 8、递归函数

  [1,2,3,4,5].map(function factorial (n) {
    return !(n > 1) ? 1 : factorial(n-1)*n;
  });
  

  当回调函数是匿名函数时，此时可以使用arguments隐藏对象，代表执行函数的参数对象;arguments 对象仅在函数内部有效，在函数外部调用 arguments 对象会出现一个错误。

  • arguments.callee, 指向当前执行的函数。
  • arguments.caller, 指向调用当前函数的函数。
  • arguments.length, 指向传递给当前函数的参数数量。

• 9、String.prototype.replace()的第二个参数$&、$$、$’、$·

  • $&：当前模式匹配子串值；
  • $’：当前模式匹配子串右边的字符串值；
  • $`：当前模式匹配子串左边的字符串值；

• 10、Number.prototype.toFixed 和 toPrecision、toExponential方法

  • toFixed: 原来为全局方法，ES6将被收为Number原型方法，先四舍五入后固定小数点位数。
  • toPrecision: 四舍五入后截取小数点位数，指定精确度。
  • toExponential: 四舍五入后截取小数点后转换成指数形式。

  ES 5取整方法: parseInt, toFixed, Math.floor, Math.round, Math.ceil

• 11、生成六位数随机数 console.log(('000000' + Math.floor(Math.random() * 999999)).slice(-6));

• 12、获取时间戳 Date.parse(new Date())
(new Date()).valueOf()
(new Date()).getTime() Date.now()

• 13、十进制转换成二进制 Number.prototype.toString(2)

• 14、切屏次数记录方法

  var count = 0;
  window.addEventListener("blur", function(){
    count++;
    console.log("You left "+count+" times");
  });
  

  或者Document.hidden 、 Document.visibilityState 参见mdn

• 15、快速打印回调函数参数

  method(console.log) => $('.class').each(console.log);

• 16、js异常信息收集

  window.onerror = function(message, source, lineno, colno, error){}，当JavaScript运行时错误（包括语法错误）发生时，window会触发一个ErrorEvent接口的error事件，并执行window.onerror()。当一项资源（如<img>或<script>）加载失败，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数。这些error事件不会向上冒泡到window，不过（至少在Firefox中）能被单一的window.addEventListener捕获。

  window.onerror = function (msg, url, lineNo, columnNo, error) {
    var string = msg.toLowerCase();
    var substring = "script error";
    if (string.indexOf(substring) > -1){
        alert('Script Error: See Browser Console for Detail');
    } else {
        alert(msg, url, lineNo, columnNo, error);
    }
    return false;
  };
  

• 17、有趣的js异常处理

    try {
        console.log('do something');
    } catch(e) {
        window.location.href = 'http://stackoverflow.com/search?q=[js]+' + e.message;
    }
  

• 18、日期格式排序

    var arr = [{"gmtCreate":"2018-02-27 15:35:55"},{"gmtCreate":"2018-02-27 16:11:00"},{"gmtCreate":"2018-02-27 15:26:01"}];
    arr.sort((a, b) => {
        return Date.parse(a.gmtCreate) - Date.parse(b.gmtCreate);
    });
    // [{"gmtCreate":"2018-02-27 15:26:01"},{"gmtCreate":"2018-02-27 15:35:55"},{"gmtCreate":"2018-02-27 16:11:00"}]
  

• 19、统计十进制数值转换二进制后1的出现次数

  var n = 303;
  n.toString(2).match(/1/g).length;   // 6
  

• 20、立即执行（自执行）匿名函数的几种写法

  (function(){}())  // 把函数表达式和执行当作语句直接执行
  (function(){})()  // 把函数当作表达式解析，然后执行解析后的函数
  !function(){}()   // 相当于第二种
  +function(){}()   // 相当于第二种
  -function(){}()   // 相当于第二种
  ~function(){}()   // 相当于第二种
  

• 21、时间戳 -> yyyy/mm/dd hh:mm:ss

  // to hh:mm:ss
  // @t 秒数, 最好不要超过 24*60*60
  function formatToTime(t) {
    var h = parseInt(t / 60 / 60);
    var m = parseInt(t / 60 % 60);
    var s = parseInt(t % 60);
    return [
        h > 9 ? '' + h : '0' + h,
        m > 9 ? '' + m : '0' + m,
        s > 9 ? '' + s : '0' + s,
    ];
  }