Cómo hacer código más ligero en JavaScript

¡Continúe creando, acelere el crecimiento! Este es el primer día de mi participación en el "Nuggets Daily New Plan · June Update Challenge", haz clic para ver los detalles del evento

La respuesta es guardar el código utilizando la desestructuración de objetos de JavaScript, que es una habilidad común en el desarrollo de proyectos.

Primero veamos un articleobjeto con dos propiedades titley description.

const article = {
    title: "JavaScript对象解构赋值",
    description:
        "解构是一个概念，分解其中一种数据类型并将其单独的属性分配给变量",
};
复制代码

Antes de ES6, cuando necesitabas asignar una propiedad de un objeto a una variable, generalmente se hacía así:

const title = article.title;
const description = article.description
复制代码

Pero ES6 introdujo la sintaxis de desestructuración de objetos, que proporciona otra forma de asignar propiedades de objetos a las variables:

const { title, description: desc } = article;

console.log(title); // JavaScript对象解构赋值
console.log(desc); //  解构是一个概念，分解其中一种数据类型并将其单独的属性分配给变量
复制代码

El código anterior asigna las propiedades titley descriptionpropiedades a las variables titley desc.

Descripción de la sintaxis: el identificador antes de los dos puntos ( :) es la propiedad del objeto, y el identificador después de los dos puntos es la variable recién definida.

Ejemplo de desestructuración de objetos{}

Destrucción de objetos vacíos

Utilice el ORoperador ||para definir un valor predeterminado nullpara un objeto vacío y un valor predeterminado si el objeto es un objeto vacío {}.

function getArticle() {
    return null;
}
const { title, description } = getArticle() || {};

// 错误的情况
const { title, description } = getArticle() ;
复制代码

Desestructuración de objetos anidados

Basta con mirar el código a continuación:

const article = {
    id: 1001,
    detail: {
        title: "JavaScript对象解构赋值",
        description:
            "解构是一个概念，分解其中一种数据类型并将其单独的属性分配给变量",
    },
};
const {
    detail: { title, description },
    detail,
} = article;
console.log(title); // JavaScript对象解构赋值
console.log(description); // 解构是一个概念，分解其中一种数据类型并将其单独的属性分配给变量
console.log(detail); // { title: 'JavaScript对象解构赋值', description: '解构是一个概念，分解其中一种数据类型并将其单独的属性分配给变量' }
复制代码

Nota: La desestructuración de objetos por defecto asigna las propiedades de un objeto a una variable con el mismo nombre.