Novedades en JavaScript 1.7

  • Enlace amigable (slug) de la revisión: Novedades_en_JavaScript_1.7
  • Título de la revisión: Novedades en JavaScript 1.7
  • Id de la revisión: 162125
  • Creada:
  • Creador: Gbulfon
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "New in JavaScript 1.7", "en" ])}}

JavaScript 1.7 es una actualización del lenguaje introduciendole varias características nuevas, como generadores, iteradores, comprension de arrays, sentencias let y asignación desestructurada. Evidentemente también incluye todas las caracteristicas de JavaScript 1.6.

El soporte para JavaScript 1.7 estará disponible a partir de Firefox 2 Beta 1, así como en builds actuales.

Los ejemplos de código incluidos en este artículo pueden ser probados en la consola JavaScript. Si quiere aprender a construir o utilizar esta consola, lea Introducción a la shell JavaScript.

Using JavaScript 1.7

In order to use the new features of JavaScript 1.7, you need to specify that you wish to use JavaScript 1.7. In HTML or XUL code, use:

 <script type="application/javascript;version=1.7"/>

When using the JavaScript shell, you need to set the version you wish to use using the version() function:

 version(170);

Generators and iterators

When developing code that involves an iterative algorithm (such as iterating over a list, or repeatedly performing computations on the same data set), there are often state variables whose values need to be maintained for the duration of the computation process. Traditionally, you have to use a callback function to obtain the intermediate values of an iterative algorithm.

Generators

Consider this iterative algorithm that computes Fibonacci numbers:

function do_callback(num) {
  document.write(num + "<BR>\n");
}

function fib() {
  var i = 0, j = 1, n = 0;
  while (n < 10) {
    do_callback(i);
    var t = i;
    i = j;
    j += t;
    n++;
  }
}

fib();

This code uses a callback routine to perform operations on each iterative step of the algorithm. In this case, each Fibonacci number is simply printed to the console.

Generators and iterators work together to provide a new, better, way to do this. Let's see how the Fibonacci number routine looks written using a generator:

function fib() {
  var i = 0, j = 1;
  while (true) {
    yield i;
    var t = i;
    i = j;
    j += t;
  }
}

var g = fib();
for (var i = 0; i < 10; i++) {
  document.write(g.next() + "<BR>\n");
}

The function containing the yield keyword is a generator. When you call it, its formal parameters are bound to actual arguments, but its body isn't actually evaluated. Instead, a generator-iterator is returned. Each call to the generator-iterator's next() method performs another pass through the iterative algorithm. Each step's value is the value specified by the yield keyword. Think of yield as the generator-iterator version of return, indicating the boundary between each iteration of the algorithm. Each time you call next(), the generator code resumes from the statement following the yield.

You cycle a generator-iterator by repeatedly calling its next() method until you reach your desired result condition. In this example, we can obtain however many Fibonacci numbers we want by continuing to call g.next() until we have the number of results we want.

Iterators

An iterator is a special object that lets you iterate over data.

In normal usage, iterator objects are "invisible"; you won't need to operate on them explicitly, but will instead use JavaScript's for...in and for each...in statements to loop naturally over the keys and/or values of objects.

var objectWithIterator = getObjectSomehow();

for (var i in objectWithIterator)
{
  document.write(objectWithIterator[i] + "<BR>\n");
}

If you are implementing your own iterator object, or have another need to directly manipulate iterators, you'll need to know about the next method, the StopIteration exception, and the __iterator__ property.

You can create an iterator for an object by calling Iterator(objectname); the iterator for an object is found via the object's __iterator__ property, which by default implements iteration according to the usual for...in and for each...in model. If you wish to provide a custom iterator, you should override the getter for __iterator__ to return an instance of your custom iterator. To get an object's iterator from script, you should use Iterator(obj) rather than accessing the __iterator__ property directly.

Once you have an iterator, you can easily fetch the next item in the object by calling the iterator's next() method. If there is no data left, the StopIteration exception is thrown.

Here's a simple example of direct iterator manipulation:

