简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집> 웹 프론트엔드> 프런트엔드 Q&A> 본문

es6의 새로운 연산자는 무엇입니까?

青灯夜游
풀어 주다： 2023-01-18 18:36:26
원래의
1144명이 탐색했습니다.

ES6 새 연산자에는 다음이 포함됩니다. 1. 연산자 앞의 속성이 유효한지 여부를 결정하여 체인에 있는 개체의 속성을 읽거나 정의되지 않은 값을 반환할 수 있는 선택적 체인 연산자 "?." ", 지수 연산에 사용되는 중위 연산자, 구문 "x ** y"; 3. 널값 병합 연산자 "??"; 4. 논리 할당 연산자 "&&=", "||=", " ??=", 주로 자체적으로 논리 연산을 수행한 후 후속 값을 할당한 후 5. 확장 연산자 "...".

es6의 새로운 연산자는 무엇입니까?

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

Question

인터뷰어: es6의 새로운 연산자에 대해 말씀해주실 수 있나요?

인터뷰어: 어. . .

인터뷰어: 선택적 연결 연산자를 좋아하시나요?

인터뷰어: 어. . .

인터뷰어: 자, 오늘 인터뷰는 여기까지입니다.

인터뷰어: 음. . .

위 장면은 순전히 허구이며 유사점이 있을 수 있습니다. 하하하?.

오늘은 es6의 몇 가지 새로운 연산자를 배우고 통합해 보겠습니다.

Operator

선택적 체인 연산자

이 속성이 객체인 경우 이 하위 속성에도 액세스할 수 있습니다(예:

var obj = {a: {key: 'val'}} console.log(obj.a.key) // val
로그인 후 복사

). 존재하면 오류가 보고될 수 있습니다.

var obj = {key: 'val'} console.log(obj.a.key) // error: Cannot read properties of undefined (reading 'key')
로그인 후 복사

이 상황과 호환되려면 기본값을 추가해야 호환됩니다

var obj = {key: 'val'} console.log((obj.a || {}).key) // undefined
로그인 후 복사

레벨이 너무 깊어지면 읽기 어려울 수 있습니다.

(((obj.a || {}).b || {}).c || {}).d // 或者 obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d
로그인 후 복사

이 쓰기 방법을 개선하기 위해 선택적 체인 연산자가 사용되었습니다.?.를 사용하여 표현됩니다.?.表示。

上面的例子可以用可选链运算符来改写

obj.a?.key obj.a?.b?.c?.d
로그인 후 복사

效果是一样的，是不是可读性增加，也节省了代码？

如果发现没有该属性的时候，则不会进行后面的点运算。

它也可以写在函数执行的时候。兼容该函数可能不是函数的情况。这种情况需要该函数名先定义好或者有值，不然还是会报错。

var fn fn?.() // 不会报错 fn1?.() // 报错
로그인 후 복사

可选链不能用在super关键字上，模版字符串，实例化构造函数, 赋值运算符的左侧等。

super?.fn() // error new Fn?.a() // error obj.a?.`${b}` // error obj?.a = obj
로그인 후 복사

指数运算符

以前我们算幂次方是这样算的

Math.pow(2,3) // 8
로그인 후 복사

现在可以通过指数运算符来计算, 用**表示

2 ** 3 // 8
로그인 후 복사

也可以连写

2** 3 ** 3 // 134217728
로그인 후 복사

可能你会疑惑，为什么这么大，因为它是从右边计算的。 等同于2**(3 ** 3)。

空值合并运算符（也称Null判断运算符）

这个运算符是用??表示。只有当左侧的值是undefined或者null才会执行默认值。

结合例子来看看：

var a = '' ?? 'default' console.log(a) // '' var a = 0 ?? 'default' console.log(a) // 0 var a = 123 ?? 'default' console.log(a) // 123 var a = undefined ?? 'default' console.log(a) // default var a = undefined ?? 'default' console.log(a) // default
로그인 후 복사

如果和&&或者||混用的时候，需要加上()显示表明优先级，不然会报错。

var a = undefined ?? 'default' && 'a' // error
로그인 후 복사

逻辑赋值运算符

有三种逻辑赋值运算符：

  • 逻辑并赋值运算符(&&=)
  • 逻辑或赋值运算符(||=)
  • 空值合并赋值运算符(??=)

主要是对本身进行逻辑操作后，然后对它赋值后面的值。

通过例子来看一下：

