지난 7 년간 거의 매일 매일 JavaScript를 작성 했음에도 불구하고 실제로 ES 언어 발표에 그다지 주의를 기울이지 않아도 됨을 인정해야 합니다. 

async / await 및 Proxies와 같은 주요 기능은 한 가지이지만, 매년 배울 점이 더 많기 때문에 매년 레이더에 적용되는 작고 점진적인 개선이 꾸준히 있습니다.

https://www.breck-mckye.com/blog/2019/10/modern-javascript-features-you-may-have-missed/?ref=devawesome.io 

그래서 이 포스트에서, 나는 그들이 처음 나왔을 때 방송 시간이 많이 걸리지 않은 현대적인 JS 기능들을 모았습니다. 

이것들 중 일부는 삶의 질 향상 일 뿐이지 만, 다른 것들은 진정으로 편리하며 코드 전체를 절약 할 수 있습니다.

몇 가지 놓친 부분이 있습니다.

ES2015 

Binary and octal literals 

이진 조작은 JavaScript에서 자주 수행해야 하는 작업이 아니지만 문제가 자주 발생하면 해결할 수 없는 문제가 자주 발생합니다. 저전력 장치를 위한 고성능 코드를 작성하거나, 비트를 로컬 저장소로 압축하거나, 브라우저에서 픽셀 RGB 조작을 수행하거나, 압축 된 이진 데이터 형식으로 작업해야 할 수 있습니다.

이것은 많은 작업 마스킹 / 이진 숫자 병합을 의미 할 수 있습니다. 필자는 항상 십진수로 불분명하다고 느꼈습니다. ES6은 이 목적을 위해 이진 리터럴 숫자 형식을 추가했습니다 : 0b

const binaryZero = 0b0;
const binaryOne  = 0b1;
const binary255  = 0b11111111;
const binaryLong = 0b111101011101101;

이진 플래그를 정말 쉽게 만듭니다 :

// Pizza toppings
const olives    = 0b0001;
const ham       = 0b0010;
const pineapple = 0b0100;
const artechoke = 0b1000;

const pizza_ham_pineapple = pineapple | ham;
const pizza_four_seasons  = olives | ham | artechoke;

8 진수도 마찬가지입니다. 이것들은 JS 세계에서는 약간의 틈새이지만 네트워킹 및 특정 파일 형식에서는 매우 일반적입니다. 이제 구문 0o로 8 진수를 쓸 수 있습니다.

Number.isNaN() 

window.isNaN()과 혼동하지 말고 훨씬 직관적 인 동작을 하는 새로운 방법입니다.

알다시피, 고전적인 isNaN에는 몇 가지 흥미로운 특징이 있습니다.

isNaN(NaN)              === true
isNaN(null)             === false
isNaN(undefined)        === true
isNaN({})               === true
isNaN('0/0')            === true
isNaN('hello')          === true

무엇을 제공합니까? 첫째로, 그 매개 변수 중 어느 것도 실제로 NaN이 아닙니다. 

평소와 같이 문제는 모든 사람이 "좋아하는"JavaScript 기능인 유형 강제라는 것입니다. 

window.isNaN에 대한 인수는 숫자 함수를 통해 숫자로 강제 변환됩니다.

새로운 Number.isNaN() 정적 메소드는 이 모든 것을 해결합니다. 그것은 당신이 한 주장과 NaN의 평등을 단번에, 확실하게 돌려줍니다. 완전히 모호하지 않습니다.

Number.isNaN(NaN)       === true
Number.isNaN(null)      === false
Number.isNaN(undefined) === false
Number.isNaN({})        === false
Number.isNaN('0/0')     === false
Number.isNaN('hello')   === false

서명 : Number.isNaN : (값 : any) => 부울

ES2016 

Exponent (power) operator 

이것은 계속해서 자라기 때문에 힘에 대한 문자 적 ​​구문을 갖는 것이 좋습니다.

2**2 === 4
3**2 === 9
3**3 === 27

(JavaScript에 이미 이 내용이 있다고 확신했기 때문에 이상합니다 .Python을 생각했을 수도 있습니다)

Array.prototype.includes() 

이것은 놓치기가 조금 어려웠지만 지난 3 년 동안 array.indexOf (x)! == -1을 쓰는 데 소비했다면 새로운 include 메소드를 기뻐하십시오.

[1, 2, 3].includes(2)    === true
[1, 2, 3].includes(true) === false

include은 NaN 값을 처리 할 수 ​​있다는 점을 제외하고는 완전 평등 (===) 검사와 거의 동일한 동일 값 영 알고리즘을 사용합니다. 

동등 검사와 마찬가지로 내용이 아닌 참조로 객체를 비교합니다.

const object1 = {};
const object2 = {};

const array = [object1, 78, NaN];

array.includes(object1) === true
array.includes(object2) === false
array.includes(NaN)     === true

