You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Operador de comparação](#operador-de-comparação)
12
12
-[Typeof](#typeof)
13
13
-[New](#new)
14
14
-[This](#this)
15
15
-[Instanceof](#instanceof)
16
16
-[Scope](#scope)
17
17
-[Closure](#closure)
18
18
-[Prototypes](#prototypes)
19
-
-[Herança](#inheritance)
20
-
-[Cópia rasa e profunda](#deep-and-shallow-copy)
21
-
-[Cópia rasa](#shallow-copy)
22
-
-[Deep copy](#deep-copy)
23
-
-[Modularização](#modularization)
19
+
-[Herança](#herança)
20
+
-[Cópia rasa e profunda](#cópia-rasa-e-profunda)
21
+
-[Cópia rasa](#cópia-rasa)
22
+
-[Cópia profunda](#cópia-profunda)
23
+
-[Modularização](#modularização)
24
24
-[CommonJS](#commonjs)
25
25
-[AMD](#amd)
26
-
-[A diferença entre call, apply, bind](#the-differences-between-call-apply-bind)
27
-
-[simulação para implementar `call` e `apply`](#simulation-to-implement--call-and--apply)
28
-
-[Implementação de Promise](#promise-implementation)
29
-
-[Implementação do Generator](#generator-implementation)
26
+
-[A diferença entre call apply bind](#a-diferença-entre-call-apply-bind)
27
+
-[simulação para implementar `call` e `apply`](#simulação-para-implementar--call-e--apply)
28
+
-[Implementação de Promise](#implementação-de-promise)
29
+
-[Implementação do Generator](#implementação-do-generator)
30
30
-[Debouncing](#debouncing)
31
31
-[Throttle](#throttle)
32
-
-[Map、FlatMap e Reduce](#mapflatmap-and-reduce)
33
-
-[Async e await](#async-and-await)
32
+
-[Map、FlatMap e Reduce](#mapflatmap-e-reduce)
33
+
-[Async e await](#async-e-await)
34
34
-[Proxy](#proxy)
35
-
-[Por que 0.1 + 0.2 != 0.3](#why-01--02--03)
36
-
-[Expressões regulares](#regular-expressions)
37
-
-[Metacaracteres](#metacharacters)
35
+
-[Por que 0.1 + 0.2 != 0.3](#por-que-01--02--03)
36
+
-[Expressões regulares](#expressões-regulares)
37
+
-[Metacaracteres](#metacaracteres)
38
38
-[Flags](#flags)
39
39
-[Character Shorthands](#character-shorthands)
40
40
41
41
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
42
42
43
-
# Tipos incorparados
43
+
# Tipos incorporados
44
44
O JavaScript define sete tipos incorporados, dos quais podem ser divididos em duas categorias `Primitive Type` e `Object`.
45
45
46
46
Existem seis tipos primitivos: `null`, `undefined`, `boolean`, `number`, `string` e `symbol `.
@@ -51,7 +51,7 @@ Em JavaScript, não existe inteiros de verdade, todos os números são implement
51
51
0.1+0.2==0.3// false
52
52
```
53
53
54
-
Para tipos primitivos, quando usamos literais para inicializar uma variável, ela te apenas um valor literal, ela não tem um tipo. Isso será convertido para o tipo correspondente apenas quando necessário.
54
+
Para tipos primitivos, quando usamos literais para inicializar uma variável, ela tem apenas um valor literal, ela não tem um tipo. Isso será convertido para o tipo correspondente apenas quando necessário.
55
55
56
56
```js
57
57
let a =111// apenas literais, não um número
@@ -67,15 +67,15 @@ b.name = 'EF'
67
67
console.log(a.name) // EF
68
68
```
69
69
70
-
# Type Conversion
70
+
# Conversão de Tipos
71
71
72
-
## Converting to Boolean
72
+
## Convertendo para Boleano
73
73
74
-
When the condition is judged, other than `undefined`, `null`, `false`, `NaN`, `''`, `0`, `-0`, all of the values, including objects, are converted to`true`.
74
+
Quando a condição é julgada, que não seja `undefined`, `null`, `false`, `NaN`, `''`, `0`, `-0`, os esses valores, incluindo objetos, são convertidos para`true`.
75
75
76
-
## Objects to Primitive Types
76
+
## De objetos para tipos primitivos
77
77
78
-
When objects are converted, `valueOf`and`toString`will be called, respectively in order. These two methods can also be overridden.
78
+
Quando objetos são convertidos, `valueOf`e`toString`serão chamados, respectivamente em ordem. Esses dois métodos também são sobrescritos.
79
79
80
80
```js
81
81
let a = {
@@ -85,11 +85,11 @@ let a = {
85
85
}
86
86
```
87
87
88
-
## Arithmetic Operators
88
+
## Operadores Aritméticos
89
89
90
-
Only for additions, if one of the parameters is a string, the other one will be converted to string as well. For all other operations, as long as one of the parameters is a number, the other one will be converted to a number.
90
+
Apenas para adicão, se um dos parâmentros for uma string, o outro será convertido para uma string também. Para todas as outras operações, enquanto se um dos parâmetros for um número, o outro será convertido para um número.
91
91
92
-
Additions will invoke three types of type conversions: to primitive types, to numbers and to string:
92
+
Adicões invocaram três tipos de conversões de tipos: para tipos primitivos, para números e string:
93
93
94
94
```js
95
95
1+'1'// '11'
@@ -100,120 +100,120 @@ Additions will invoke three types of type conversions: to primitive types, to nu
`toPrimitive`in above figure is converting objects to primitive types.
115
+
`toPrimitive`na figura acima é convertido objetos para tipos primitivos.
116
116
117
-
`===`is usually recommended to compare values. However, if you would like to check for`null` value, you can use`xx == null`.
117
+
`===`é geralmente recomendado para comparar valores. Contudo, se você gostaria de checar o valor`null`, você pode usar`xx == null`.
118
118
119
-
Let's take a look at an example `[] == ![] // -> true`. The following process explains why the expression evaluates to`true`:
119
+
Vamos dar uma olhada no exemplo `[] == ![] // -> true`. O processo seguinte explica por que a expressão é`true`:
120
120
121
121
```js
122
-
// [] converting to true, then take the opposite to false
122
+
// [] convertendo para true, então pegue o oposto para false
123
123
[] ==false
124
-
//with #8
124
+
//com #8
125
125
[] ==ToNumber(false)
126
126
[] ==0
127
-
//with #10
127
+
//com #10
128
128
ToPrimitive([]) ==0
129
129
// [].toString() -> ''
130
130
''==0
131
-
//with #6
131
+
//com #6
132
132
0==0// -> true
133
133
```
134
134
135
-
## Comparison Operator
135
+
## Operador de comparação
136
136
137
-
1.If it's an object, `toPrimitive`is used.
138
-
2.If it's a string, `unicode`character index is used.
137
+
1.Se for um objeto, `toPrimitive`é usado.
138
+
2.Se for uma string, o caractere índice `unicode`é usado.
139
139
140
140
# Typeof
141
141
142
-
`typeof`can always display the correct type of primitive types, except`null`:
142
+
`typeof`também permite exibir o tipo correto de tipos primitivos, exceto`null`:
143
143
```js
144
144
typeof1// 'number'
145
145
typeof'1'// 'string'
146
146
typeofundefined// 'undefined'
147
147
typeoftrue// 'boolean'
148
148
typeofSymbol() // 'symbol'
149
-
typeof b // b is not declared,but it still can be displayed as undefined
149
+
typeof b // b não foi declarado, mas ainda pode ser exibido como undefined
150
150
```
151
151
152
-
For object, `typeof`will always display`object`, except**function**:
152
+
Para objeto, `typeof`irá sempre exibir`object`, exceto**function**:
153
153
```js
154
154
typeof [] // 'object'
155
155
typeof {} // 'object'
156
156
typeofconsole.log// 'function'
157
157
```
158
158
159
-
As for`null`, it is always be treated as an `object` by `typeof`，although it is a primitive data type, and this is a bug that has been around for a long time.
159
+
Quanto a`null`, ele é sempre tratado como um `object`pelo `typeof`， apesar de ser um tipo primitivo, e esse é um bug que que existe a um bom tempo.
160
160
```js
161
161
typeofnull// 'object'
162
162
```
163
163
164
-
Why does this happen? Because the initial version of JS was based on 32-bit systems, which stored type information of variables in the lower bits for performance considerations. Those start with `000` are objects, and all the bits of`null` are zero, so it is erroneously treated as an object. Although the current code of checking internal types has changed, this bug has been passed down.
164
+
Por que isso acontece? Porque a versão inicial do JS era baseada em sistemas de 32-bits, do qual armazenava a informação do tipo de variável em bits mais baixos por considerações de performance. Essas começam com objetos `000`, e todos os bits de`null`são zero, então isso é erroneamente tratado como um objeto. Apesar do código atual verificar se os tipos internos mudaram, esse bug foi passado para baixo.
165
165
166
-
We can use`Object.prototype.toString.call(xx)`if we want to get the correct data type of a variable, and then we can get a string like`[object Type]`:
166
+
Nós podemos usar`Object.prototype.toString.call(xx)`se quisermos pegar o tipo de dado correto da variável, e então obtemos uma string como`[object Type]`:
167
167
168
168
```js
169
169
let a
170
-
//We can also judge `undefined` like this
170
+
//Podemos declarar `undefined` da seguinte maneira
171
171
a ===undefined
172
-
//But the nonreserved word `undefined` can be re-assigned in a lower version browser
172
+
//mas a palavra não reservada `undefined` pode ser re assinada em versões antigas dos browsers
173
173
letundefined=1
174
-
//it will go wrong to judge like this
175
-
//So we can use the following method, with less code
176
-
//it will always return `undefined`, whatever follows `void`
174
+
//vai dar errado declarar assim
175
+
//então nós podemos usar o seguinte método, com menos código
176
+
//ele sempre vai retornar `undefined`, tanto faz vir seguido de `void`
177
177
a ===void0
178
178
```
179
179
180
180
# New
181
181
182
-
1.Create a new object
183
-
2.Chained to prototype
184
-
3.Bind this
185
-
4.Return a new object
182
+
1.Crie um novo objeto
183
+
2.Encadei o prototype
184
+
3.Ligue o this
185
+
4.Retorne um novo objeto
186
186
187
-
The above four steps will happen in the process of calling `new`. We can also try to implement `new `by ourselves:
187
+
Os quatro passos acima vão acontecer no processo chamado `new`. Podemos também tentar implementar o `new `nós mesmos:
188
188
189
189
```js
190
190
functioncreate() {
191
-
//Create an empty object
191
+
//Crie um objeto vázio
192
192
let obj =newObject()
193
-
//Get the constructor
193
+
//Obtenha o construtor
194
194
let Ctor = [].shift.call(arguments)
195
-
//Chained to prototype
195
+
//Encadeie para o prototype
196
196
obj.__proto__=Ctor.prototype
197
-
//Bind this, Execute the constructor
197
+
//Ligue o this, execute o construtor
198
198
let result =Con.apply(obj, arguments)
199
-
//Make sure the new one is an object
199
+
//Tenha certeza que o novo é um objeto
200
200
returntypeof result ==='object'? result : obj
201
201
}
202
202
```
203
203
204
-
Instances of object are all created with `new`, whether it's`function Foo()` , or`let a = { b: 1 }` .
204
+
Instância de um novo objeto são todas criadas com `new`, seja ele`function Foo()`, ou`let a = { b: 1 }` .
205
205
206
-
It is recommended to create objects using the literal notation (whether it's for performance or readability), since a look-up is needed for `Object`through the scope chain when creating an object using`new Object()`, but you don't have this kind of problem when using literals.
206
+
É recomendado criar os objetos usando notação literal (seja por questões de performance ou legibilidade), uma vez que é necessário um look-up para `Object`atravessar o escopo encadeado quando criando um objeto usando`new Object()`, mas você não precisa ter esse tipo de probelma quando usando literais.
207
207
208
208
```js
209
209
functionFoo() {}
210
-
//Function is a syntactic sugar
211
-
//Internally equivalent to new Function()
210
+
//Função são sintáticamente amigáveis
211
+
//Internamente é equivalente a new Function()
212
212
let a = { b:1 }
213
-
//Inside this literal, `new Object()` is also used
213
+
//Dentro desse lireal, `new Object()` também é usado
214
214
```
215
215
216
-
For`new`, we also need pay attention to the operator precedence:
216
+
Para`new`, também precisamos prestar atenção ao operador precedente:
217
217
218
218
```js
219
219
functionFoo() {
@@ -232,20 +232,19 @@ new Foo().getName(); // -> 2
As you can see from the above image, `new Foo()` has a higher priority than `new Foo`, so we can divide the execution order of the above code like this:
236
-
235
+
Como você pode ver na imagem acima, `new Foo()` possui uma alta prioridade sobre `new Foo`, então podemos dividir a ordem de execução do código acima assim:
237
236
238
237
```js
239
238
new (Foo.getName());
240
239
(newFoo()).getName();
241
240
```
242
241
243
-
For the first function, `Foo.getName()`is executed first, so the result is 1;
244
-
As for the latter, it first executes`new Foo()`to create an instance, then finds the `getName`function on `Foo` via the prototype chain, so the result is 2.
242
+
Para a primeira função, `Foo.getName()`é executado primeiro, então o resultado é 1;
243
+
Para mais tarte, ele primeiro executa`new Foo()`para criar uma instância, então encontrar a função `getName`no `Foo` via cadeia de prototype, então o resultado é 2.
245
244
246
245
# This
247
246
248
-
`This`, a concept that is confusing to many people, is actually not difficult to understand as long as you remember the following rules:
247
+
`This`, um conceito que é confuso para maioria das pessoas, atualmente não é difícil de entender enquanto você lembrar as seguintes regras:
249
248
250
249
```js
251
250
functionfoo() {
@@ -260,21 +259,21 @@ var obj = {
260
259
};
261
260
obj.foo();
262
261
263
-
//In the above two situations, `this` only depends on the object before calling the function,
264
-
//and the second case has higher priority than the first case .
262
+
//Nas duas situações acima, `this` depende apenas do objeto ser chamado antes da função,
263
+
//e o segundo caso tem uma alta prioriade sobre o primeiro caso.
265
264
266
-
//the following scenario has the highest priority，`this` will only be bound to c，
267
-
//and there's no way to change what `this` is bound to .
265
+
//o seguinte cenário tem uma alta prioridade, `this` só ficará ligado para c,
266
+
//e não existe uma maneira de mudar o que `this` está limitado
268
267
269
268
var c =newfoo();
270
269
c.a=3;
271
270
console.log(c.a);
272
271
273
-
//finally, using `call`, `apply`, `bind` to change what `this` is bound to,
274
-
//is another scenario where its priority is only second to `new`
272
+
//finalmente, usando `call`, `apply`, `bind` para mudar o que o `this` é obrigado,
273
+
//em outro cenário onde essa prioridade é apenas o segundo `new`
275
274
```
276
275
277
-
Understanding the above several situations, we won’t be confused by `this`under most circumstances. Next, let’s take a look at`this`in arrow functions:
276
+
Entendendo sobre as várias situações acima, nós não vamos ser confundidos pelo `this`na maioria dos casos. Depois, vamos dar uma olhada no`this`nas arrow functions:
278
277
279
278
```js
280
279
functiona() {
@@ -286,21 +285,21 @@ function a() {
286
285
}
287
286
console.log(a()()());
288
287
```
289
-
Actually, the arrow function does not have`this`, `this`in the above function only depends on the first outer function that is not an arrow function. For this case, `this`is default to `window`because calling`a`matches the first condition in the above codes. Also, what `this`is bound to will not be changed by any codes once `this`is bound to the context.
288
+
Atualmente, as arrow function não tem o`this`, `this`na função acima apenas depende da primeira função externa que não é uma arrow function. Nesse caso, `this`é o padrão para `window`porque chamando`a`iguala a primeira condição nos códigos acima. Também, o que o `this`está ligado não ira ser mudado por qualquer código uma vez que o `this`estiver ligado em um contexto.
290
289
291
290
292
291
# Instanceof
293
292
294
-
The `instanceof`operator can correctly check the type of objects, because its internal mechanism is to find out if `prototype`of this type can be found in the prototype chain of the object.
293
+
O operador `instanceof`consegue checar corretamente o tipo dos objetos, porque o seu mecanismo interno encontra se o tipo do `prototype`pode ser encontrado na cadeia de prototype do objeto.
295
294
296
-
let’s try to implement it:
295
+
vamos tentar implementar ele:
297
296
```js
298
297
functioninstanceof(left, right) {
299
-
//get the `prototype` of the type
298
+
//obtenha o type do `prototype`
300
299
let prototype =right.prototype
301
-
//get the `prototype` of the object
300
+
//obtenha o `prototype` do objeto
302
301
left =left.__proto__
303
-
//check if the type of the object is equal to the prototype of the type
302
+
//verifique se o tipo do objeto é igual ao prototype do tipo
304
303
while (true) {
305
304
if (left ===null)
306
305
returnfalse
@@ -313,14 +312,14 @@ function instanceof(left, right) {
313
312
314
313
# Scope
315
314
316
-
Executing JS code would generate execution context, as long as code is not written in a function, it belongs to the global execution context. Code in a function will generate function execution context. There’s also an `eval` execution context, which basically is not used anymore, so you can think of only two execution contexts.
315
+
Executar código JS deveria gerar execução do contexto, enquanto o código não é escrito na função, ele faz parte da execução do contexto global. O código na função vai gerar executação do contexto da função. Existe também uma execução do contexto do `eval`, do qual basicamente não é mais usado, então você pode pensar apenas em duas execuções de contexto.
317
316
318
-
The `[[Scope]]`attribute is generated in the first stage of generating execution context, which is a pointer, corresponds to the linked list of the scope, and JS will look up variables through this linked list up to the global context.
317
+
O atributo `[[Scope]]`é gerado no primeiro estágio de geração de contexto, que é um ponteiro, corresponde a linked list do escopo, e o JS vai procurar variáveis através dessas linked list no contexto global.
319
318
320
-
Let's look at a common example , `var`:
319
+
Vamos olhar um exemplo common, `var`:
321
320
322
321
```js
323
-
b() //call b
322
+
b() //chama b
324
323
console.log(a) // undefined
325
324
326
325
var a ='Hello world'
@@ -330,29 +329,30 @@ function b() {
330
329
}
331
330
```
332
331
333
-
It’s known that function and variable hoisting is the real reason for the above outputs. The usual explanation for hoisting says that the declarations are ‘moved’ to the top of the code, and there is nothing wrong with that and it’s easy for everyone to understand. But a more accurate explanation should be something like this:
332
+
Ele sabe que funcões e variáveis são içadas acima em relação aos outputs. A explicação usual para o hoisting diz que as declarações são ‘movidas’ para o topo do código, e não existe nada de errado com isso e é fácil de todo mundo entender. Mas para um explicação mais precisa deveria ser algo como:
334
333
335
-
There would be two stages when the execution context is generated. The first stage is the stage of creation(to be specific, the step of generating variable objects), in which the JS interpreter would find out variables and functions that need to be hoisted, and allocate memory for them in advance, then functions would be stored into memory entirely, but variables would only be declared and assigned to `undefined`, therefore, we can use them in advance in the second stage (the code execution stage).
334
+
Haveria dois estágios quando a execução do contexto é gerada. O primeiro estágio é o estágio de criação(para ser mais epecífico, o passo de geração variáveis objeto), no qual o interpretador de JS deveria encontrar variáveis e funções que precisam ser içadas, e aloca memória para eles atecipadamente, então as funções deveriam ser guardadas na memória internamente, mas variáveis seriam apenas declaradas e assinadas para `undefined`, assim sendo, nós podemos usar elas adiante no segundo estágio (a execução do código no estágio)
336
335
337
-
In the process of hoisting, the same function would overwrite the last function, and functions have higher priority than variables hoisting.
336
+
No processo de içar, a mesma função deveria sobrescrever a última função, e funções tem alta prioridade sobre variáveis içadas.
338
337
339
338
```js
340
-
b() //call b second
339
+
b() //chama segundo b
341
340
342
341
functionb() {
343
-
console.log('call b fist')
342
+
console.log('chama b primeiro')
344
343
}
345
344
functionb() {
346
-
console.log('call b second')
345
+
console.log('chama b segundo')
347
346
}
348
347
var b ='Hello world'
349
348
```
350
349
351
-
Using `var` is more likely error-prone, thus ES6 introduces a new keyword `let`. `let` has an important feature that it can’t be used before declared, which conflicts the common saying that `let` doesn’t have the ability of hoisting. In fact, `let` hoists declaration, but is not assigned, because the **temporal dead zone**.
350
+
Usando `var` é mais provável error-prone, portanto ES6 introduziu uma nova palava-chave `let`. `let` tem uma característica importante que ela não pode ser usada antes de declarada, que conflita com o ditado comum que `let` não tem a habilidade de içar. De fato, `let` iça a declaracão, mas não é assinada, por causa da **temporal dead zone**.
351
+
352
352
353
353
# Closure
354
354
355
-
The definition of closure is simple: function A returns a function B, and function B can access variables of function A, thus function B is called a closure.
355
+
A definição de closure é simples: a função A retorna a função B, e a função b consegue acessar as variáveis da função A, portanto a função B é chamada de closure.
356
356
357
357
```js
358
358
functionA() {
@@ -364,9 +364,9 @@ function A() {
364
364
}
365
365
```
366
366
367
-
Are you wondering why function B can also refer to variables in function A while function A has been popped up from the call stack? Because variables in function A are stored on the heap at this time. The current JS engine can identify which variables need to be stored on the heap and which need to be stored on the stack by escape analysis.
367
+
Se você estiver se perguntando por que a função B também consegue se referenciar as variáveis da função A enquanto a função A aparece a partir da stack de chamadas? Porque as variáveis na função A são guardadas na pilha nesse momento. O motor atual do JS consegue indentificar quais variáveis precisam ser salvas na heap e quais precisam ser salvas na stack por análise de fuga.
368
368
369
-
A classic interview question is using closures in loops to solve the problem of using`var`to define functions:
369
+
Uma pergunta classica de entrevista é usando closure em loops para resolver o problema de usar`var`para definir funções:
370
370
371
371
```js
372
372
for ( var i=1; i<=5; i++) {
@@ -376,9 +376,9 @@ for ( var i=1; i<=5; i++) {
376
376
)
377
377
```
378
378
379
-
First of all, all loops will be executed completely because`setTimeout`is an asynchronous function, and at that time `i`is 6, so it will print a bunch of 6.
379
+
Em primeirio lugar, todos os loops vão ser executados completamente porque`setTimeout`é uma função assíncrona, e nesse momento `i`é 6, então isso vai exibir um bando de 6.
380
380
381
-
There are three solutions，closure is the first one:
381
+
Existe três soluções, closure é a primeira:
382
382
383
383
```js
384
384
for (var i =1; i <=5; i++) {
@@ -390,7 +390,7 @@ for (var i = 1; i <= 5; i++) {
390
390
}
391
391
```
392
392
393
-
The second one is to make use of the third parameter of`setTimeout`:
393
+
A segunda é fazer o uso do terceiro parâmetro do`setTimeout`:
394
394
395
395
```js
396
396
for ( var i=1; i<=5; i++) {
@@ -400,7 +400,7 @@ for ( var i=1; i<=5; i++) {
400
400
}
401
401
```
402
402
403
-
The third is to define`i`using`let`:
403
+
A terceira é definir o`i`usando`let`:
404
404
405
405
```js
406
406
for ( let i=1; i<=5; i++) {
@@ -410,11 +410,11 @@ for ( let i=1; i<=5; i++) {
410
410
}
411
411
```
412
412
413
-
For`let`, it will create a block-level scope, which is equivalent to:
413
+
Para`let`, ele vai criar um escopo de block-level, do qual é equivalente a:
414
414
415
415
```js
416
416
{
417
-
//Form block-level scope
417
+
//Forma o escopo block-level
418
418
let i =0
419
419
{
420
420
let ii = i
@@ -438,16 +438,15 @@ For `let`, it will create a block-level scope, which is equivalent to:
Each function, besides `Function.prototype.bind()`, has an internal property, denoted as `prototype`, which is a reference to the prototype.
442
-
443
-
Each object has an internal property, denoted as `__proto__`, which is a reference to the prototype of the constructor that creates the object. This property actually refers to `[[prototype]]`, but `[[prototype]]` is an internal property that we can’t access, so we use `__proto__` to access it.
441
+
Cada função, além de `Function.prototype.bind()`, tem uma propriedade interna, denotado como `prototype`, do qual é uma referência para o prototype.
444
442
445
-
Objects can use `__proto__` to look up properties that do not belong to the object, and `__proto__` connects objects together to form a prototype chain.
443
+
Cada objeto tem uma propriedade interna, denotada como `__proto__`, que é uma referência para o prototype do construtor que criou o objeto. Essa propriedade é atualmente referenciada ao `[[prototype]]`, mas o `[[prototype]]` é uma propriedade interna que nós não podemos acessar, então usamos o `__proto__` para acessar ele.
446
444
445
+
Objetos podem usar `__proto__` para procurar propriedade que não fazem parte do objeto, e `__proto__` conecta os objetos juntos para formar uma cadeida de prototype.
447
446
448
-
# Inheritance
447
+
# Herança
449
448
450
-
In ES5, we can solve the problems of inheritance by using the following ways:
449
+
No ES5, podemos resolve os problema de herança usando os seguintes passos:
Because there are restrictions on the low-level of JS, if the instance isn’t constructed by `Date`, it can’t call functions in `Date`, which also explains from another aspect that `Class`inheritance in ES6 is different from the general inheritance in ES5 syntax.
489
+
Porque existem restrições no baixo nível do JS, se a instância não for construida pelo `Date`, ele não pode chamar funções no `Date`, que também explica a partir de outro aspecto que herança de `Class`no ES6 é diferente das heranças gerais na sintaxe do ES5.
491
490
492
-
Since the low-level of JS limits that the instance must be constructed by `Date` , we can try another way to implement inheritance:
491
+
Uma vez o baixo nível dos limites do JS que a instância deve ser construido pelo `Date`, nós podemos tentar outra maneira de implementar herança:
The implementation idea of the above inheritance: first create the instance of parent class => change the original `__proto__`of the instance, connect it to the `prototype`of child class => change the`__proto__`of child class’s `prototype` to the `prototype`of parent class.
505
+
A implementação da idéia acima sobre herança: primeiro cria uma instância da classe do pai => muda o original `__proto__`de instância, conectado ao `prototype`da classe do filho => muda o`__proto__`da classe do filho `prototype`para o `prototype`da classe do pai.
507
506
508
-
The inheritance implement with the above method can perfectly solve the restriction on low-level of JS.
507
+
A herança de implementação com o método acima pode perfeitamente resolver a restrição no baixo nível do JS.
509
508
510
509
511
-
# Deep and Shallow Copy
510
+
# Cópia rasa e profunda
512
511
513
512
```js
514
513
let a = {
@@ -519,13 +518,13 @@ a.age = 2
519
518
console.log(b.age) // 2
520
519
```
521
520
522
-
From the above example, we can see that if you assign an object to a variable, then the values of both will be the same reference, one changes, the other changes accordingly.
521
+
A partir do exemplo acima, nós podemos ver que se você assinar um objeto para uma variável, então os valores dos dois vão ter a mesma referência, um muda o outro muda adequadamente.
523
522
524
-
Usually, we don't want such problem to appear during development, thus we can use shallow copy to solve this problem.
523
+
Geralmente, nós não queremos que tal problema apareça durante o desensolvimento, portanto podemos usar a cópia rasa para resolver esse problema.
525
524
526
-
## Shallow copy
525
+
## Cópia rasa
527
526
528
-
Firstly we can solve the problem by`Object.assign`:
527
+
Primeiramente podemos resolver o problema através do`Object.assign`:
529
528
```js
530
529
let a = {
531
530
age:1
@@ -535,7 +534,7 @@ a.age = 2
535
534
console.log(b.age) // 1
536
535
```
537
536
538
-
Certainly, we can use the spread operator (...) to solve the problem:
537
+
Certamente, podemos usar o spread operator (...) para resolver o problema:
539
538
```js
540
539
let a = {
541
540
age:1
@@ -545,7 +544,7 @@ a.age = 2
545
544
console.log(b.age) // 1
546
545
```
547
546
548
-
Usually, shallow copy can solve most problems, but we need deep copy when encountering the following situation:
547
+
Geralmente, a cópia rasa pode resolver a maioria dos problemas, mas precisamos da cópia profunda quando encontrado a seguinte situação:
549
548
```js
550
549
let a = {
551
550
age:1,
@@ -557,11 +556,11 @@ let b = {...a}
557
556
a.jobs.first='native'
558
557
console.log(b.jobs.first) // native
559
558
```
560
-
The shallow copy only solves the problem of the first layer. If the object contains objects, then it returns to the beginning topic that both values share the same reference. To solve this problem, we need to introduce deep copy.
559
+
A cópia rasa resolve apenas o problema na primeira camada. Se o objeto contém objetos, então ele retorna para o topico inicial que os dois valores compartilham a mesma referência. Para resolver esse problema, precisamos introduzir a cópia profunda.
561
560
562
-
## Deep copy
561
+
## Cópia profunda
563
562
564
-
The problem can usually be solved by `JSON.parse(JSON.stringify(object))`
563
+
O problema pode geralmente ser resolvido por`JSON.parse(JSON.stringify(object))`
565
564
566
565
```js
567
566
let a = {
@@ -575,11 +574,10 @@ a.jobs.first = 'native'
575
574
console.log(b.jobs.first) // FE
576
575
```
577
576
578
-
But this method also has its limits:
579
-
* ignore `undefined`
580
-
* ignore `symbol`
581
-
* unable to serialize function
582
-
* unable to resolve circular references in an object
577
+
Mas esse método também tem seus limites:
578
+
* ignora `undefined`
579
+
* incapaz de serializar função
580
+
* incapaz de resolver referência circular de um objeto
583
581
```js
584
582
let obj = {
585
583
a:1,
@@ -597,11 +595,11 @@ let newObj = JSON.parse(JSON.stringify(obj))
597
595
console.log(newObj)
598
596
```
599
597
600
-
If an object is circularly referenced like the above example, you’ll find the method `JSON.parse(JSON.stringify(object))` can’t make a deep copy of this object:
598
+
Se um objto é uma referência circular como o exemplo acima, você vai encontrar o método `JSON.parse(JSON.stringify(object))`ele não pode fazer a cópia profunda desse objeto:
When dealing with function, `undefined` or `symbol`, the object can also not be serialized properly.
602
+
Quando lidando com uma função ou `undefined`, o objeto pode não ser serializado adequedamente.
605
603
```js
606
604
let a = {
607
605
age:undefined,
@@ -613,11 +611,11 @@ let b = JSON.parse(JSON.stringify(a))
613
611
console.log(b) // {name: "yck"}
614
612
```
615
613
616
-
In above case, you can see that the method ignores function and`undefined`.
614
+
No caso acima, você pode perceber que o método ignora a função e`undefined`.
617
615
618
-
Most often complex data can be serialized, so this method can solve most problems, and as a built-in function, it has the fastest performance when dealing with deep copy. Certainly, you can use [the deep copy function of `lodash` ](https://lodash.com/docs#cloneDeep) when your data contains the above three cases.
616
+
A maioria dos dados conseguem ser serializados, então esse método resolve a maioria dos problemas, e como uma função embutida, ele tem uma performance melhor quando lidando com a cópia profunda. Certamente, você pode usar [the deep copy function of `lodash` ](https://lodash.com/docs#cloneDeep) quando sues dados contém os três casos acima.
619
617
620
-
If the object you want to copy contains a built-in type but doesn’t contain a function, you can use`MessageChannel`
618
+
Se o objeto que você quer copiar contém um tipo embutido mas não contém uma função, você pode usar`MessageChannel`
621
619
```js
622
620
functionstructuralClone(obj) {
623
621
returnnewPromise(resolve=> {
@@ -630,22 +628,23 @@ function structuralClone(obj) {
630
628
var obj = {a:1, b: {
631
629
c: b
632
630
}}
633
-
// pay attention that this method is asynchronous
634
-
// it can handle `undefined` and circular reference object
631
+
632
+
// preste atenção que esse método é assíncrono
633
+
// ele consegue manipular `undefined` e referência circular do objeto
635
634
(async () => {
636
635
constclone=awaitstructuralClone(obj)
637
636
})()
638
637
```
639
638
640
-
# Modularization
639
+
# Modularização
641
640
642
-
With Babel, we can directly use ES6's modularization:
641
+
Com o Babel, nós conseguimos usar a ES6 modularização:
643
642
644
643
```js
645
-
//file a.js
644
+
//arquivo a.js
646
645
exportfunctiona() {}
647
646
exportfunctionb() {}
648
-
//file b.js
647
+
//arquivo b.js
649
648
exportdefaultfunction() {}
650
649
651
650
import {a, b} from'./a.js'
@@ -654,36 +653,36 @@ import XXX from './b.js'
654
653
655
654
## CommonJS
656
655
657
-
`CommonJS`is Node's unique feature. `Browserify`is needed for `CommonJS`to be used in browsers.
656
+
`CommonJS`é uma aspecto único do Node. É preciso `Browserify`para o `CommonJS`ser usado nos navegadores.
658
657
659
658
```js
660
659
// a.js
661
660
module.exports= {
662
661
a:1
663
662
}
664
-
//or
663
+
//ou
665
664
exports.a=1
666
665
667
666
// b.js
668
667
varmodule=require('./a.js')
669
668
module.a// -> log 1
670
669
```
671
670
672
-
In the code above, `module.exports`and`exports`can cause confusions. Let us take a peek at the internal implementations:
671
+
No código acima, `module.exports`e`exports`podem causar confusão. Vamos dar uma olhada na implementação interna:
673
672
674
673
```js
675
674
varmodule=require('./a.js')
676
675
module.a
677
-
//this is actually a wrapper of a function to be executed immediately so that we don't mess up the global variables.
678
-
//what's important here is that module is a Node only variable.
676
+
//esse é o empacotador atual de uma função a ser executada imediatamente, de modo que não precisamos bagunçar as variáveis globais.
677
+
//O que é importante aqui é que o módulo é apenas uma variável do Node.
679
678
module.exports= {
680
679
a:1
681
680
}
682
-
//basic implementation
681
+
//implementação básica
683
682
varmodule= {
684
-
exports: {} //exports is an empty object
683
+
exports: {} //exporta em um objeto vázio
685
684
}
686
-
//This is why exports and module.exports have similar usage.
685
+
//Esse é o por que o exports e module.exports tem usos similares.
687
686
varexports=module.exports
688
687
varload=function (module) {
689
688
// to be exported
@@ -693,18 +692,19 @@ var load = function (module) {
693
692
};
694
693
```
695
694
696
-
Let's then talk about`module.exports`and`exports`, which have similar usage, but one cannot assign a value to`exports`directly. The assignment would be a no-op.
695
+
Vamos então falar sobre`module.exports`e`exports`, que tem uso similar, mas um não atribui um valor para`exports`diretamente. A tarefa seria um no-op.
697
696
698
-
The differences between the modularizations in`CommonJS`and in ES6 are:
697
+
A diferença entre as modularizações no`CommonJS`a no ES6 são:
699
698
700
-
- The former supports dynamic imports, which is `require(${path}/xx.js)`; the latter doesn't support it yet, but there have been proposals.
701
-
- The former uses synchronous imports. Since it is used on the server end and files are local, it doesn't matter much even if the synchronous imports block the main thread. The latter uses asynchronous imports, because it is used in browsers in which file downloads are needed. Rendering process would be affected much if asynchronous import was used.
702
-
- The former copies the values when exporting. Even if the values exported change, the values imported will not change. Therefore, if values shall be updated, another import needs to happen. However, the latter uses realtime bindings, the values imported and exported point to the same memory addresses, so the imported values change along with the exported ones.
703
-
- In execution the latter is compiled to `require/exports`.
699
+
- O antigo suporta importes dinamico, que é `require(${path}/xx.js)`; o último não suporta isso ainda, mas
700
+
existem propostas.
701
+
- O antigo usa importes síncronos. Desde de que usado no servidor os arquivos são locais, não importa muito mesmo se o import síncrono bloqueia a main thread. O último usa importe assíncrono, porque ele é usado no navegador em que os arquivos baixados são precisos. O processo de renderização seria afetado muito se assíncrono importe for usado.
702
+
- O anterior copia os valores quando exportando. Mesmo se o valor exportado mudou, os valores importados não irão mudar. Portanto, se os valores devem ser atualizados, outro importe precisa acontecer. Contudo, o último usa ligações em tempo real, os valores importados são importados no mesmo endereço de memória, então o valor importado muda junto com os importados.
703
+
- Em execução o último é compilado para `require/exports`.
Consideramos implementar eles a partir das seguintes regras:
745
747
746
-
We can consider how to implement them from the following rules:
748
+
* Se o primeiro parâmetro não foi passado, então o primeiro será o padrão `window`;
747
749
748
-
* If the first parameter isn’t passed, then the first parameter will default to `window`;
749
-
* Change what `this` refers to, which makes new object capable of executing the function. Then let’s think like this: add a function to a new object and then delete it after the execution.
750
+
* Mude a referência do `this`, que faz um novo objeto capaz de executar a função. Então vamos pensar assim: adicione a função para um novo objeto e então delete ele depois da execução.
The above is the main idea of simulating `call`, and the implementation of `apply`is similar.
768
+
O exemplo acima é a idéia central da simulação do `call`, e a implementação do `apply`é similar.
768
769
769
770
```js
770
771
Function.prototype.myApply=function (context) {
771
772
var context = context ||window
772
773
context.fn=this
773
774
774
775
var result
775
-
//There's a need to determine whether to store the second parameter
776
-
//If the second parameter exists, spread it
776
+
//Existe a necessidade de determinar se guarda o segundo parâmentro
777
+
//Se o segundo parâmetro existir, espalhe ele
777
778
if (arguments[1]) {
778
779
result =context.fn(...arguments[1])
779
780
} else {
@@ -785,9 +786,9 @@ Function.prototype.myApply = function (context) {
785
786
}
786
787
```
787
788
788
-
The role of`bind`is the same as the other two, except that it returns a function. And we can implement currying with`bind`
789
+
A regra do`bind`é a mesma das outras duas, exceto que ela retorna uma função. E nós podemos implementar currying com o`bind`
789
790
790
-
let’s simulate`bind`:
791
+
vamos simular o`bind`:
791
792
792
793
```js
793
794
Function.prototype.myBind=function (context) {
@@ -796,9 +797,9 @@ Function.prototype.myBind = function (context) {
796
797
}
797
798
var _this =this
798
799
var args = [...arguments].slice(1)
799
-
//return a function
800
+
//retorna uma função
800
801
returnfunctionF() {
801
-
//we can use `new F()` because it returns a function, so we need to determine
802
+
//Nós podemos usar `new F()` porque ele retorna uma função, então precisamos determinar
802
803
if (thisinstanceofF) {
803
804
returnnew_this(...args, ...arguments)
804
805
}
@@ -807,36 +808,36 @@ Function.prototype.myBind = function (context) {
807
808
}
808
809
```
809
810
810
-
# Promise implementation
811
+
# Implementação de Promise
811
812
812
-
`Promise`is a new syntax introduced by ES6, which resolves the problem of callback hell.
813
+
`Promise`é a nova sintaxe introduzida pelo ES6, que resolve os problemas de callback hell.
813
814
814
-
Promise can be seen as a state machine and it's initial state is `pending`. We can change the state to`resolved`or`rejected`by using the`resolve`and`reject` functions. Once the state is changed, it cannot be changed again.
815
+
Promise pode ser visto como um estado de máquina e o seu estado inicial é `pending`. Nós podemos mudar o estado para`resolved`ou`rejected`usando as funções`resolve`e`reject`. Uma vez que o state mudou, ele não pode mudar novamente.
815
816
816
-
The function`then`returns a Promise instance, which is a new instance instead of the previous one. And that's because the Promise specification states that in addition to the `pending` state, other states cannot be changed, and multiple calls of function`then` will be meaningless if the same instance is returned.
817
+
A função`then`retorna uma instância da Promise, do qual é uma nova instância ao invés do anterior. E existe por que a especificação de estado da Promise que adiciona para o estado `pending`, outro estado não pode ser mudado, e multiplas chamadas a função`then`serão insignificantes se a mesma instância for retornada.
817
818
818
-
For`then`, it can essentially be seen as `flatMap`:
819
+
Para`then`, ele pode essencialmente ser visto como flatMap`:
819
820
820
821
```js
821
-
//three states
822
+
// árvore de estados
822
823
const PENDING = 'pending';
823
824
const RESOLVED = 'resolved';
824
825
const REJECTED = 'rejected';
825
-
// promise accepts a function argument that will execute immediately.
826
+
// promise aceita um argumento na função que será executada imediatamente.
826
827
function MyPromise(fn) {
827
828
let _this = this;
828
829
_this.currentState = PENDING;
829
830
_this.value = undefined;
830
-
//To save the callback of `then`，only cached when the state of the promise is pending,
831
-
// at most one will be cached in every instance
831
+
// Save o callback do`then`, apenas em cache quando o estado da promise for pending,
832
+
// no máximo será cacheado em cada instância
832
833
_this.resolvedCallbacks = [];
833
834
_this.rejectedCallbacks = [];
834
835
835
836
_this.resolve = function(value) {
836
-
// execute asynchronously to guarantee the execution order
837
+
// execute assícronamente para garantir a ordem de execução
837
838
setTimeout(() => {
838
839
if (value instanceof MyPromise) {
839
-
//if value is a Promise, execute recursively
840
+
// se o valor é uma Promise, execute recursivamente
840
841
return value.then(_this.resolve, _this.reject)
841
842
}
842
843
if (_this.currentState === PENDING) {
@@ -848,7 +849,7 @@ function MyPromise(fn) {
848
849
}
849
850
850
851
_this.reject = function(reason) {
851
-
// execute asynchronously to guarantee the execution order
852
+
// execute assícronamente para garantir a ordem de execução
As we can tell from the above code, a function with a `*` would have the `next` function execution. In other words, the execution of the function returns an object. Every call to the `next` function can resume executing the paused code. A simple implementation of the Generator function is shown below:
1022
-
1022
+
Como podemos dizer no código acima, a função com um `*` teria a execução da função `next`. Em outras palavras, a execução de função retorna um objeto. Toda chamada a função `next` pode continuar a execução do código pausado. Um simples implementação da função Generator é mostrada abaixo:
1023
1023
```js
1024
-
// cb is the compiled 'test' function
1024
+
// cb é a função 'test' compilada
1025
1025
functiongenerator(cb) {
1026
1026
return (function() {
1027
1027
var object = {
@@ -1041,23 +1041,23 @@ function generator(cb) {
1041
1041
};
1042
1042
})();
1043
1043
}
1044
-
//After babel's compilation, 'test' function turns into this:
1044
+
//Depois da compilação do babel's, a função 'test' retorna dentro dessa:
1045
1045
functiontest() {
1046
1046
var a;
1047
1047
returngenerator(function(_context) {
1048
1048
while (1) {
1049
1049
switch ((_context.prev=_context.next)) {
1050
-
// yield splits the code into several blocks
1051
-
//every 'next' call executes one block of clode
1052
-
//and indicates the next block to execute
1050
+
// yield separa o código em diversos blocos
1051
+
//cada chamada 'next' executa um bloco de código
1052
+
//e indica o próximo bloco a ser executado
1053
1053
case0:
1054
1054
a =1+2;
1055
1055
_context.next=4;
1056
1056
return2;
1057
1057
case4:
1058
1058
_context.next=6;
1059
1059
return3;
1060
-
//execution complete
1060
+
//execução completa
1061
1061
case6:
1062
1062
case"end":
1063
1063
return_context.stop();
@@ -1069,30 +1069,30 @@ function test() {
1069
1069
1070
1070
# Debouncing
1071
1071
1072
-
Have you ever encountered this problem in your development: how to do a complex computation in a scrolling event or to prevent the "second accidental click" on a button?
1072
+
Tendo você encontrado esse problema e seu dia-a-dia no desenvolvimento: como fazer uma computação complexa em um evento de scroll ou prevenir o "segundo clique acidental" no butão?
1073
1073
1074
-
These requirements can be achieved with function debouncing. Especially for the first one, if complex computations are carried out in frequent event callbacks, there's a large chance that the page becomes laggy. It's better to combine multiple computations into a single one, and only operate at particular time. Since there are many libraries that implement debouncing, we won't build our own here and will just take underscore's source code to explain debouncing:
1074
+
Esses requisitos podem ser alcançados com funcões debouncing. Especialmente para o primeiro, se uma computação complexa estiver sendo chamado em frequentes eventos de callbacks, existe uma grande chance que a página se torne lenta. É melhor combinar essas multiplas computações e uma, e apenas operar em determinado periodo de tempo. Desde que existe muitas bibliotecas que implementam debouncing, nós não construimos nosso próprio aqui e vamos pegar o código do underscore para explicar o debouncing:
1075
1075
1076
1076
```js
1077
1077
/**
1078
-
* underscore's debouncing function. When the callback function is called in series, func will only execute when the idel time is larger or equal to `wait`.
1078
+
* função underscore debouncing. Quando a função callback é chamada em série, a funcão vai executar apenas quando o tempo ideal é maior ou igual ao `wait`.
1079
1079
*
1080
-
* @param{function}funccallback function
1081
-
* @param{number}waitlength of waiting intervals
1082
-
* @param{boolean}immediatewhen set to true, func is executed immediately
1083
-
* @return{function}returns the function to be called by the client
1080
+
* @param{function}funcfunção callback
1081
+
* @param{number}waittamanho do intervalo de espera
1082
+
* @param{boolean}immediatequando definido para true, func é executada imadiatamente
1083
+
* @return{function}retorna a função a ser chamada pelo cliente
1084
1084
*/
1085
1085
_.debounce=function(func, wait, immediate) {
1086
1086
var timeout, args, context, timestamp, result;
1087
1087
1088
1088
varlater=function() {
1089
-
//compare now to the last timestamp
1089
+
//compara now para o último timestamp
1090
1090
var last =_.now() - timestamp;
1091
-
//if the current time interval is smaller than the set interval and larger than 0, then reset the timer.
1091
+
//se o tempo de intervalo atual é menor então o set interval é maior que 0, então reinicie o timer.
1092
1092
if (last < wait && last >=0) {
1093
1093
timeout =setTimeout(later, wait - last);
1094
1094
} else {
1095
-
//otherwise it's time to execute the callback function
The complete function implementation is not too difficult. Let's summarize here.
1124
+
A implementação completa da ƒunção não é tão difícil.
1125
1125
1126
-
- For the implementation of protecting against accidental clicks: as long as I start a timer and the timer is there, no matter how you click the button, the callback function won't be executed. Whenever the timer ends and is set to`null`, another click is allowed.
1127
-
- For the implementation of a delayed function execution: every call to the debouncing function will trigger an evaluation of time interval between the current call and the last one. If the interval is less than the required, another timer will be created, and the delay is set to the set interval minus the previous elapsed time. When the time's up, the corresponding callback function is executed.
1126
+
- Para a implementação de proteger contra clicks acidentais: enquanto eu começar o time e o time existir, não importa quantas vezes eu clicar o butão, a função de callback não será executada. Contudo quando o time termina, é setado para`null`, outro click é permitido.
1127
+
- Para a implementação da executação da função de atraso: toda chamada para a função debouncing vai disparar um tempo de intervalo equivalente entre a chamada tual e a última chamada. Se o intervalo é menor que o requerido, outro time será cirado, e o atraso é atribuido ao set interval menos o tempo anterior. Quando o tempo passa, a função de callback é executada.
1128
1128
1129
1129
# Throttle
1130
1130
1131
-
`Debounce`and`Throttle`are different in nature. `Debounce`is to turn multiple executions into one last execution, and`Throttle`is to turn multiple executions into executions at regular intervals.
1131
+
`Debounce`e`Throttle`possuem naturezas diferentes. `Debounce`é para tornar multiplas execuções na última execução, e`Throttle`é para tornar multiplas execuções em uma execução de intervalos regulares.
1132
1132
1133
1133
```js
1134
-
//The first two parameters with debounce are the same function
1135
-
// options: You can pass two properties
1136
-
// trailing: Last time does not execute
1137
-
// leading: First time does not execute
1138
-
//The two properties cannot coexist, otherwise the function cannot be executed
1134
+
//Os dois primeiro parâmetros com debounce são a mesma função
1135
+
// options: você pode passar duas propriedades
1136
+
// trailing: o último tempo não é executado
1137
+
// leading: o primeiro tempo não é executado
1138
+
//As duas propriedades não coexistem, contudo a função não será executada
1139
1139
_.throttle=function(func, wait, options) {
1140
1140
var context, args, result;
1141
1141
var timeout =null;
1142
-
//Previous timestamp
1142
+
// timestamp anterior
1143
1143
var previous =0;
1144
-
//Set empty if options is not passed
1144
+
//Defina vázio se as opções não forem passadas
1145
1145
if (!options) options = {};
1146
-
// Timer callback function
1146
+
//Função Timer callback
1147
1147
varlater=function() {
1148
-
//If you set `leading`, then set `previous` to zero
1149
-
//The first `if` statement of the following function is used
1148
+
//se você definiu `leading`, então defina `previous` para zero
1149
+
//O primeiro if da seguinte função é usada
1150
1150
previous =options.leading===false?0:_.now();
1151
-
//The first is prevented memory leaks and the second is judged the following timers when setting `timeout` to null
1151
+
//O primeiro é prevenindo memory leaks e o segundo é julgado os seguintes timers quando configurado `timeout` para null
1152
1152
timeout =null;
1153
1153
result =func.apply(context, args);
1154
1154
if (!timeout) context = args =null;
1155
1155
};
1156
1156
returnfunction() {
1157
-
//Get current timestamp
1157
+
//Obtenha o timestamp atual
1158
1158
var now =_.now();
1159
-
//It must be true when it entering firstly
1160
-
//If you do not need to execute the function firstly
1161
-
//Set the last timestamp to current
1162
-
//Then it will be greater than 0 when the remaining time is calculated next
1159
+
//Deve ser verdado quando entrar pela primeira vez
1160
+
//Se você não precisa executar essa função na primeira vez
1161
+
//Defina o último timestamp para o atual
1162
+
//Então ele será maior que 0 quando o termo remanecente for calculado da próxima vez
1163
1163
if (!previous &&options.leading===false)
1164
1164
previous = now;
1165
1165
var remaining = wait - (now - previous);
1166
1166
context =this;
1167
1167
args =arguments;
1168
-
//This condition will only be entered if it set `trailing`
1169
-
//This condition will be entered firstly if it not set `leading`
1170
-
//Another point, you may think that this condition will not be entered if you turn on the timer
1171
-
//In fact, it will still enter because the timer delay is not accurate
1172
-
//It is very likely that you set 2 seconds, but it needs 2.2 seconds to trigger, then this time will enter this condition
1168
+
//Essa condição só será preenchida se definido para `trailing`
1169
+
//Essa condição só será preenchida no ínicio se não definido `leading`
1170
+
//Outro ponto, você deve pensar que essa condição não será preenchida se você ligar o timer
1171
+
//De fato, será assim até entrar porque o atraso do timer não é acurado
1172
+
//Isso é muito como se você setar a 2 segundos, mas ele precisa 2.2 segundos para disparar, então o tempo será preenchido nessa condição
1173
1173
if (remaining <=0|| remaining > wait) {
1174
-
//Clean up if there exist a timer otherwise it call twice callback
1174
+
//Limpe se existe um timer e ele chama a callback duas vezes
//And you can't set leading and trailing at the same time
1183
+
//Julge se o timer e trailing forem definidos
1184
+
//E você não pode defirnor leading e trailing no mesmo instante
1185
1185
timeout =setTimeout(later, remaining);
1186
1186
}
1187
1187
return result;
1188
1188
};
1189
1189
};
1190
1190
```
1191
1191
1192
-
# Map、FlatMap and Reduce
1192
+
# Map、FlatMap e Reduce
1193
1193
1194
-
The effect of`Map`is to generate a new array, iterate over the original array, take each element out to do some transformation, and then`append`to the new array.
1194
+
O efeito do`Map`é para gerar um novo array, iterando sobre o array original, tomando cada elemento para fazer alguma transformação, e então`append`para um novo array.
1195
1195
1196
1196
```js
1197
1197
[1, 2, 3].map((v) => v +1)
1198
1198
// -> [2, 3, 4]
1199
1199
```
1200
1200
1201
-
`Map`has three parameters, namely the current index element, the index, the original array.
1201
+
`Map`tem três parâmetros, nomeando o índice atual do elemento, o índice, o array original.
1202
1202
1203
1203
```js
1204
1204
['1','2','3'].map(parseInt)
@@ -1207,14 +1207,14 @@ The effect of `Map` is to generate a new array, iterate over the original array,
1207
1207
// parseInt('3', 2) -> NaN
1208
1208
```
1209
1209
1210
-
The effect of`FlatMap`is almost the same with a `Map`, but the original array will be flatten for multidimensional arrays. You can think of`FlatMap`as a`map`and a`flatten`, which is currently not supported in browsers.
1210
+
O efeito do`FlatMap`é quase o mesmo do `Map`, mas o array original será substituído para um array multidimensional. Você pode pensar no`FlatMap`com um`map`e um`flatten`, que atualmente não é suportado nos navegadores.
1211
1211
1212
1212
```js
1213
1213
[1, [2], 3].flatMap((v) => v +1)
1214
1214
// -> [2, 3, 4]
1215
1215
```
1216
1216
1217
-
You can achieve this when you want to completely reduce the dimensions of a multidimensional array:
1217
+
Você pode alcançar isso quando você quer reduzir completamente dimensões de um array multidimensional:
You can think of`async`as wrapping a function using`Promise.resolve()`.
1254
+
Você pode pensar em`async`como uma função encapsuladora usando`Promise.resolve()`.
1255
1255
1256
-
`await`can only be used in `async` functions:
1256
+
`await`pode ser usado apenas em funcões `async`:
1257
1257
1258
1258
```js
1259
1259
functionsleep() {
@@ -1271,11 +1271,11 @@ async function test() {
1271
1271
test()
1272
1272
```
1273
1273
1274
-
The above code will print`finish`before printing `object`. Because`await`waits for the`sleep`function `resolve`, even if the synchronization code is followed, it is not executed before the asynchronous code is executed.
1274
+
O código acime vai exibir`finish`antes de exibir `object`. Porque`await`espera pela funcão`sleep``resolve`, mesmo se a sincronização de código estiver seguida, ele não executa antes do código assíncrono ser executado.
1275
1275
1276
-
The advantage of`async`and`await`compared to the direct use of `Promise`lies in handling the call chain of `then`, which can produce clear and accurate code. The downside is that misuse of `await`can cause performance problems because `await`blocks the code. Perhaps the asynchronous code does not depend on the former, but it still needs to wait for the former to complete, causing the code to lose concurrency.
1276
+
A vantagem do`async`e`await`comparado ao uso direto da `Promise`mente em manipular a cadeia de chamada do `then`, que pode produzir código claro e acurado. A desvantagem é que uso indevido do `await`pode causar problemas de performance porque `await`bloqueia o código. Possivelmente o código assíncrono não depende do anterior, mas ele ainda precisa esperar o anterir ser completo, ocasionando perda de concorrência.
1277
1277
1278
-
Let's look at a code that uses`await`:
1278
+
Vamos dar uma olhada em um código que usa`await`:
1279
1279
1280
1280
```js
1281
1281
var a =0
@@ -1290,24 +1290,24 @@ a++
1290
1290
console.log('1', a) // -> '1' 1
1291
1291
```
1292
1292
1293
-
You may have doubts about the above code, here we explain the principle:
1293
+
Você pode ter dúvidas sobre o código acima, aqui nós explicamos o príncipio:
1294
1294
1295
-
- First the function`b`is executed. The variable`a`is still 0 before execution `await10`, Because the`Generators`are implemented inside `await`and `Generators`will keep things in the stack, so at this time `a =0`is saved
1296
-
- Because`await`is an asynchronous operation, `console.log('1', a)`will be executed first.
1297
-
- At this point, the synchronous code is completed and asynchronous code is started. The saved value is used. At this time, `a =10`
1298
-
- Then comes the usual code execution
1295
+
- Primeiro a função`b`é executada. A variável`a`ainda é zero antes da execução do `await10`, porque os`Generators`são implementados dentro do `await`e `Generators`matém as coisas na pilha, então nesse momento `a =0`é salvo
1296
+
- Porque`await`é uma operação assíncrona, `console.log('1', a)`será executada primeiro.
1297
+
- Nesse ponto, o código síncrono é completado e o código assíncrono é iniciado. O valor salvo é usado. Nesse instante, `a =10`
1298
+
- Então chega a execução usual do código
1299
1299
1300
1300
# Proxy
1301
1301
1302
-
Proxy is a new feature since ES6. It can be used to define operations in objects:
1302
+
Proxy é uma nova funcionalidade desde o ES6. Ele costuma ser usado para definir operações em objetos:
1303
1303
1304
1304
```js
1305
1305
let p =newProxy(target, handler);
1306
-
// `target` represents the object of need to add the proxy
1307
-
// `handler` customizes operations in the object
1306
+
// `target` representa o objeto que precisamos adicionar o proxy
1307
+
// `handler` operações customizadas no objeto
1308
1308
```
1309
1309
1310
-
Proxy can be handy for implementation of data binding and listening:
1310
+
Proxy podem ser conveniente para implementação de data bindind e listening:
1311
1311
1312
1312
```js
1313
1313
letonWatch= (obj, setBind, getLogger) => {
@@ -1331,74 +1331,74 @@ let p = onWatch(obj, (v) => {
Binary computations in float numbers are different from those in integers. For multiplications, only the float bits are computed, while the integer bits are used for the binaries for each bit. Then the first bit is used as the most significant bit. Therefore we get `0.1=2^-4*1.10011(0011)`.
1353
+
Computações binária em números flutuantes são diferentes daqueles em inteiros. Por multiplicação, apenas bits flutuantes são computados, enquanto bits do tipo inteiro são usados pelos binários para cada bit. Então o primeiro bit é usado como o bit mais significante. Assim sendo nós obtemos 0.1 = 2^-4 * 1.10011(0011)`.
1354
1354
1355
-
`0.2`is similar. We just need to get rid of the first multiplcation and get `0.2=2^-3*1.10011(0011)`.
1355
+
`0.2`ésimilar. Nós apenas precisamos passear na primeira multiplicação e obter `0.2 = 2^-3 * 1.10011(0011)`
1356
1356
1357
-
Back to the double float for IEEE 754 standard. Among the 64 bits, one bit is used for signing, 11 used for integer bits, and the rest 52 bits are floats. Since `0.1`and`0.2`are infinitely cycling binaries, the last bit of the floats needs to indicate whether to round (same as rounding in decimals).
1357
+
Voltando a precisão dupla pelo padrão IEE754. Entre o64 bits, um bit é usado para assinatura, 11é usado para bits inteiros, e o outros52 bits sãofloats. Uma vez que `0.1`e`0.2`são ciclos infinitos de binários, o último bit do float precisa indicar se volta (mesmo como o arredendomaneto em decimal).
1358
1358
1359
-
After rounding, `2^-4*1.10011...001`becomes `2^-4*1.10011(0011*12times)010`. After adding these two binaries we get`2^-2*1.0011(0011*11times)0100`, which is`0.30000000000000004`in decimals.
1359
+
Depois do arredondamento, `2^-4 * 1.10011...001`se torna `2^-4 * 1.10011(0011 * 12 vezes)010`. Depois de adicionado esses dois binários obtemos`2^-2 * 1.0011(0011 * 11 vezes)0100`, que é`0.30000000000000004`em decimal.
1360
1360
1361
-
The native solution to this problem is shown below:
1361
+
A solução nativa pra esse problema é mostrado abaixo:
0 commit comments