var a,b,c a &&= 1 // undefined //等同于 a && (a = 1) b ||= 1 // 1 //等同于 b || (b = 1) c ??= 1 // 1 //等同于 c ?? (c = 1)
로그인 후 복사

扩展操作符 …

扩展操作符 … 是ES6中引入的，将可迭代对象展开到其单独的元素中，所谓的可迭代对象就是任何能用for of循环进行遍历的对象，例如：数组、字符串、Map 、Set 、DOM节点等。

1. 拷贝数组对象

使用扩展符拷贝数组是ES6中常用的操作：

const years = [2018, 2019, 2020, 2021]; const copyYears = [...years]; console.log(copyYears); // [ 2018, 2019, 2020, 2021 ]
로그인 후 복사

扩展运算符拷贝数组，只有第一层是深拷贝，即对一维数组使用扩展运算符拷贝就属于深拷贝，看下面的代码：

const miniCalendar = [2021, [1, 2, 3, 4, 5, 6, 7], 1]; const copyArray = [...miniCalendar]; console.log(copyArray); // [ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ] copyArray[1][0] = 0; copyArray[1].push(8); copyArray[2] = 2; console.log(copyArray); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ] console.log(miniCalendar); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]
로그인 후 복사

把打印的结果放在一起便于更加清楚进行对比，如下：

위의 예는 선택적 체인 연산자를 사용하여 다시 작성할 수 있습니다. 가독성을 높이고 코드를 저장하는 효과는 동일합니까? 해당 속성이 없는 것으로 확인되면 이후 포인트 작업이 수행되지 않습니다.
变量说明 结果 操作
copyArray [ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ] 复制数组miniCalendar
copyArray [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ] 1. 将数组第二个元素的第一个元素重新赋值为 0 ；2. 往数组的第二个元素增加一个元素 8 ；3. 将数组第三个元素重新赋值为2
miniCalendar [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ] 
const time = { year: 2021, month: 7, day: { value: 1, }, }; const copyTime = { ...time }; console.log(copyTime); // { year: 2021, month: 7, day: { value: 1 } }
로그인 후 복사
로그인 후 복사
함수 실행시에도 쓸 수 있습니다. 함수가 함수가 아닐 수도 있는 경우와 호환됩니다. 이 경우 함수 이름을 먼저 정의하거나 값이 있어야 합니다. 그렇지 않으면 오류가 계속 보고됩니다. 
copyTime.day.value = 2; copyTime.month = 6; console.log(copyTime); // { year: 2021, month: 6, day: { value: 2 } } console.log(time); // { year: 2021, month: 7, day: { value: 2 } }
로그인 후 복사
로그인 후 복사
선택적 체이닝은 super 키워드, 템플릿 문자열, 인스턴스화 생성자, 할당 연산자의 왼쪽 등에 사용할 수 없습니다. 
const halfMonths1 = [1, 2, 3, 4, 5, 6]; const halfMonths2 = [7, 8, 9, 10, 11, 12]; const allMonths = [...halfMonths1, ...halfMonths2]; console.log(allMonths); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
로그인 후 복사
로그인 후 복사

지수 연산자과거에는 이렇게 거듭제곱을 계산했습니다 
const time1 = { month: 7, day: { value: 1, }, }; const time2 = { year: 2021, month: 8, day: { value: 10, }, }; const time = { ...time1, ...time2 }; console.log(time); // { month: 8, day: { value: 10 }, year: 2021 }
로그인 후 복사
로그인 후 복사
이제를 사용하여 지수 연산자를 통해 계산할 수 있습니다**< / code>는 
const sum = (num1, num2) => num1 + num2; console.log(sum(...[6, 7])); // 13 console.log(sum(...[6, 7, 8])); // 13
로그인 후 복사
로그인 후 복사
를 
const arrayNumbers = [1, 5, 9, 3, 5, 7, 10]; const min = Math.min(...arrayNumbers); const max = Math.max(...arrayNumbers); console.log(min); // 1 console.log(max); // 10
로그인 후 복사
로그인 후 복사
와 함께 쓸 수도 있다는 뜻입니다. 오른쪽에서 계산되기 때문에 왜 그렇게 큰지 궁금하실 것입니다. 2**(3 ** 3)과 동일합니다.

