2014-10-23 11 views
6

ho appena notato, in Firefox SDK JavaScript (on MDN), l'uso di una parola chiave non ho mai visto prima:JavaScript `di` Parola (per ... di loop)

var tabs = require('sdk/tabs'); 
for (let tab of tabs) 
    console.log(tab.title); 

è la parola chiave of composta da Mozilla o è è standardizzato?

+1

Parte di ES6. Googling per "for of loop ES6" dovrebbe mostrare qualcosa. –

+5

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of – artm

risposta

11

Il ciclo for...of, che itera su valori di proprietà, è una funzione di added to the JavaScript specification in EcmaScript 6.

Dato che il contesto di questa domanda è un componente aggiuntivo di Firefox, il problema non è quando, o se, è disponibile in altri browser. Il problema è quando questo EcmaScript 6 feature was added to Firefox e qualsiasi limitazione sulla compatibilità a ritroso che ne causa l'utilizzo.

È stato aggiunto a Firefox in Firefox 13. Pertanto, utilizzarlo comporterà la limitazione del tuo componente aggiuntivo in Firefox 13+. Dato che l'attuale versione, a partire da ottobre 2014, è Firefox 33.0 e ci sono state più versioni di ESR tra Firefox 13 e ora, l'uso di un ciclo for ... probabilmente non ridurrà in modo significativo il numero di persone che sono in grado di utilizzare il tuo Aggiungi su. È probabile che alcune altre funzionalità che stai utilizzando limiteranno il tuo componente aggiuntivo a una versione più recente.

Se si intende portare il proprio componente aggiuntivo ad altri browser, è necessario tenere presente quando è stata aggiunta la funzione. Come si può vedere nel numero Browser Compatibility table on MDN, il problema principale è che non è supportato da Internet Explorer.

A differenza di Array.prototype.forEach(), for...of, i loop non sono limitati alle sole matrici e verranno iterati su altri tipi di iterable objects. Se siete alla ricerca di altri modi per svolgere un compito simile, MDN shows examples di usare Array.prototype.forEach() per scorrere i valori delle proprietà per Arrays e Objects: compatibilità

let arr = [ 3, 5, 7 ]; 
let obj = { first: 3, second: 5, third: 7, fourth: "hello" ]; 

arr.forEach(function (element, index) { 
    console.log(element); // logs "3", "5", "7" 
    console.log(index); // logs "0", "1", "2" 
}); 

// with Object.keys() 

Object.keys(obj).forEach(function (key) { 
    //obj[key] is the property value 
    console.log(obj[key]); // logs "3", "5", "7", "hello" 
}); 

Browser:
Per coloro che utilizzano per ... di loop negli script di contenuti (cioè non come un add-on), questi sono i compatibility tables from MDN come del 2014/11/02:

Desktop browser compatibility
Mobile browser compatibility
1. Chrome 29-37: la funzione per ... di ciclo è disponibile dietro una preferenza. In chrome: // flags, attiva la voce "Abilita JavaScript sperimentale".

+0

Risposta molto utile, non sapevo che fosse atterrato in FF13 – Noitidart

1

È una funzione di EcmaScript 6 che non è stabile o supportata da tutti i browser moderni. Devi aspettare che sia stabile o puoi usare un transpiler come Traceur che convertirà il tuo codice ES6 in ES5.

+0

Cosa intendi per "non stabile"? Inoltre, un transcoder è un'altra cosa, forse stai cercando la parola transpiler. –

+0

È possibile utilizzare 'var tab in tabs 'per il supporto pre-es6? – Noitidart

+0

utilizzando 'var tab in tabs' o in altre parole per ... nella struttura è supportato in tutti i browser. puoi usare tranquillamente. per "non stabile" intendevo che questa funzione è stata aggiunta in alcuni browser o in alcune versioni di alcuni browser, ma per ora il suo supporto potrebbe non essere una buona idea. – ozantunca