Prefacio
En JavaScript, casi todo valor es un objeto de cierto tipo. Es6También se enfoca en mejorar la funcionalidad de los Es6objetos, realzando el uso de objetos en una variedad de formas y proporcionando más métodos para manipular objetos e interactuar con objetos a través de extensiones gramaticales simples. Vamos a presentarlos a continuación.
Extensión de sintaxis literal de objeto
El literal de objeto es suficiente, es decir, queremos crear un objeto y ya no necesitamos escribir código redundante. Se puede lograr directamente a través de su sintaxis concisa. Luego, eche un vistazo a las características que Es6 ha creado para el objeto.
Abreviatura del valor inicial del atributo
En Es5, los objetos literales son simplemente claves y colecciones, lo que significa que hay algunas repeticiones en las propiedades de inicialización.
function person(name) {
return {
name: name
}
}
En Es6, este nameatributo se puede omitir mediante la abreviatura de atributo. Cuando el atributo y la variable de un objeto tienen el mismo nombre, se pueden omitir los dos puntos y el valor. Mira el siguiente caso
function person(name) {
return {
name
}
}
Sintaxis abreviada para métodos de objeto
Es6 también mejoró el método de abreviatura de objetos de literales de objeto. En Es5, el nombre completo debe escribirse al definir el método de objeto.
Caso es5
let person = {
test: function() {
}
}
Caso es6
let person() {
test() {
}
}
Mediante la abreviatura del método objeto Es6 se define una expresión anónima, esta función tiene exactamente las mismas características que Es5. La única diferencia entre la función de objeto definida por Es5 y la definición de función abreviada de Es6 es que se puede utilizar la función abreviada super.
Nombre de atributo computable
En Es5, si desea obtener el nombre del atributo mediante cálculo, debe usar []corchetes en su lugar.
let person = {
}
let value = "hello WaRen"
person["wa ren"] = "蛙人"
person[value] = "value"
En el ejemplo anterior, es lo que hicimos en es5: si el valor clave del objeto es una variable, usamos los corchetes del objeto para agregarlo.
En Es6, puede usar el nombre del atributo computable en el objeto literal. Veamos el siguiente ejemplo
let key = "name"
let person = {
[key]: "蛙人" // 在对象字面量中这样使用[]方括号定义key是Es6语法
[`${
key}_test`]: "test"
}
Los corchetes utilizados en el literal de objeto anterior indican que el nombre del atributo se puede calcular y las expresiones se pueden escribir, y luego el valor de clave final se devolverá como un tipo de cadena. Recuerde,在对象字面量中使用方括号[]定义key值是Es6中的语法 . También sé (la base no es sólida), después de probar bable para convertir Es6 en Es5, puede ver el resultado.
Atributos literales de objetos duplicados
En el modo estricto Es5, se agrega la verificación de atributos repetidos de objetos literales y se lanzará una excepción cuando haya varios atributos con el mismo nombre al mismo tiempo. Mira el siguiente ejemplo
"use strict"
var person = {
name: "蛙人",
name: "张三" // 在Es5严格模式下会抛出语法错误
}
En el modo estricto Es5, el segundo atributo namedesencadenará un error de sintaxis, pero se ha eliminado la comprobación de atributo duplicado en Es6. En Es6, el código no repetirá el atributo independientemente de si está en modo estricto o no. Verificación , para atributos repetidos, los últimos cubren a los primeros. pd: acabo de enterarme de que derramo lágrimas inexpertas. . .
"use strict"
let person = {
name: "蛙人",
name: "张三"
}
En el ejemplo anterior, podemos ver que este es el atributo repetido estándar de Es6 y no se lanza ninguna excepción, pero el objeto posterior sobrescribe el objeto anterior y el nameatributo final es "Zhang San". Ahora nuestro navegador está ejecutando el estándar Es6.
Nuevos métodos para objetos Es6
Es6 Objectintrodujo algunos métodos nuevos en objetos globales .
Object.is
Cuando estamos en Es5, a menudo usamos el ==operador de igualdad o el operador de ===congruencia para comparar valores, pero en Es5, el operador de igualdad o el operador de congruencia no es completamente exacto. Aquí hay un ejemplo del sitio web oficial. +0和-0Esto está en el JavaScriptmotor Dos diferentes las entidades están representadas, y el uso del operador de congruencia o el operador de igualdad devolverá ture, y también NaN == NaNdevolverá falso. Sin embargo, hay un Object.ismétodo en Es6 para compensar estas deficiencias. El Object.ismétodo recibe 2 parámetros. Si los valores de los dos parámetros son iguales y los tipos también son iguales, devuelvetrue
console.log(+0 == -0) // ture
console.log(+0 === -0) // true
console.log(Object.is(+0, -0)) // false
console.log(NaN == NaN) // false
console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) // true
console.log(10 == "10") // true
console.log(10 === "10") // false
console.log(Object.is(10, "10")) // false
En el ejemplo anterior, podemos ver que el Object.ismétodo es bastante estricto, pero esto solo se usa en casos especiales, por lo que no es necesario abandonar ==o ===.
Object.assign
El método Object.assign puede recibir cualquier número de objetos de origen. El primer parámetro es el receptor, que es el valor de retorno final. El segundo parámetro se copiará en el primer parámetro más tarde, por lo que si hay varios objetos de origen con el atributo de keyvalor del mismo nombre , el objeto en la parte posterior sobrescribirá el objeto en el frente. Mira el siguiente ejemplo
let test1 = {
name: "蛙人"
}
let test2 = {
name: "张三"
}
let result = Object.assign({
}, test1, test2)
console.log(result) // {name: "张三"}
En el ejemplo anterior, puede ver que si el atributo de objeto anterior tiene el mismo nombre, este último sobrescribirá al primero. Si el parámetro pasado no es un objeto, se puede ejecutar, pero se ignorará. Mira el siguiente ejemplo
let result = Object.assign({
}, 1, 2, 3)
console.log(result) // {}
Nota: El método Object.assign no puede copiar la función de valor (atributo de acceso) al objeto. Debido a que el método Object.assign realiza la operación de asignación, el objeto eventualmente se convertirá en un atributo normal.
let test = {
get name() {
return "蛙人"
}
}
let result = Object.assign({
}, test)
console.log(Object.getOwnPropertyDescriptor(result, "name")) // {configurable: true enumerable: true value: "蛙人" writable: true}
En el ejemplo anterior, puede ver el resultado final de nuestro objeto de copia, la función de valor se pierde de hecho, podemos 对象的描述属性ver de acuerdo con la adquisición . Si no lo entiende, 对象的描述属性puede leer mi artículo "Comprensión profunda de los objetos JavaScript".
Object.setPrototypeOf
En Es5, hay una Object.getPrototypeOfforma de obtener el prototipo del objeto, pero Es5 no proporciona una forma de configurar el prototipo del objeto. Si queremos configurar el prototipo del objeto, xx.__proto__ = xx.__proto__obviamente está bien escribir de esta manera, pero no es razonable. Entonces, Es6 proporciona un Object.setPrototypeOfmétodo, este método acepta dos parámetros, el primero es el objeto modificado y el segundo es el objeto prototipo. Mira el siguiente ejemplo
let person = {
}
function Fn() {
}
let fn = new Fn()
Object.setPrototypeOf(person, fn)
console.log(person)
En el ejemplo anterior, puede ver que personel objeto prototipo se modifica en fnel objeto prototipo. En este momento, personpuede ver claramente que el objeto prototipo se ha cambiado cuando accede al objeto.
Object.values
Object.valuesEl método devuelve una matriz, el miembro es el objeto de parámetro en sí mismo, no incluye herencia ni prototipo
let person = {
name: "蛙人",
age: 24,
sex: "male"
}
console.log(Object.values(person)) // ["蛙人", 24, "male"]
Entradas de objeto
Object.entriesEl método devuelve una matriz (es decir, una matriz bidimensional), el miembro es el objeto de parámetro en sí, la matriz de pares clave-valor de atributo, no incluye herencia ni prototipo.
let person = {
name: "蛙人",
age: 24,
sex: "male"
}
console.log(Object.entries(person)) // [["name", "蛙人"], ["age", 24], ["sex", "male"]]
Object.fromEntries
Object.fromEntriesSí Object.entries, la operación inversa, el valor de retorno es un objeto, que se utiliza para convertir una matriz de pares clave-valor en un objeto.
let testArr = [
["name", "蛙人"],
["age", 24],
["sex", "male"]
]
console.log(Object.fromEntries(testArr)) // {name: "蛙人", age: 24, sex: "male"}
Orden de enumeración de las propiedades del objeto propio
El orden de enumeración de los atributos del objeto no está definido en Es5, que lo determina el fabricante del motor js. Sin embargo, Es6 especifica el orden en el que se enumeran y devuelven las propiedades propias del objeto. Las reglas básicas para el orden de enumeración de los atributos propios son las siguientes:
- Todas las teclas numéricas están ordenadas en orden ascendente
- Todas las claves de cadena se ordenan en el orden en que se agregan
- Todas las claves de símbolos están ordenadas en el orden en que se agregan
let o = {
4: 4,
1: 1,
b: "b",
a: "a"
}
o.c = "c"
console.log(Object.keys(o)) // ["1", "4", "b", "a", "c"]
console.log(Object.getOwnPropertyNames(o)) // ["1", "4", "b", "a", "c"]
for (let i in o) {
console.log(i) // 1 4 b a c
}
En el ejemplo anterior, puede ver que todas las propiedades de enumeración de objetos se devuelven de acuerdo con el orden de las reglas en Es6 请注意 ,对于数字键，尽管在对象字面量中顺序是随意的, pero se volverán a combinar y ordenar durante la enumeración. La cadena sigue inmediatamente a la clave numérica y se devuelve en el orden del atributo en el objeto, y finalmente el valor de la clave de la cadena se agrega dinámicamente.
Super referencia para simplificar el acceso al prototipo
En Es6, se proporcionan nuevas superpalabras clave Este método es para simplificar el uso de la obtención del objeto del prototipo actual. Mira el siguiente ejemplo
Caso es5
let person = {
getName() {
return Object.getPrototypeOf(this).getVal.call(this)
}
}
let o = {
getVal() {
return "蛙人"
}
}
Object.setPrototypeOf(person, o)
console.log(person.getName()) // 蛙人
En el ejemplo anterior, puede ver que cuando personel prototipo se establece en el oobjeto primero , y luego personse llama al objeto, getNamese obtiene el prototipo actual en este método y se llama al método en el prototipo, que es el método de la llamado oobjeto.
Caso es6
let person = {
getName() {
return super.getVal.call(this)
}
}
let o = {
getVal() {
return "蛙人"
}
}
Object.setPrototypeOf(person, o)
console.log(person.getName()) // 蛙人
En el ejemplo anterior, puede ver que ajustamos ligeramente el código anterior y lo Object.getPrototypeOfreemplazamos con superpalabras clave. superLa función de la palabra clave es Object.getPrototypeOfacceder al prototipo del objeto en lugar del método. Pero las superpalabras clave también tienen el inconveniente de que solo se pueden usar en el método abreviado de literales de objeto. Mira el siguiente caso
let person = {
getName: function() {
return super.toString() // 报错
}
}
En el ejemplo anterior, un atributo se define de forma personanónima en el objeto. functionDado que superes ilegal hacer referencia en el contexto actual, se arroja un error. Entonces, ¿por qué son las mismas funciones pero diferentes? Entonces seguimos mirando hacia abajo.
La definición de la forma correcta de distinguir
方法Este concepto no estaba estipulado antes de Es6 . Un método es solo una propiedad con una función en lugar de un objeto. En Es6, un método se define oficialmente como una función, que tiene una [[HomeObject]]propiedad interna para acomodar el objeto al que pertenece el método. Mira el siguiente ejemplo
let person = {
getName() {
} // 是方法
}
function getName() {
} // 不是方法
En el ejemplo anterior, el personobjeto está definido y tiene un getNamemétodo, dado que la función se asigna directamente al personobjeto, getNameel [[HomeObject]]valor del atributo del método es el personobjeto. Luego mire functionel getNamemétodo definido con palabras clave a continuación . En este momento, no está asignado a un objeto, por lo que las [[HomeObject]]propiedades no están claramente definidas . Si no usa superpalabras clave, la pequeña diferencia entre estas dos funciones no es un gran problema. Pero superes especialmente importante utilizar palabras clave.
Porque las superreferencias de palabras clave se [[HomeObject]]utilizan para determinar el proceso de ejecución posterior a través de los atributos. superLa palabra clave primero [[HomeObject]]encontrará el objeto actual (valor de propiedad) en la propiedad, es decir, personluego Object.getPrototypeOfobtendrá el prototipo actual en el método de llamada , luego encontrará la función actual del mismo nombre en el prototipo, y finalmente establecerá el thisenlace y lo llamará . Es por eso que la superpalabra clave anterior reportará un error.
Si crees que está bien escrito, ¡apúntalo!
También puede agregar mi intercambio de micro cartas aquí
