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

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

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

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
    undefinednull,就会报错,因为它们无法转为对象。

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

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

    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

其他

  • 如果把自定义属性放在扩展运算符前面,就变成了设置新对象的默认属性值。
  • 与数组的扩展运算符一样,对象的扩展运算符后面可以跟表达式。
  • 如果扩展运算符后面是一个空对象,则没有任何效果。
  • 如果扩展运算符的参数是nullundefined,这两个值会被忽略,不会报错。
  • 扩展运算符的参数对象之中,如果有取值函数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으로 문의하세요.