> 웹 프론트엔드 > 프런트엔드 Q&A > es6 배열에서 확장 문자를 사용할 수 있습니까?

es6 배열에서 확장 문자를 사용할 수 있습니까?

青灯夜游
풀어 주다: 2022-10-20 18:00:11
원래의
1771명이 탐색했습니다.

ES6 배열은 확장 문자를 사용할 수 있습니다. 확장기 "..."는 반복 가능한 객체를 개별 요소로 확장하며 소위 반복 가능한 객체는 배열, 문자열, 맵 및 세트와 같이 "for of" 루프를 사용하여 탐색할 수 있는 모든 객체입니다. 확장기를 배열과 함께 사용하면 배열을 쉼표로 구분된 매개변수 시퀀스로 변환합니다.

es6 배열에서 확장 문자를 사용할 수 있습니까?

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

확장 연산자 는 ES6에서 도입되었으며, 이는 반복 가능한 객체를 별도의 요소로 확장합니다. 소위 반복 가능한 객체는 for of 루프를 사용하여 탐색할 수 있는 모든 것입니다. 배열, 문자열, 맵, 세트, ​​DOM 노드 등과 같은  是ES6中引入的,将可迭代对象展开到其单独的元素中,所谓的可迭代对象就是任何能用for of循环进行遍历的对象,例如:数组、字符串、Map 、Set 、DOM节点等。

展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。

es6展开符的使用(数组方面)

1、复制数组

给定一个数组,想要将一个数组的成员复制到另一个数组中,该怎么做?

const a = [1, 2];
const b = a;
console.log(b); // [1, 2]
로그인 후 복사

真有表面上这么简单吗?试着修改一下a数组中的值

a[0] = 3;
console.log(b); // [3, 2]
로그인 후 복사

诶?怎么我修改了a数组中的值,结果b数组中的值也变了?这里涉及到的是堆栈的原理,就不具体展开说了,你只需要知道简单地使用两边相等的方式是不能完成数组的复制的,这里使用展开运算符就可以完成啦?

const a = [1, 2];
const c = [...a];
console.log(c); // [1, 2]
a[0] = 3;
console.log(c); // [1, 2]
로그인 후 복사

2、合并数组

const a = [1, 2];
const b = [3];
const c = [4, 5];

console.log([...a, ...b, ...c]); // [1, 2, 3, 4, 5]
console.log([...c, ...a, ...b]); // [4, 5, 1, 2, 3]
console.log([99, ...a, 24, ...b, ...c]); // [99, 1, 2, 24, 3, 4, 5]
로그인 후 복사

3、字符串转为数组

前置知识:字符串可以按照数组的形式展开?

const name = 'Jae';
console.log(...name); // J a e
로그인 후 복사

字符串转数组除了用 split()

확산 연산자를 사용하면 표현식을 어딘가에서 확장할 수 있습니다. 스프레드 연산자는 여러 인수(함수 호출의 경우), 여러 요소(배열 리터럴의 경우) 또는 여러 변수(구조 분해 할당의 경우)가 있는 경우 사용할 수 있습니다.

es6 확장기 사용(배열 측면)

1. 배열 복사
  • 배열이 있으면 원하는 방법 한 배열의 멤버를 다른 배열로 복사하시겠습니까?

    const name = 'Jae';
    const name_string = [...name];
    console.log(name_string); // ["J", "a", "e"]
    로그인 후 복사

    보기만큼 정말 간단합니까? a
function func() {
	console.log(arguments);
}
func(1, 2); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 使用展开远算符
function func() {
	console.log([...arguments]);
}
func(1, 2); // [1, 2]
로그인 후 복사
eh 배열의 값을 수정해 보세요. 배열 a의 값을 수정했는데 배열 b의 값도 변경된 이유는 무엇입니까? 여기서 관련되는 것은 스택의 원리이므로 자세히 확장하지는 않겠습니다. 단순히 양쪽에 동일한 방법을 사용하는 것만으로는 배열의 복사를 완료할 수 없다는 점만 알아두시면 됩니다. 여기서 확장 연산자를 사용할 수 있습니까?
    <!--HTML代码-->
    <p>1</p>
    <p>2</p>
    <p>3</p>
    로그인 후 복사
  • 2. 배열 병합

    const a = document.querySelectAll("p");
    console.log(a); // NodeList(3) [p, p, p]
    console.log([...a]); // [p, p, p]
    로그인 후 복사

    3. 문자열을 배열로 변환
  • 전제 지식: 배열 형식으로 문자열을 확장할 수 있나요?

    rrreee split( ) 메서드를 사용하여 스프레드 연산자를 사용할 수도 있습니다.rrreee4. 일반적인 배열과 유사한 객체를 배열로 변환

    왜 배열과 유사한 객체를 배열로 변환해야 합니까? 배열형 메서드는 배열 메서드를 사용할 수 없기 때문에 일부 데이터 처리 요구 사항에는 변환하는 것이 더 편리합니다~🎜🎜🎜🎜arguments🎜🎜🎜rrreee🎜🎜🎜NodeList🎜🎜🎜rrreeerrreee🎜[관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜 프로그래밍 영상🎜】🎜

    위 내용은 es6 배열에서 확장 문자를 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