Recursos ocultos do JavaScript? [fechadas]

Quais "recursos ocultos" do JavaScript você acha que todo programador deveria saber?

Depois de ter visto a excelente qualidade das respostas para as seguintes perguntas, pensei que era hora de solicitar JavaScript.

• Recursos ocultos do HTML
• Recursos ocultos do CSS
• Recursos ocultos do PHP
• Recursos ocultos do ASP.NET
• Recursos ocultos do c #
• Recursos ocultos do Java
• Recursos ocultos do Python

Embora o JavaScript seja sem dúvida a linguagem mais importante do lado do cliente no momento (basta perguntar ao Google), é surpreendente como a maioria dos desenvolvedores da Web aprecia o quão poderoso ele realmente é.

Você não precisa definir nenhum parâmetro para uma função. Você pode apenas usar o argumentsobjeto de matriz da função .

function sum() {
    var retval = 0;
    for (var i = 0, len = arguments.length; i < len; ++i) {
        retval += arguments[i];
    }
    return retval;
}

sum(1, 2, 3) // returns 6

Eu poderia citar a maior parte do excelente livro de Douglas Crockford, JavaScript: The Good Parts .

Mas vou levar apenas um para você, sempre use ===e em !==vez de ==e!=

alert('' == '0'); //false
alert(0 == ''); // true
alert(0 =='0'); // true

==não é transitivo. Se você usá- ===lo, daria false para todas essas instruções conforme o esperado.

As funções são cidadãos de primeira classe em JavaScript:

var passFunAndApply = function (fn,x,y,z) { return fn(x,y,z); };

var sum = function(x,y,z) {
  return x+y+z;
};

alert( passFunAndApply(sum,3,4,5) ); // 12

Técnicas de programação funcional podem ser usadas para escrever javascript elegante .

Particularmente, funções podem ser passadas como parâmetros, por exemplo, Array.filter () aceita um retorno de chamada:

[1, 2, -1].filter(function(element, index, array) { return element > 0 });
// -> [1,2]

Você também pode declarar uma função "privada" que existe apenas no escopo de uma função específica:

function PrintName() {
    var privateFunction = function() { return "Steve"; };
    return privateFunction();
}

Você pode usar o operador in para verificar se existe uma chave em um objeto:

var x = 1;
var y = 3;
var list = {0:0, 1:0, 2:0};
x in list; //true
y in list; //false
1 in list; //true
y in {3:0, 4:0, 5:0}; //true

Se você achar os literais de objeto muito feios, poderá combiná-lo com a dica de função sem parâmetros:

function list()
 { var x = {};
   for(var i=0; i < arguments.length; ++i) x[arguments[i]] = 0;
   return x
 }

 5 in list(1,2,3,4,5) //true

Atribuindo valores padrão a variáveis

Você pode usar o lógico ou o operador ||em uma expressão de atribuição para fornecer um valor padrão:

var a = b || c;

A avariável terá o valor de csomente se bé Falsas (se é null, false, undefined, 0, empty string, ou NaN), caso contrário, airá obter o valor de b.

Isso geralmente é útil em funções, quando você deseja atribuir um valor padrão a um argumento, caso não seja fornecido:

function example(arg1) {
  arg1 || (arg1 = 'default value');
}

Exemplo de fallback do IE em manipuladores de eventos:

function onClick(e) {
    e || (e = window.event);
}

Os seguintes recursos de idioma estão conosco há muito tempo, todas as implementações de JavaScript os suportam, mas eles não faziam parte da especificação até o ECMAScript 5th Edition :

A debuggerdeclaração

Descrito em: § 12.15 A declaração do depurador

Esta declaração permite que você coloque pontos de interrupção programaticamente em seu código apenas por:

// ...
debugger;
// ...

Se um depurador estiver presente ou ativo, ele fará com que ele se quebre imediatamente, exatamente nessa linha.

Caso contrário, se o depurador não estiver presente ou ativo, esta instrução não terá efeito observável.

Literais de sequência de linhas múltiplas

