DoubleRight The past of the world Blog's

TypeScript 中的展开运算符

TypeScript 中的展开运算符

原文： https://howtodoinjava.com/typescript/spread-operator/

在 TypeScript 中，可以使用展开运算符（以省略号的形式）来初始化另一个数组或对象中的数组和对象。 您还可以使用展开运算符进行对象分解。

展开运算符与apply()方法

JavaScript 的apply()方法调用具有给定this值的函数，并以array提供参数。 例如，在下面的示例中，两个突出显示的函数调用是等效的。 它们都打印相同的输出。

var numbers = [1, 2, 3, 4, 5];

console.log.apply(console, numbers);	//1 2 3 4 5 

console.log("1", "2", "3", "4", "5");	//1 2 3 4 5

展开运算符（ECMAScript 6 的一部分）是apply()方法的更好版本。 使用展开运算符，您可以像上面这样写上面的语句。

var numbers = [1, 2, 3, 4, 5];

console.log(...argsArray);		//1 2 3 4 5

展开运算符示例

  1. 从另一个数组初始化数组

    您可以使用展开运算符以给定的方式从现有数组创建数组。

    let origArrayOne = [ 1, 2, 3]; 							//1,2,3
let origArrayTwo = [ 4, 5, 6]; 							//4,5,6

//Create new array from existing array
let copyArray = [...origArrayOne]; 						//1,2,3

//Create new array from existing array + more elements
let newArray = [...origArrayOne, 7, 8];				//1,2,3,7,8 

//Create array by merging two arrays
let mergedArray = [...origArrayOne, ...origArrayTwo]; 	//1,2,3,4,5,6

  2. 从另一个对象初始化对象

    您还可以使用展开运算符以给定的方式从现有对象创建对象。

    let origObjectOne = {a: 1, b: 2, c: 3}; 				//{a: 1, b: 2, c: 3}
let origObjectTwo = {d: 4, e: 5, f: 6};					//{d: 4, e: 5, f: 6}

//Create new object from existing object
let copyObject = {...origObjectOne}; 						//{a: 1, b: 2, c: 3}

//Create new object from existing object + more elements
let newObject = {...origObjectOne, g: 7, h: 8};				//{a: 1, b: 2, c: 3, g: 7, h: 8}

//Create object by merging two objects
let mergedObject = {...origObjectOne, ...origObjectTwo}; 	//{a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

  3. 对象解构

    解构赋值语法是一个 JavaScript 表达式，可以将数组中的值或对象中的属性解压缩为不同的变量。

    function myFunction(x, y, z) { 
	console.log( x );
	console.log( y );
	console.log( z );
}

var parametersArray = [0, 1, 2];

myFunction(...parametersArray);		//0, 1, 2

将我的问题放在评论部分。

学习愉快！

参考： Mozilla Docs

搜索