[JS/TS] 扩展语法不仅仅用于扩展对象和数组

1.首先

传播语法只有在对象和数组可以很容易地同时显示的范围内才为人所知。

关于扩展语法，我有一些我不知道的东西，所以我会输出它。

这篇文章有点长，但本卷总结了传播语法。
我希望你能看到它，即使它只是你感兴趣的东西。

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

2. 内容

1.首先
2. 内容
3.这篇文章会告诉你什么
4.环境
5.什么是展开语法？
　5.1. 什么是展开语法？
　5.2. 使用展开语法
　5.3. 从另一个对象或数组复制
　5.4. 扩展语法对于扩展对象和数组很有用
　5.5. 展开语法可以多次使用
　5.6. 嵌套的东西不被复制
六，结论
7. 参考

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

扩展语法让您摆脱只想扩展对象和数组的看法。

• 来自另一个对象或数组复印
• 使用扩展语法时用{}、[] 包围
• 对于那些使用扩展语法复制的人未反映的更改* 不包括巢
• 不仅仅是扩展语法在前不能通过改变属性来改变
• 在对象或数组内部可以多次使用
• 当您拥有相同的属性时，之后被采纳
• 巢不被复制

4.环境

• Node.js：16.15.1
• 打字稿：4.7.4

5.什么是传播语法

5.1. 什么是展开语法？

如果您查找扩展语法是什么，

将可迭代对象（例如数组表达式或字符串）扩展为预期的零个或多个参数（用于函数调用）或元素（用于数组文字），或者将对象表达式扩展为零个或多个键和值对（在对象文字）可以在预期的地方扩展。

// 一部省略

扩展语法的强大之处在于，无论您的对象、数组等中有多少元素，它都适用于相同的值。

文件中有说明。

参考：MDN 网络文档

简而言之，

另一个对象或数组复制并展开

我，复印我不明白。

5.2. 如何使用展开语法

通过在对象或数组中写入...〇〇〇 来使用展开语法。

5.2.1. 当它是一个对象时

对象传播语法（用法）

type UserInfo = {
	name?: string;
	age?: number;
}

const daishiInfo: UserInfo = {
	name: 'daishi',
	age: 35
};

// オブジェクトのスプレッド構文
const whoAreYou: UserInfo = { ...daishiInfo };

console.log(whoAreYou);  // { name: 'daishi', age: 35 }

daishiInfo 对象的内容都在whoAreYou 中。

5.2.2.对于数组

数组展开语法（用法）

type ProgrammingSkills = Array<string | undefined>

const daishiSkills: ProgrammingSkills = ['JavaScript', 'TypeScript'];

// 配列のスプレッド構文
const whatSkills: ProgrammingSkills = [...daishiSkills];

console.log(whatSkills);  // [ 'JavaScript', 'TypeScript' ]

与对象一样，whatSkills 包含 daishiSkills 数组中的所有内容。

扩展语法适用于对象和数组部署这就是为什么，
使用时，必须用{}、[]括起来。

传播语法（错误用法）

const whoAreYou: UserInfo = ...daishiInfo ;
const whatSkills: ProgrammingSkills = ...daishiSkills;

将导致错误。

传播语法可以轻松复制对象和数组，
如果你不理解这种行为，无意间我写了一篇文章，因为它可能会导致错误。

5.3. 从另一个对象或数组复制

第一的，复制让我们看看这意味着什么。

5.3.1. 当它是一个对象时

对象传播语法（什么是副本？）

type UserInfo = {
	name?: string;
	age?: number;
}

const daishiInfo: UserInfo = {
	name: 'daishi',
	age: 35
};

// オブジェクトのスプレッド構文
const whoAreYou: UserInfo = { ...daishiInfo };

// name に 'manju' を再代入
daishiInfo.name = 'manju';

console.log(daishiInfo); // { name: 'manju', age: 35 }
console.log(whoAreYou);  // { name: 'daishi', age: 35 }

您将manju 重新分配给daishiInfo 对象的name 属性。

原来的daishiInfo 在
{ name: 'daishi', age: 35 } → { name: 'manju', age: 35 }
变成

复制到whoAreYou 在
它仍然是{ name: 'daishi', age: 35 }。

这是复印关于它。

对于那些使用扩展语法复制的人不反映复制源更改

稍后我会写更多，但是巢不被复制。

5.3.2.对于数组

数组扩展语法（什么是副本？）

type ProgrammingSkills = Array<string | undefined>

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

// 配列のスプレッド構文
const whatSkills: ProgrammingSkills = [...daishiSkills];

// ２ 要素目に 'Java' を再代入
daishiSkills[2] = 'Java';

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

同样，与对象一样，
您将Java 重新分配给daishiSkills[2] 元素。

原来的daishiSkills 在
[ 'JavaScript', 'TypeScript', 'PHP', 'Ruby' ] → [ 'JavaScript', 'TypeScript', 'Java', 'Ruby' ]
正在改变，但是