Descrito em: § 7.8.4 Literais de cordas

var str = "This is a \
really, really \
long line!";

Você tem que ter cuidado porque o personagem ao lado do \ deve ser um terminador de linha, se você tem um espaço após o \por exemplo, o código vai olhar exatamente o mesmo, mas vai levantar um SyntaxError.

O JavaScript não tem escopo de bloco (mas tem fechamento, então vamos chamá-lo mesmo?).

var x = 1;
{
   var x = 2;
}
alert(x); // outputs 2

Você pode acessar as propriedades do objeto em []vez de.

Isso permite procurar uma propriedade que corresponda a uma variável.

obj = {a:"test"};
var propname = "a";
var b = obj[propname];  // "test"

Você também pode usar isso para obter / definir propriedades do objeto cujo nome não é um identificador legal.

obj["class"] = "test";  // class is a reserved word; obj.class would be illegal.
obj["two words"] = "test2"; // using dot operator not possible with the space.

Algumas pessoas não sabem disso e acabam usando eval () como este, o que é uma péssima ideia :

var propname = "a";
var a = eval("obj." + propname);

Isso é mais difícil de ler, mais difícil de encontrar erros (não é possível usar o jslint), é mais lento para executar e pode levar a explorações do XSS.

Se você estiver pesquisando no Google uma referência decente sobre JavaScript sobre um determinado tópico, inclua a palavra-chave "mdc" na sua consulta e seus primeiros resultados serão do Mozilla Developer Center. Eu não carrego nenhuma referência offline ou livros comigo. Eu sempre uso o truque de palavras-chave "mdc" para obter diretamente o que estou procurando. Por exemplo:

Google: javascript array sort mdc
(na maioria dos casos, você pode omitir "javascript")

Atualização: O Mozilla Developer Center foi renomeado para Mozilla Developer Network . O truque da palavra-chave "mdc" ainda funciona, mas em breve poderemos ter que começar a usar "mdn" .

Talvez um pouco óbvio para alguns ...

Instale o Firebug e use console.log ("olá"). Muito melhor do que usar o alert random (); é o que me lembro de ter feito há alguns anos.

Métodos particulares

Um objeto pode ter métodos particulares.

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

    // A private method only visible from within this constructor
    function calcFullName() {
       return firstName + " " + lastName;    
    }

    // A public method available to everyone
    this.sayHello = function () {
        alert(calcFullName());
    }
}

//Usage:
var person1 = new Person("Bob", "Loblaw");
person1.sayHello();

// This fails since the method is not visible from this scope
alert(person1.calcFullName());

Também mencionado em "Javascript: The Good Parts" de Crockford:

parseInt()é perigoso. Se você passar uma string sem informar a base correta, poderá retornar números inesperados. Por exemplo, parseInt('010')retorna 8, não 10. Passar uma base para parseInt faz com que funcione corretamente:

parseInt('010') // returns 8! (in FF3)
parseInt('010', 10); // returns 10 because we've informed it which base to work with.

Funções são objetos e, portanto, podem ter propriedades.

fn = função (x) {
   // ...
}

fn.foo = 1;

fn.next = função (y) {
  //
}

Eu teria que dizer funções auto-executáveis.

(function() { alert("hi there");})();

Como o Javascript não tem escopo de bloco , você pode usar uma função de execução automática se desejar definir variáveis ​​locais:

(function() {
  var myvar = 2;
  alert(myvar);
})();

Aqui, myvaris não interfere ou polui o escopo global e desaparece quando a função termina.

Saiba quantos parâmetros são esperados por uma função

function add_nums(num1, num2, num3 ){
    return num1 + num2 + num3;
}
add_nums.length // 3 is the number of parameters expected.

Saiba quantos parâmetros são recebidos pela função

function add_many_nums(){
    return arguments.length;
}    
add_many_nums(2,1,122,12,21,89); //returns 6

Aqui estão algumas coisas interessantes:

