首頁
學習紀錄
遊戲心得影視Life書單案件檔案
Side Projects委託作品與二創互動實驗場
Kurau
百百 BLOG
首頁
學習紀錄
遊戲心得影視Life書單案件檔案
Side Projects委託作品與二創互動實驗場
Kurau

Kurau Blog

「隨心而寫,真真假假,都是我」

一個記錄生活、輸出興趣的個人空間。
遊戲、影視、閱讀、學習……每一段體驗都值得留下文字。

頁面導覽

  • 學習紀錄
  • 遊戲心得
  • 影視Life
  • 書單
  • 委託作品與二創
  • Kurau
  • 合作邀請

找到我

歡迎來 Discord 找我聊天!

“曾經發生的事不可能忘記,只是暫時想不起來而已。”-《神隱少女》

© 2026 Kurau All rights reserved

面試考題

Spread Operators 展開運算符

By Kurau·Updated 2026-05-09·4 分鐘閱讀

展開運算符是把一個陣列展開成個別的值的速寫語法,它只會在陣列字面定義與函式呼叫時使用

展開運算符(Spread Operator)是把一個陣列展開(expand)成個別值,這個運算符後面必定接著一個陣列。最常見的是用來組合(連接)陣列,對應的陣列方法是concat,以下是一個簡單的範例:

const params = [ "hello", true, 7 ]
const other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]
JavaScript

展開運算符可以作陣列的淺拷貝,當然陣列的淺拷貝有很多種方式,這是新的一種語法,也是目前語法上最簡單的一種:

const arr = [1,2,3]
const arr2 = [...arr]

arr2.push(4) //不會影響到arr
//arr2 = [1,2,3,4]
JavaScript

註: 淺拷貝(shallow-copy)對於陣列中的陣列值(多維陣列),或是有複雜的物件值情況時,是只會拷貝參照值而已。

註: 上述的展開運算符在陣列字面中使用時,並沒有限制位置,或是在個數。像const arr = [...a, 1, ...b]這樣的語法都是可以的。

你也可以用來把某個陣列展開,然後傳入函式作為傳入參數值,例如下面這個一個加總函式的範例:

function sum(a, b, c) {
  return a + b + c
}
const args = [1, 2, 3]
sum(…args) // 6
JavaScript

對照ES5中的相容語法,則是用apply函式,它的第二個參數也是使用陣列,以下是用ES5語法與上面相同結果的範例程式:

function sum(a, b, c) {
  return a + b + c;
}

var args = [1, 2, 3];
sum.apply(undefined, args) ;// 6
JavaScript

展開運算符還有一個特別的功能,就是把可迭代(iterable)或與陣列相似(Array-like)的物件轉變為陣列,在JavaScript語言中內建的可迭代(iterable)物件有String、Array、TypedArray、Map與Set物件,而與陣列相似(Array-like)的物件指的是函式中的隱藏物件"arguments"。下面的範例是轉變字串為字元陣列:

const aString = "foo"
const chars = [ ...aString ] // [ "f", "o", "o" ]
Plain

下面的範例是把函式中的隱藏偽物件"arguments"轉成真正的陣列物件:

arguments是JavaScript中原生的物件,它代表函數中傳遞給函數的參數。它有類似陣列的功能,但並不是陣列。

function aFunc(x){
  console.log(arguments)
// Arguments [1, callee: ƒ, Symbol(Symbol.iterator): ƒ]
  console.log(Array.isArray(arguments))
// false

  //轉為真正的陣列
  const arr = [...arguments]
  console.log(arr)
// [1]
  console.log(Array.isArray(arr))
// true
}

aFunc(1)
aFunc(1, 2)
JavaScript

目錄

    ◆ 相關文章

    • Rest Operator 其餘運算符

      2026-05-09
    • Async function-Await 函式

      2026-06-02
    • throw Error用法

      2026-06-02
    • TypeScript 特性 - Interface

      2026-06-02
    ← 上一篇setInterval 和 setTimeout下一篇 →日本旅遊規劃APP大對比 (無業配)

    ◆ 關於作者

    Kurau

    個人寫作 / 創作的 SoT,記錄遊戲、影視、學習與生活。

    更多 Kurau 的文章