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

1.首先

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

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

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

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

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

2. 内容

1.首先
 2. 内容
 3.这篇文章会告诉你什么
 4. 本文未涉及的内容
 5. 环境
 6.rest语法中的解构赋值
　 6.1.什么是rest语法？
　6.2. 使用 rest 语法
　 6.3. 对象和数组被复制
　 6.4. 不能与原对象或数组同名
　 6.5. Rest语法只能用在最后
　 6.6. Rest语法不能多次使用
　 6.7. 嵌套的 rest 语法不被复制
 七、总结
 8. 参考

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

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

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

4. 本文未涉及的内容

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

下面是参考文章的链接。

[JavaScript] 关于“扩展语法”和“剩余语法”
【JS】spread语法和rest语法如何使用和区别

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

对象
数组
复杂的解构

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 语法不能多次使用。

以上不能多次使用。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 语法时，它必须在末尾。”
这就是你所说的。

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

简而言之，

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. 参考

书：面向有抱负的专业人士的 TypeScript 简介 Ryota Suzuki [作者]@unday
MDN 网络文档
[JavaScript] 关于“扩展语法”和“剩余语法”
【JS】spread语法和rest语法如何使用和区别

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

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