[JS/TS]什么是解构赋值的rest语法? (与展开语法不同)

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

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

你需要登录后才能评论 登录/ 注册