[JS/TS]什么是解构赋值的rest语法？（与展开语法不同）

时间：2022-12-27阅读：37来源：柠檬博客作者：柠檬博客

1.首先

这将是解构赋值的第四阶段文章。

这一次，将是一篇关于解构赋值的其余语法的文章。

我写过关于对象、数组、复杂解构和解构的文章。本文介于数组部分和复杂的解构和赋值部分之间。

如果您能指出我误解的地方，我将不胜感激。

我还写了一篇类似rest语法的扩展语法的文章，所以如果您能看到其他文章，我会很高兴。

2. 内容

3.你可以从这篇文章中学到什么

“为了解构休息语法我不知道”可以克服。

在 rest 语法中破坏赋值不同于扩展语法原始对象或数组不能使用相同的名称使用 rest 语法创建的对象和数组是被复制其余语法为只能在最后使用巢其余的语法是未复制巢解构赋值时对于每个巢您可以使用 rest 语法 4. 本文未涉及的内容

休息语法什么时候传播语法如果您可以参考其他文章，我将不胜感激，因为我不会处理两者之间的区别。

下面是参考文章的链接。

[JavaScript] 关于“扩展语法”和“剩余语法”

另外，解构赋值的详细解释总结在下一篇文章中，我就省略了。

对象数组复杂的解构 5.环境打字稿：4.7.4 Node.js：16.15.1 6.rest语法中的解构赋值 6.1.什么是rest语法？

使用扩展运算符的... 写入...変数名，并且把剩下的放在一起有特点。

有一种类似的东西叫做传播语法。再次，写...。

(但我写了在本文中rest语法和spread语法的区别我将省略详细的解释。 )

大致说来，

rest语法和spread语法的区别

休息语法是“剩下的一个放在一起”传播语法牙齿”部署做”

是。

有了这个意识，“咦？这是rest语法还是spread语法？”我认为你可以防止这种情况。

由于我之前写过一篇总结展开语法的文章，“什么是传播语法？”我想已经成为的人看了这篇文章就能明白了。

6.2. 使用 rest 语法

我们将看到如何在简单的对象和数组中使用 rest 语法。

在解构赋值中写入...変数名。

这样你就可以在一个变量中存储多个键或值。搜集可以赋值。

请参阅下面的详细资料。

6.2.1.当它是一个对象时对象解构rest语法（用法）

const manjuInfo = {
	nickname: 'manju',
	age: 35,
	email: 'manju@example.com',
	sex: 'male',
};

// レスト構文を用いた分割代入
const { nickname, ...info } = manjuInfo;

console.log(nickname); // manju
console.log(info);     // { age: 35, email: 'manju@example.com', sex: 'male' }

解构赋值中的nickname 是

不进行解构赋值写入

const nickname = manjuInfo.nickname;

（有关详细信息，请参阅本文）。

...info 部分是其余语法的解构赋值。

然而，如前所述nickname 以外的属性其余的到变量info概括增加。

语义上，

在不解构赋值的情况下编写 rest 语法

const info = {
  manjuInfo.age,
  manjuInfo.email,
  manjuInfo.sex,
};

变成。

这样，

您可以通过使用 rest 语法中的解构赋值为单个对象赋值。可以概括

6.2.2.对于数组数组解构rest语法（如何使用）

const daishiSkills = ['JavaScript', 'TypeScript', 'PHP', 'Ruby', 'AWS'];

// レスト構文を用いた分割代入
const [firstSkill, ...otherSkills] = daishiSkills;

console.log(firstSkill);  // JavaScript
console.log(otherSkills); // [ 'TypeScript', 'PHP', 'Ruby’, ‘AWS’ ]

对数组使用 rest 语法的解构赋值与对象的使用方式相同。

解构赋值中的firstSkill 是

无需解构赋值即可写入

  const firstSkill = daishiSkills[0];

（有关详细信息，请参阅本文）。

...otherSkills 部分是其余语法的解构赋值。

0 以外的元素到变量 otherSkills概括增加。

语义上，

在不解构赋值的情况下编写 rest 语法

const otherSkills = [
  daishiSkills.[1],
  daishiSkills.[2],
  daishiSkills.[3],
  daishiSkills.[4],
];

变成。

otherSkills 像这样的变量收集其余元素我在这。

通过在rest语法中使用解构赋值，可以将值赋给单个数组。可以概括

6.3. 对象和数组被复制

复制使用解构赋值创建的对象和数组。

相似地，还复制了带有 rest 语法的解构赋值.

嵌套对象和数组除外。至于嵌套被解释。

这里我们解释一下什么是副本。

6.3.1.当它是一个对象时对象解构rest语法（副本）

