js 擴展運算符(...)的用法

在日常開發中，我們在看js代碼時，經常會看到（...）這樣的符號。這里介紹一下它的含義和作用。

定義：

擴展運算符(...)是ES6的語法，用於取出參數對象的所有可遍歷屬性，然后拷貝到當前對象之中。

基本用法

let person = {name: "Amy", age: 15}
let someone = { ...person }
someone  // {name: "Amy", age: 15}

特殊用法

數組

由於數組是特殊的對象，所以對象的擴展運算符也可以用於數組。

let foo = { ...['a', 'b', 'c'] };
foo
// {0: "a", 1: "b", 2: "c"}

空對象

如果擴展運算符后面是一個空對象，則沒有任何效果。

let a = {...{}, a: 1}
a // { a: 1 }

Int類型、Boolen類型、undefined、null

如果擴展運算符后面是上面這幾種類型，都會返回一個空對象，因為它們沒有自身屬性。

// 等同於 {...Object(1)}
{...1} // {}

// 等同於 {...Object(true)}
{...true} // {}

// 等同於 {...Object(undefined)}
{...undefined} // {}

// 等同於 {...Object(null)}
{...null} // {}

字符串

如果擴展運算符后面是字符串，它會自動轉成一個類似數組的對象

{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

對象的合並

let age = {age: 15}
let name = {name: "Amy"}
let person = {...age, ...name}
person; // {age: 15, name: "Amy"}

注意事項

自定義的屬性和拓展運算符對象里面屬性的相同的時候：

自定義的屬性在拓展運算符后面，則拓展運算符對象內部同名的屬性將被覆蓋掉。

let person = {name: "Amy", age: 15};
let someone = { ...person, name: "Mike", age: 17};
someone;  //{name: "Mike", age: 17}

自定義的屬性在拓展運算度前面，則變成設置新對象默認屬性值。

let person = {name: "Amy", age: 15};
let someone = {name: "Mike", age: 17, ...person};
someone;  //{name: "Amy", age: 15}