concat是不是es6語法

這篇文章主要介紹“concat是不是es6語法”，在日常操作中，相信很多人在concat是不是es6語法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”concat是不是es6語法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

concat不是es6語法，它是es5時就有的，優點是兼容性高，不需要轉譯。concat方法用于多個數組的合并，使用語法“原數組對象.concat(新值)”；該方法可接受數組參數，也可接受其他類型的值作為參數。concat方法會將新數組的成員，添加到原數組成員的后部，然后返回一個新數組，原數組不變。

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語法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！