本教程操作环境: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中文网其它相关文章!