- 用于函数调用时的参数
const func = (a,b,c) => {
//*****
}
const array = [1,2,3]
func(...array)
- 当做函数调用时候的参数就相当于是扩展
- 将每个元素扩展开来当做函数的一个参数
- 用于react传递props属性
render() {
const obj = {name:'zp' ,age: 20}
return (
<Children {...obj} />
)
}
const Children = (props) => {
console.log(props.name)
console.log(props.age)
}
//这样的好处：如果不使用扩展运算符render函数就需要这么写
render() {
const obj = {name:'zp' ,age: 20}
return (
<Children
name = {obj.name}
age={obj.age}
/>
)
}
//这就相当于把对象的名字作为属性传给子组件使用
大大减少代码数量
- 用于数组的拼接和排序
const a = [1,2,3]
const b = [4,5,6]
const c = [...b,...a]
- 用于reducer，产生新对象(新引用)
- 对于reducer而言如果返回的对象或者数组没有改变引用，他就会认为store中的数据没有变化过所以不会触发组件重新render（即使可能数组或对象中的某一项确实发生变化）
- 使用扩展运算符即使元素没变（内容）也会产生一个全新的对象或者数组（新引用）一定保证了store可以更新触发新的render（可以代替Object.assign存在）
const initState = {
name: 'pp',
age: 20
}
const reducer = (action,state) => {
switch (action.type) {
case *** :
return {...state,{name:'aa'}}
}
}
总结：使用扩展运算符的对象或者数组，都是为了将其中的每一个元素可以独立的使用
