찾다

집  >  기사  >  웹 프론트엔드  >  es6에서 세 점의 기능은 무엇입니까?

es6에서 세 점의 기능은 무엇입니까?

青灯夜游
青灯夜游원래의
2022-10-14 17:56:251889검색

es6의 세 점은 함수가 아니라 연산자입니다. 세 개의 점 "..."은 반복 가능한 객체를 별도의 요소로 확장할 수 있는 "확장 연산자"를 나타냅니다. 소위 반복 가능한 객체는 배열과 같은 for of 루프를 사용하여 탐색할 수 있는 모든 객체입니다. , 문자열, 맵, 세트, ​​DOM 노드 등

es6에서 세 점의 기능은 무엇입니까?

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

Expand 연산자...는 반복 가능한 객체를 개별 요소로 확장하는 ES6에 도입되었습니다. 소위 반복 가능한 객체는 다음과 같이 for of 루프를 사용하여 탐색할 수 있는 모든 객체입니다. ), String, Map(Map 이해), Set(Set 사용 방법), DOM 노드 등

배열 확산 연산자

확산 연산자(확산)는 세 개의 점(...)입니다. 이는 배열을 쉼표로 구분된 매개변수 시퀀스로 변환하는 나머지 매개변수의 역연산과 같습니다. 확산 연산자는 일반 함수 매개변수와 함께 사용할 수 있으며 그 뒤에 표현식을 배치할 수도 있지만 뒤에 빈 배열이 오면 아무런 효과가 없습니다. ...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。扩展运算符与正常的函数参数可以结合使用，后面也可以放置表达式，但如果后面是一个空数组，则不产生任何效果。

let arr = [];
arr.push(...[1,2,3,4,5]);
console.log(arr); //[1,2,3,4,5]
console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5
console.log(...(1 > 0 ? ['a'] : [])); //a
console.log([...[], 1]); //[1]

意义

替代函数的apply方法

由于扩展运算符可以展开数组，所以不再需要apply

// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])

의미함수의 적용 메소드를 대체합니다

확산 연산자가 배열을 확장할 수 있으므로 배열을 함수의 매개변수로 변환하는 데 더 이상 apply 메소드가 필요하지 않습니다. . 
    // ES5 的写法
const a1 = [1, 2];
const a2 = a1.concat();
// ES6 的写法
const a1 = [1, 2];
const a2 = [...a1];
//或
const [...a2] = a1;

  • Apply

  • 배열 복사

    // ES5 的写法
[1, 2].concat(more);
arr1.concat(arr2, arr3);
// ES6 的写法
[1, 2, ...more];
[...arr1, ...arr2, ...arr3]

    배열 병합

    // ES5 的写法
a = list[0], rest = list.slice(1)
// ES6 的写法
[a, ...rest] = list

  • 구조 분해 할당과 결합

    'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

let str = 'x\uD83D\uDE80y';
str.split('').reverse().join('') // 'y\uDE80\uD83Dx'
[...str].reverse().join('')      // 'y\uD83D\uDE80x'

    참고: 스프레드 연산자를 사용하는 경우 배열 할당의 경우 배치만 가능 매개변수의 마지막 숫자입니다. 그렇지 않으면 오류가 보고됩니다.

  • 문자열 변환

    확산 연산자는 문자열을 실제 배열로 변환하고 4바이트 유니코드 문자를 올바르게 식별할 수도 있습니다. 
    • let map = new Map([
 [1, 'one'],
 [2, 'two'],
 [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

  • Iterator 인터페이스를 구현하는 객체
    • Iterator 인터페이스의 모든 객체(Iterator 장 참조)는 스프레드 연산자를 사용하여 실제 배열로 변환될 수 있습니다.
    • Map 및 Set 구조, 생성기 함수
      스프레드 연산자는 내부적으로 데이터 구조의 Iterator 인터페이스를 호출하므로 객체에 Iterator 인터페이스가 있는 한 Map 구조와 같은 스프레드 연산자를 사용할 수 있습니다. . 
    • const go = function*(){
 yield 1;
 yield 2;
 yield 3;
};

[...go()] // [1, 2, 3]
      • Generator 함수가 실행된 후 traverser 객체를 반환하므로 스프레드 연산자도 사용할 수 있습니다. 
    • let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

Iterator 인터페이스가 없는 객체에 스프레드 연산자를 사용하면 오류가 보고됩니다.

객체의 확산 연산자

Concept

  • 객체의 구조 분해 할당은 객체에서 값을 얻는 데 사용되며, 이는 대상의 모든 순회 가능(열거 가능)과 동일합니다. 개체 자체이지만 아직 읽기 속성이 지정된 개체에 할당되지 않았습니다. 모든 키와 해당 값이 새 개체에 복사됩니다. 

    let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2
    undefined或null，就会报错，因为它们无法转为对象。

  • 解构赋值必须是最后一个参数，否则会报错。

  • 解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

    let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined


const o = Object.create({ x: 1, y: 2 });
o.z = 3;

let { x, ...newObj } = o;
let { y, z } = newObj;
x // 1
y // undefined
z // 3

let { x, ...{ y, z } } = o;
// SyntaxError: ... must be followed by an identifier in declaration contexts

  • 扩展运算符的解构赋值，不能复制继承自原型对象的属性。

    function baseFunction({ a, b }) {
// ...
}
function wrapperFunction({ x, y, ...restConfig }) {
// 使用 x 和 y 参数进行操作
// 其余参数传给原始函数
return baseFunction(restConfig);
}

应用

  • 扩展某个函数的参数，引入其他操作。

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);

//上面的例子只是拷贝了对象实例的属性，如果想完整克隆一个对象，还拷贝对象原型的属性，可以采用下面的写法。
// 写法一
const clone1 = Object.assign(
Object.create(Object.getPrototypeOf(obj)),
obj
);
// 写法二
const clone2 = Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj)
)

  • 取出参数对象的所有可遍历属性，拷贝到当前对象之中。

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);


