溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關如何正確的使用ES6 擴展運算符，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
擴展運算符 spread syntax 又叫展開語法，寫法是 ...，顧名思義，其實是用來展開字符串，數組和對象的一種語法，可以在函數調用/數組構造時, 將數組表達式或者 string 在語法層面展開；還可以在構造字面量對象時, 將對象表達式按 key-value 的方式展開。常用的語法如下：
//函數調用：
myFunction(...iterableObj);
//字面量數組構造或字符串：
[...iterableObj, '4', ...'hello', 6];
// 構造字面量對象時,進行克隆或者屬性拷貝（ECMAScript 2018規范新增特性）：
let objClone = { ...obj };在函數調用時使用擴展運算符相當于使用 Function.prototype.apply：
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
//相當于
function myFunction(x, y, z) {}
var args = [0, 1, 2];
myFunction.apply(null, args);和 apply 不同的是，我們不僅可以將全部參數放到一個數組中，還可以只將其中幾個參數用擴展運算符展開，并且可以再一次調用中多次使用擴展運算符。
function myFunction(a, b, c, d, e) {
console.log(a, b, c, d, e); //-1 0 1 2 3
console.log(arguments); //[Arguments] { '0': -1, '1': 0, '2': 1, '3': 2, '4': 3 }
}
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);使用 new 關鍵字來調用構造函數時，不能直接使用數組加上 apply 的方式（apply 執行的是調用 [[Call]] , 而不是構造 [[Construct]]）。有了展開語法, 將數組展開為構造函數的參數就很簡單了：
var dateFields = [1970, 0, 1]; // 1970年1月1日 var d = new Date(...dateFields);
如果想要不使用擴展運算符實現同樣的效果，我們必須用一個函數包裝構造函數，將這個新的構造函數的 prototype 設為原構造函數的實例，用 Object.create(constructor.prototype)（這里主要是為了新構造函數原型的修改不影響原構造函數的原型，直接用 constructor.prototype 作為新構造函數的原型也可以實現）。
function applyAndNew(constructor, args) {
function partial() {
return constructor.apply(this, args);
}
if (typeof constructor.prototype === 'object') {
partial.prototype = Object.create(constructor.prototype);
}
return partial;
}
function myConstructor() {
console.log('arguments.length: ' + arguments.length);
console.log(arguments);
this.prop1 = 'val1';
this.prop2 = 'val2';
}
var myArguments = ['hi', 'how', 'are', 'you', 'mr', null];
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
console.log(new myConstructorWithArguments());
// (myConstructor構造函數中): arguments.length: 6
// (myConstructor構造函數中): ["hi", "how", "are", "you", "mr", null]
// ("new myConstructorWithArguments"中): {prop1: "val1", prop2: "val2"}當然用的最多的還是在字面量數組上，沒有展開語法的時候，只能組合使用 push, splice, concat 等方法，來將已有數組元素變成新數組的一部分。有了展開語法, 通過字面量方式, 構造新數組會變得更簡單、更優雅：
var parts = ['shoulders', 'knees']; var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]
可以用來實現數組淺拷貝：
var arr = [1, 2, 3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4); // arr2 此時變成 [1, 2, 3, 4] // arr 不受影響
連接多個數組：
var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; var arr3 = [...arr1, ...arr2];
擴展運算符還可以將已有對象的所有可枚舉(enumerable)屬性拷貝到新構造的對象中。該方法為淺拷貝，可以拷貝 Symbol 屬性，但不包含原型上的屬性和方法。如果同時拷貝多個對象，后面的對象會覆蓋前面對象的同名屬性。
var obj1 = { foo: 'bar', x: 42, [Symbol('a')]: 123 };
var obj2 = { foo: 'baz', x: 100, y: 13 };
var clonedObj = { ...obj1 };
console.log(clonedObj); //{ foo: 'bar', x: 42, [Symbol(a)]: 123 }
var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); //{ foo: 'baz', x: 100, y: 13, [Symbol(a)]: 123 }該方法的性質和 Object.assign 類似，但是 Object.assign() 函數會觸發 setters，而展開語法則不會。
注意事項
剩余參數
剩余參數語法允許我們將一個不定數量的參數表示為一個數組。如果函數的最后一個命名參數以 ... 為前綴，則它將成為一個由剩余參數組成的真數組，其中從 0（包括）到 theArgs.length（排除）的元素由傳遞給函數的實際參數提供。
剩余語法(Rest syntax) 看起來和展開語法完全相同，不同點在于, 剩余參數用于解構數組和對象。從某種意義上說，剩余語法與展開語法是相反的：展開語法將數組展開為其中的各個元素，而剩余語法則是將多個元素收集起來并“凝聚”為單個元素。擴展運算符是用在函數調用，而剩余參數是用在函數聲明。
剩余參數和 arguments 對象之間的區別主要有三個：
arguments 對象包含了傳給函數的所有實參。arguments 對象不是一個真正的數組，而剩余參數是真正的 Array 實例，也就是說你能夠在它上面直接使用所有的數組方法，比如 sort，map，forEach 或 pop。arguments 對象還有一些附加的屬性 （如 callee 屬性）。如果剩余參數（包括在解構賦值中）右側有逗號，會拋出 SyntaxError，因為剩余元素必須是函數的最后一個參數或者數組的最后一個元素。
上述就是小編為大家分享的如何正確的使用ES6 擴展運算符了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
