JavaScript中的析构对象，析构数组与展开运算符

qwe-asd-zxc-nm / 2023-08-19 / 原文

前言

这些是JavaScript中重要的编程思想，这些析构对象，析构函数与展开运算符很重要

这块内容不怎么难，纯属一些语法，但是在所谓的函数式编程，以及React中却是广泛使用的

逆向思维，之前是怎么构造，而现在让你如何展开，获取里面的内容！！

一、析构对象

二、析构数组

三、展开运算符

一、析构对象

构造时在等号右边使用{}，而析构的原理很简单，直接逆向，直接在等号的左边来进行析构 {}=

{}中填写要获取值的名字，获取的可以是各种属性，比如数组，字符串甚至函数，可以说，很好用！！！

    const sandwich = {
        bread: "dutch crunch",
        meat: "tuna",
        cheese: "swiss",
        toppings: ["lettuce", "tomato", "mustard"]
    }

    const {bread, meat} = sandwich

    console.log(bread, meat) // dutch crunch tuna

要区分“析构对象”和“构造对象”，前者{name} = Object ，后者 object = {name: "value"}

这些是非常关键的，而且{name}可以直接作为参数，来直接对对象进行析构

一定要认识这种形式！！ {name} 作为参数，对传入的对象进行析构！！

下面这段代码是个例子，要看看这个函数，其实一点也不难！！

    const lordify = ({firstName}) => {
        console.log(`${firstName} of Canterbury`)
    }

    const regularPerson = {
        firstName: "Bill",
        lastName: "wilSon"
    }

    lordify(regularPerson) // Bill of Canterbury

同时，也可以对嵌套对象进行处理，写的很简单 {name1 : { name2 }} 这种形式，想要什么就获取什么，这个一点也不难

如下，下面这个例子，平淡无奇写上 {spouse: {firstName}}，直接析构了这个regularPerson的嵌套对象！！！

    const regularPerson = {
        firstName:"Bill",
        lastname:"WillSon",
        spouse: {
            firstName: "phil",
            lastname: "WillSon"
        }
    }

    const lordify = ({spouse : {firstName}})=>{
        console.log(`${firstName} of Canterbury`);
    }

    lordify(regularPerson) // phil of Canterbury

析构对象，其实没什么难度，关键是这种逆向思维方式，以及在参数传递时认识这种析构形式！！

二、析构数组

这个类比上面，构造数组使用 = [ xxx] ，那么析构数组很自然 [xx] .

下面直接写一个代码实例，直接不必多言，很自然的构造出来

    const [fistAnimal] = ["Horse", "Mouse", "Cat"];
    console.log(fistAnimal) // Horse

一个关键问题，数组是按顺序排序的，不想对象可以直接定位值，因此需要“列表匹配”，使用，来跳过不要的值！！

const [,,lastAnimal] = ["Horse", "Mouse", "Cat"];
console.log(lastAnimal) // cat

如上代码，这个很好理解，使用“，”直接跳过前面两个值，这个确实比较重要！！

三、展开运算符

展开运算符，可以对对象和数组来进行展开，常常搭配析构数组[ ]，可以达到对数组进行拆分的效果

这里展开运算符，理解清楚，展开获取时使用 ...others，而获取的数组是others而不是 ...others

这里你可能有点绕，看下面的例子就好了，如果再使用 ...others，其输出的是整个数组的字符串，类似 others.join(" ")这种形式

这个要深刻理解其原理，展开运算符，在React中经常使用！！！

const lakes = ["Donner", "Marlette", "Fallen Leaf", "Cascade"];
const [first, ...others] = lakes;
console.log(others); // ['Marlette', 'Fallen Leaf', 'Cascade']
console.log(...others); // Marlette Fallen Leaf Cascade

其除了展开数组，还可以展开对象，这是非常重要的，其可以展开对象

我举一个很好的例子，下面其实不难理解，构造新的object的时候，可以使用 ... 来展开之前的object

注意，如果不使用展开运算符，其是一个嵌套的对象，这个要不难理解！！

    const morning = {
        breakfast: "oatmeal",
        lunch: "peanut butter and jelly"
    };
    
    const dinner = "mac and cheese";
    
    const backpackingMeals = {
        ...morning,
        dinner
    }
    
    console.log(backpackingMeals);
    // {
    //     breakfast: "oatmeal",
    //     lunch: "peanut butter and jelly",
    //     dinner: "mac and cheese"
    // }