//如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。
let aWithOverrides = { ...a, x: 1, y: 2 };
// 等同于
let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
// 等同于
let x = 1, y = 2, aWithOverrides = { ...a, x, y };
// 等同于
let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });

  • 合并两个对象。

    let newVersion = {
...previousVersion,
name: 'New Name' // Override the name property
};

  • 修改现有对象部分的属性。

    rrreee

其他

  • 如果把自定义属性放在扩展运算符前面，就变成了设置新对象的默认属性值。
  • 与数组的扩展运算符一样，对象的扩展运算符后面可以跟表达式。
  • 如果扩展运算符后面是一个空对象，则没有任何效果。
  • 如果扩展运算符的参数是null或undefined，这两个值会被忽略，不会报错。

  • 扩展运算符的参数对象之中，如果有取值函数get

    참고:

구조 분해 할당을 위해서는 등호 오른쪽이 객체여야 하므로 등호 오른쪽이 정의되지 않음 또는 null에서는 개체로 변환할 수 없기 때문에 오류가 보고됩니다. <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频"></a>

🎜구조 분해 할당은 마지막 매개변수여야 합니다. 그렇지 않으면 오류가 보고됩니다. 🎜🎜🎜🎜구조 분해 할당의 복사본은 얕은 복사본입니다. 즉, 키 값이 복합 유형 값(배열, 개체, 함수)인 경우 구조 분해 할당은 복사본이 아닌 값에 대한 참조를 복사합니다. 가치의. 🎜rrreee🎜🎜🎜확산 연산자의 구조 분해 할당은 프로토타입 객체에서 상속된 속성을 복사할 수 없습니다. 🎜rrreee🎜🎜🎜🎜🎜 적용 🎜🎜🎜🎜🎜🎜 함수의 매개변수를 확장하고 다른 작업을 도입합니다. 🎜🎜🎜rrreee🎜🎜🎜 매개변수 개체의 탐색 가능한 모든 속성을 제거하고 현재 개체에 복사합니다. 🎜🎜🎜rrreee🎜🎜🎜두 개체를 병합합니다. 🎜rrreee🎜🎜🎜기존 개체 부분의 속성을 수정합니다. 🎜rrreee🎜🎜🎜Others🎜🎜🎜맞춤 속성을 스프레드 연산자 앞에 넣으면 새 개체의 기본 속성 값이 됩니다. 🎜🎜배열의 확산 연산자와 마찬가지로 객체의 확산 연산자 뒤에 표현식이 올 수 있습니다. 🎜🎜확산 연산자 뒤에 빈 개체가 오면 아무런 효과가 없습니다. 🎜🎜확산 연산자의 매개변수가 null 또는 undefine인 경우 이 두 값은 무시되고 오류가 보고되지 않습니다. 🎜🎜🎜확장 연산자의 매개변수 객체에 값 함수 get이 있으면 이 함수가 실행됩니다. 🎜🎜🎜🎜【관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜프로그래밍 비디오🎜】🎜

위 내용은 es6에서 세 점의 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

관련 기사

더보기