concat是es6語法嗎

concat不是es6語法，它是es5時就有的，優點是相容性高，不需要轉譯。 concat方法用於多個數組的合併，使用語法「原始數組物件.concat(新值)」；此方法可接受數組參數，也可接受其他類型的值作為參數。 concat方法會將新數組的成員，加到原數組成員的後部，然後傳回一個新數組，原始數組不變。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

concat不是es6語法，它是es5時就有的。

ES5 陣列方法concat()

#concat方法用於多個陣列的合併。它將新數組的成員，加到原始數組成員的後部，然後傳回一個新數組，原始數組不變。

• 請注意，concat()方法並沒有修改目前Array，而是回傳了一個新的Array。

['hello'].concat(['world'])
// ["hello", "world"]

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

[].concat({a: 1}, {b: 2})
// [{ a: 1 }, { b: 2 }]

[2].concat({a: 1})
// [2, {a: 1}]

除了陣列作為參數，concat也接受其他類型的值作為參數，加入到目標陣列尾部。

[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]

• 實際上，concat()方法可以接收任一元素和Array，並且自動把Array拆開，然後全部加入到新的Array裡。即如果要進行concat() 操作的參數是數組，那麼新增的是數組中的元素，而不是數組。

var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

注意：concat只會拉平數組參數一次，不會拉平兩次

arr.concat([1, [2, 3]]); // [1, 2, 3, 1, [2, 3]]

• 如果數組成員包括對象， concat方法傳回目前陣列的一個淺拷貝。所謂“淺拷貝”，指的是新數組拷貝的是物件的引用。

var obj = { a: 1 };
var oldArray = [obj];

var newArray = oldArray.concat();

obj.a = 2;
newArray[0].a // 2

在上方程式碼中，原始數組包含一個對象，concat方法產生的新數組包含這個對象的參考。所以，改變原物件以後，新陣列跟著改變。

擴充知識：數位組合並的另一種方法

#使用ES6擴充運算子…合併

const name1 = ['A','B','C'];
        const name2 = ['D','E','F'];
        const name = [...name1,...name2]
        console.log(name);

比較：ES6擴充運算子...與ES5-concat

concat是es5時就有的，優點是相容性高，不需要轉譯

...是es6新出的語法，簡化了寫法，程式碼看起來更簡潔直觀，但實際上只是做了封裝，底層還是用的原來的方法，如下為babel轉譯的結果

arr1 = [...arr1, ...arr2];
  ↓ 相当于
function _toConsumableArray(arr) {
 if (Array.isArray(arr)) { 
   for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; 
   } else { return Array.from(arr); }
}
arr1 = [].concat(_toConsumableArray(arr1), arr2);

【相關推薦：javascript影片教學、程式設計影片】

#

以上是concat是es6語法嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！