정보실

웹학교

정보실

javascript 놓칠 수도 있는 최신 JavaScript 기능

본문

지난 7 년간 거의 매일 매일 JavaScript를 작성 했음에도 불구하고 실제로 ES 언어 발표에 그다지 주의를 기울이지 않아도 됨을 인정해야 합니다. async / await 및 Proxies와 같은 주요 기능은 한 가지이지만, 매년 배우기에는 더 큰 것이 있기 때문에 매년 점차적으로 소규모의 점진적 개선이 이루어지고 있습니다.


http://www.breck-mckye.com/blog/2019/10/modern-javascript-features-you-may-have-missed/ 


그래서 이 포스트에서, 나는 그들이 처음 나왔을 때 방송 시간이 많이 걸리지 않은 현대적인 JS 기능들을 모았습니다. 이것들 중 일부는 삶의 질 향상 일 뿐이지 만, 다른 것들은 정말 편리하며 코드 전체를 절약 할 수 있습니다. 몇 가지 놓친 부분이 있습니다.


ES2015 


이진 및 8 진 리터럴 


이진 조작은 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


포함에는 오프셋을 제공 할 수 있는 두 번째 매개 변수 인 fromIndex를 사용할 수 있습니다.


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

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


Signature: Array.prototype.includes : (match: any, offset?: Int) => boolean 


ES2017 


Shared Array Buffers & Atomics 


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


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


ES2018 


Regex bonanza 


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


Lookbehind 일치 (이전 문자와 일치) 


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

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 및 노드 전용입니다.


점은 이제 개행과 일치 할 수 있습니다 


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


ES2019 


Array.prototype.flat() & flatMap() 


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


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


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';



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 15회 ]  작성일19-11-02 10:39

웹학교