ES6의 6가지 작은 기능에 대해 간단히 이야기해보겠습니다.

머리말

이 글은 주로 ES6에 대한 간략한 소개입니다. 사실 ES6가 무엇인지 아직 모르실 수도 있습니다. 모두가 바쁜 시대에 ES6에 대한 빠른 이해를 원한다면, 현재 가장 인기 있는 프로그래밍 언어인 최신 세대 JavaScript의 6가지 주요 기능에 대해 읽어보시기 바랍니다.

ES6는 지난 한 해 동안 많은 발전을 이루었습니다. 제가 가장 좋아하는 JS의 새로운 기능 6가지를 소개합니다.

1.객체[키]

객체 변수 선언 시 모든 키/값을 설정할 수 없는 경우가 있으므로 선언 후 키/값을 추가해야 합니다.

let myKey = 'key3';
let obj = {
  key1: 'One',
  key2: 'Two'
};
obj[myKey] = 'Three';

좋게 말하면 조금 불편하고 혼란스럽고 나쁘게 말하면 조금 추악한 것입니다.

ES6은 개발자에게 더욱 우아한 방법을 제공합니다.

let myKey = 'variableKey';
let obj = {
  key1: 'One',
  key2: 'Two',
  [myKey]: 'Three' /* yay! */
};

개발자는 []를 사용하여 변수를 래핑하고 명령문을 사용하여 모든 작업을 수행할 수 있습니다. 기능.

2. Arrow 함수

ES6의 모든 변경 사항을 따라갈 필요는 없습니다. Arrow 함수는 많은 논의의 주제였으며 혼란을 가져오기도 했습니다. JS 개발자. 화살표 함수의 특성에 대한 많은 블로그 게시물을 작성할 수 있지만 화살표 함수가 어떻게 간단한 함수에 대한 코드를 압축하는 방법을 제공하는지 지적하고 싶습니다.

// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11
 
// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);

함수와 반환 키워드가 없으면 때로는 ()를 추가할 필요조차 없는 경우도 있습니다. .

3. find/findIndex

JS는 개발자에게 Array.prototype.indexOf 메서드를 제공하여 배열에서 지정된 요소의 첨자를 가져오지만 indexOf는 기반을 제공하지 않습니다. 특정 요소를 얻기 위한 조건 find 및 findIndex 메소드는 계산 조건을 충족하는 첫 번째 요소와 첨자를 제공합니다.

let age = [12,19,6,4];
 
let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 19); // 1

4....확장 수식어

확장 수식어는 배열과 반복 가능한 객체가 시간으로 호출되어야 함을 나타냅니다. 개별 매개변수로 분할됩니다:

// Pass to function that expects separate multiple arguments
// Much like Function.prototype.apply() does
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
 
// Convert NodeList to Array
let divsArray = [...document.querySelectorAll('div')];
 
// Convert Arguments to Array
let argsArray = [...arguments];

이 특정 항목의 또 다른 보너스는 반복 가능한 객체(NodeList, 인수)를 실제 배열로 바꿀 수 있다는 것입니다. 과거에는 이를 달성하기 위해 Array.from 또는 다른 방법을 자주 사용했습니다.

5. 템플릿 리터럴

JS의 여러 줄 문자는 처음에 +와 ```를 통해 구현되었지만 유지 관리가 어려웠습니다. 많은 개발자와 심지어 일부 프레임워크에서는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 사용하여 템플릿을 보관한 다음 DOM 메서드인 externalHTML````을 사용하여 HTML 문자를 가져옵니다.

ES6은 역따옴표를 사용하여 여러 줄 문자열을 쉽게 생성할 수 있는 템플릿 리터럴을 제공합니다.

// Multiline String
let myString = `Hello
 
I'm a new line`;
 
//Basic interpolations
let obj = {x:1,y:2};
 
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is 3

6. 기본 인수 값

함수 매개변수에 대한 기본값 제공은 이미 서버측 언어(python, php)에서 제공되고 있으며 이제 JS에도 다음 기능이 있습니다.

//Basic usage
 
function great( name = 'Anon' ){
  console.log(`Hello ${name}`);
}
 
great(); // Hello Anon!
 
//You can have a function too!
 
function greet( name = 'Anon',callback = function(){} ){
  console.log(`Hello ${name}!`);
  // No more "callback && callback()" (no conditional)
  callback();
}
 
// Only set a default for one parameter
function greet(name, callback = function(){}) {}

위에 나열된 6가지 기능은 ES6에서 개발자에게 제공되는 기능이며, 물론 더 많은 기능이 있습니다.