解构赋值的理解

一江春水1688

解构赋值，在MDN网站上有较详细的文档和示例。

其中有一段：

使用绑定模式作为剩余属性

数组解构赋值的剩余属性可以是另一个数组或对象绑定模式。这允许你同时提取数组的属性和索引。

const[a, b, ...{ pop, push }] = [1, 2];

console.log(a,b); // 1 2

console.log(pop,push); // [Function pop] [Function push]

解构后，变量a、b分别等于1和2很容易理解，但

pop 为 [Function pop]，push 为 [Function push]就理解不来了。

好吧，试试AI搜索，看看能否帮助理解。在豆包、通义、混元、360、文言一心等AI工具搜索，无一例外，均说错误，解析过程大致相同，如下：

具体解析如下：
a 将被赋值为数组的第一个元素，即 1。
b 将被赋值为数组的第二个元素，即 2。
...{ pop, push } 部分试图将剩余的元素（在这个例子中没有剩余元素）解构为一个对象，并从中提取 pop 和 push 方法。但是，由于数组 [1, 2] 中只有两个元素且已经被 a 和 b 提取完毕，所以这里实际上不会得到任何额外的对象来解构 pop 和 push。
因此，在这种情况下，pop 和 push 将会是 undefined，因为它们并没有实际的对象来源。

AI搜索不行啊，于是，我告之AI搜索工具，这是MSN上面的示例代码，答案就是注释中的结果。
嘿嘿，AI搜索立马承认错误，有部分AI搜索给出了正确解析【应该是正确的吧？】，如下：

感谢你的指正。确实，根据 MDN 文档和 JavaScript 的行为，代码的行为与你描述的一致。让我们详细解析一下这段代码：

const [a, b, ...{ pop, push }] = [1, 2];
console.log(a, b); // 1 2
console.log(pop, push); // [Function: pop] [Function: push]
解析步骤
数组解构赋值:
const [a, b, ...rest] = [1, 2];
a 被赋值为数组的第一个元素 1。
b 被赋值为数组的第二个元素 2。
...rest 尝试捕获剩余的元素，但由于数组只有两个元素且已经被 a 和 b 提取完毕，所以 rest 实际上是一个空数组 []。
对象解构赋值:
const { pop, push } = rest;
这里尝试从 rest（即空数组 []）中解构出 pop 和 push 属性。
数组实际上继承了 Array.prototype 上的方法，因此即使 rest 是一个空数组，它仍然有 pop 和 push 方法。
因此，pop 和 push 分别被赋值为 Array.prototype.pop 和 Array.prototype.push 函数。

xd3210

谢谢分享，收藏学习！

lizhipei78

我菜鸟，看不懂得，大神能否讲得通俗易懂点，及应用的示例场景

一江春水1688

lizhipei78 发表于 2024-12-13 09:19
我菜鸟，看不懂得，大神能否讲得通俗易懂点，及应用的示例场景

我也是javaScript的初学者，许多概念都在学习之中，大家一起学习，共同提高。。。


【解构】理解和示例：

一、解构的理解
“解构”可以理解为将一个复杂的数据结构（如对象或数组）分解开，从中提取出想要的值，并将这些值赋给相应的变量。这是一种简洁、方便地获取数据结构内部元素的方式，避免了传统的通过多次访问属性或索引来获取值的繁琐操作。

二、数组解构示例

    // 定义一个数组
    let arr = [1, 2, 3];
    // 解构数组
    let [a, b, c] = arr;
    // 这里a被赋值为数组arr的第一个元素1
    // b被赋值为数组arr的第二个元素2
    // c被赋值为数组arr的第三个元素3
    console.log(a);  // 1
    console.log(b);  // 2
    console.log(c);  // 3
   
    /*
    let arr = [1, 2, 3];
    let [a, b, c] = arr;
    等价于
    let arr = [1, 2, 3];
    let a = arr[1];
    let b = arr[2];
    let c = arr[3];
    */

三、对象解构示例

    // 定义一个对象
    let obj = { name: 'John', age: 30 };
    // 解构对象
    let { name, age } = obj;
    // 这里变量name，被赋值为对象obj的name属性值'John'
    // age被赋值为对象obj的age属性值30
    console.log(name);  // 'John'
    console.log(age);  // 30

    /*
    let obj = { name: 'John', age: 30 };
    let { name, age } = obj;
    等价于
    let obj = { name: 'John', age: 30 };
    let name = obj.name;
    let age = obj["age"];
    */

四、嵌套解构示例

数组嵌套数组的解构

    let nestedArr = [[1, 2], [3, 4]];
    // 解构嵌套数组
    let [[x, y], [z, w]] = nestedArr;
    // 这里x被赋值为nestedArr[0][0]即1
    // y被赋值为nestedArr[0][1]即2
    // z被赋值为nestedArr[1][0]即3
    // w被赋值为nestedArr[1][1]即4
    console.log(x);  // 1
    console.log(y);  // 2
    console.log(z);  // 3
    console.log(w);  // 4

对象嵌套对象的解构

    let nestedObj = {
        person: {
            firstName: 'Tom',
            lastName: 'Smith'
        }
    };
    // 解构嵌套对象
    let { person: { firstName, lastName } } = nestedObj;
    // 这里firstName被赋值为nestedObj.person.firstName 即'Tom'
    // lastName被赋值为nestedObj.person.lastName 即'Smith'
    console.log(firstName);  // 'Tom'
    console.log(lastName);  // 'Smith'

一江春水1688

解构的进一步理解：
    let obj = { name: 'John' };//定义对象obj，并赋初始值
    let { name } = obj;  //定义变量name，解构赋值，name = obj.name
第2代码，有几重含义：
1、定义了变量name即：let name
2、分解obj的数据结构，取出obj中名为name的属性值，即 “John”
3、将name的属性值，赋值给变量name，即 name = obj.name
注意：左侧的name，有双重含义，一是表示变量名，二是表示欲提取的右侧obj的属性名。

深入思考：
    let obj = { name: 'John' };
    let { name } = obj;
我觉得第2行代码，应可视为下面代码的简化：
let { name: name } = obj;
赋值的左侧，name: name中，前面的name，表示需要从右侧提出的属性名，后面的name表示定义的变量名，当二者同名时，name: name就可以简化为name

由此，就容易自行解析下面代码的结果：
    let obj = { name: 'John' };
    let { name: myname } = obj;


最后，思考一下，下面代码的结果：
    let obj = { name: 'John' };
    let { myname } = obj;