es6의 세 점은 함수가 아니라 연산자입니다. 세 개의 점 "..."은 반복 가능한 객체를 별도의 요소로 확장할 수 있는 "확장 연산자"를 나타냅니다. 소위 반복 가능한 객체는 배열과 같은 for of 루프를 사용하여 탐색할 수 있는 모든 객체입니다. , 문자열, 맵, 세트, DOM 노드 등
이 튜토리얼의 운영 환경: 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;
// 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'
참고: 스프레드 연산자를 사용하는 경우 배열 할당의 경우 배치만 가능 매개변수의 마지막 숫자입니다. 그렇지 않으면 오류가 보고됩니다.
let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); let arr = [...map.keys()]; // [1, 2, 3]
const go = function*(){ yield 1; yield 2; yield 3; }; [...go()] // [1, 2, 3]
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 }
객체의 확산 연산자
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>
null
또는 undefine
인 경우 이 두 값은 무시되고 오류가 보고되지 않습니다. 🎜🎜🎜확장 연산자의 매개변수 객체에 값 함수 get
이 있으면 이 함수가 실행됩니다. 🎜🎜🎜🎜【관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜프로그래밍 비디오🎜】🎜위 내용은 es6에서 세 점의 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!