const manjuInfo = {
    nickname: 'manju',
    age: 35,
    email: 'manju@example.com',
    sex: 'male',
};

// レスト構文を用いた分割代入
const { nickname, ...info } = manjuInfo;

// コピー元の manjuInfo の nickname, email に再代入
manjuInfo.nickname = 'daishi';
manjuInfo.email = 'daishi@example.com';

console.log(manjuInfo); // {nickname: 'daishi', age: 35, email: 'daishi@example.com', sex: 'male' }
console.log(nickname);  // manju
console.log(info);      // { age: 35, email: 'manju@example.com', sex: 'male' }

我重新分配了manjuInfo 对象的nickname、email 属性。

原来的manjuInfo 是

const manjuInfo = 
{
    nickname: 'manju',
    age: 35,
    email: 'manju@example.com',
    sex: 'male',
};

从

const manjuInfo = 
{
    nickname: 'daishi',
    age: 35, 
    email: 'daishi@example.com',
    sex: 'male'
};

变成

解构创建的niciname 和info 是

const nickname = manju;

const info = 
{
    age: 35,
    email: 'manju@example.com', 
    sex: 'male'
};

并没有改变。

这是复印关于它。

通过解构赋值创建的对象是未反映原始数组的更改

6.3.2.对于数组数组解构rest语法（副本）

const daishiSkills = ['JavaScript', 'TypeScript', 'PHP', 'Ruby', 'AWS'];

// レスト構文を用いた分割代入
const [firstSkill, ...otherSkills] = daishiSkills;

// コピー元の daishiSkills の 0, 2 要素目に再代入
daishiSkills[0] = 'React';
daishiSkills[2] = 'Java';

console.log(daishiSkills); // [ 'React', 'TypeScript', 'Java', 'Ruby', 'AWS' ]
console.log(firstSkill);   // JavaScript
console.log(otherSkills);  // [ 'TypeScript', 'PHP', 'Ruby’, ‘AWS’ ]

数组像对象一样被复制。

daishiSkills 的 0、2 元素已重新分配。

原来的daishiSkills 是

const daishiSkills = ['JavaScript', 'TypeScript', 'PHP', 'Ruby', 'AWS'];

从

const daishiSkills = ['React', 'TypeScript', 'Java', 'Ruby', 'AWS']

变成

解构创建的firstSkill 和otherSkills 是

const firstSkill = JavaScript;

