es6 ...运算符

情景描述

• 经常会看到...props
• 无状态组件的参数中
• 或者是在函数定义的参数中

坑

• 请不要把只要出现...的地方当做同一个操作符
  • 剩余操作符
    • 通常用于函数定义时的最后一个参数
    • ...a:a是一个数组
    • 相当于是整和
  • 扩展语法
    • 类似于结构赋值
    • 相当于是将一个对象或者一个数组中的每一个元素全部都解构出来单独使用
    • 相当于是解构

扩展语法

• 用于函数调用时的参数

  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'}}
      }
    }
  

  总结：使用扩展运算符的对象或者数组，都是为了将其中的每一个元素可以独立的使用

剩余操作符

• 使用场景我见到的好像只有在函数定义的时候
  • 当不确定会返回几个参数的时候直接使用...params代替
  • params就会变成一个数组 收录传入的参数当做数组中的一个元素

  总结：剩余操作符和扩展操作符是一个相反的过程，用来将数据整合在一个数组中