includes는 오프셋을 제공 할 수 있는 두 번째 매개 변수가 fromIndex를 취할 수 있습니다:

// positions   0  1  2  3  4
const array = [1, 1, 1, 2, 2];

array.includes(1, 2) === true
array.includes(1, 3) === false

서명 : Array.prototype.includes : (경기 : 어떤 오프셋? INT) => 부울

ES2017 

Shared Array Buffers & Atomics 

이것은 웹 작업자와 많은 작업을 수행하는 경우 매우 유용한 기능입니다. 프로세스간에 메모리를 직접 공유하고 경쟁 조건을 피하기 위해 잠금을 설정할 수 있습니다.

둘 다 상당히 복잡한 API를 갖춘 주요 기능이므로 여기에 개요를 제공 할 공간이 없지만 자세한 내용은 이 Sitepen 기사를 참조하십시오. 브라우저 지원은 여전히 ​​반점이지만 앞으로 몇 년 동안 개선 될 것입니다.

ES2018 

Regex bonanza 

ES2018은 정규 표현식 기능의 전체적인 특징을 소개했습니다.

Lookbehind matches (match on previous chars) 

이를 지원하는 런타임에서 이제 일치하기 전에 문자를 찾는 정규식을 작성할 수 있습니다. 예를 들어, 달러가 앞에 붙은 모든 숫자를 찾으려면 다음을 수행하십시오.

const regex = /(?<=\$)\d+/;
const text  = 'This cost $400';
text.match(regex) === ['400']

핵심은 새로운 lookbehind 그룹, lookahead 그룹에 대한 사악한 쌍둥이입니다.

Look ahead:  (?=abc)
Look behind: (?<=abc)

Look ahead negative:  (?!abc)
Look behind negative: (?<!abc)

불행히도 현재는 이전 브라우저에서 새로운 Lookbehind 구문을 변환 할 수 있는 방법이 없으므로 당분간 노드에서 이 구문을 사용해야 할 수도 있습니다.

캡처 그룹의 이름을 지정할 수 있습니다 

정규 표현식의 정말 강력한 기능은 하위 일치 항목을 골라 간단한 구문 분석을 수행하는 기능입니다. 그러나 최근까지는 숫자로만 하위 일치를 참조 할 수 있었습니다 (예 :

const getNameParts  = /(\w+)\s+(\w+)/g;
const name          = "Weyland Smithers";
const subMatches    = getNameParts.exec(name);

subMatches[1]     === 'Weyland'
subMatches[2]     === 'Smithers'

그러나 이제 이름을 지정하려는 각 그룹의 Parens 시작 부분에? <title>을 붙여서 이러한 하위 일치 (또는 캡처 그룹) 이름을 지정하는 구문이 있습니다.

const getNameParts  = /(?<first>\w+)\s(?<last>\w+)/g;
const name          = "Weyland Smithers";
const subMatches    = getNameParts.exec(name);

const {first, last} = subMatches.groups
first             === 'Weyland'
last              === 'Smithers'

불행히도 이것은 현재 Chrome 및 노드 전용입니다.

Dots can now match newlines 

예를 들어 /s 플래그를 제공하면 됩니다. /someRegex./s, /anotherRegex./sg.

ES2019 

Array.prototype.flat() & flatMap() 

나는 MDN에서 이것들을 보게 되어 매우 기뻤습니다.

flat(), 매우 간단하게, 지정된 최대 깊이로 다차원 배열을 평탄화 합니다.

const multiDimensional = [
	[1, 2, 3],
    [4, 5, 6],
    [7,[8,9]]
];

multiDimensional.flat(2) === [1, 2, 3, 4, 5, 6, 7, 8, 9]

flatMap은 기본적으로 맵과 깊이 1의 평면이 뒤 따릅니다. 매핑 함수가 배열을 반환 할 때 유용하지만 결과가 중첩 된 데이터 구조가 되는 것을 원하지 않습니다

const texts = ["Hello,", "today I", "will", "use FlatMap"];

// with a plain map
const mapped = texts.map(text => text.split(' '));
mapped === ['Hello', ['today', 'I'], 'will', ['use', 'FlatMap']];

// with flatmap
const flatMapped = texts.flatMap(text => text.split(' '));
flatMapped === ['Hello', 'today', 'I', 'will', 'use', 'FlatMap'];

Unbound catches 

이제 throw 된 오류를 바인딩 하지 않고 try / catch 문을 작성할 수 있습니다.

try {
  // something throws
} catch {
  // don't have to do catch(e)
}

또한 e의 가치에 관심이 없는 곳을 포켓몬 예외 처리라고 합니다. ‘모두 잡으세요’

String trim methods 

아주 작지만 멋져요 :

const padded         = '          Hello world   ';
padded.trimStart() === 'Hello world   ';
padded.trimEnd()   === '          Hello world';