理解spread運算子與rest引數

理解spread運算子與rest引數

spread運算子與rest引數 是es6的新語法。

它們的作用是什麼？能做什麼事情？

1. rest運算子用於獲取函式呼叫時傳入的引數。

function

testfunc(...args)  //
呼叫函式
testfunc('aa', 'bb', 'cc');

2. spread運算子用於陣列的構造，析構，以及在函式呼叫時使用陣列填充引數列表。

let arrs1 = ['aa', 'bb'];

let arrs2 = ['cc', 'dd'];
//合併陣列
let arrs =[...arrs1, ...arrs2];
console.log(arrs); 
//['aa', 'bb', 'cc', 'dd']
//析構陣列
let param1, param2;
[param1, ...param2] =arrs1;
console.log(param1); 
//aa
console.log(param2); //
['bb']

3. 類陣列的物件轉變成陣列。

比如我們常見的是arguments物件，它是類陣列，它有長度屬性，但是沒有陣列的方法，比如如下**：

function

testfunc() ; //
函式呼叫
testfunc('a', 'b');

把類陣列物件轉換成陣列，**如下：

function

testfunc() ; //
函式呼叫
testfunc('a', 'b');

4. 陣列的深度拷貝

淺拷貝如下demo：

var arr1 = [1, 2];

var arr2 =arr1;
arr1.push(3);
console.log(arr1); 
//[1, 2, 3]
console.log(arr2); //
[1, 2, 3]

如上**，arr1是乙個陣列有2個值 [1, 2], 然後把 arr1 賦值個 arr2, 接著往arr1中新增乙個元素3，然後就會影響arr2中的陣列。

因為我們知道淺拷貝是：拷貝的是該物件的引用，所以引用值改變，其他值也會跟著改變。

所以引用值也跟著改變。

深度拷貝物件如下**：

var arr1 = [1, 2];

var arr2 =[...arr1];
arr1.push(3);
console.log(arr1); 
//[1, 2, 3]
console.log(arr2); //
[1, 2]

5. 字串轉陣列

如下**：

var str = 'kongzhi';

var arr =[...str];
console.log(arr); 
//["k", "o", "n", "g", "z", "h", "i"]

如果乙個函式最後乙個形參以 ...為字首的，則在函式呼叫時候，該形參會成為乙個陣列，陣列中的元素都是傳遞給這個函式多出來的實參的值。

比如如下**：

function

test(a, ...b) 
test('11', '22', '33');

6. 解構賦值

解構賦值允許你使用類似陣列或物件字面量的語法將陣列和物件的屬性賦給各種變數。

//

解構陣列
var arr = ['aa', 'bb', 'cc'];
let [a1, a2, a3] =arr;
console.log(a1); 
//aa
console.log(a2); //
bbconsole.log(a3); //
cc//
物件解構
var o = ;
var  =o;
console.log(a);  //1
console.log(b);  //
2

7. 交換變數

var a = 1, b = 2;

[a, b] =[b, a];
console.log(a); //2
console.log(b); //
1

8. 從函式中返回多個值

function

test() 
}let  =test();
console.log(aa); //1
console.log(bb); //
2

展開運算子spread和剩餘運算子Rest

展開運算子和剩餘運算子 展開運算子是三個點你 可以將乙個陣列轉為用逗號分隔的引數序列。說的通俗易懂點，就好像化骨綿掌，把乙個大元素給打散成乙個個單獨的小元素。demo 1 傳遞資料代替多個字串的形式 function test a,b,c var arr 1,2,3 test arr demo2 將...

ES6 擴充套件運算子（Spread）

含義 擴充套件運算子用 表示，它會將乙個陣列轉化為用逗號分隔的引數序列。嗯?這個含義？話不多說，上例子！要學就認真理解內容，請認真看並理解例子3分鐘 舉些栗子 console.log 1,2,3 輸出結果為 1 2 3 console.log 1,2,3,4 5 輸出結果為 1 2 3 4 5 do...

ES6 物件擴充套件運算子 res運算子

當我們對引數的個數不確定時,可以用物件拓展運算子 funtion lala arg console.log arg 0 1 console.log arg 1 2 console.log arg 2 3 console.log arg 3 undefined lala 1,2,3 let arr1 ...