复制到whatSkills 在
它仍然是[ 'JavaScript', 'TypeScript', 'PHP', 'Ruby' ]。

喜欢物体巢不复制数组。

5.4扩展语法对于扩展对象和数组很有用

扩展语法对于扩展、重写和创建新对象和数组很有用。
但是，根据展开语法的描述位置，有没有反映数据重写的地方，所以需要小心。

我想仔细看看。

5.4.1. 当它是一个对象时

对象传播语法（传播语法位置）

type UserInfo = {
	name?: string;
	age?: number;
	email?: string;
	sex?: string;
  
}

const daishiInfo: UserInfo = {
	name: 'daishi',
	age: 35,
	email: 'daishi@example.com',
};

// オブジェクトのスプレッド構文
const manjuInfo: UserInfo = {
	name: 'manju',
	...daishiInfo,
	email: 'manju@example.com',
	sex: 'male',
};

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

我试过重写对象的name、email属性值并添加sex属性值，但是
name只有属性值不能改写。

这比...daishiInfo 的扩展语法要好之前描述蚊子写在后面这是因为反射的数据会发生变化。

name: 'manju' 在扩展语法中优于 ...daishiInfo前面介绍过正在做。
复制的daishiInfo 中的name: 'daishi' 将覆盖name: 'manju'。
所以name: 'manju' 是没有反映.

下一个，
email: 'manju@example.com' 在扩展语法中优于 ...daishiInfo写在后面正在做。
email: 'manju@example.com' 正在覆盖复制自 daishiInfo 的 email: 'daishi@example.com'。
所以email: 'manju@example.com' 被反映了。

在最后，
sex: 'male' 在 daishiInfo 中不存在，所以 sex: 'male' 被反映。

逻辑是从前向后读的，所以很明显，但是我没看懂……

要更改复制目标的值，扩展语法背后描述在

如果是这种描述方式，则不会在复制源中体现出来。

5.4.2.对于数组

数组展开语法（展开语法位置）

type ProgrammingSkills = Array<string | undefined>

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

// 配列のスプレッド構文
const manjuSkills: ProgrammingSkills = ['React', ...daishiSkills, 'Java'];

console.log(daishiSkills); // [ 'JavaScript', 'TypeScript', 'PHP', 'Ruby' ]
console.log(manjuSkills);  // [ 'React', 'JavaScript', 'TypeScript', 'PHP', 'Ruby', 'Java' ]

数组的行为与对象不同。

数组展开语法是该数组的所有元素被复制到那个位置

所以manjuSkills 是[ 'React', 'JavaScript', 'TypeScript', 'PHP', 'Ruby', 'Java' ]，

• 添加了0 元素和5 元素
• 从1 元素到4 元素，daishiSkills 数组被复制。
  我想你可以看到。

5.5. 展开语法可以多次使用

单个对象或数组允许多个展开语句。
然而，同样，对象和数组的行为是不同的。

5.5.1. 当它是一个对象时

对象传播语法（多种用途）

type UserInfo = {
	name?: string;
	age?: number;
	email?: string;
	sex?: string;
}

const daishiInfo: UserInfo = {
	name: 'daishi',
	age: 35,
	email: 'daishi@example.com',
};

const manjuInfo: UserInfo = {
	name: 'manju',
	age: 132,
	sex: 'female',
};

// オブジェクトの複数のスプレッド構文
const whoAreYou: UserInfo = {
	...daishiInfo,
	...manjuInfo,
};

console.log(whoAreYou); // { name: 'manju', age: 132, email: 'daishi@example.com', sex: 'female' }

让我们用扩展语法连接这两个对象。

如您所见，您可以毫无问题地使用多种展开语法。

但是，有一个警告，

• name 属性是 manjuInfo 的值
• age 属性是 manjuInfo 的值
• email 属性是 daishiInfo 的值
• sex 属性是 manjuInfo 的值

它已成为。

这是，

• name 和 age 属性用 manjuInfo 覆盖 daishiInfo 值
• email属性只有daishiInfo，所以daishiInfo的值
• sex属性只有manjuInfo，所以manjuInfo的值

这就是为什么。

稍后采用相同的属性

对于未定义的属性，使用已定义的属性。

5.5.2.对于数组

多重扩展语法也可用于数组。

数组展开语法（多种用途）

type ProgrammingSkills = Array<string | undefined>

const daishiSkills: ProgrammingSkills = ['JavaScript', 'TypeScript', 'PHP', 'Ruby'];
const manjuSkills: ProgrammingSkills = ['JavaScript', 'TypeScript', 'React', 'PHP'];

// 配列の複数のスプレッド構文
const programmingSkills: ProgrammingSkills = [
	...daishiSkills,
	...manjuSkills
];

console.log(programmingSkills); // ['JavaScript', 'TypeScript', 'PHP', 'Ruby', 'JavaScript', 'TypeScript', 'React', 'PHP']

如您所见，与对象不同，

即使相同的元素编号包含相同的值，两个值都被采用。

5.6. 嵌套的东西不被复制

嵌套对象和数组不会被复制。