Null 값 병합 연산자(Null 판단 연산자라고도 함)이 연산자는??로 표시됩니다. 기본값은 왼쪽 값이정의되지 않음또는null인 경우에만 실행됩니다. 예제를 살펴보겠습니다. 
const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5]; const newNumbers = [...new Set(arrayNumbers)]; console.log(newNumbers); // [ 1, 5, 9, 3, 7, 10, 4, 2 ]
로그인 후 복사
로그인 후 복사
&&또는||와 혼합하는 경우 우선순위를 나타내기 위해()를 추가해야 합니다. 수준이 아니면 오류가 보고됩니다. 
const title = "china"; const charts = [...title]; console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]
로그인 후 복사
로그인 후 복사

논리 할당 연산자세 가지 논리 할당 연산자가 있습니다:
  • 논리 합집합 할당 연산자(&&=)
    • < li> 논리 OR 대입 연산자(||=)
  • 널 값 병합 대입 연산자(??=)
주로 자신에게 논리 연산을 수행한 후, 다음과 같은 값을 대입합니다. 예를 통해 살펴보겠습니다. 
const title = "china"; const short = [...title]; short.length = 2; console.log(short.join("")); // ch
로그인 후 복사
로그인 후 복사

확장 연산자 … 확장 연산자 …는 ES6에 도입되었으며, 이는 반복 가능한 객체를 별도의 요소로 확장합니다. for of 루프가 탐색하는 배열, 문자열, 맵, 세트, DOM 노드 등과 같은 객체입니다. 1. 배열 객체 복사확장기를 사용하여 배열을 복사하는 것은 ES6에서 일반적으로 사용되는 작업입니다. 
const nodeList = document.querySelectorAll(".row"); const nodeArray = [...nodeList]; console.log(nodeList); console.log(nodeArray);
로그인 후 복사
로그인 후 복사
확장 연산자는 배열을 복사하며, 첫 번째 레이어만 전체 복사본입니다. 1차원 배열에 대한 확장 작업 사용 문자 복사는 깊은 복사입니다. 다음 코드를 살펴보세요. 
const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12]; console.log(currentMonth); // 7 console.log(others); // [ 8, 9, 10, 11, 12 ]
로그인 후 복사
로그인 후 복사
보다 명확한 비교를 위해 인쇄된 결과를 다음과 같이 정리합니다.copyArrayminiCalendarcopyArray< /code>[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]miniCalendar에 다시 할당합니다. [ 0, 2 , 3, 4, 5, 6, 7, 8 ], 1 ]

拷贝对象，代码如下：

const time = { year: 2021, month: 7, day: { value: 1, }, }; const copyTime = { ...time }; console.log(copyTime); // { year: 2021, month: 7, day: { value: 1 } }
로그인 후 복사
로그인 후 복사

扩展运算符拷贝对象只会在一层进行深拷贝，从下面代码是基于上面代码：

copyTime.day.value = 2; copyTime.month = 6; console.log(copyTime); // { year: 2021, month: 6, day: { value: 2 } } console.log(time); // { year: 2021, month: 7, day: { value: 2 } }
로그인 후 복사
로그인 후 복사

从打印的结果看，扩展运算符只对对象第一层进行了深拷贝。

严格来讲，扩展运算符不执行深拷贝

2. 合并操作

先来看数组的合并，如下：

const halfMonths1 = [1, 2, 3, 4, 5, 6]; const halfMonths2 = [7, 8, 9, 10, 11, 12]; const allMonths = [...halfMonths1, ...halfMonths2]; console.log(allMonths); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
로그인 후 복사
로그인 후 복사

合并对象，在合并对象时，如果一个键已经存在，它会被具有相同键的最后一个对象给替换。

const time1 = { month: 7, day: { value: 1, }, }; const time2 = { year: 2021, month: 8, day: { value: 10, }, }; const time = { ...time1, ...time2 }; console.log(time); // { month: 8, day: { value: 10 }, year: 2021 }
로그인 후 복사
로그인 후 복사

3. 参数传递

const sum = (num1, num2) => num1 + num2; console.log(sum(...[6, 7])); // 13 console.log(sum(...[6, 7, 8])); // 13
로그인 후 복사
로그인 후 복사

从上面的代码看，函数定义了多少个参数，扩展运算符传入的值就是多少个。

和math函数一起使用，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10]; const min = Math.min(...arrayNumbers); const max = Math.max(...arrayNumbers); console.log(min); // 1 console.log(max); // 10
로그인 후 복사
로그인 후 복사

4. 数组去重

