집 > 기사 > 웹 프론트엔드 > ES6 사용 시 주의사항은 무엇인가요?

ES6 사용 시 주의사항은 무엇인가요?

php中世界最好的语言원래의: 2018-06-06 10:20:101286검색

이번에는 ES6 사용 시 주의사항을 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

ES6는 출시된 지 몇 년이 되었으며 프로젝트에서 많은 새로운 기능을 영리하게 사용할 수 있습니다. 나는 그것이 당신에게 유용할 것이라는 희망으로 그 중 일부를 나열하고 싶습니다.

다른 꿀팁을 알고 계시다면 메시지를 남겨주세요. 기꺼이 추가하겠습니다.

1. 필수 매개변수

ES6은 기본 매개변수 값 메커니즘을 제공하여 함수 호출 시 이러한 매개변수가 전달되지 않도록 매개변수에 대한 기본값을 설정할 수 있습니다.

아래 예에서는 매개변수 a와 b의 기본값으로 필수() 함수를 작성했습니다. 즉, 호출 시 a 또는 b의 매개변수 중 하나에 값이 전달되지 않으면 필수() 함수가 기본값으로 설정되고 오류가 발생합니다.

const required = () => {throw new Error('Missing parameter')};
const add = (a = required(), b = required()) => a + b;
add(1, 2) //3
add(1) // Error: Missing parameter.

2. 강력한 감소

배열의 감소 방법은 매우 다양합니다. 일반적으로 배열의 각 항목을 단일 값으로 줄이는 데 사용됩니다. 하지만 그것으로 더 많은 일을 할 수 있습니다.

2.1 Reduce를 사용하여 맵과 필터를 동시에 구현합니다.

이제 시퀀스가 있고 시퀀스의 각 항목(맵 함수)을 업데이트한 다음 일부를 필터링(필터 함수)한다고 가정합니다. 맵을 먼저 사용한 다음 필터를 사용하는 경우 배열을 두 번 반복해야 합니다.

아래 코드에서는 배열의 값을 두 배로 늘린 다음 50보다 큰 숫자를 선택합니다. map 메소드와 filter 메소드를 모두 완성하기 위해 매우 효율적으로 Reduce를 사용하는 방법에 주목하세요.

const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num) => {
 num = num * 2; 
 if (num > 50) {
  finalList.push(num);
 }
 return finalList;
}, []);
doubledOver50; // [60, 80]

2.2 Reduce를 사용하여 맵과 필터 대체

위 코드를 주의 깊게 읽으면 Reduce가 맵과 필터를 대체할 수 있다는 것을 이해할 수 있을 것입니다.

2.3 Reduce를 사용하여 괄호 일치

Reduce의 또 다른 용도는 주어진 문자열에서 괄호를 일치시키는 것입니다. 괄호가 포함된 문자열의 경우 (and)의 개수가 일치하는지, (이전에 나타나는지) 여부를 알아야 합니다.

아래 코드에서는 이 문제를 쉽게 해결하기 위해 Reduce를 사용합니다. 먼저 초기 값이 0인 카운터 변수만 선언하면 됩니다. 조우 시 카운터가 1개 증가합니다. (조우 시 카운터가 1개 감소합니다.) 왼쪽과 오른쪽 괄호의 개수가 일치하면 최종 결과는 0입니다.