• Comparando NaNcom qualquer coisa (mesmo NaN) é sempre falsa, que inclui ==, <e >.
• NaN Significa Não é um número, mas se você solicitar o tipo, ele realmente retornará um número.
• Array.sort pode assumir uma função comparadora e é chamado por um driver do tipo quicksort (depende da implementação).
• A expressão regular "constantes" pode manter o estado, como a última coisa em que corresponderam.
• Algumas versões do JavaScript permitem acesso $0, $1, $2membros em um regex.
• nullé diferente de qualquer outra coisa. Não é um objeto, um booleano, um número, uma string, nem undefined. É um pouco como uma "alternativa" undefined. (Nota typeof null == "object":)
• No contexto mais externo, thisgera o objeto [Global], de outro modo inominável.
• Declarar uma variável com var, em vez de apenas confiar na declaração automática da variável, dá ao tempo de execução uma chance real de otimizar o acesso a essa variável
• A withconstrução destruirá essas otimizações
• Os nomes de variáveis ​​podem conter caracteres Unicode.
• As expressões regulares do JavaScript não são realmente regulares. Eles são baseados nas regexs do Perl, e é possível construir expressões com lookaheads que levam muito, muito tempo para serem avaliadas.
• Os blocos podem ser rotulados e usados ​​como alvos de break. Os loops podem ser rotulados e usados ​​como destino de continue.
• Matrizes não são esparsas. Definir o 1000º elemento de uma matriz vazia, caso contrário, deve preenchê-lo undefined. (depende da implementação)
• if (new Boolean(false)) {...} irá executar o {...}bloco
• Os mecanismos de expressão regular do Javascript são específicos da implementação: por exemplo, é possível escrever expressões regulares "não portáveis".

[atualizado um pouco em resposta a bons comentários; por favor, veja os comentários]

Sei que estou atrasado para a festa, mas não acredito +que a utilidade do operador não tenha sido mencionada além de "converter qualquer coisa em um número". Talvez seja assim que oculta uma característica?

// Quick hex to dec conversion:
+"0xFF";              // -> 255

// Get a timestamp for now, the equivalent of `new Date().getTime()`:
+new Date();

// Safer parsing than parseFloat()/parseInt()
parseInt("1,000");    // -> 1, not 1000
+"1,000";             // -> NaN, much better for testing user input
parseInt("010");      // -> 8, because of the octal literal prefix
+"010";               // -> 10, `Number()` doesn't parse octal literals 

// A use case for this would be rare, but still useful in cases
// for shortening something like if (someVar === null) someVar = 0;
+null;                // -> 0;

// Boolean to integer
+true;                // -> 1;
+false;               // -> 0;

// Other useful tidbits:
+"1e10";              // -> 10000000000
+"1e-4";              // -> 0.0001
+"-12";               // -> -12

Obviamente, você pode fazer tudo isso usando Number(), mas o +operador é muito mais bonito!

Você também pode definir um valor de retorno numérico para um objeto substituindo o valueOf()método do protótipo . Qualquer conversão numérica realizada nesse objeto não resultará NaN, mas o valor de retorno do valueOf()método:

var rnd = {
    "valueOf": function () { return Math.floor(Math.random()*1000); }
};
+rnd;               // -> 442;
+rnd;               // -> 727;
+rnd;               // -> 718;

" Métodos de extensão em JavaScript " através da propriedade prototype.

Array.prototype.contains = function(value) {  
    for (var i = 0; i < this.length; i++) {  
        if (this[i] == value) return true;  
    }  
    return false;  
}

Isso adicionará um containsmétodo a todos os Arrayobjetos. Você pode chamar esse método usando esta sintaxe

var stringArray = ["foo", "bar", "foobar"];
stringArray.contains("foobar");

Para remover corretamente uma propriedade de um objeto, você deve excluir a propriedade em vez de apenas defini-la como indefinida :

var obj = { prop1: 42, prop2: 43 };

obj.prop2 = undefined;