与Set一起使用消除数组的重复项，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5]; const newNumbers = [...new Set(arrayNumbers)]; console.log(newNumbers); // [ 1, 5, 9, 3, 7, 10, 4, 2 ]
로그인 후 복사
로그인 후 복사

5. 字符串转字符数组

String也是一个可迭代对象，所以也可以使用扩展运算符...将其转为字符数组，如下：

const title = "china"; const charts = [...title]; console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]
로그인 후 복사
로그인 후 복사

进而可以简单进行字符串截取，如下：

const title = "china"; const short = [...title]; short.length = 2; console.log(short.join("")); // ch
로그인 후 복사
로그인 후 복사

6.NodeList转数组

NodeList对象是节点的集合，通常是由属性，如Node.childNodes和方法，如document.querySelectorAll返回的。

NodeList类似于数组，但不是数组，没有Array的所有方法，例如find、map、filter等，但是可以使用forEach()来迭代。

可以通过扩展运算符将其转为数组，如下：

const nodeList = document.querySelectorAll(".row"); const nodeArray = [...nodeList]; console.log(nodeList); console.log(nodeArray);
로그인 후 복사
로그인 후 복사

es6의 새로운 연산자는 무엇입니까?

7. 解构变量

解构数组，如下：

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12]; console.log(currentMonth); // 7 console.log(others); // [ 8, 9, 10, 11, 12 ]
로그인 후 복사
로그인 후 복사

解构对象，如下：

const userInfo = { name: "Crayon", province: "Guangdong", city: "Shenzhen" }; const { name, ...location } = userInfo; console.log(name); // Crayon console.log(location); // { province: 'Guangdong', city: 'Shenzhen' }
로그인 후 복사

8. 打印日志

在打印可迭代对象的时候，需要打印每一项可以使用扩展符，如下：

const years = [2018, 2019, 2020, 2021]; console.log(...years); // 2018 2019 2020 2021
로그인 후 복사

【相关推荐：javascript学习教程】

위 내용은 es6의 새로운 연산자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript es6
원천：php.cn
이전 기사：es6에서 변수가 배열인지 확인하는 방법 다음 기사：웹팩은 es6을 지원하나요?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
AJAX, PHP 및 서버 전송 이벤트를 사용하여 OpenAI API에서 데이터 스트리밍 SSE(Server Sent Events)를 사용하여 JavaScript 및 PHP를 사용하는 위 API의 데이터를 브라우저 클라이언트로 스트리밍하려면 어떻게 해...
에서 2023-11-11 12:03:23
0
1
497
잡히지 않은 TypeError: 정의되지 않은 속성을 설정할 수 없습니다('innerHTML' 설정). "Continuous TextBox"(내 클래스에 의해 정의됨) 클래스의 요소에서 PHP를 사용하여 웹 페이지를 만들려고 합니다. 클릭하면 다른...
에서 2023-11-08 21:06:09
0
1
278
JavaScript에서 색상이라는 CSS/HTML의 RGB 값을 얻는 방법 [name-rgb]라는 Javascript 개체를 만들었습니다. 기본: 명명된Colors={AliceBlue:[240,248,255],AntiqueWhite:[2...
에서 2023-11-06 09:05:50
0
2
210
왜 그렇게 많은 JavaScript 스크립트가 사물에 임의의 숫자를 추가합니까? 충돌? 나는 최근에 JavaScript를 배우고 있으며 Math.rand()를 사용하여 링크(Face book.com, 가독성 북마크)에 추가하는 많은 예를 보았습니다....
에서 2023-11-04 20:00:04
0
2
296
JavaScript의 성능 제한 식별 Javascript에서 병목 현상을 찾으려고 합니다. 기본적으로 저는 작업을 수행하는 데 4-5초가 걸리는 Javascript로 작성된 크롬 확장 프로그램을 개발...
에서 2023-10-31 20:47:17
0
1
229
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！
< code>[ 2021, [ 1 , 2, 3, 4, 5, 6, 7 ], 1 ]배열 복사 1 배열의 두 번째 요소의 첫 번째 요소를 다시 할당합니다. 2. 배열의 두 번째 요소에 요소 8을 추가합니다. 3. 배열의 세 번째 요소를 2 결과에서 배열의 두 번째 요소는 1차원보다 큰 배열로 변경됩니다. 내부 요소로 인해 원래 변수의 값이 그에 따라 변경됩니다
변수 설명 결과 작업