const otherSkills = ['TypeScript', 'PHP', 'Ruby’, ‘AWS’];

并没有改变。

使用解构赋值创建的数组是未反映原始数组的更改

6.4. 不能使用与原始对象或数组相同的名称

没有休息语法的解构赋值是我必须使用与属性键相同的变量名（有关详细信息，请参阅本文）。

对于 rest 语法中的变量名，不能与原始对象名或数组名同名.

解释不具有相同名称的含义。

6.4.1.当它是一个对象时对象解构rest语法（变量名）

const manjuInfo = {
	nickname: 'manju',
	age: 35,
	email: 'manju@example.com',
	sex: 'male',
};

// 元のオブジェクト名と同じ名前のレスト構文
const { ...manjuInfo } = manjuInfo;

我在解构赋值中定义了一个变量名manjuInfo，它与原始对象的变量名相同。

当我尝试编译时，我得到一个错误。

错误内容

无法重新声明块范围变量“manjuInfo”

因为manjuInfo 已经被声明了重新声明你不能。

原始对象的变量名和相同的变量名不能用于在 rest 语法中解构赋值

6.4.2.对于数组数组解构赋值的 Rest 语法（变量名）

const daishiSkills = ['JavaScript', 'TypeScript', 'PHP', 'Ruby', 'AWS'];

// 元の配列名と同じ名前のレスト構文
const [...daishiSkills] = daishiSkills;

我在解构赋值中定义了相同的变量名daishiSkills作为原始数组的变量名。

当我尝试编译时，我得到一个错误。

错误内容

无法重新声明块范围变量“daishiSkills”

因为daishiSkills 已经被声明了重新声明你不能。

原始数组的变量名和相同的变量名不能用于在 rest 语法中解构赋值

6.5. Rest语法只能用在最后

带有解构赋值的 rest 语法中的变量定义是只有在最后你不能。

如果你在中间使用它，就会出现错误。

必须注意变量定义的顺序。

让我们看看这也意味着什么。

6.5.1. 当它是一个对象时对象解构rest语法（放置）

const manjuInfo = {
    nickname: 'manju',
    age: 35,
    email: 'manju@example.com',
    sex: 'male',
};

// レスト構文を分割代入の途中に入れる
const { nickname, ...info, sex } = manjuInfo;

我将其余语法 ...info 放在解构赋值的中间。

当我尝试编译时，我得到一个错误。

错误内容

在解构模式中，剩余元素必须位于最后。

总之，“当使用带有解构赋值的 rest 语法时，它必须在末尾。”你说

rest 语法中的解构赋值只能在末尾使用

在休息语法剩菜剩饭违背了结合的思想。

6.5.2.对于数组数组解构rest语法（排列）

const daishiSkills = ['JavaScript', 'TypeScript', 'PHP', 'Ruby', 'AWS'];

// レスト構文を用いた分割代入
const [firstSkill, ...otherSkills, infra] = daishiSkills;

我将其余语法 ...otherSkills 放在解构赋值的中间。

编译时也出现错误。

错误内容

在解构模式中，剩余元素必须位于最后。

与对象一样“当使用带有解构赋值的 rest 语法时，它必须在末尾。”这就是你所说的。

简而言之，

rest 语法中的解构赋值只能在末尾使用

6.6. Rest语法不能多次使用

Rest 语法不能多次使用。

以上不能多次使用。然而，如前所述

剩菜剩饭这是因为它违反了分组

另外，请参阅下面的内容。

6.6.1.当它是一个对象时对象解构rest语法（多种用途）

const manjuInfo = {
    nickname: 'manju',
    age: 35,
    email: 'manju@example.com',
    sex: 'male',
};

// 複数のレスト構文を用いた分割代入
const { ...publicInfo, ...privateInfo } = manjuInfo

我在解构赋值中写了两个剩余结构...publicInfo 和...privateInfo。

我也遇到了错误。

错误内容

在解构模式中，剩余元素必须位于最后。

我得到了和以前一样的错误。

“当使用带有解构赋值的 rest 语法时，它必须在末尾。”这就是你所说的。

发生同样的错误是因为在析构赋值中间使用了析构赋值，而在最后使用了析构赋值。

简而言之，

rest语法中的解构赋值不能多次使用

这就是我要说的。

6.6.2.对于数组数组解构赋值的 Rest 语法（多次使用）

const daishiSkills = ['JavaScript', 'TypeScript', 'PHP', 'Ruby'];

// 複数のレスト構文を用いた分割代入
const [...frontSkills, ...backSkills] = daishiSkills;

我在解构赋值中写了两个剩余结构...frontSkills 和...backSkills。

同样，我遇到了一个错误。

错误内容

在解构模式中，剩余元素必须位于最后。

这也是同样的错误。

即数组

rest语法中的解构赋值不能多次使用

关于它。

6.7. 嵌套的 rest 语法不被复制

无法复制嵌套对象和数组。

要复制嵌套对象，请使用

使用库对嵌套对象使用 rest 语法

我相信有两种模式。

在这里，我们将看方法 2，“对嵌套对象使用 rest 语法”。

使用图书馆更容易，嵌套对象的行为方式我选择了2。因为我想看。

似乎以下用作1的库。还没认真用过，就只介绍一下m(_ _)m

6.7.1.当它是一个对象时对象解构rest语法（嵌套）

const manjuInfo = {
    publicInfo: {
        nickname: 'manju',
        age: 35,
    },
    privateInfo: {
        email: 'manju@example.com',
        sex: 'male',
    },
};

// レスト構文を用いた分割代入
const {...whoAreYou} = manjuInfo;

// ネストしたオブジェクトのレスト構文を用いた分割代入
manjuInfo.publicInfo.nickname = 'daishi';
manjuInfo.privateInfo.email = 'daishi@example.com';

console.log(manjuInfo); // { publicInfo: { nickname: 'daishi', age: 35 }, privateInfo: { email: 'daishi@example.com', sex: 'male' } }
console.log(whoAreYou); // { publicInfo: { nickname: 'daishi', age: 35 }, privateInfo: { email: 'daishi@example.com', sex: 'male' } }

在其余语法中使用解构赋值创建 whoAreYou 对象后，重新分配了 manjuInfo 的 publickInfo.nickname 和 priveteInfo.email 属性。

由于它应该在重新分配之前复制manjuInfo，whoAreYou 是

{
    publicInfo: {
        nickname: 'manju',
        age: 35,
    },
    privateInfo: {
        email: 'manju@example.com',
        sex: 'male',
    },
};

我们希望它在哪里，

{ 
    publicInfo: { 
        nickname: 'daishi', // ← 意図しない変更箇所
        age: 35
    },
    privateInfo: { 
        email: 'daishi@example.com', // ← 意図しない変更箇所
        sex: 'male'
    },
};

它已成为。

publicInf.nickname 和 privateInfo.email 属性都被重新分配后部包含的值

由此，

不复制嵌套对象

我明白这一点。

要复制嵌套对象，您必须在嵌套对象部分使用其余语法。

对象解构 rest 语法（也复制嵌套）

const manjuInfo = {
    publicInfo: {
        nickname: 'manju',
        age: 35,
    },
    privateInfo: {
        email: 'manju@example.com',
        sex: 'male',
    },
};

// ネストしたオブジェクトのレスト構文を用いた分割代入
const {
    publicInfo: {...publicInfo},
    privateInfo: {...privateInfo},
} = manjuInfo;

// nickname と email プロパティに再代入
manjuInfo.publicInfo.nickname = 'daishi';
manjuInfo.privateInfo.email = 'daishi@example.com';

console.log(manjuInfo);   // { nickname: 'daishi', age: 35, privateInfo: { email: 'daishi@example.com', sex: 'male' } }
console.log(publickInfo); // { nickname: 'manju', age: 35 }
console.log(privateInfo); // { email: 'manju@example.com', sex: 'male' }

如果嵌套部分也使用 rest 语法，即使您将其重新分配给复制源，目的地未更改我想你能理解。

复制嵌套对象时，嵌套部分也使用 rest 语法

这里，如果我们看一下嵌套对象的带有 rest 语法的解构赋值：

“我告诉过你，你不能在解构中使用多个休息结构！？”“我不是告诉过你，你不能中途使用它吗！？”

你可以使用它！！

我想一个问题诞生了。

const {
    publicInfo: {...publicInfo},
    privateInfo: {...privateInfo},
} = manjuInfo;

这被解释为可用，因为它与嵌套对象的内容集成在一起。

↑ 我为有点模棱两可而道歉。如果您能指出并给我建议，我将不胜感激。

6.7.2.对于数组数组解构rest语法（嵌套）

const daishiSkills = [
  ['JavaScript', 'TypeScript'],
  ['PHP', 'Ruby'], ['AWS']
];

// ネストした配列のレスト構文を用いた分割代入
const [...whatSkills] = daishiSkills;

//'JavaScript'と 'Ruby' の値を再代入で変更
daishiSkills[0][0] = 'React';
daishiSkills[1][1] = 'Java';

console.log(daishiSkills); // [ [ 'React', 'TypeScript' ], [ 'PHP', 'Java' ], [ 'AWS' ] ]
console.log(whatSkills);   // [ [ 'React', 'TypeScript' ], [ 'PHP', 'Java' ], [ 'AWS' ] ]

在使用 rest 语法中的解构赋值创建 whatSkills 数组后，daishiSkills 的 JavaScript 和 'Ruby 的 email 属性已重新分配。

由于其行为类似于对象的行为，因此省略了说明。

您已在不想更改的解构赋值中更改了whatSkills 的值。

要复制嵌套部分，嵌套部分也应该在 rest 语法中使用。

数组解构赋值的 Rest 语法（以及复制嵌套）

const daishiSkills = [['JavaScript', 'TypeScript'], ['PHP', 'Ruby'], ['AWS']];

// ネストした配列のレスト構文を用いた分割代入
const [
  [...frontSkills],
  [...backSkills],
  [...infraSkills]
] = daishiSkills;

//'JavaScript'と 'Ruby' の値を再代入で変更
daishiSkills[0][0] = 'React';
daishiSkills[1][1] = 'Java';

console.log(daishiSkills); // [ [ 'React', 'TypeScript' ], [ 'PHP', 'Java' ], [ 'AWS' ] ]
console.log(frontSkills);  // [ 'JavaScript', 'TypeScript' ]
console.log(backSkills);   // [ 'PHP', 'Ruby' ]
console.log(infraSkills);  // [ 'AWS' ]

如果你在嵌套部分用rest语法定义了一个变量，你可以看到它可以被复制。

* 与对象一样，在嵌套解构的情况下可以使用多个剩余构造。

七、总结

我很难理解 rest 语法和 spread 语法，因为它们很相似。

此外，还涉及拆分分配，所以它是一个???状态。

解构赋值、rest 语法、spread 语法非常好用并且被广泛使用，我想确保我理解并继续下一步。

如果您也可以阅读其他文章，我会很高兴?‍♂️

这是一篇很长的文章，但感谢您阅读到最后。

8. 参考 @unday [JavaScript] 关于“扩展语法”和“剩余语法”

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308623518.html

上一篇:[FormBridge] 动态更改下拉选项下一篇:D8调试工具——jsvu的使用细则

37人参与， 0条评论登录后显示评论回复

注册

[JS/TS]什么是解构赋值的rest语法？ （与展开语法不同）

友情链接

[JS/TS]什么是解构赋值的rest语法？（与展开语法不同）