concat不是es6語(yǔ)法,它是es5時(shí)就有的,優(yōu)點(diǎn)是兼容性高,不需要轉(zhuǎn)譯。concat方法用于多個(gè)數(shù)組的合并,使用語(yǔ)法“原數(shù)組對(duì)象.concat(新值)”;該方法可接受數(shù)組參數(shù),也可接受其他類(lèi)型的值作為參數(shù)。concat方法會(huì)將新數(shù)組的成員,添加到原數(shù)組成員的后部,然后返回一個(gè)新數(shù)組,原數(shù)組不變。
前端(vue)入門(mén)到精通課程:進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具:點(diǎn)擊使用
本教程操作環(huán)境:windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
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
也接受其他類(lèi)型的值作為參數(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);
【