var obj = {name:"Jack Bauer", username:"JackB", id:12345, agency:"CTU", region:"Los Angeles"};

var it = Iterator(obj);

try {
  while (true) {
    document.write(it.next() + "<BR>\n");
  }
} catch (err if err instanceof StopIteration) {
  document.write("End of record.<BR>\n");
} catch (err) {
  document.write("Unknown error: " + err.description + "<BR>\n");
}

The output from this program looks like this:

name,Jack Bauer
username,JackB
id,12345
agency,CTU
region,Los Angeles
End of record.

You can, optionally, specify a second parameter when creating your iterator, which is a boolean value that indicates whether or not you only want the keys returned each time you call its next() method. Changing var it = Iterator(obj); to var it = Iterator(obj, true); in the above sample results in the following output:

name
username
id
agency
region
End of record.

In both cases, the actual order in which the data is returned may vary based on the implementation. There is no guaranteed ordering of the data.

Iterators are a handy way to scan through the data in objects, including objects whose content may include data you're unaware of. This can be particularly useful if you need to preserve data your application isn't expecting.

Array comprehensions

Array comprehensions are a use of generators that provides a convenient way to perform powerful initialization of arrays. For example:

function range(begin, end) {
  for (let i = begin; i < end; ++i) {
    yield i;
  }
}

range() is a generator that returns all the values between <tt>begin</tt> and <tt>end</tt>. Having defined that, we can use it like this:

var ten_squares = [i * i for (i in range(0, 10))];

This pre-initializes a new array, ten_squares, to contain the squares of the values in the range 0..9.

You can use any conditional when initializing the array. If you want to initialize an array to contain the even numbers between 0 and 20, you can use this code:

var evens = [i for (i in range(0, 21)) if (i % 2 == 0)];

Prior to JavaScript 1.7, this would have to be coded something like this:

var evens = [];
for (var i=0; i <= 20; i++) {
  if (i % 2 == 0)
    evens.push(i);
}

Not only is the array comprehension much more compact, but it's actually easier to read, once you're familiar with the concept.

Scoping rules

Array comprehensions have an implicit block around them, containing everything inside the square brackets, as well as implicit let declarations.

Add details.

Block scope with let

There are several ways in which let can be used to manage block scope of data and functions:

  • The let statement provides a way to associate values with variables, constants, and functions 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, constants, and functions 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.

The let statement

The let statement provides local scoping for variables, constants, and functions. It works by binding zero or more variables in the lexical scope of a single block of code. The completion value of the let statement is the completion value of the block.

For example:

var x = 5;
var y = 0;

let (x = x+10, y = 12) {
  document.write(x+y + "<BR>\n");
}

document.write(x+y + "<BR>\n");

The output from this program will be:

27
5

The rules for the code block are the same as for any other code block in JavaScript. It may have its own local variables established using the let declarations.

Note: When using the let statement syntax, the parentheses following let are required. Failure to include them will result in a syntax error.

Scoping rules

The scope of variables defined using let is the let block itself, as well as any inner blocks contained inside it, unless those blocks define variables by the same names.

let expressions

You can use let to establish variables that are scoped only to a single expression:

var x = 5;
var y = 0;
document.write( let(x = x + 10, y = 12) x+y  + "<BR>\n");
document.write(x+y + "<BR>\n");

The resulting output is:

27
5

In this case, the binding of the values of x and y to x+10 and 12 are scoped solely to the expression x+y.

Scoping rules

Given a let expression:

let (decls) expr

There is an implicit block created around expr.

let definitions

The let keyword can also be used to define variables, constants, and functions inside a block.

 ** This code doesn't run in FF 2.0 b1. **
if (x > y)
{
   let const k = 37;
   let gamma : int = 12.7 + k;
   let i = 10;
   let function f(n) { return (n/3)+k; }
   return f(gamma) + f(i);
}

Scoping rules

Variables, functions, and constants declared by let, let function, and let const have as their scope the block in which they are defined, as well as in any sub-blocks in which they aren't redefined. In this way, let works very much like var.

