擴充套件運算子和rest運算子

2022-04-16 07:16:09 字數 3676 閱讀 9701

擴充套件運算子用三個點號表示,功能是把陣列或類陣列物件展開成一系列用逗號隔開的值

一、拆分陣列

擴充套件運算子可以直接把陣列拆分成用逗號隔開的值

<

template

>

<

section

class

="p-10"

>

<

el-button

type

="danger"

@click

="get()"

>點選

el-button

>

section

>

template

>

<

script

>

export

default

; },

methods: ,

change(a, b, c) }};

script

>

二、陣列深拷貝

可以使用擴充套件運算子特性進行陣列的深拷貝

<

template

>

<

section

class

="p-10"

>

<

el-button

type

="danger"

@click

="get()"

>點選

el-button

>

section

>

template

>

<

script

>

export

default

; },

methods: }};

script

>

三、陣列合併

擴充套件運算子可以進行陣列的合併,把其他的東西合併成乙個新的陣列

<

template

>

<

section

class

="p-10"

>

<

el-button

type

="danger"

@click

="get()"

>點選

四、字串轉陣列

擴充套件運算子可以直接把字串拆分用逗號分隔開的陣列

<

template

>

<

section

class

="p-10"

>

<

el-button

type

="danger"

@click

="get()"

>點選

rest運算子也是三個點號,不過其功能與擴充套件運算子恰好相反,把逗號隔開的值序列組合成乙個陣列

一、直接合併成陣列

<

template

>

<

section

class

="p-10"

>

<

el-button

type

="danger"

@click

="get()"

>點選

el-button

>

section

>

template

>

<

script

>

export

default

; },

methods: ,

show(...val) }};

script

>

二、部分合併成陣列

<

template

>

<

section

class

="p-10"

>

<

el-button

type

="danger"

@click

="get()"

>點選

el-button

>

section

>

template

>

<

script

>

export

default

; },

methods: ,

bar(a, ...b) }};

script

>

三、利用解構來合成陣列

<

template

>

<

section

class

="p-10"

>

<

el-button

type

="danger"

@click

="get()"

>點選

el-button

>

section

>

template

>

<

script

>

export

default

; },

methods: }};

script

>

等號表示式是典型的賦值形式,函式傳參和for迴圈的變數都是特殊形式的賦值。解構的原理是賦值的兩邊具有相同的結構,就可以正確取出陣列或物件裡面的元素或屬性值,省略了使用下標逐個賦值的麻煩。

對於三個點號,三點放在形參或者等號左邊為rest運算子; 放在實參或者等號右邊為spread運算子,或者說,放在被賦值一方為rest運算子,放在賦值一方為擴充套件運算子。

rest運算子使用場景應該稍少一些,主要是處理不定數量引數,可以避免arguments物件的使用。

嗯,就醬~~

參考: 

擴充套件運算子和rest

一 擴充套件運算子 擴充套件運算子是由.組成,他 代表的是將陣列或 類陣列物件的每乙個值用,的形式分隔開 如 function add a,b,c var arr 1,2,3 add arr 特殊應用場景 深拷貝 var arr 1,2,3 var arr2 arr var arr3 arr con...

物件擴充套件運算子( )與rest運算子

當編寫乙個方法時,我們允許它傳入的引數是不確定的。這時候可以使用物件擴充套件運算子來作引數,看乙個簡單的列子 function xzdemo arg xzdemo 1,2,3 這時我們看到控制台輸出了 1,2,3,undefined,這說明是可以傳入多個值,並且就算方法中引用多了也不會報錯。我們先用...

ES6 解構運算子 rest運算子, 運算子

解構的作用是可以快速取得陣列或物件當中的元素或屬性,而無需使用arr x 或者obj key 等傳統方式進行賦值 陣列解構賦值 var arr this is a string 2,3 傳統方式 var a arr 0 b arr 1 c arr 2 解構賦值,是不是簡潔很多?var a,b,c a...