记录扩展运算符(...)的两个使用场景

作为一个前端开发，每天都会与扩展运算符打交道。本篇文章先简单介绍下它的基本用法，然后再说说我最近在项目中使用到的两个场景。

介绍

先简单介绍下基本语法，照顾下初学者。

扩展运算符（spread）是三个点（...）。

可以扩展一个数组。

console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5

也可以用在函数调用。

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

ES2018 将这个运算符引入了对象。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

使用场景

• 动态控制 DOM 元素的某个属性

Div 的属性 className 是可选的，flag 为 true 时传入，否则不传。

      <div
          id="id1"
          {...(flag ? { className: 'class1' } : {})}
      >
        我是一个 DIV 元素
      </div>

• 动态控制接口入参

参数 param1 是可选的，flag 为 true 时传入，否则不传。

    const flag = true;
    const params = {
      ...(flag ? { param1: 'xxx' } : {})
      ...otherParams
    };
    
    // 调用接口