//Returns 0 if balanced.
const isParensBalanced = (str) => {
 return str.split('').reduce((counter, char) => {
  if(counter < 0) { //matched ")" before "("
   return counter;
  } else if(char === &#39;(&#39;) {
   return ++counter;
  } else if(char === &#39;)&#39;) {
   return --counter;
  } else { //matched some other char
   return counter;
  }
  
 }, 0); //<-- starting value of the counter
}
isParensBalanced(&#39;(())&#39;) // 0 <-- balanced
isParensBalanced(&#39;(asdfds)&#39;) //0 <-- balanced
isParensBalanced(&#39;(()&#39;) // 1 <-- not balanced
isParensBalanced(&#39;)(&#39;) // -1 <-- not balanced

2.4 배열에서 동일한 항목 수 계산하기

배열에서 반복되는 항목 수를 세고 객체로 표현하고 싶을 때가 많습니다. 그런 다음 축소 메소드를 사용하여 이 배열을 처리할 수 있습니다.

다음 코드는 각 유형의 자동차 수를 계산한 후 총 수를 객체로 나타냅니다.

var cars = [&#39;BMW&#39;,&#39;Benz&#39;, &#39;Benz&#39;, &#39;Tesla&#39;, &#39;BMW&#39;, &#39;Toyota&#39;];
var carsObj = cars.reduce(function (obj, name) { 
  obj[name] = obj[name] ? ++obj[name] : 1;
 return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

리듀스에는 다른 용도가 너무 많습니다. MDN의 관련 코드 예제를 읽어 보시기 바랍니다.

3. 개체 해체

3.1 불필요한 속성 제거

때때로 특정 개체 속성을 유지하고 싶지 않은 경우가 있는데, 그 이유는 개체 속성에 민감한 정보가 포함되어 있거나 너무 크기 때문일 수 있습니다. 전체 개체를 열거하고 삭제할 수도 있지만 실제로는 쓸모 없는 속성을 변수에 할당한 다음 유지하려는 유용한 부분을 나머지 매개 변수로 전달하면 됩니다.

아래 코드에서는 _internal 및 tooBig 매개변수를 삭제하려고 합니다. 이를 내부 및 tooBig 변수에 할당한 다음 나중에 사용하기 위해 나머지 속성을 cleanObject에 저장할 수 있습니다.

let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};
console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}

3.2 함수 매개변수에서 중첩 객체 해체

다음 코드에서 엔진은 객체 car에 중첩된 객체입니다. 엔진의 vin 속성에 관심이 있다면 구조 분해 할당을 사용하여 쉽게 얻을 수 있습니다.

var car = {
 model: 'bmw 2018',
 engine: {
  v6: true,
  turbo: true,
  vin: 12345
 }
}
const modelAndVIN = ({model, engine: {vin}}) => {
 console.log(`model: ${model} vin: ${vin}`);
}
modelAndVIN(car); // => model: bmw 2018 vin: 12345

3.3 객체 병합

ES6은 스프레드 연산자(...)를 제공합니다. 일반적으로 배열을 구조 해제하는 데 사용되지만 객체와 함께 사용할 수도 있습니다.

다음으로 스프레드 연산자를 사용하여 새 개체를 확장하고 두 번째 개체의 속성 값이 첫 번째 개체의 속성 값을 덮어씁니다. 예를 들어, object2의 b와 c는 object1과 동일한 이름의 속성을 덮어씁니다.

let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {…object1, …object2} //spread and re-add into merged
console.log(merged) // {a:1, b:30, c:40, d:50}

4.Sets

4.1 Set을 사용하여 배열 중복 제거 구현

ES6에서는 Set을 사용하여 고유한 값만 저장하므로 Set을 사용하여 중복을 제거할 수 있습니다.

let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...new Set(arr)] // [1, 2, 3]

4.2 Set에서 배열 메서드 사용

使用扩展运算符就可以简单的将Set转换为数组。所以你可以对Set使用Array的所有原生方法。

比如我们想要对下面的Set进行filter操作，获取大于3的项。

let mySet = new Set([1,2, 3, 4, 5]);
var filtered = [...mySet].filter((x) => x > 3) // [4, 5]

5. 数组解构

有时候你会将函数返回的多个值放在一个数组里。我们可以使用数组解构来获取其中每一个值。

5.1 数值交换

let param1 = 1;
let param2 = 2;
//swap and assign param1 & param2 each others values
[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1

5.2 接收函数返回的多个结果

在下面的代码中，我们从/post中获取一个帖子，然后在/comments中获取相关评论。由于我们使用的是async/await，函数把返回值放在一个数组中。而我们使用数组解构后就可以把返回值直接赋给相应的变量。

async function getFullPost(){
 return await Promise.all([
  fetch('/post'),
  fetch('/comments')
 ]);
}
const [post, comments] = getFullPost();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

ES6 사용 시 주의사항은 무엇인가요?

관련 기사