45个JavaScript小技巧

2016-02-21 17:20:00  浏览:1545  作者:管理员

原文地址 http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/

这篇文章的质量个人感觉一般(有些甚至有些无厘头,比如第五点,构造函数的使用,直接被我去掉了),建议过一遍就好。详细的翻译版本可以参考 JavaScript奇技淫巧45招

  • 声明变量时别忘记 var

  • 相等比较请用 === 而不是 ==

  • undefinednull、0、falseNaN''(空字符串)都是假值

  • 行末加封号

  • 小心使用 typeofinstanceof 以及 constructor
    • JavaScript原型链和instanceof运算符的暧昧关系
    • typeof和instanceof简介及用法
    • javascript中prototype、constructor以及__proto__之间的三角关系
  • IIFE。 参考 (译)详解javascript立即执行函数表达式(IIFE)

  • 获取数组的任一元素

      var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];  var  randomItem = items[Math.floor(Math.random() * items.length)];
  • 获取某一范围内的任一数值

      var x = Math.floor(Math.random() * (max - min + 1)) + min;
  • 生成 0~max 的数组 ([0, 1, 2 ... max])

      var a = [], max = 100;  for (var i = 0; a.push(i++) <= max; );
  • 生成任意长度字符串(字符包括 a-z 0-9)

      function generateRandomAlphaNum(len) {    var rdmString = "";    for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));    return rdmString.substr(0, len);  }
  • 数组乱序

      var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];  numbers = numbers.sort(function(){ return Math.random() - 0.5});

    有一个比 sort 更好的办法(Fisher-Yates shuffle),具体可以参考 discuss

  • string trim

      String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};
  • 在一个数组后附加一个数组

      var array1 = [12 , "foo" , {name "Joe"} , -2458];  var array2 = ["Doe" , 555 , 100];  Array.prototype.push.apply(array1, array2);  /* array1 will be equal to  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */
  • 把伪数组转为数组

      var argArray = Array.prototype.slice.call(arguments);
  • 判断数字

      function isNumber(n){      return !isNaN(parseFloat(n)) && isFinite(n);  }
  • 判断数组 see Javascript中判断数组的正确姿势

  • 获取数组最值

      var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];   var maxInNumbers = Math.max.apply(Math, numbers);   var minInNumbers = Math.min.apply(Math, numbers);
  • 清空数组

      var myArray = [12 , 222 , 1000 ];    myArray.length = 0; // myArray will be equal to [].
  • 删除数组元素请不要用 delete,而是用 splice

  • 截取数组

      var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];    myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
  • 短路运算符

  • 用 map() 遍历元素

  • 小数保留(注意,toFixed 方法返回 string 值)

      var num =2.443242342;  num = num.toFixed(4);  // num will be equal to 2.4432
  • 浮点数问题

      0.1 + 0.2 === 0.3 // is false   9007199254740992 + 1 // is equal to 9007199254740992    9007199254740992 + 2 // is equal to 9007199254740994

    see 【0.1 + 0.2 = 0.30000000000000004】该怎样理解?

  • 用 for-in 检查对象属性

      for (var name in object) {        if (object.hasOwnProperty(name)) {           // do something with name                          }    }
  • 逗号运算符

      var a = 0;   var b = ( a++, 99 );   console.log(a);  // a will be equal to 1   console.log(b);  // b is equal to 99
  • 缓存数据(避免查询相同 DOM 多次)

      var navright = document.querySelector('#right');   var navleft = document.querySelector('#left');   var navup = document.querySelector('#up');   var navdown = document.querySelector('#down');
  • 使用 isFinite() 方法前先检查参数

      isFinite(0/0) ; // false   isFinite("foo"); // false   isFinite("10"); // true   isFinite(10);   // true   isFinite(undefined);  // false   isFinite();   // false   isFinite(null);  // true  !!! 
  • JSON 序列化和反序列化

      var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };   var stringFromPerson = JSON.stringify(person);   /* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */   var personFromString = JSON.parse(stringFromPerson);    /* personFromString is equal to person object  */
  • 避免使用 eval() 和 Function() 构造函数 。为了避免双重求值,see 高性能JavaScript 编程实践

  • 避免使用 with

  • 避免用 for-in 遍历数组元素

  • setInterval() setTimeout() 的参数请使用函数,而不是字符串。避免双重求值,同上。

  • 使用 switch-case 而不是一长串的 if-else。这点有待考证,The Good Part 中说要尽量不使用 switch-case 语句。

  • HTML 实体编码

      function escapeHTML(text) {        var replacements= {"<": "&lt;", ">": "&gt;","&": "&amp;", """: "&quot;"};                            return text.replace(/[<>&"]/g, function(character) {            return replacements[character];        });   }
  • 避免在循环中使用 try-catch-finally
    这样写是不好的:

      var object = ['foo', 'bar'], i;    for (i = 0, len = object.length; i <len; i++) {        try {            // do something that throws an exception       }        catch (e) {             // handle exception        }   }

    应该这样:

      var object = ['foo', 'bar'], i;    try {       for (i = 0, len = object.length; i <len; i++) {            // do something that throws an exception       }   }   catch (e) {         // handle exception    } 
  • AJAX 设置请求超时(setTimeout 设置请求超时中止 AJAX)

      var xhr = new XMLHttpRequest ();   xhr.onreadystatechange = function () {        if (this.readyState == 4) {            clearTimeout(timeout);            // do something with response data       }    }    var timeout = setTimeout( function () {        xhr.abort(); // call error callback    }, 60*1000 /* timeout after a minute */ );   xhr.open('GET', url, true);    xhr.send();
  • WebSocket 设置超时

  • 尽量使用原生的 JavaScript。 Use VanillaJS

  • JSLint

  • JavaScript is awesome

评论区

共 0 条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

【随机新闻】

返回顶部