In programs and classes let does not create properties on the global and class objects like var does; instead, it creates properties in an implicit block created for the evaluation of statements in those contexts. This essentially means that let won't override variables previously defined using var. For example:

** Doesn't work in FF 2.0 b1. Returns "42", not "global".
var x = 'global';
let x = 42;
document.write(this.x + "<BR>\n");

The output displayed by this code will display "global", not " 42".

An implicit block is one that is not bracketed by braces; it's created implicitly by the JavaScript engine.

In functions, let executed by eval() does not create properties on the variable object (activation object or innermost binding rib) like var does; instead, it creates properties in an implicit block created for the evaluation of statements in the program. This is a consequence of eval() operating on programs in tandem with the previous rule.

In other words, when you use eval() to execute code, that code is treated as an independent program, which has its own implicit block around its code.

let-scoped variables in for loops

You can use the let keyword to bind variables locally in the scope of for loops, just like you can with var.

** Add obj **
   var i=0;
   for ( let i=i ; i < 10 ; i++ )
     document.write(i + "<BR>\n");

   for ( let [name,value] in obj )
     document.write("Name: " + name + ", Value: " + value + "<BR>\n");

Scoping rules

for (let expr1; expr2; expr3) statement

In this example, expr2, expr3, and statement are enclosed in an implicit block that contains the block local variables declared by let expr1. This is demonstrated in the first loop above.

for (expr1 in expr2) statement

In this case, there's an implicit block containing statement. This is shown in the second loop above.

Destructuring assignment

Destructuring assignment makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

The object and array literal expressions provide an easy way to create ad-hoc packages of data. Once you've created these packages of data, you can use them any way you want to. You can even return them from functions.

One particularly useful thing you can do with destructuring assignment is to read an entire structure in a single statement, although there are a number of interesting things you can do with them, as shown in the section full of examples that follows.

This capability is similar to features present in languages such as Perl and Python.

Examples

Destructuring assignment is best explained through the use of examples, so here are a few for you to read over and learn from.

Note: If you have more interesting examples of ways to use destructuring assignment, please consider adding them to this section.

Swapping values

You can use destructuring assignment, for example, to swap values:

var a = 1;
var b = 3;

[a, b] = [b, a];

After executing this code, b is 1 and a is 3.

Or to rotate values: (poor code format)

<body bgcolor = "black">

<script type="application/javascript;version=1.7"/>

var a = 'o';
var b = "<font color = 'green'>o</font>";
var c = 'o';
var d = 'o';
var e = 'o';
var f = "<font color = 'blue'>o</font>";
var g = 'o';
var h = 'o';

for (lp=0;lp<40;lp++)
	{[a, b, c, d, e, f, g, h] = [b, c, d, e, f, g, h, a];
	 document.write(a+''+b+''+c+''+d+''+e+''+f+''+g+''+h+''+"<br />");}
</script>

After executing this code, a visual colorful display of the variable rotation will be displayed

Multiple-value returns

Thanks to destructuring assignment, functions can return multiple values. While it's always been possible to return an array from a function, this provides an added degree of flexibility.

function f() {
  return [1, 2];
}

As you can see, returning results is done using an array-like notation, with all the values to return enclosed in brackets. You can return any number of results in this way. In this example, f() returns the values {{mediawiki.external('1, 2')}} as its output.

var a, b;
[a, b] = f();
document.write ("A is " + a + " B is " + b + "<BR>\n");

The command {{mediawiki.external('a, b')}} = f() assigns the results of the function to the variables in brackets, in order: a is set to 1 and b is set to 2.

You can also retrieve the return values as an array:

var a = f();
document.write ("A is " + a);

In this case, a is an array containing the values 1 and 2.

Ignoring some returned values

You can also ignore return values that you're not interested in:

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
document.write ("A is " + a + " B is " + b + "<BR>\n");

After running this code, a is 1 and b is 3. The value 2 is ignored.

Looping across objects

You can also use destructuring assignment to pull data out of an object:

