Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Sincronización 5 Julio#293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
EzequielCaste merged 8 commits intojavascript-tutorial:masterfromvplentinax:syncJuly-5
Jul 9, 2020
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion1-js/02-first-steps/09-comparison/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,11 +2,17 @@

Conocemos muchos operadores de comparación de las matemáticas:

En Javascript se escriben así:

- Mayor/menor que: <code>a &gt; b</code>, <code>a &lt; b</code>.
- Mayor/menor o igual que: <code>a &gt;= b</code>, <code>a &lt;= b</code>.
- Igual: `a == b` (ten en cuenta el doble signo `=`. Un solo símbolo `a = b` significaría una asignación).
- Distinto. En matemáticas la notación es <code>&ne;</code>, pero en JavaScript se escribe como una asignación con un signo de exclamación delante: <code>a != b</code>.

En este artículo, aprenderemos más sobre los diferentes tipos de comparaciones, cómo las realiza JavaScript, incluidas las peculiaridades importantes.

Al final, encontrará una buena receta para evitar problemas relacionados con "peculiaridades de JavaScript"("javascript quirks").

## Booleano es el resultado

Como todos los demás operadores, una comparación retorna un valor. En este caso, el valor es un booleano.
Expand DownExpand Up@@ -195,7 +201,7 @@ Obtenemos estos resultados porque:
- Las comparaciones `(1)` y `(2)` retornan `falso` porque `no definido` se convierte en `NaN` y `NaN` es un valor numérico especial que retorna `falso` para todas las comparaciones.
- La comparación de igualdad `(3)` retorna `falso` porque `undefined` sólo equivale a `null` y a ningún otro valor.

###Evita los problemas
###Evitar los problemas

¿Por qué repasamos estos ejemplos? ¿Deberíamos recordar estas peculiaridades todo el tiempo? Bueno, en realidad no. En realidad, estas cosas difíciles se volverán familiares con el tiempo, pero hay una manera sólida de evadir los problemas con ellas:

Expand Down
2 changes: 1 addition & 1 deletion1-js/05-data-types/02-number/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -148,7 +148,7 @@ Hay dos formas de hacerlo:

1. Multiplicar y dividir.

Para redondear el número a dos dígitos tras el decimal, podemos multiplicarlo por `100`, llamar la función de redondeo y volverlo a dividir.
Para redondear el número a dos dígitos tras el decimal, podemos multiplicarlo por `100` (o una potencia mayor de 10), llamar la función de redondeo y volverlo a dividir.
```js run
let num = 1.23456;

Expand Down
2 changes: 1 addition & 1 deletion1-js/05-data-types/09-keys-values-entries/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -74,7 +74,7 @@ Usually that's convenient. But if we want symbolic keys too, then there's a sepa

Objects lack many methods that exist for arrays, e.g. `map`, `filter` and others.

If we'd like to apply them, then we can use `Object.entries` followed `Object.fromEntries`:
If we'd like to apply them, then we can use `Object.entries` followedby`Object.fromEntries`:

1. Use `Object.entries(obj)` to get an array of key/value pairs from `obj`.
2. Use array methods on that array, e.g. `map`.
Expand Down
2 changes: 1 addition & 1 deletion1-js/06-advanced-functions/03-closure/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -184,7 +184,7 @@ Los rectángulos en el lado derecho demuestran cómo cambia el entorno léxico g

1. Cuando se inicia el script, el entorno léxico se rellena previamente con todas las variables declaradas.
     - Inicialmente, están en el estado "No inicializado". Ese es un estado interno especial, significa que el motor conoce la variable, pero no se puede hacer referencia a ella hasta que se haya declarado con `let`. Es casi lo mismo que si la variable no existiera.
2. Luego aparece la definición `let phrase`.Todavía no hay una asignación, por lo que su valor es `undefined`. Podemos usar la variable desde estemomento.
2. Luego aparece la definición `let phrase`.Todavía no hay una asignación, por lo que su valor es `undefined`. Podemos usar la variable desde estepunto en adelante.
3. `phrase` se le asigna un valor.
4. `phrase` cambia el valor.

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
function sum(a) {

let currentSum = a;

function f(b) {
currentSum += b;
return f;
}

f.toString = function() {
return currentSum;
};

return f;
}
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
function sum(a){
// Your code goes here.

}

/*
sum(1)(2) == 3; // 1 + 2
sum(1)(2)(3) == 6; // 1 + 2 + 3
sum(5)(-1)(2) == 6
sum(6)(-1)(-2)(-3) == 0
sum(0)(1)(2)(3)(4)(5) == 15
*/
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
describe("sum", function(){

it("sum(1)(2) == 3", function(){
assert.equal(3, sum(1)(2));
});

it("sum(5)(-1)(2) == 6", function(){
assert.equal(6, sum(5)(-1)(2));
});

it("sum(6)(-1)(-2)(-3) == 0", function(){
assert.equal(0, sum(6)(-1)(-2)(-3));
});

it("sum(0)(1)(2)(3)(4)(5) == 15", function(){
assert.equal(15, sum(0)(1)(2)(3)(4)(5));
});
});

31 changes: 5 additions & 26 deletions1-js/09-classes/01-class/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -331,7 +331,7 @@ alert(user.name); // John
alert(User.prototype.name); // undefined
```

