当前位置：首页 > news >正文

Javascript 正确用法二

news 来源：原创 2024/5/17 15:16:22

好的,废话不多说,接着上篇来.

变量(variables)

始终使用 var keyword来定义变量,假设不这样将会导致变量全局化,造成污染.

//bad

superPower = new SuperPower();

//good

var superPower = new SuperPower();

使用一个 varkeyword来定义多个变量...而且每一个变量一行..

    // bad
    var items = getItems();
    var goSportsTeam = true;
    var dragonball = 'z';

    // good
    var items = getItems(),
        goSportsTeam = true,
        dragonball = 'z';

//我个人更喜欢以下这样的定义方法.

    var items = getItems()
        , goSportsTeam = true
        ,   dragonball = 'z';

将未赋值的变量放在后面...

    // bad
    var i, len, dragonball,
        items = getItems(),
        goSportsTeam = true;

    // bad
    var i, items = getItems(),
        dragonball,
        goSportsTeam = true,
        len;

    // good
    var items = getItems(),
        goSportsTeam = true,
        dragonball,
        length,
        i;

将变量的定义和赋值放在作用域的顶部,这样能避免变量提升相关的问题..

    // bad
    function() {
      test();
      console.log('doing stuff..');

      //..other stuff..

      var name = getName();

      if (name === 'test') {
        return false;
      }

      return name;
    }

    // good
    function() {
      var name = getName();

      test();
      console.log('doing stuff..');

      //..other stuff..

      if (name === 'test') {
        return false;
      }

      return name;
    }

    // bad
    function() {
      var name = getName();

      if (!arguments.length) {
        return false;
      }

      return true;
    }

    // good
    function() {
      if (!arguments.length) {
        return false;
      }

      var name = getName();

      return true;
    }

//上面这个样例我感觉这么奇葩呢...这个name根本没有起到不论什么作用啊...

Hoisting (国内书籍翻译为提升)

变量的定义会得到提升,也就是移动到作用域的顶部 ,可是赋值并没有得到提升..

举个简单的样例..对于简单的 var a = 10;

事实上经历的是两个过程,

① var a;

② a = 10;

恩,,变量提升仅仅是提升的第一部分,而第二部分并没有得到提升...

    function example() {
      console.log(declaredButNotAssigned); // => undefined
      var declaredButNotAssigned = true;
    }

    function example() {
      var declaredButNotAssigned;
      console.log(declaredButNotAssigned); // => undefined
      declaredButNotAssigned = true;
    }

匿名函数表达式提升的仅仅是变量的名称,而不是函数的定义..

    function example() {
      console.log(anonymous); // => undefined

      anonymous(); // => TypeError anonymous is not a function

      var anonymous = function() {
        console.log('anonymous function expression');
      };
    }

命名函数提升的相同是变量的名称,而不是函数的名称.或者是函数体..

    function example() {
      console.log(named); // => undefined //变量名得到提升..

      named(); // => TypeError named is not a function //函数体没有得到提升..

      superPower(); // => ReferenceError superPower is not defined //函数名没有得到提升..

      var named = function superPower() {
        console.log('Flying');
      };
    }

函数定义同一时候提升他们的名称和函数体..

    function example() {
      superPower(); // => Flying

      function superPower() {
        console.log('Flying');
      }
    }

//这也就是为什么我们在我们代码的底部通过这样的方式可以訪问,可是依照之前的方式定义函数无法訪问的原因了..

//如今大家明确了吧..

Contional Expressions & Equality 条件表达式和等式..

条件表达式会通过类型转换来对括号内的内容进行评估来返回 Boolean值..

转换会遵循下面规则:

1,对象返回 true

2,underfined 返回false

3, Null 返回false

4, Booleans类型就返回自己.

5, +0,0,-0,NaN 返回false ,其它返回true

6, 空字符返回false..//注意注意,假设你的字符串里面有空格,则相同会返回true

if([0]) {

//true

//这个array 是我们之前提过的,是通过字面量来进行数组的创建.... 当然返回true,不要被 0 迷惑了..

}

    // bad
    if (name !== '') {
      // ...stuff...
    }

    // good
    if (name) {
      // ...stuff...
    }

    // bad
    if (collection.length > 0) {
      // ...stuff...
    }

    // good
    if (collection.length) {
      // ...stuff...
    }

代码块..

    // bad
    if (test)
      return false;

    // good
    if (test) return false;

    // good
    if (test) {
      return false;
    }

    // bad
    function() { return false; }

    // good
    function() {
      return false;
    }