ECMASCRIPT 6 實戰之 擴展運算符

擴展運算符(spreading)是 ECMASCRIPT 6(如下簡稱ES 6) 中又一很是好用的實戰技術, 它的寫法只須要三個點(...),做用則顧名思義,用來展開你想要使用的任意變量,本質上是對全部擁有迭代器接口(Iterator)的對象進行迭代。

典型應用

• 用於展開(迭代)數組元素

const labels = ['ES 5', 'ES 6', 'React.js', 'Vue.js', 'Node.js'];
  console.log('label elements: ', ...labels);
  // ES 5 ES 6 React.js Vue.js Node.js

複製代碼

• 展開未使用的鍵值, 並放到剩餘參數對象中去

數組中的擴展剩餘參數
    只取想要使用的第一個變量
    const labels = ['javascript', 'ES 5', 'ES 6', 'React.js', 'Vue.js', 'Node.js', 'React-Native'];
    const [main, ...rest] = labels;
    main // 'javascript'
    rest   // ["ES 5", "ES 6", "React.js", "Vue.js", "Node.js", "React-Native"];

    對象中的剩餘參數
    const editor = {
      id: '1688',
      name: 'handome_boy',
      age: 18,
      male: 1
    }
    只想要使用 id 字段, 其它字段須要另做它用時:
    const { id, ...rest } = editor;
    console.log(id); // 1688
    console.log(rest); 
    // {
      name: 'handome_boy',
      age: 18,
      male: 1
    }

複製代碼

經典實戰

• 複製數組

const labels = ['掘金', '好看', '實用'];
    const copy_array = [...labels];
    把擴展後的 labels 的元素又放在一個新的數組字面量中, 便可獲得一個新數組, 新數組與舊數組是使用不一樣的內存空間
    labels === copy_array // false
    效果相似 slice, 但用法簡潔, 誰用誰喜歡 : )
複製代碼

• 合併數組

const tag1 = ['前端', '設計', '產品'];
    const tag2 = ['後端', '數據庫', '緩存'];
    const merge_tags = [...tag1, ...tag2];
    console.log(merge_tags);
    // ['前端', '設計', '產品', '後端', '數據庫', '緩存'];
    相比於 tag1.concat(tag2); 擴展運算符的用法簡直簡約到極致, 除了理解容易, 也具備幾何的對稱美
複製代碼

• 合併對象

const response = {
      itemid: 1068,
      name: '掘金',
      tags: ['前端', '設計', '產品'],
      pv: 8888
    }
    const merged_response = { ...response, name: '掘銀', tags: ['後端', '數據庫', '緩存'] };
    console.log(merged_response);
    // {
        itemid: 1068,
        name: '掘銀',
        tags: ['後端', '數據庫', '緩存'],
        pv: 8888
      }
    效果形同 Object.assign, 也是右邊的同名字段會覆蓋左邊的同名字段, 但誰更簡潔, 一目瞭然
複製代碼

• 合併剩餘參數

在定義函數時, 把用不到的參數合併到一個對象中, 集中管理
  const calcalute_date = (mode = 'fullDate', ...rest) => {
    if(mode === 'timestamp') {
      return Date.now();
    }
    return rest.join('-');
  }
  calcalute_date('fullDate', '2019', '05', '26');
  // 2019-05-26

複製代碼

• 在 React 中 透傳 props

const Button = props => {
    const { title = '肯定', style = {}, ...rest } = props;
    return (
      <div {...rest} style={{ ...confirmButtonStyle, ...style }}>{ title }</div>
    )
  }
  組件的某些屬性不須要特地從 props 中解構出來, 那就使用 rest 從組件最外層透傳進來,&emsp;例如 onClick, 或是某些自定義事件,
  這樣即便組件定義 簡單優雅, 也達到了支持透傳任意多的屬性／方法的目的
  另外本例也在style中使用擴展運算符做了 合併樣式組件（style）的操做
複製代碼

三個小點,身材小巧,功能強大,還猶豫什麼,實際開發中, 走你!!!