for (var key in obj) {
    ...

A propriedade prop2 ainda fará parte da iteração. Se você quiser se livrar completamente do prop2 , faça:

delete obj.prop2;

A propriedade prop2 não aparecerá mais quando você estiver iterando pelas propriedades.

with.

É raramente usado e, francamente, raramente útil ... Mas, em circunstâncias limitadas, ele tem seus usos.

Por exemplo: literais de objeto são bastante úteis para configurar rapidamente propriedades em um novo objeto. Mas e se você precisar alterar metade das propriedades em um objeto existente?

var user = 
{
   fname: 'Rocket', 
   mname: 'Aloysus',
   lname: 'Squirrel', 
   city: 'Fresno', 
   state: 'California'
};

// ...

with (user)
{
   mname = 'J';
   city = 'Frostbite Falls';
   state = 'Minnesota';
}

Alan Storm ressalta que isso pode ser um pouco perigoso: se o objeto usado como contexto não tiver uma das propriedades atribuídas, ele será resolvido no escopo externo, possivelmente criando ou substituindo uma variável global. Isso é especialmente perigoso se você estiver acostumado a escrever código para trabalhar com objetos em que as propriedades com valores padrão ou vazios são deixadas indefinidas:

var user = 
{
   fname: "John",
// mname definition skipped - no middle name
   lname: "Doe"
};

with (user)
{
   mname = "Q"; // creates / modifies global variable "mname"
}

Portanto, é provavelmente uma boa idéia evitar o uso da withdeclaração para essa tarefa.

Veja também: Existem usos legítimos para a declaração "with" do JavaScript?

Métodos (ou funções) podem ser chamados em objetos que não são do tipo para o qual foram projetados para trabalhar. É ótimo chamar métodos nativos (rápidos) em objetos personalizados.

var listNodes = document.getElementsByTagName('a');
listNodes.sort(function(a, b){ ... });

Este código falha porque listNodesnão é umArray

Array.prototype.sort.apply(listNodes, [function(a, b){ ... }]);

Esse código funciona porque listNodesdefine propriedades do tipo matriz suficientes (comprimento, [] operador) para serem usadas sort().

A herança prototípica (popularizada por Douglas Crockford) revoluciona completamente a maneira como você pensa sobre muitas coisas em Javascript.

Object.beget = (function(Function){
    return function(Object){
        Function.prototype = Object;
        return new Function;
    }
})(function(){});

É um assassino! Pena como quase ninguém a usa.

Permite "gerar" novas instâncias de qualquer objeto, estendê-las, mantendo um link de herança prototípica (ao vivo) para suas outras propriedades. Exemplo:

var A = {
  foo : 'greetings'
};  
var B = Object.beget(A);

alert(B.foo);     // 'greetings'

// changes and additionns to A are reflected in B
A.foo = 'hello';
alert(B.foo);     // 'hello'

A.bar = 'world';
alert(B.bar);     // 'world'


// ...but not the other way around
B.foo = 'wazzap';
alert(A.foo);     // 'hello'

B.bar = 'universe';
alert(A.bar);     // 'world'

Alguns chamariam isso de questão de gosto, mas:

aWizz = wizz || "default";
// same as: if (wizz) { aWizz = wizz; } else { aWizz = "default"; }

O operador trinário pode ser encadeado para agir como o de Scheme (cond ...):

(cond (predicate  (action  ...))
      (predicate2 (action2 ...))
      (#t         default ))

pode ser escrito como ...

predicate  ? action( ... ) :
predicate2 ? action2( ... ) :
             default;

Isso é muito "funcional", pois ramifica seu código sem efeitos colaterais. Então, em vez de:

if (predicate) {
  foo = "one";
} else if (predicate2) {
  foo = "two";
} else {
  foo = "default";
}

Você pode escrever:

foo = predicate  ? "one" :
      predicate2 ? "two" :
                   "default";

Também funciona bem com recursão :)

Números também são objetos. Então você pode fazer coisas legais como:

// convert to base 2
(5).toString(2) // returns "101"

// provide built in iteration
Number.prototype.times = function(funct){
  if(typeof funct === 'function') {
    for(var i = 0;i < Math.floor(this);i++) {
      funct(i);
    }
  }
  return this;
}


(5).times(function(i){
  string += i+" ";
});
// string now equals "0 1 2 3 4 "

var x = 1000;

x.times(function(i){
  document.body.innerHTML += '<p>paragraph #'+i+'</p>';
});
// adds 1000 parapraphs to the document

Que tal fechamentos em JavaScript (semelhante aos métodos anônimos no C # v2.0 +). Você pode criar uma função que cria uma função ou "expressão".

Exemplo de fechamentos :

//Takes a function that filters numbers and calls the function on 
//it to build up a list of numbers that satisfy the function.
function filter(filterFunction, numbers)
{
  var filteredNumbers = [];

  for (var index = 0; index < numbers.length; index++)
  {
    if (filterFunction(numbers[index]) == true)
    {
      filteredNumbers.push(numbers[index]);
    }
  }
  return filteredNumbers;
}

//Creates a function (closure) that will remember the value "lowerBound" 
//that gets passed in and keep a copy of it.
function buildGreaterThanFunction(lowerBound)
{
  return function (numberToCheck) {
    return (numberToCheck > lowerBound) ? true : false;
  };
}

var numbers = [1, 15, 20, 4, 11, 9, 77, 102, 6];

var greaterThan7 = buildGreaterThanFunction(7);
var greaterThan15 = buildGreaterThanFunction(15);

numbers = filter(greaterThan7, numbers);
alert('Greater Than 7: ' + numbers);

numbers = filter(greaterThan15, numbers);
alert('Greater Than 15: ' + numbers);

Você também pode estender (herdar) classes e substituir propriedades / métodos usando a colher de cadeia de protótipo16 mencionada.

No exemplo a seguir, criamos uma classe Pet e definimos algumas propriedades. Também substituímos o método .toString () herdado de Object.

Depois disso, criamos uma classe Dog que estende Pet e substitui o método .toString () novamente alterando seu comportamento (polimorfismo). Além disso, adicionamos outras propriedades à classe filho.

Depois disso, verificamos a cadeia de herança para mostrar que Dog ainda é do tipo Dog, do tipo Pet e do tipo Object.

// Defines a Pet class constructor 
function Pet(name) 
{
    this.getName = function() { return name; };
    this.setName = function(newName) { name = newName; };
}

// Adds the Pet.toString() function for all Pet objects
Pet.prototype.toString = function() 
{
    return 'This pets name is: ' + this.getName();
};
// end of class Pet

// Define Dog class constructor (Dog : Pet) 
function Dog(name, breed) 
{
    // think Dog : base(name) 
    Pet.call(this, name);
    this.getBreed = function() { return breed; };
}

// this makes Dog.prototype inherit from Pet.prototype
Dog.prototype = new Pet();

// Currently Pet.prototype.constructor
// points to Pet. We want our Dog instances'
// constructor to point to Dog.
Dog.prototype.constructor = Dog;

// Now we override Pet.prototype.toString
Dog.prototype.toString = function() 
{
    return 'This dogs name is: ' + this.getName() + 
        ', and its breed is: ' + this.getBreed();
};
// end of class Dog

var parrotty = new Pet('Parrotty the Parrot');
var dog = new Dog('Buddy', 'Great Dane');
// test the new toString()
alert(parrotty);
alert(dog);

// Testing instanceof (similar to the `is` operator)
alert('Is dog instance of Dog? ' + (dog instanceof Dog)); //true
alert('Is dog instance of Pet? ' + (dog instanceof Pet)); //true
alert('Is dog instance of Object? ' + (dog instanceof Object)); //true

Ambas as respostas a essa pergunta foram códigos modificados a partir de um ótimo artigo do MSDN de Ray Djajadinata.

Você pode capturar exceções, dependendo do tipo. Citado pelo MDC :

try {
   myroutine(); // may throw three exceptions
} catch (e if e instanceof TypeError) {
   // statements to handle TypeError exceptions
} catch (e if e instanceof RangeError) {
   // statements to handle RangeError exceptions
} catch (e if e instanceof EvalError) {
   // statements to handle EvalError exceptions
} catch (e) {
   // statements to handle any unspecified exceptions
   logMyErrors(e); // pass exception object to error handler
}

NOTA: As cláusulas de captura condicional são uma extensão do Netscape (e, portanto, do Mozilla / Firefox) que não faz parte da especificação do ECMAScript e, portanto, não pode ser invocada, exceto em navegadores específicos.

Em cima da minha cabeça...

Funções

argumentos.callee refere-se à função que hospeda a variável "argumentos", para que possa ser usada para processar funções anônimas:

var recurse = function() {
  if (condition) arguments.callee(); //calls recurse() again
}

Isso é útil se você quiser fazer algo assim:

//do something to all array items within an array recursively
myArray.forEach(function(item) {
  if (item instanceof Array) item.forEach(arguments.callee)
  else {/*...*/}
})

Objetos

Uma coisa interessante sobre os membros do objeto: eles podem ter qualquer string como nome:

//these are normal object members
var obj = {
  a : function() {},
  b : function() {}
}
//but we can do this too
var rules = {
  ".layout .widget" : function(element) {},
  "a[href]" : function(element) {}
}
/* 
this snippet searches the page for elements that
match the CSS selectors and applies the respective function to them:
*/
for (var item in rules) {
  var elements = document.querySelectorAll(rules[item]);
  for (var e, i = 0; e = elements[i++];) rules[item](e);
}

Cordas

String.split pode usar expressões regulares como parâmetros:

"hello world   with  spaces".split(/\s+/g);
//returns an array: ["hello", "world", "with", "spaces"]

String.replace pode usar uma expressão regular como parâmetro de pesquisa e uma função como parâmetro de substituição:

var i = 1;
"foo bar baz ".replace(/\s+/g, function() {return i++});
//returns "foo1bar2baz3"

Você pode usar objetos em vez de alternar na maioria das vezes.

function getInnerText(o){
    return o === null? null : {
        string: o,
        array: o.map(getInnerText).join(""),
        object:getInnerText(o["childNodes"])
    }[typeis(o)];
}

Atualização: se você está preocupado com a ineficiência dos casos em avaliar antecipadamente (por que você está preocupado com a eficiência no início do design do programa?), Pode fazer algo assim:

function getInnerText(o){
    return o === null? null : {
        string: function() { return o;},
        array: function() { return o.map(getInnerText).join(""); },
        object: function () { return getInnerText(o["childNodes"]; ) }
    }[typeis(o)]();
}

É mais oneroso para digitar (ou ler) do que um comutador ou um objeto, mas preserva os benefícios do uso de um objeto em vez de um comutador, detalhados na seção de comentários abaixo. Esse estilo também torna mais fácil transformar isso em uma "classe" adequada, uma vez que cresce o suficiente.

update2: com extensões de sintaxe propostas para ES.next, isso se torna

let getInnerText = o -> ({
    string: o -> o,
    array: o -> o.map(getInnerText).join(""),
    object: o -> getInnerText(o["childNodes"])
}[ typeis o ] || (->null) )(o);

Certifique-se de usar o método hasOwnProperty ao iterar pelas propriedades de um objeto:

for (p in anObject) {
    if (anObject.hasOwnProperty(p)) {
        //Do stuff with p here
    }
}

Isso é feito para que você acesse apenas as propriedades diretas de anObject e não use as propriedades que estão na cadeia de protótipos.

Variáveis ​​privadas com uma interface pública

Ele usa um pequeno truque com uma definição de função de chamada automática. Tudo dentro do objeto retornado está disponível na interface pública, enquanto todo o resto é privado.

var test = function () {
    //private members
    var x = 1;
    var y = function () {
        return x * 2;
    };
    //public interface
    return {
        setx : function (newx) {
            x = newx;
        },
        gety : function () {
            return y();
        }
    }
}();

assert(undefined == test.x);
assert(undefined == test.y);
assert(2 == test.gety());
test.setx(5);
assert(10 == test.gety());