你认为每个程序员都应该知道JavaScript的哪些“隐藏特性”?

在看到以下问题的优质答案后,我认为是时候向JavaScript请求它了。

HTML的隐藏特性 CSS的隐藏特性 PHP的隐藏特性 ASP的隐藏特性。网 c#的隐藏特性 Java的隐藏特性 Python的隐藏特性

尽管JavaScript可以说是目前最重要的客户端语言(问问谷歌就知道了),但令人惊讶的是,大多数web开发人员很少意识到它的强大。


当前回答

你可以在左边使用[]来分配局部变量。如果你想从一个函数中返回多个值,而不需要创建一个不必要的数组,这个方法很方便。

function fn(){
    var cat = "meow";
    var dog = "woof";
    return [cat,dog];
};

var [cat,dog] = fn();  // Handy!

alert(cat);
alert(dog);

它是核心JS的一部分,但不知为何,直到今年我才意识到。

其他回答

合并操作符非常酷,可以生成一些干净简洁的代码,特别是当你将它们链接在一起时:a || b || c ||“default”;问题是,由于它是通过计算为bool而不是null来工作的,如果计算为false的值是有效的,它们通常会被忽略。不用担心,在这些情况下,只要恢复到好的三元操作符就可以了。

我经常看到代码已经放弃使用全局变量而不是静态变量,所以下面是如何(在一个我认为你可以称之为泛型单例工厂的例子中):

var getInstance = function(objectName) {
  if ( !getInstance.instances ) {
    getInstance.instances = {};
  }

  if ( !getInstance.instances[objectName] ) {
    getInstance.instances[objectName] = new window[objectName];
  }

  return getInstance.instances[objectName];
};

另外,请注意新窗口[objectName];这是通过名称一般实例化对象的关键。我两个月前才算出来的。

本着同样的精神,在使用DOM时,当我第一次初始化我要添加的任何功能时,我经常将功能参数和/或标志埋藏在DOM节点中。如果有人抱怨,我再举个例子。

令人惊讶的是,第一页上没有人提到hasOwnProperty,这是一个遗憾。当使用in进行迭代时,在迭代的容器上使用hasOwnProperty方法以确保所使用的成员名是您所期望的成员名,这是一种很好的防御性编程。

var x = [1,2,3];
for ( i in x ) {
    if ( !x.hasOwnProperty(i) )  { continue; }
    console.log(i, x[i]);
}

阅读这里了解更多。

最后,with几乎总是一个坏主意。

在创建新“对象”时,括号是可选的。

function Animal () {

}

var animal = new Animal();
var animal = new Animal;

同样的事情。

语法糖:内联for循环闭包

var i;

for (i = 0; i < 10; i++) (function ()
{
    // do something with i
}());

几乎打破了Douglas Crockford的所有代码惯例,但我认为它看起来很漂亮,从未减少:)


选择:

var i;

for (i = 0; i < 10; i++) (function (j)
{
    // do something with j
}(i));

闭包的禅意

其他人也提到了关闭。但令人惊讶的是,有那么多人知道闭包,使用闭包编写代码,但仍然对闭包的真正含义有错误的认识。有些人混淆了一级函数和闭包。但也有人认为它是一种静态变量。

对我来说,闭包是一种“私有”全局变量。这是一种变量,一些函数将其视为全局变量,而其他函数则看不到。现在,我知道这是在快速和松散地描述底层机制,但这就是它的感觉和行为。说明:

// Say you want three functions to share a single variable:

// Use a self-calling function to create scope:
(function(){

    var counter = 0; // this is the variable we want to share;

    // Declare global functions using function expressions:
    increment = function(){
        return ++counter;
    }
    decrement = function(){
        return --counter;
    }
    value = function(){
        return counter;
    }
})()

现在,增量、减量和值这三个函数共用一个变量counter,而不是一个实际的全局变量counter。这是闭包的真正本质:

increment();
increment();
decrement();
alert(value()); // will output 1

以上并不是闭包的真正有用的用法。事实上,我认为这样使用它是一种反模式。但是它对于理解闭包的性质是有用的。例如,大多数人在尝试做以下事情时会被发现:

for (var i=1;i<=10;i++) {
    document.getElementById('span'+i).onclick = function () {
        alert('this is span number '+i);
    }
}
// ALL spans will generate alert: this span is span number 10

这是因为他们不理解闭包的本质。他们认为他们把i的值传递给了函数,而实际上这些函数共享一个变量i,就像我之前说的,一个特殊的全局变量。

为了解决这个问题,你需要分离*闭包:

function makeClickHandler (j) {
    return function () {alert('this is span number '+j)};
}

for (var i=1;i<=10;i++) {
    document.getElementById('span'+i).onclick = makeClickHandler(i);
}
// this works because i is passed by reference 
// (or value in this case, since it is a number)
// instead of being captured by a closure

*注:我不知道这里的正确术语。

let.

与var缺乏块作用域对应的是let,在JavaScript 1.7中引入。

The let statement provides a way to associate values with variables within the scope of a block, without affecting the values of like-named variables outside the block. The let expression lets you establish variables scoped only to a single expression. The let definition defines variables whose scope is constrained to the block in which they're defined. This syntax is very much like the syntax used for var. You can also use let to establish variables that exist only within the context of a for loop.

  function varTest() {
        var x = 31;
    if (true) {
      var x = 71;  // same variable!
      alert(x);  // 71
    }
    alert(x);  // 71
  }

  function letTest() {
    let x = 31;
    if (true) {
      let x = 71;  // different variable
      alert(x);  // 71
    }
    alert(x);  // 31
  }

截至2008年,FireFox 2.0+和Safari 3.x支持JavaScript 1.7。