concat是es6語法嗎 - tw511教學網

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

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：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);
登入後複製

【相關推薦：、】

以上就是concat是es6語法嗎的詳細內容，更多請關注TW511.COM其它相關文章！