var obj = { name: "Bob", score: 1.5, age: 35 };

for (let[name, value] in obj) {
  document.write ("Name: " + name + ", Value: " + value + "<BR>\n");
}

This loops over all the key/value pairs in the object obj and displays their names and values. In this case, the output looks like the following:

Name: name, Value: Bob
Name: score, Value: 1.5
Name: age, Value: 35

Looping across values in an array of objects

You can loop over an array of objects, pulling out fields of interest from each object:

var people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for each (let {name: n, family: { father: f } } in people) {
  document.write ("Name: " + n + ", Father: " + f + "<BR>\n");
}

This pulls the name field into n and the family.father field into f, then prints them. This is done for each object in the people array. The output looks like this:

Name: Mike Smith, Father: Harry Smith
Name: Tom Jones, Father: Richard Jones
{{ wiki.languages( { "en": "en/New_in_JavaScript_1.7", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.7", "pl": "pl/Nowo\u015bci_w_JavaScript_1.7" } ) }}

Fuente de la revisión

<p>{{wiki.template('Traducción', [ "inglés", "New in JavaScript 1.7", "en" ])}}
</p><p>JavaScript 1.7 es una actualización del lenguaje introduciendole varias características nuevas, como generadores, iteradores, comprension de arrays, sentencias <code>let</code> y asignación desestructurada. Evidentemente también incluye todas las caracteristicas de <a href="es/Novedades_en_JavaScript_1.6">JavaScript 1.6</a>.
</p><p>El soporte para JavaScript 1.7 estará disponible a partir de <a href="es/Firefox_2">Firefox 2</a> Beta 1, así como en <i>builds</i> actuales.
</p><p>Los ejemplos de código incluidos en este artículo pueden ser probados en la consola JavaScript. Si quiere aprender a construir o utilizar esta consola, lea <a href="es/Introducci%c3%b3n_a_la_shell_JavaScript">Introducción a la shell JavaScript</a>.
</p>
<h2 name="Using_JavaScript_1.7">Using JavaScript 1.7</h2>
<p>In order to use the new features of JavaScript 1.7, you need to specify that you wish to use JavaScript 1.7.  In HTML or XUL code, use:
</p>
<pre class="eval"> &lt;script type="application/javascript;version=1.7"/&gt;
</pre>
<p>When using the <a href="es/Introduction_to_the_JavaScript_shell">JavaScript shell</a>, you need to set the version you wish to use using the <code>version()</code> function:
</p>
<pre class="eval"> version(170);
</pre>
<h2 name="Generators_and_iterators">Generators and iterators</h2>
<p>When developing code that involves an iterative algorithm (such as iterating over a list, or repeatedly performing computations on the same data set), there are often state variables whose values need to be maintained for the duration of the computation process. Traditionally, you have to use a callback function to obtain the intermediate values of an iterative algorithm.
</p>
<h3 name="Generators">Generators</h3>
<p>Consider this iterative algorithm that computes Fibonacci numbers:
</p>
<pre>function do_callback(num) {
  document.write(num + "&lt;BR&gt;\n");
}

function fib() {
  var i = 0, j = 1, n = 0;
  while (n &lt; 10) {
    do_callback(i);
    var t = i;
    i = j;
    j += t;
    n++;
  }
}

fib();
</pre>
<p>This code uses a callback routine to perform operations on each iterative step of the algorithm.  In this case, each Fibonacci number is simply printed to the console.
</p><p>Generators and iterators work together to provide a new, better, way to do this. Let's see how the Fibonacci number routine looks written using a generator:
</p>
<pre>function fib() {
  var i = 0, j = 1;
  while (true) {
    yield i;
    var t = i;
    i = j;
    j += t;
  }
}

var g = fib();
for (var i = 0; i &lt; 10; i++) {
  document.write(g.next() + "&lt;BR&gt;\n");
}
</pre>
<p>The function containing the <code>yield</code> keyword is a generator.  When you call it, its formal parameters are bound to actual arguments, but its body isn't actually evaluated.  Instead, a generator-iterator is returned.  Each call to the generator-iterator's <code>next()</code> method performs another pass through the iterative algorithm.  Each step's value is the value specified by the <code>yield</code> keyword.  Think of <code>yield</code> as the generator-iterator version of <code>return</code>, indicating the boundary between each iteration of the algorithm.  Each time you call <code>next()</code>, the generator code resumes from the statement following the <code>yield</code>.
</p><p>You cycle a generator-iterator by repeatedly calling its <code>next()</code> method until you reach your desired result condition.  In this example, we can obtain however many Fibonacci numbers we want by continuing to call <code>g.next()</code> until we have the number of results we want.
</p>
<h3 name="Iterators">Iterators</h3>
<p>An <i>iterator</i> is a special object that lets you iterate over data.
</p><p>In normal usage, iterator objects are "invisible"; you won't need to operate on them explicitly, but will instead use JavaScript's <a href="es/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements"><code>for...in</code> and <code>for each...in</code> statements</a> to loop naturally over the keys and/or values of objects.
</p>
<pre>var objectWithIterator = getObjectSomehow();

for (var i in objectWithIterator)
{
  document.write(objectWithIterator[i] + "&lt;BR&gt;\n");
}
</pre>
<p>If you are implementing your own iterator object, or have another need to directly manipulate iterators, you'll need to know about the <code>next</code> method, the <code>StopIteration</code> exception, and the <code>__iterator__</code> property.
</p><p>You can create an iterator for an object by calling <code>Iterator(<i>objectname</i>)</code>; the iterator for an object is found via the object's <code>__iterator__</code> property, which by default implements iteration according to the usual <code>for...in</code> and <code>for each...in</code> model.  If you wish to provide a custom iterator, you should override the <a href="es/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters">getter</a> for <code>__iterator__</code> to return an instance of your custom iterator.  To get an object's iterator from script, you should use <code>Iterator(<i>obj</i>)</code> rather than accessing the <code>__iterator__</code> property directly.
</p><p>Once you have an iterator, you can easily fetch the next item in the object by calling the iterator's <code>next()</code> method.  If there is no data left, the <code>StopIteration</code> exception is thrown.
</p><p>Here's a simple example of direct iterator manipulation:
</p>
<pre>var obj = {name:"Jack Bauer", username:"JackB", id:12345, agency:"CTU", region:"Los Angeles"};

var it = Iterator(obj);

try {
  while (true) {
    document.write(it.next() + "&lt;BR&gt;\n");
  }
} catch (err if err instanceof StopIteration) {
  document.write("End of record.&lt;BR&gt;\n");
} catch (err) {
  document.write("Unknown error: " + err.description + "&lt;BR&gt;\n");
}
</pre>
<p>The output from this program looks like this:
</p>
<pre>name,Jack Bauer
username,JackB
id,12345
agency,CTU
region,Los Angeles
End of record.
</pre>
<p>You can, optionally, specify a second parameter when creating your iterator, which is a boolean value that indicates whether or not you only want the keys returned each time you call its <code>next()</code> method.  Changing <code>var it = Iterator(obj);</code> to <code>var it = Iterator(obj, true);</code> in the above sample results in the following output:
</p>
<pre>name
username
id
agency
region
End of record.
</pre>
<p>In both cases, the actual order in which the data is returned may vary based on the implementation.  There is no guaranteed ordering of the data.
</p><p>Iterators are a handy way to scan through the data in objects, including objects whose content may include data you're unaware of.  This can be particularly useful if you need to preserve data your application isn't expecting.
</p>
<h2 name="Array_comprehensions">Array comprehensions</h2>
<p>Array comprehensions are a use of generators that provides a convenient way to perform powerful initialization of arrays.  For example:
</p>
<pre class="eval">function range(begin, end) {
  for (let i = begin; i &lt; end; ++i) {
    yield i;
  }
}
</pre>
<p><code>range()</code> is a generator that returns all the values between <tt>begin</tt> and <tt>end</tt>.  Having defined that, we can use it like this:
</p>
<pre class="eval">var ten_squares = [i * i for (i in range(0, 10))];
</pre>
<p>This pre-initializes a new array, <var>ten_squares</var>, to contain the squares of the values in the range <code>0..9</code>.
</p><p>You can use any conditional when initializing the array.  If you want to initialize an array to contain the even numbers between 0 and 20, you can use this code:
</p>
<pre class="eval">var evens = [i for (i in range(0, 21)) if (i % 2 == 0)];
</pre>
<p>Prior to JavaScript 1.7, this would have to be coded something like this:
</p>
<pre>var evens = [];
for (var i=0; i &lt;= 20; i++) {
  if (i % 2 == 0)
    evens.push(i);
}
</pre>
<p>Not only is the array comprehension much more compact, but it's actually easier to read, once you're familiar with the concept.
</p>
<h4 name="Scoping_rules">Scoping rules</h4>
<p>Array comprehensions have an implicit block around them, containing everything inside the square brackets, as well as implicit <code>let</code> declarations.
</p><p><i>Add details.</i>
</p>
<h2 name="Block_scope_with_let">Block scope with <code>let</code></h2>
<p>There are several ways in which <code>let</code> can be used to manage block scope of data and functions:
</p>
<ul><li> The <b><code>let</code> statement</b> provides a way to associate values with variables, constants, and functions within the scope of a block, without affecting the values of like-named variables outside the block.
</li><li> The <b><code>let</code> expression</b> lets you establish variables scoped only to a single expression.
</li><li> The <b><code>let</code> definition</b> defines variables, constants, and functions whose scope is constrained to the block in which they're defined.  This syntax is very much like the syntax used for <code>var</code>.
</li><li> You can also use <code>let</code> to establish variables that exist only within the context of a <code>for</code> loop.
</li></ul>
<h3 name="The_let_statement">The <code>let</code> statement</h3>
<p>The <code>let</code> statement provides local scoping for variables, constants, and functions.  It works by binding zero or more variables in the lexical scope of a single block of code.  The completion value of the <code>let</code> statement is the completion value of the block.
</p><p>For example:
</p>
<pre>var x = 5;
var y = 0;

let (x = x+10, y = 12) {
  document.write(x+y + "&lt;BR&gt;\n");
}

document.write(x+y + "&lt;BR&gt;\n");
</pre>
<p>The output from this program will be:
</p>
<pre>27
5
</pre>
<p>The rules for the code block are the same as for any other code block in JavaScript.  It may have its own local variables established using the <code>let</code> declarations.
</p>
<div class="note"><b>Note:</b> When using the <code>let</code> statement syntax, the parentheses following <code>let</code> are required.  Failure to include them will result in a syntax error.</div>
<h4 name="Scoping_rules_2">Scoping rules</h4>
<p>The scope of variables defined using <code>let</code> is the <code>let</code> block itself, as well as any inner blocks contained inside it, unless those blocks define variables by the same names.
</p>
<h3 name="let_expressions"><code>let</code> expressions</h3>
<p>You can use <code>let</code> to establish variables that are scoped only to a single expression:
</p>
<pre>var x = 5;
var y = 0;
document.write( let(x = x + 10, y = 12) x+y  + "&lt;BR&gt;\n");
document.write(x+y + "&lt;BR&gt;\n");
</pre>
<p>The resulting output is:
</p>
<pre>27
5
</pre>
<p>In this case, the binding of the values of <var>x</var> and <var>y</var> to <code>x+10</code> and <code>12</code> are scoped solely to the expression <code>x+y</code>.
</p>
<h4 name="Scoping_rules_3">Scoping rules</h4>
<p>Given a <code>let</code> expression:
</p>
<pre class="eval">let (<var>decls</var>) <var style="color: blue">expr</var>
</pre>
<p>There is an implicit block created around <var style="color: blue">expr</var>.
</p>
<h3 name="let_definitions"><code>let</code> definitions</h3>
<p>The <code>let</code> keyword can also be used to define variables, constants, and functions inside a block.
</p>
<pre> ** This code doesn't run in FF 2.0 b1. **
if (x &gt; y)
{
   let const k = 37;
   let gamma : int = 12.7 + k;
   let i = 10;
   let function f(n) { return (n/3)+k; }
   return f(gamma) + f(i);
}
</pre>
<h4 name="Scoping_rules_4">Scoping rules</h4>
<p>Variables, functions, and constants declared by <code>let</code>, <code>let function</code>, and <code>let const</code> have as their scope the block in which they are defined, as well as in any sub-blocks in which they aren't redefined.  In this way, <code>let</code> works very much like <code>var</code>.
</p><p>In programs and classes <code>let</code> does not create properties on the global and class objects like <code>var</code> does; instead, it creates properties in an implicit block created for the evaluation of statements in those contexts.  This essentially means that <code>let</code> won't override variables previously defined using <code>var</code>.  For example:
</p>
<pre>** Doesn't work in FF 2.0 b1. Returns "42", not "global".
var x = 'global';
let x = 42;
document.write(this.x + "&lt;BR&gt;\n");
</pre>
<p>The output displayed by this code will display "global", not " 42".
</p><p>An <i>implicit block</i> is one that is not bracketed by braces; it's created implicitly by the JavaScript engine.
</p><p>In functions, <code>let</code> executed by <code>eval()</code> does not create properties on the variable object (activation object or innermost binding rib) like <code>var</code> does; instead, it creates properties in an implicit block created for the evaluation of statements in the program. This is a consequence of <code>eval()</code> operating on programs in tandem with the previous rule.
</p><p>In other words, when you use <code>eval()</code> to execute code, that code is treated as an independent program, which has its own implicit block around its code.
</p>
<h3 name="let-scoped_variables_in_for_loops"><code>let</code>-scoped variables in <code>for</code> loops</h3>
<p>You can use the <code>let</code> keyword to bind variables locally in the scope of <code>for</code> loops, just like you can with <code>var</code>.
</p>
<pre>** Add obj **
   var i=0;
   for ( let i=i ; i &lt; 10 ; i++ )
     document.write(i + "&lt;BR&gt;\n");

   for ( let [name,value] in obj )
     document.write("Name: " + name + ", Value: " + value + "&lt;BR&gt;\n");
</pre>
<h4 name="Scoping_rules_5">Scoping rules</h4>
<pre class="eval">for (let <var>expr1</var>; <var style="color: blue">expr2</var>; <var style="color: blue">expr3</var>) <var style="color: blue">statement</var>
</pre>
<p>In this example, <var style="color: blue">expr2</var>, <var style="color: blue">expr3</var>, and <var style="color: blue">statement</var> are enclosed in an implicit block that contains the block local variables declared by <code>let <var>expr1</var></code>.  This is demonstrated in the first loop above.
</p>
<pre class="eval">for (<var>expr1</var> in <var>expr2</var>) <var style="color: blue">statement</var>
</pre>
<p>In this case, there's an implicit block containing <var style="color: blue">statement</var>.  This is shown in the second loop above.
</p>
<h2 name="Destructuring_assignment">Destructuring assignment</h2>
<p>Destructuring assignment makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.
</p><p>The object and array literal expressions provide an easy way to create ad-hoc packages of data.  Once you've created these packages of data, you can use them any way you want to.  You can even return them from functions.
</p><p>One particularly useful thing you can do with destructuring assignment is to read an entire structure in a single statement, although there are a number of interesting things you can do with them, as shown in the section full of examples that follows.
</p><p>This capability is similar to features present in languages such as Perl and Python.
</p>
<h3 name="Examples">Examples</h3>
<p>Destructuring assignment is best explained through the use of examples, so here are a few for you to read over and learn from.
</p>
<div class="note"><b>Note:</b> If you have more interesting examples of ways to use destructuring assignment, please consider adding them to this section.</div>
<h4 name="Swapping_values">Swapping values</h4>
<p>You can use destructuring assignment, for example, to swap values:
</p>
<pre>var a = 1;
var b = 3;

[a, b] = [b, a];
</pre>
<p>After executing this code, <var>b</var> is 1 and <var>a</var> is 3.
</p><p>Or to rotate values: (poor code format)
</p>
<pre>&lt;body bgcolor = "black"&gt;

&lt;script type="application/javascript;version=1.7"/&gt;

var a = 'o';
var b = "&lt;font color = 'green'&gt;o&lt;/font&gt;";
var c = 'o';
var d = 'o';
var e = 'o';
var f = "&lt;font color = 'blue'&gt;o&lt;/font&gt;";
var g = 'o';
var h = 'o';

for (lp=0;lp&lt;40;lp++)
	{[a, b, c, d, e, f, g, h] = [b, c, d, e, f, g, h, a];
	 document.write(a+''+b+''+c+''+d+''+e+''+f+''+g+''+h+''+"&lt;br /&gt;");}
&lt;/script&gt;
</pre>
<p>After executing this code, a visual colorful display of the variable rotation will be displayed
</p>
<h4 name="Multiple-value_returns">Multiple-value returns</h4>
<p>Thanks to destructuring assignment, functions can return multiple values.  While it's always been possible to return an array from a function, this provides an added degree of flexibility.
</p>
<pre>function f() {
  return [1, 2];
}
</pre>
<p>As you can see, returning results is done using an array-like notation, with all the values to return enclosed in brackets.  You can return any number of results in this way.  In this example, <code>f()</code> returns the values <code>{{mediawiki.external('1, 2')}}</code> as its output.
</p>
<pre>var a, b;
[a, b] = f();
document.write ("A is " + a + " B is " + b + "&lt;BR&gt;\n");
</pre>
<p>The command <code>{{mediawiki.external('a, b')}} = f()</code> assigns the results of the function to the variables in brackets, in order: <var>a</var> is set to 1 and <var>b</var> is set to 2.
</p><p>You can also retrieve the return values as an array:
</p>
<pre>var a = f();
document.write ("A is " + a);
</pre>
<p>In this case, <var>a</var> is an array containing the values 1 and 2.
</p>
<h4 name="Ignoring_some_returned_values">Ignoring some returned values</h4>
<p>You can also ignore return values that you're not interested in:
</p>
<pre>function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
document.write ("A is " + a + " B is " + b + "&lt;BR&gt;\n");
</pre>
<p>After running this code, <var>a</var> is 1 and <var>b</var> is 3.  The value 2 is ignored.
</p>
<h4 name="Looping_across_objects">Looping across objects</h4>
<p>You can also use destructuring assignment to pull data out of an object:
</p>
<pre>var obj = { name: "Bob", score: 1.5, age: 35 };

for (let[name, value] in obj) {
  document.write ("Name: " + name + ", Value: " + value + "&lt;BR&gt;\n");
}
</pre>
<p>This loops over all the key/value pairs in the object <var>obj</var> and displays their names and values.  In this case, the output looks like the following:
</p>
<pre>Name: name, Value: Bob
Name: score, Value: 1.5
Name: age, Value: 35
</pre>
<h4 name="Looping_across_values_in_an_array_of_objects">Looping across values in an array of objects</h4>
<p>You can loop over an array of objects, pulling out fields of interest from each object:
</p>
<pre>var people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for each (let {name: n, family: { father: f } } in people) {
  document.write ("Name: " + n + ", Father: " + f + "&lt;BR&gt;\n");
}
</pre>
<p>This pulls the <var>name</var> field into <var>n</var> and the <var>family.father</var> field into <var>f</var>, then prints them.  This is done for each object in the <var>people</var> array.  The output looks like this:
</p>
<pre>Name: Mike Smith, Father: Harry Smith
Name: Tom Jones, Father: Richard Jones
</pre>
{{ wiki.languages( { "en": "en/New_in_JavaScript_1.7", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.7", "pl": "pl/Nowo\u015bci_w_JavaScript_1.7" } ) }}
Revertir a esta revisión