>  기사  >  웹 프론트엔드  >  concat은 es6 구문입니까?

concat은 es6 구문입니까?

青灯夜游
青灯夜游원래의
2022-10-18 17:02:471499검색

concat은 es6 구문이 아닙니다. es5에서 사용할 수 있다는 장점은 호환성이 높고 번역이 필요하지 않다는 것입니다. concat 메소드는 "original array object.concat(new value)" 구문을 사용하여 여러 배열을 병합하는 데 사용됩니다. 이 메소드는 배열 매개변수 및 기타 유형의 값을 매개변수로 허용할 수 있습니다. concat 메소드는 원래 배열 멤버의 끝에 새 배열의 멤버를 추가한 다음 원래 배열을 변경하지 않고 새 배열을 반환합니다.

concat은 es6 구문입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

concat은 es6 구문이 아닙니다. es5에서 사용할 수 있습니다.

ES5 배열 메서드 concat()

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

concat은 es6 구문입니까?

对比:ES6扩展运算符...与ES5-concat

concat是es5时就有的,优点是兼容性高,不需要转译

...병합

하는 데 사용됩니다. 새 배열의 멤버를 원래 배열의 멤버 끝에 추가한 다음 새 배열을 반환하고 원래 배열은 변경되지 않은 상태로 유지합니다.

  • concat() 메서드는 현재 배열을 수정하지 않고 새 배열을 반환한다는 점에 유의하세요.
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는 다른 유형의 값도 매개변수로 허용하며 이는 대상 배열 끝에 추가됩니다. rrreee
  • 실제로 concat() 메서드는 원하는 수의 요소와 배열을 수신하고 자동으로 배열를 분해할 수 있습니다. >를 선택한 다음 모두 새 배열에 추가합니다. 즉, concat() 작업의 매개변수가 배열인 경우 배열이 아닌 배열의 요소가 추가됩니다.
rrreee참고: concat는 배열 매개변수를 두 번이 아닌 한 번만 평면화합니다.🎜rrreee
  • 배열 멤버에 객체가 포함된 경우 concat 메소드는 현재 배열의 🎜얕은 복사본🎜을 반환합니다. 소위 "얕은 복사본"은 새 배열이 🎜객체🎜의 참조를 복사한다는 의미입니다.
rrreee🎜위 코드에서 원래 배열에는 개체가 포함되어 있고 concat 메서드로 생성된 새 배열에는 이 개체에 대한 참조가 포함되어 있습니다. 따라서 🎜원래 객체를 변경한 후에는 그에 따라 새 배열도 변경됩니다🎜. 🎜🎜🎜🎜확장된 지식: 배열을 병합하는 또 다른 방법 🎜🎜🎜🎜🎜ES6 스프레드 연산자 를 사용하여 병합 🎜🎜rrreee🎜concat은 es6 구문입니까?🎜🎜🎜비교: ES6 스프레드 연산자... 대 ES5-concat🎜🎜 🎜 concat은 es5에서 사용할 수 있습니다. 호환성이 높고 번역이 필요하지 않다는 장점이 있습니다. 🎜🎜...는 es6의 새로운 구문으로 작성 방법이 단순화되고 코드가 더 간결해 보입니다. 직관적이지만 실제로는 캡슐화되어 있을 뿐이고 하단에는 여전히 원래 방식을 사용하고 있습니다. 다음은 바벨 번역 결과🎜rrreee🎜입니다. [관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜프로그래밍 비디오🎜]🎜

위 내용은 concat은 es6 구문입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.