... 展开运算符/剩余运算符

展开运算

展开数组

const arr = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr,...arr2,7]; // 合并两数组并添加新值
console.log(arr3) //[1,2,3,4,5,6,7]

展开对象

const o1 = {name : "tom" , age : 18};
console.log(...o1); //报错,不能展开对象
console.log（{...o1}）; // {name : "tom" , age : 18} 通过字面量形式复制了对象
const o2 = {...o1 , name : "jerry" , sex : "男"}
console.log(o2) // {name : "jerry" , age : 18 , sex : "男"} 修改合并对象

剩余运算

function sum(...nums){
	console.log(nums) // [1,2,3,4],数组包着所有参数
} 
sum(1,2,3,4)

// 使用Array.reduce
function sum(...nums){
	// reduce的返回值为最终的和,把和作为函数返回值返回即可
	return sums.reduce((preValue,currentValue)=>{
		return preValue + currentValue
	})
}
console.log(sums(1,2,3,4)); //10

在React中,批量传值有一个展开运算的语法糖

// {}代表代码是js表达式,展开运算不能展开对象,但在React中,标签内可以使用...展开对象
const p = {name:'tom',age:18}
// <MyComponent {...p} />  下方的简写语法糖
// <MyComponent name = "tom" age = "18"> 上方的原始样子