네가 지금 사용할 수 있는 세 가지 기교를 널리 보급하다

이 문장은 내가 2020년 5월 22일에 발표한 문장에 근거하여 창작한 것이다
ES6(ECMAScript 2015, 버전 6)은 5년 전에 원고를 작성하여 우리에게 대량의 새로운 문법과 기능을 가져다 주었습니다. 복잡한 코드를 더욱 쉽고 간단하게 작성하는 데 도움을 주었습니다.
나는 너희들 중 많은 사람들이 새로운 특성을 채택했다고 가정한다. 예를 들어 류성명, let/const과 화살표 함수 표현식 등을 통해 문법당에서 더 많은 열량을 소모했지만 알려지지 않은 Spread operator은?
여기서 spread 조작부호의 좋은 사용법, 즉 내가 인코딩할 때 발견한 세 가지 점(그리고 Stack Overflow, 나는 내가 어떻게 인코딩했는지 거짓말하지 않을 거야!)을 공유하고 싶습니다.

세 시에 뭘 할 수 있어요?

우선 ES6에는'3점'설탕 2종이 도입됐다.하나는 Rest parameter으로 우리가 임의의 수량의 매개 변수를 사용할 수 있도록 하고, 다른 하나는 Spread 연산자이며, 세 개의 비슷한 문법도 있지만, 그 반대의 버전인 매개 변수가 아닌 그룹 자체를 받아들인다.
본문에서 나는 확장문법을 사용하는 기교를 보여줄 것이다.정의를 읽는 것보다 실례를 읽는 것이 그 역할을 이해하기 쉽다!

두 문자열 연결하기

"고양이"라고 말하고, 나는 "야옹"이라고 말한다.
두 개의 그룹을 연결합시다.여기에 우리는 고양이 가죽 색깔을 대표하는 두 개의 그룹이 있다.

const arr1 = ['solid', 'bicolor', 'tabby'];
const arr2 = ['calico', 'tortoiseshell'];

이것은 ES6 이전에 concat()을 사용하던 기존의 방식입니다.

var conCats = arr1.concat(arr2);
// ['solid', 'bicolor', 'tabby', 'calico', 'tortoiseshell']

이제 다음과 같이 ES6 spread 구문을 쉽게 사용할 수 있습니다.

const conCats = [...arr1, ...arr2]; 
// ['solid', 'bicolor', 'tabby', 'calico', 'tortoiseshell']

문자열을 배열로 변환

당신은 구직 면접에서 문자열을 반전시키거나, 문자열이 회문인지 확인하도록 요구받았습니까?너는 더욱 복잡한 문제에 부딪힐 수 있지만, 소프트웨어 엔지니어에게는 매우 흔히 볼 수 있는 면접 문제이다.
어쨌든, 이 문제를 해결하는 첫 번째 단계는 주어진 문자열을 그룹으로 바꾸는 것이다.
주어진 문자열이 있습니다:

const str = 'kitty';

ES6 이전 JavaScript의 경우 split()을 사용하여 배열의 각 문자를 가져옵니다.

var newArr = str.split(''); // ['k', 'i', 't', 't', 'y'];

ES6 spread 구문을 사용하면 다음과 같은 기능을 사용할 수 있습니다.

const newArr = [...str]; // ['k', 'i', 't', 't', 'y'];

최대값 또는 최소값 찾기

예를 들면 당신이 정해진 숫자가 있는데,

10, 9, 6, 12 

숫자 세트에서 가장 크거나 가장 작은 숫자를 찾으려면 다음과 같이 Math.max()(또는 Math.min())을 사용하여 지정된 숫자를 입력 매개 변수로 전달할 수 있습니다.

var max = Math.max(10, 9, 6, 12);

이제 ES6 spread 구문을 사용하여 숫자 배열을 전달할 수 있습니다.

const nums = [10, 9, 6, 12];
const max = Math.max(...nums); // 12

복제 배열

spread 문법으로 수조의 얕은 부본을 만들 수 있습니다.
당신은 하나의 수조가 있는데,

const allCatNames = ['chewie', 'leia', 'yoda', 'chewie', 'luke', 'leia'];

pre-ES6를 사용하여 slice()의 얕은 어레이 복제본을 가져오는 방법:

var allCatNamesCopy = allCatNames.slice();

이제 ES6 spread 구문을 사용하여 다음을 수행하십시오.

const allCatNamesCopy = [...allCatNames];

패턴에서 DUP 제거

위의 수조 allCatNames은 중복된 값이 있다(chewie과 leia은 목록에 두 번 나타났다).중복 코드를 제거하려면 ES6 이전의 JavaScript를 사용하여 여러 줄 코드를 작성합니다.
너는 수조를 교체할 수 있다.매 순환에서, 매핑 대상의 모든 값은 대상의 관건점이 유일하는지 추적하고, 만약 그렇다면, 이 값을 새로운 그룹으로 밀어넣는다.그리고 순환이 끝날 때, 새 그룹은 유일한 값만 있습니다.
실제로 spread 문법을 사용하여 한 줄 코드에서 이 점을 실현할 수 있습니다. 방법은 spread 문법과 Set 대상을 결합시켜 새로운 그룹을 만드는 것입니다.

const catNames = [...new Set(allCatNames)]; 
// ['chewie', 'leia', 'yoda', 'luke'];

타다, 이거 코드 많이 절약했어!

배열에서 HTML 요소 수집

프런트엔드 JavaScript 개발자인 경우 DOM을 조작할 때 유용할 수 있습니다.
예를 들어, 클래스가 .cat인 모든 요소를 가져오려고 할 때, querySelectorAll()을 사용하여 DOM 노드의 집합을 가져올 수 있습니다.
그러나 document.querySelectorAll('.cat')은 정적 노드 목록을 되돌려줍니다. 이것은 하나의 그룹과 유사하지만, 그 위에 교체할 수 있는 그룹은 아닙니다.
그래서 어떤 경우에는 노드 목록을 수조로 변환해야 한다.전통적으로, 당신은 이런 코드를 계속 작성하고 있을 수 있습니다. 이것은 그다지 직관적이지 않은 것 같습니다.

var catElementArray = [].slice.call(document.querySelectorAll('.cat'));

이제 spread 구문을 사용하여 다음 내용을 다시 쓸 수 있습니다.

const catElementArray = [...document.querySelectorAll('.cat')];

이것은 보기에 더욱 직관적이지 않습니까?
세 가지 기호를 좋아하거나 싫어하면, 세그먼트와 대상을 처리할 때,spread 조작부호가 매우 편리하다는 것을 알 수 있습니다.
만약 내가 너를 지금부터 너의 일상 코드에서 이 세 가지를 사용하도록 설득할 수 있다면 나는 매우 기쁠 것이다.물론spread 연산자를 사용하여 코드를 작성하는 방법도 더 똑똑합니다. 그래서 그 비결을 알고 있다면 저와 JS 커뮤니티의 다른 사람과 공유하세요!

ES에 대해 자세히 알고 싶습니다.다음?

저는 9월에 Forward JS(샌프란시스코 가상판)과 Web Directions(시드니 가상판)에서 강연을 할 것입니다. ECMeowScript-JavaScript로 설명한 새로운 내용입니다. 그래서 제 강연을 잘 들어주셨으면 좋겠습니다!🐱
(편집: 회의 월이 업데이트되었습니다.)
안녕히 계세요!