嵌套展开构造应谨慎处理，因为值可能会意外更改。

5.6.1.当它是一个对象时

对象传播语法（嵌套错误用法）

type Profile = {
	name?: string;
	age?: number;
	programmingSkills?: {
		frontEnd?: Array<string | undefined>;
	}
}

const daishiProfile: Profile =
	{
		name: 'daishi',
		age: 35,
		programmingSkills: {
			frontEnd: ['JavaScript', 'TypeScript'],
		}
	};

// オブジェクトのスプレッド構文
const whoAreYou: Profile = {
	...daishiProfile
};

// daishiProfile に再代入
daishiProfile.name = 'manju';
daishiProfile.programmingSkills.frontEnd = ['PHP', 'Ruby'];

console.log(daishiProfile); // { name: 'manju',  age: 35, programmingSkills: { frontEnd: ['PHP', 'Ruby'] } }
console.log(whoAreYou);     // { name: 'daishi', age: 35, programmingSkills: { frontEnd: ['PHP', 'Ruby'] } }

以上是
使用扩展语法将daishiProfile 对象复制到whoAreYou 对象后，
我重新分配了daishiProfile 的name 和programmingSkills.frontEnd 属性。

在这里，返回了意外的值。

whoAreYou 是
我希望它是{ name: 'daishi', age: 35, programmingSkills: { frontEnd: ['PHP', 'Ruby'] } }，
它是{ name: 'daishi', age: 35, programmingSkills: { frontEnd: ['JavaScript', 'TypeScript'] } }。

简而言之，
复制目标的whoAreYou 的name 属性被重新分配以前的包含'daishi' 的
programmingSkills.frontEnd 属性被重新分配后部，包含{ frontEnd: ['PHP', 'Ruby'] }。

由此，

不复制嵌套对象

我明白这一点。

那么如果你也想复制嵌套值呢？
嵌套部分也是传播语法我会用它包围它

对象传播语法（嵌套正确用法）

type Profile = {
	name?: string;
	age?: number;
	programmingSkills?: {
		frontEnd?: Array<string | undefined>;
	}
}

const daishiProfile: Profile =
	{
		name: 'daishi',
		age: 35,
		programmingSkills: {
			frontEnd: ['JavaScript', 'TypeScript'],
		}
	};

// ネストしたオブジェクトのスプレッド構文
const whoArtYou: Profile = {
	...daishiProfile,
	programmingSkills: { ...daishiProfile.programmingSkills }
;

// daishiProfile に再代入
daishiProfile.name = 'manju';
daishiProfile.programmingSkills.frontEnd = ['PHP', 'Ruby'];

console.log(daishiProfile); // { name: 'manju',  age: 35, programmingSkills: { frontEnd: ['PHP', 'Ruby'] } }
console.log(whoArtYou);     // { name: 'daishi', age: 35, programmingSkills: { frontEnd: ['JavaScript', 'TypeScript'] } }

如果你用扩展语法包围嵌套部分，
即使您将其重新分配给复制源，目的地未更改我想你可以理解。

（文风昏昏欲睡……）

复制嵌套对象时，嵌套部分也必须包含在展开语法中

5.6.2.对于数组

数组和对象一样，如果嵌套，则不会被复制。

数组扩展语法（嵌套错误用法）

type ProgrammingSkills = Array<Array<string | undefined>>

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

// 配列のスプレッド構文
const whatSkills: ProgrammingSkills = [...daishiSkills];

// daishiSkills に再代入
daishiSkills[1][0] = 'Java';

console.log(daishiSkills); // [ [ 'JavaScript', 'TypeScript' ], [ 'Java', 'Ruby' ] ]
console.log(whatSkills);   // [ [ 'JavaScript', 'TypeScript' ], [ 'Java', 'Ruby' ] ]

复制源中的daishiSkills 的PHP 通过重新分配更改为Java。

我不想更改的复制目标的whatSkills 也更改为Java。

在复制嵌套数组和对象时，
嵌套部分也是传播语法我会用它包围它

数组对象（嵌套正确用法）

type ProgrammingSkills = Array<Array<string | undefined>>

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

// // ネストした配列のスプレッド構文
const whatSkills: ProgrammingSkills = [[...daishiSkills[0]], [...daishiSkills[1]]];

// オブジェクトのスプレッド構文
daishiSkills[1][0] = 'Java';

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

如果你用扩展语法包围嵌套部分，
即使您将其重新分配给复制源，目的地未更改我想你可以理解。

六，结论

我认为传播语法只扩展对象和数组，但是
当我看着它时，我觉得它在后面很深。

特别是，我不知道我是在复制还是调用相同的东西。

我很害怕我必须意识到这一点，因为它可能会在意想不到的地方导致错误，而且我到目前为止所拥有的代码还可以。

如有问题，我们会尽快回复...

如果您在本文中发现任何误解，请告诉我。

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

7. 参考

书：面向有抱负的专业人士的 TypeScript 简介 Ryota Suzuki [作者]
MDN 网络文档

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

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