1. dejar y constante
dejar
- Características de la memoria: el valor en el espacio de almacenamiento asignado después de la variable declarada por let (como números, cadenas, matrices, etc.) se puede cambiar, el puntero almacenado se puede cambiar y el espacio de memoria señalado por el puntero también se puede cambiar. cambiado (como: matriz, objeto, etc.)
- Alcance: alcance del bloque
- Zona muerta temporal: usarla antes de la declaración resultará en un error
- Promoción variable: no hay promoción variable y no se puede declarar repetidamente
- bucle for: el motor JavaScript recordará internamente el bucle anterior e inicializará las variables declaradas por let en esta ronda.
constante
- Características de la memoria: el valor en el espacio de almacenamiento asignado después de que const declara la variable (como números, cadenas, matrices, etc.) es equivalente a la constante y no se puede cambiar. El puntero almacenado no se puede cambiar. El valor en el espacio de memoria apuntado por el puntero se puede cambiar (como: matriz, objeto, etc.)
- El alcance, la zona muerta de fila temporal y las funciones de promoción variable son las mismas que let
// 正确示例 const obj = {} obj.father = '123' // 错误示例 const obj = {} obj = { father: '123'} // 冻结对象 const obj = { name: 'Alice', age: 20 }; Object.freeze(obj); obj.name = 'Bob'; // 抛出TypeError错误
objeto de nivel superior
- En el navegador, el objeto de nivel superior es
window, pero Node y Web Worker no lo sonwindow.- En los navegadores y Web Workers,
selftambién apuntan a objetos de nivel superior, pero Node noself.- En Node, el objeto de nivel superior es
global, pero no es compatible con otros entornos.
2. Asignación desestructurante y expansión.
Tarea de desestructuración
- La asignación de desestructuración admite objetos: objetos, matrices, cadenas, valores booleanos y funciones.
- La asignación de estructuración admite la configuración de valores predeterminados: cuando el objeto de asignación es estrictamente igual a indefinido, el valor predeterminado entrará en vigor.
- El mecanismo interno de la asignación de estructura de objetos es encontrar primero el atributo con el mismo nombre y luego asignarlo a la variable correspondiente. Lo que realmente se copia es lo último, no lo primero. El "primero" de este proceso de asignación se llama " modo", y el "último" se llama "variable"
- Hay tres escenarios en los que no se pueden utilizar paréntesis durante la asignación de estructura:
- declaración de declaración de variables
- Parámetros en declaraciones de función.
- Patrones en declaraciones de asignación
// 对象 const node = { loc: { start: { line: 1, column: 5 } } }; let { loc, loc: { start }, loc: { start: { line }} } = node; line // 1 loc // Object {start: Object} start // Object {line: 1, column: 5} // 数组 const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o" // 字符串 let {length : len} = 'hello'; len // 5 // 布尔类型 let {toString: s} = true; s === Boolean.prototype.toString // true // 函数 function add([x, y]){ return x + y; } add([1, 2]); // 3
extensión de función
- Los parámetros de función se pueden configurar con valores predeterminados, por ejemplo:
function fn(a，b = 1) {} // 默认值作用域指向外层对象 let foo = 'outer'; function bar(func = () => foo) { let foo = 'inner'; console.log(func()); } bar(); // outer
- Se utiliza junto con valores predeterminados para desestructurar asignaciones.
// 这种写法函数第二个参数不能省略 function fetch(url, { body = '', method = 'GET', headers = {} }) { console.log(method); } fetch('http://example.com', {}) // "GET" fetch('http://example.com') // 报错 // 这种写法函数第二个参数可以省略 function fetch(url, { body = '', method = 'GET', headers = {} } = {}) { console.log(method); } fetch('http://example.com') // "GET"
- parámetros de descanso
const obj = [1,2,3,4] console.log(...obj) // 1,2,3,4
- función de flecha
- Para funciones ordinarias, el
thispunto interno es el objeto donde se ejecuta la función, pero esto no es válido para las funciones de flecha. No tienethisobjetos propios, los internosthisestán en el alcance superior cuando se definethis. En otras palabras, lathisdirección interna de la función de flecha es fija, por el contrario,thisla dirección de la función ordinaria es variable.- Las funciones de flecha en realidad pueden hacer que
thisel puntero sea fijo y la vinculaciónthishace que ya no sea variable. Esta característica es muy útil para encapsular funciones de devolución de llamada.// 只有一条语句且返回值不为对象时，不需要return且可以省略代码块 const sum = (num_a, num_b) => num_a + num_b // 只有一条语句时且返回值为对象时, 需要用圆括号 const getObj = id => ({ id: id, name: Tom }) // 不报错 const getObj = id => { id: id, name:Tom } // 报错 // 箭头函数this指向问题 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); // id: 42
extensión de matriz
- Operador de propagación:
console.log(...[1, 2, 3]) // 1 2 3
- El operador de extensión llama internamente a la interfaz Iterador de la estructura de datos, por lo que siempre que el objeto tenga la interfaz Iterador, se puede utilizar el operador de extensión.
- El operador de dispersión para objetos equivale a utilizar
Object.assign()el métodolet aClone = { ...a }; // 等同于 let aClone = Object.assign({}, a);
三、Proxy、Promesa、Reflexionar
apoderado
- Se puede entender que el proxy establece una capa de "intercepción" antes del objeto de destino. El acceso externo al objeto debe pasar primero a través de esta capa de interceptación, por lo que proporciona un mecanismo para filtrar y reescribir el acceso externo. El significado original de la palabra Proxy es agente. Se utiliza aquí para significar que "actúa en nombre de" determinadas operaciones. Puede traducirse como "agente".
- ES6 proporciona de forma nativa un constructor de Proxy para generar instancias de Proxy.
var proxy = new Proxy({}, { get: function(target, propKey) { return 35; } }); proxy.time // 35 proxy.name // 35 proxy.title // 35
- Proxy de lágrima de mano:
const target = { name: 'Tom', age: 20 }; const handler = { get: function(target, prop) { console.log(`Getting ${prop} property`); return target[prop]; }, set: function(target, prop, value) { console.log(`Setting ${prop} property to ${value}`); target[prop] = value; } }; const proxy = new Proxy(target, handler); console.log(proxy.name); // 输出：Getting name property Tom proxy.age = 25; // 输出：Setting age property to 25 console.log(proxy.age); // 输出：Getting age property 25
Promesa
- Promise es un patrón de programación asincrónica que le permite manejar operaciones asincrónicas en JavaScript. Un objeto Promise representa la finalización o falla final de una operación asincrónica, y el método then() se puede usar para manejar los resultados de la operación asincrónica. Las promesas le ayudan a evitar el infierno de las devoluciones de llamadas y a hacer que el código asincrónico sea más limpio y más fácil de mantener.
- El estado del objeto no se ve afectado por el mundo exterior.
PromiseEl objeto representa una operación asincrónica y tiene tres estados:pending(en curso),fulfilled(exitoso) yrejected(fallido). Sólo el resultado de la operación asincrónica puede determinar el estado actual y ninguna otra operación puede cambiar este estado. Este es tambiénPromiseel origen del nombre, su significado en inglés es "compromiso", lo que significa que no se puede cambiar por otros medios.- Una vez que el estado cambia, no volverá a cambiar y este resultado se puede obtener en cualquier momento.
PromiseSólo hay dos posibilidades para que cambie el estado de un objeto: dependingafulfilledy dependingarejected. Mientras ocurran estas dos situaciones, el estado se solidificará, no cambiará más y mantendrá este resultado, esto se llama resuelto. Si el cambio ya ocurrió, si agregaPromiseuna función de devolución de llamada al objeto, obtendrá el resultado inmediatamente. Esto es completamente diferente a un evento, la característica de un evento es que si te lo pierdes y lo vuelves a escuchar, no obtendrás el resultado.- Promesa de lágrima a mano:
function MyPromise(fn) { const self = this; self.value = null; self.error = null; self.onFulfilled = null; self.onRejected = null; function resolve(value) { setTimeout(() => { self.value = value; self.onFulfilled(self.value); }, 0); } function reject(error) { setTimeout(() => { self.error = error; self.onRejected(self.error); }, 0); } fn(resolve, reject); } MyPromise.prototype.then = function(onFulfilled, onRejected) { const self = this; return new MyPromise((resolve, reject) => { self.onFulfilled = function(value) { try { const result = onFulfilled(value); resolve(result); } catch (error) { reject(error); } }; self.onRejected = function(error) { try { const result = onRejected(error); resolve(result); } catch (error) { reject(error); } }; }); }; const promise = new MyPromise((resolve, reject) => { setTimeout(() => { resolve('Hello, world!'); }, 1000); }); promise.then( value => console.log(value), error => console.error(error) );
Reflejar
- En JavaScript, los métodos de operación de los objetos están relativamente dispersos. Por ejemplo, para obtener valores de propiedad, puede usar obj[key], obj.property, Object.getOwnPropertyDescriptor() y otros métodos. Los nombres y el uso de estos métodos son diferentes. , lo cual no es conveniente de recordar y utilizar. Reflect proporciona un conjunto unificado de métodos, como Reflect.get(), Reflect.set(), Reflect.getOwnPropertyDescriptor(), etc., lo que hace que las operaciones con objetos sean más consistentes y fáciles de usar.
- Reflect proporciona un conjunto unificado de API para hacer que las operaciones de objetos sean más consistentes y fáciles de usar. También admite la interceptación de Proxy y proporciona algunos métodos de operación nuevos, mejorando así la flexibilidad y escalabilidad de JavaScript.
Ejemplo:
const obj = { name: 'Tom', age: 20 }; console.log(Reflect.get(obj, 'name')); // 输出：Tom Reflect.set(obj, 'age', 25); console.log(obj.age); // 输出：25 console.log(Reflect.has(obj, 'name')); // 输出：true Reflect.deleteProperty(obj, 'age'); console.log(obj.age); // 输出：undefined function Person(name, age) { this.name = name; this.age = age; } const person = Reflect.construct(Person, ['Tom', 20]); console.log(person.name, person.age); // 输出：Tom 20 function sayHello(name) { console.log(`Hello, ${name}!`); } Reflect.apply(sayHello, null, ['Tom']); // 输出：Hello, Tom!
4. Clase y constructor
clase clase
- Definición de clase: use la palabra clave class para definir una clase. Los nombres de clase generalmente usan nombres en mayúsculas y minúsculas que comienzan con una letra mayúscula.
- Constructor: un constructor se puede definir en una clase, definido usando la palabra clave constructor, para inicializar las propiedades del objeto.
- Propiedades y métodos: las propiedades y los métodos se pueden definir en una clase usando una sintaxis similar a los literales de objetos, pero no es necesario separarlos por comas.
- Herencia: una clase puede heredar a través de la palabra clave extends. Las subclases pueden heredar las propiedades y métodos de la clase principal y pueden anular los métodos de la clase principal.
- super palabra clave: puede utilizar la super palabra clave en una subclase para llamar al constructor y a los métodos de la clase principal.
- Método estático: los métodos estáticos se pueden definir en una clase usando la palabra clave estática y se pueden llamar directamente a través del nombre de la clase sin crear un objeto.
- Getter y setter: los métodos getter y setter se pueden definir en la clase para obtener y establecer los valores de los atributos del objeto.
- Expresión de clase: las clases también se pueden definir mediante expresiones, que se pueden asignar a variables o pasar como parámetros de función.
Función de generador
- Programación asincrónica: la función Generador puede usar la palabra clave de rendimiento para pausar y reanudar la ejecución de la función, que se puede usar para manejar operaciones asincrónicas y evitar el infierno de devolución de llamada y las funciones de devolución de llamada anidadas de múltiples capas.
- Iterador: la función Generador devuelve un objeto iterador, que se puede utilizar para atravesar estructuras de datos, como matrices, objetos, mapas, etc.
- Máquina de estados: la función Generador se puede utilizar para implementar una máquina de estados. Cada vez que se llama al siguiente método, la función continuará ejecutándose desde la última posición pausada y puede devolver diferentes valores según los diferentes estados.
- Flujo de control: la función Generador se puede usar para controlar el flujo. Por ejemplo, puede usar la palabra clave de rendimiento para pausar la ejecución de la función y esperar a que se cumpla una determinada condición antes de continuar con la ejecución.
- Corrutina: la función Generador se puede usar para implementar corrutinas, puede pausar y reanudar la ejecución durante la ejecución de la función y puede usarse para manejar algunas tareas complejas.
- Utilice Generator y Promise para simular el efecto de la salida de texto GPT
function* gptOutput(text) { for (let i = 0; i < text.length; i++) { yield text[i]; yield new Promise(resolve => setTimeout(resolve, 50)); } } const output = gptOutput('Hello, world!'); const timer = setInterval(() => { const { value, done } = output.next(); if (done) { clearInterval(timer); } else { console.log(value); } }, 100);