Is concat an es6 syntax?

concat is not es6 syntax. It is available in es5. The advantage is that it has high compatibility and does not require translation. The concat method is used to merge multiple arrays, using the syntax "original array object.concat(new value)"; this method can accept array parameters and other types of values ​​as parameters. The concat method will add the members of the new array to the end of the original array members, and then return a new array, leaving the original array unchanged.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

concat is not es6 syntax, it is available in es5.

ES5 array method concat()

concat method is used for multiple arrays merge. It adds the members of the new array to the end of the original array members, and then returns a new array, leaving the original array unchanged.

• Please note that the concat() method does not modify the current Array, but returns a new 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}]

In addition to arrays as parameters, concat also accepts other types of values ​​as parameters, which are added to the end of the target array.

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

• In fact, the concat() method can receive any number of elements and Array, and automatically disassemble the Array, Then add them all to the new Array. That is, if the parameter for the concat() operation is an array, then the elements in the array are added, not the array.

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

Note: concat will only flatten the array parameter once, not twice

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

• If the array member includes an object, The concat method returns a shallow copy of the current array. The so-called "shallow copy" means that the new array copies the reference of the object.

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

var newArray = oldArray.concat();

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

In the above code, the original array contains an object, and the new array generated by the concat method contains a reference to this object. Therefore, after changing the original object, the new array will also change .

Extended knowledge: Another way to merge arrays

Use ES6 extension operators…Merge

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

Comparison: ES6 expansion operator...and ES5-concat

concat is available when it is es5 The advantage is that it has high compatibility and does not need to be translated.

... is the new syntax of es6, which simplifies the writing method. The code looks more concise and intuitive, but in fact it is just encapsulated. , the bottom layer still uses the original method, the following is the result of babel translation

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);

[Related recommendations: javascript video tutorial, Programming video]

The above is the detailed content of Is concat an es6 syntax?. For more information, please follow other related articles on the PHP Chinese website!