concat是不是es6語(yǔ)法

這篇文章主要介紹“concat是不是es6語(yǔ)法”，在日常操作中，相信很多人在concat是不是es6語(yǔ)法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”concat是不是es6語(yǔ)法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

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

concat不是es6語(yǔ)法，它是es5時(shí)就有的。

ES5 數(shù)組方法concat()

concat方法用于多個(gè)數(shù)組的合并。它將新數(shù)組的成員，添加到原數(shù)組成員的后部，然后返回一個(gè)新數(shù)組，原數(shù)組不變。

• 請(qǐng)注意，concat()方法并沒(méi)有修改當(dāng)前Array，而是返回了一個(gè)新的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}]

除了數(shù)組作為參數(shù)，concat也接受其他類型的值作為參數(shù)，添加到目標(biāo)數(shù)組尾部。

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

• 實(shí)際上，concat()方法可以接收任意個(gè)元素和Array，并且自動(dòng)把Array拆開(kāi)，然后全部添加到新的Array里。即如果要進(jìn)行concat() 操作的參數(shù)是數(shù)組，那么添加的是數(shù)組中的元素，而不是數(shù)組。

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

注意：concat只會(huì)拉平數(shù)組參數(shù)一次，不會(huì)拉平兩次

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

• 如果數(shù)組成員包括對(duì)象，concat方法返回當(dāng)前數(shù)組的一個(gè)淺拷貝。所謂“淺拷貝”，指的是新數(shù)組拷貝的是對(duì)象的引用。

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

var newArray = oldArray.concat();

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

上面代碼中，原數(shù)組包含一個(gè)對(duì)象，concat方法生成的新數(shù)組包含這個(gè)對(duì)象的引用。所以，改變?cè)瓕?duì)象以后，新數(shù)組跟著改變。

擴(kuò)展知識(shí)：數(shù)組合并的另一種方法

使用ES6擴(kuò)展運(yùn)算符…合并

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

對(duì)比：ES6擴(kuò)展運(yùn)算符...與ES5-concat

concat是es5時(shí)就有的，優(yōu)點(diǎn)是兼容性高，不需要轉(zhuǎn)譯

...是es6新出的語(yǔ)法，簡(jiǎn)化了寫(xiě)法，代碼看上去更簡(jiǎn)潔直觀，但實(shí)際只是做了封裝，底層還是用的原來(lái)的方法，如下為babel轉(zhuǎn)譯的結(jié)果

arr1 = [...arr1, ...arr2];
  ↓ 相當(dāng)于
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);

到此，關(guān)于“concat是不是es6語(yǔ)法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！