Technically, they are processed after the constructor has done it's job, and we can use for them complex expressions and function calls:
We can also assign values using more complex expressions and function calls:

```js run
class User {
Expand DownExpand Up@@ -375,30 +375,9 @@ The problem is called "losing `this`".
There are two approaches to fixing it, as discussed in the chapter <info:bind>:

1. Pass a wrapper-function, such as `setTimeout(() => button.click(), 1000)`.
2. Bind the method to object, e.g. in the constructor:
2. Bind the method to object, e.g. in the constructor.

```js run
class Button {
constructor(value) {
this.value = value;
*!*
this.click = this.click.bind(this);
*/!*
}

click() {
alert(this.value);
}
}

let button = new Button("hello");

*!*
setTimeout(button.click, 1000); // hello
*/!*
```

Class fields provide a more elegant syntax for the latter solution:
Class fields provide another, quite elegant syntax:

```js run
class Button {
Expand All@@ -417,9 +396,9 @@ let button = new Button("hello");
setTimeout(button.click, 1000); // hello
```

The class field `click = () => {...}`creates an independentfunctionon each `Button` object, with `this`bound to theobject.Then wecan pass `button.click` around anywhere, andit will be called with the right `this`.
The class field `click = () => {...}`is created on a per-object basis, there's a separatefunctionfor each `Button` object, with `this`inside it referencing thatobject.Wecan pass `button.click` around anywhere, andthe value of `this` will always be correct.

That's especially useful in browser environment,when we need to setup a method as aneventlistener.
That's especially useful in browser environment,foreventlisteners.

## Summary

Expand Down
89 changes: 87 additions & 2 deletions1-js/09-classes/02-class-inheritance/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -230,7 +230,8 @@ let rabbit = new Rabbit("Conejo Blanco", 10); // Error: esto no está definido.

Vaya! Tenemos un error. Ahora no podemos crear conejos. ¿Qué salió mal?

La respuesta corta es: los constructores en las clases heredadas deben llamar a `super(...)`, y (!) Hacerlo antes de usar `this`.
La respuesta corta es:
- **Los constructores en las clases heredadas deben llamar a `super(...)`, y (!) hacerlo antes de usar `this`**.

...¿Pero por qué? ¿Que está pasando aqui? De hecho, el requisito parece extraño.

Expand All@@ -243,7 +244,7 @@ Esa etiqueta afecta su comportamiento con `new`.
- Cuando una función regular se ejecuta con `new`, crea un objeto vacío y lo asigna a `this`.
- Pero cuando se ejecuta un constructor derivado, no hace esto. Espera que el constructor padre haga este trabajo.

Por lo tanto, un constructor derivado debe llamar a `super` para ejecutar su constructor padre (no derivado), de lo contrario no se creará el objeto para `this`. Y obtendremos un error.
**Por lo tanto, un constructor derivado debe llamar a `super` para ejecutar su constructor padre (no derivado), de lo contrario no se creará el objeto para `this`. Y obtendremos un error.**

Para que el constructor `Rabbit` funcione, necesita llamar a `super()` antes de usar `this`, como aquí:

Expand DownExpand Up@@ -277,7 +278,91 @@ alert(rabbit.name); // Conejo Blanco
alert(rabbit.earLength); // 10
*/!*
```
### Overriding class fields: a tricky note

```warn header="Advanced note"
This note assumes you have a certain experience with classes, maybe in other programming languages.
It provides better insight into the language and also explains the behavior that might be a source of bugs (but not very often).
If you find it difficult to understand, just go on, continue reading, then return to it some time later.
```

We can override not only methods, but also class fields.

Although, there's a tricky behavior when we access an overridden field in parent constructor, quite different from most other programming languages.

Consider this example:

```js run
class Animal {
name = 'animal'
constructor() {
alert(this.name); // (*)
}
}
class Rabbit extends Animal {
name = 'rabbit';
}
new Animal(); // animal
*!*
new Rabbit(); // animal
*/!*
```

Here, class `Rabbit` extends `Animal` and overrides `name` field with its own value.

There's no own constructor in `Rabbit`, so `Animal` constructor is called.

What's interesting is that in both cases: `new Animal()` and `new Rabbit()`, the `alert` in the line `(*)` shows `animal`.

**In other words, parent constructor always uses its own field value, not the overridden one.**

What's odd about it?

If it's not clear yet, please compare with methods.

Here's the same code, but instead of `this.name` field we call `this.showName()` method:

```js run
class Animal {
showName() { // instead of this.name = 'animal'
alert('animal');
}
constructor() {
this.showName(); // instead of alert(this.name);
}
}
class Rabbit extends Animal {
showName() {
alert('rabbit');
}
}
new Animal(); // animal
*!*
new Rabbit(); // rabbit
*/!*
```

Please note: now the output is different.

And that's what we naturally expect. When the parent constructor is called in the derived class, it uses the overridden method.

...But for class fields it's not so. As said, the parent constructor always uses the parent field.

Why is there the difference?

Well, the reason is in the field initialization order. The class field is initialized:
- Before constructor for the base class (that doesn't extend anything),
- Imediately after `super()` for the derived class.

In our case, `Rabbit` is the derived class. There's no `constructor()` in it. As said previously, that's the same as if there was an empty constructor with only `super(...args)`.

So, `new Rabbit()` calls `super()`, thus executing the parent constructor, and (per the rule for derived classes) only after that its class fields are initialized. At the time of the parent constructor execution, there are no `Rabbit` class fields yet, that's why `Animal` fields are used.

This subtle difference between fields and methods is specific to JavaScript

Luckily, this behavior only reveals itself if an overridden field is used in the parent constructor. Then it may be difficult to understand what's going on, so we're explaining it here.

If it becomes a problem, one can fix it by using methods or getters/setters instead of fields.

## [[HomeObject]]: el `super` interno

Expand Down
8 changes: 4 additions & 4 deletions1-js/11-async/05-promise-api/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -179,10 +179,10 @@ If the browser doesn't support `Promise.allSettled`, it's easy to polyfill:
if(!Promise.allSettled) {
Promise.allSettled = function(promises) {
return Promise.all(promises.map(p => Promise.resolve(p).then(value => ({
state: 'fulfilled',
status: 'fulfilled',
value
}), reason => ({
state: 'rejected',
status: 'rejected',
reason
}))));
};
Expand All@@ -191,7 +191,7 @@ if(!Promise.allSettled) {

In this code, `promises.map` takes input values, turns them into promises (just in case a non-promise was passed) with `p => Promise.resolve(p)`, and then adds `.then` handler to every one.

That handler turns a successful result `value` into `{state:'fulfilled', value}`, and an error `reason` into `{state:'rejected', reason}`. That's exactly the format of `Promise.allSettled`.
That handler turns a successful result `value` into `{status:'fulfilled', value}`, and an error `reason` into `{status:'rejected', reason}`. That's exactly the format of `Promise.allSettled`.

Now we can use `Promise.allSettled` to get the results of *all* given promises, even if some of them reject.

Expand DownExpand Up@@ -277,7 +277,7 @@ There are 5 static methods of `Promise` class:

1. `Promise.all(promises)` -- waits for all promises to resolve and returns an array of their results. If any of the given promises rejects, it becomes the error of `Promise.all`, and all other results are ignored.
2. `Promise.allSettled(promises)` (recently added method) -- waits for all promises to settle and returns their results as an array of objects with:
- `state`: `"fulfilled"` or `"rejected"`
- `status`: `"fulfilled"` or `"rejected"`
- `value` (if fulfilled) or `reason` (if rejected).
3. `Promise.race(promises)` -- waits for the first promise to settle, and its result/error becomes the outcome.
4. `Promise.resolve(value)` -- makes a resolved promise with the given value.
Expand Down
12 changes: 8 additions & 4 deletions1-js/13-modules/01-modules-intro/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@

# Módulos, introducción

A medida que nuestra aplicación crece, queremos dividirla en múltiples archivos, llamados "módulos". Un módulogeneralmente contiene una clase o una biblioteca de funciones.
A medida que nuestra aplicación crece, queremos dividirla en múltiples archivos, llamados "módulos". Un módulopuede contener una clase o una biblioteca de funciones para un propósito específico.

Durante mucho tiempo, JavaScript existió sin una sintaxis de módulo a nivel de lenguaje. Eso no fue un problema, porque inicialmente los scripts eran pequeños y simples, por lo que no era necesario.

Pero con el tiempo los scripts se volvieron cada vez más complejos, por lo que la comunidad inventó una variedad de formas de organizar el código en módulos, bibliotecas especiales para cargar módulos a pedido.

Por ejemplo:
Para nombrar algunos (por razones históricas):

- [AMD](https://es.wikipedia.org/wiki/Asynchronous_module_definition) -- uno de los sistemas de módulos más antiguos, implementado inicialmente por la biblioteca [require.js](http://requirejs.org/).
- [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) -- el sistema de módulos creado para el servidor Node.js.
- [UMD](https://github.com/umdjs/umd) -- un sistema de módulos más, sugerido como universal, compatible con AMD y CommonJS.

Ahora, todo esto se convierte lentamente en una parte de la historia, pero aún podemos encontrarlos en viejos scripts.

El sistema de módulos a nivel de idioma apareció en el estándar en 2015, evolucionó gradualmente desde entonces y ahora es compatible con todos los principales navegadores y en Node.js. Así queloestudiaremos de ahora en adelante.
El sistema de módulos a nivel de idioma apareció en el estándar en 2015, evolucionó gradualmente desde entonces y ahora es compatible con todos los principales navegadores y en Node.js. Así que estudiaremos los módulos modernos de Javascript de ahora en adelante.

## Qué es un módulo?

Un módulo es solo un archivo. Un script es un módulo.
Un módulo es solo un archivo. Un script es un módulo. Tan sencillo como eso.

Los módulos pueden cargarse entre sí y usar directivas especiales `export` e `import` para intercambiar funcionalidad, llamar a funciones de un módulo de otro:

Expand DownExpand Up@@ -57,6 +57,10 @@ Asi:

El navegador busca y evalúa automáticamente el módulo importado (y sus importaciones si es necesario), y luego ejecuta el script.

```warn header="Los módulos funcionan solo a través de HTTP(s), no en archivos locales"
Si intenta abrir una página web localmente a través del protocolo `file://`, encontrará que las directivas `import / export` no funcionan. Use un servidor web local, como [static-server](https://www.npmjs.com/package/static-server#getting-started) o use la capacidad de "servidor en vivo" de su editor, como VS Code [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) para probar los módulos.
```

## Características del módulo central

¿Qué hay de diferente en los módulos en comparación con los scripts "normales"?
Expand Down
Loading

[8]ページ先頭

©2009-2025 Movatter.jp