올해는 ECMAScript 2019(줄여서 ES2019)가 출시됩니다. 새로운 기능에는 Object.fromEntries(), TrimStart(), TrimEnd(), flat(), flatMap(), 기호 객체의 설명 속성, 선택적 캐치 바인딩 등이 포함됩니다.
1.Object.fromEntries()
JavaScript에서는 데이터를 한 형식에서 다른 형식으로 변환하는 것이 매우 일반적입니다. 객체를 배열로 쉽게 변환하기 위해 ES2017에서는 Object.entrie() 메서드를 도입했습니다. 이 메서드는 개체를 매개 변수로 사용하고 [key, value] 형식으로 개체 자체의 열거 가능한 문자열 키 속성 쌍의 배열을 반환합니다. 예:
const obj = {one: 1, two: 2, three: 3}; console.log(Object.entries(obj)); // => [["one", 1], ["two", 2], ["three", 3]]
하지만 반대로 키-값 쌍 목록을 객체로 변환하고 싶다면 어떻게 해야 할까요? Python과 같은 일부 프로그래밍 언어에서는 이러한 목적으로 dict() 함수를 제공합니다. Underscore.js 및 Lodash에는 _.fromPairs 함수도 있습니다.
ES2019에서는 JavaScript에 유사한 기능을 제공하는 Object.fromEntries() 메서드를 도입했습니다. 이 정적 메서드를 사용하면 키-값 쌍 목록을 객체로 쉽게 변환할 수 있습니다.
const myArray = [['one', 1], ['two', 2], ['three', 3]]; const obj = Object.fromEntries(myArray); console.log(obj); // => {one: 1, two: 2, three: 3}
보시다시피 Object.fromEntries()는 Object.entries()와 동일하며 정반대입니다. 이전에는 Object.fromEntries()와 동일한 기능을 구현하는 것이 가능했지만 구현 방식은 약간 복잡했습니다.
const myArray = [['one', 1], ['two', 2], ['three', 3]]; const Array.from(myArray).reduce((acc, [key, val]) => Object.assign(acc, {[key]: val}), {}) console.log(obj); // => {one: 1, two: 2, three: 3}
Object.fromEntries()에 전달된 인수는 반복 가능한 프로토콜을 구현하는 모든 개체가 될 수 있다는 점을 기억하세요. , 두 개의 요소를 반환하는 한 배열과 유사한 객체로 충분합니다.
예를 들어 다음 코드에서 Object.fromEntries()는 Map 객체를 매개변수로 사용하고 키와 해당 값이 Map의 쌍으로 제공되는 새 객체를 생성합니다.
const map = new Map(); map.set('one', 1); map.set('two', 2); const obj = Object.fromEntries(map); console.log(obj); // => {one: 1, two: 2}
Object.fromEntries( ) 변환 방법 객체도 매우 유용합니다. 다음 코드를 고려하세요.
const obj = {a: 4, b: 9, c: 16}; // 将对象转换为数组 const arr = Object.entries(obj); // 计算数字的平方根 const map = arr.map(([key, val]) => [key, Math.sqrt(val)]); // 将数组转换回对象 const obj2 = Object.fromEntries(map); console.log(obj2); // => {a: 2, b: 3, c: 4}
위 코드는 객체의 값을 제곱근으로 변환합니다. 이를 위해 먼저 객체를 배열로 변환한 다음 map() 메서드를 사용하여 배열에 있는 값의 제곱근을 구합니다. 결과는 객체로 다시 변환할 수 있는 배열입니다.
Object.fromEntries()를 사용하는 또 다른 사례는 이 예제에 표시된 것처럼 URL의 쿼리 문자열을 처리하는 것입니다.
const paramsString = 'param1=foo¶m2=baz'; const searchParams = new URLSearchParams(paramsString); Object.fromEntries(searchParams); // => {param1: "foo", param2: "baz"}
이 코드에서 쿼리 문자열은 URLSearchParams() 생성자에 전달됩니다. 그런 다음 반환 값(예: URLSearchParams 객체 인스턴스)이 Object.fromEntries() 메서드에 전달되고 결과는 각 매개변수를 속성으로 포함하는 객체입니다.
Object.fromEntries() 메서드는 현재 4단계 제안이므로 ES2019 표준에 포함될 준비가 되었습니다.
2. TrimStart() 및 TrimEnd()
trimStart() 및 TrimEnd() 메서드는 TrimLeft() 및 TrimRight()와 동일하게 구현됩니다. 이러한 메서드는 현재 4단계에 있으며 padStart() 및 padEnd()와 일치하도록 사양에 추가될 예정입니다. 몇 가지 예를 살펴보세요.
const str = " string "; // es2019 console.log(str.trimStart()); // => "string " console.log(str.trimEnd()); // => " string" // 相同结果 console.log(str.trimLeft()); // => "string " console.log(str.trimRight()); // => " string"
웹 호환성을 위해 TrimLeft() 및 TrimRight()는 다음과 같이 유지됩니다. TrimStart() 및 TrimEnd()의 별칭입니다.
3. flat() 및 flatMap()
flat() 메서드는 다차원 배열을 1차원 배열로 평면화할 수 있습니다.
const arr = ['a', 'b', ['c', 'd']]; const flattened = arr.flat(); console.log(flattened); // => ["a", "b", "c", "d"]
과거에는 다중 차원 배열을 평면화하기 위해 Reduce() 또는 concat()를 자주 사용했습니다. -차원 배열:
const arr = ['a', 'b', ['c', 'd']]; const flattend = [].concat.apply([], arr); // or // const flattened = [].concat(...arr); console.log(flattened); // => ["a", "b", "c", "d"]
제공된 배열에 null 값이 있으면 해당 값은 폐기됩니다.
const arr = ['a', , , 'b', ['c', 'd']]; const flattened = arr.flat(); console.log(flattened); // => ["a", "b", "c", "d"]
flat()은 중첩 배열을 평면화해야 하는 수준 수를 지정하는 선택적 매개 변수도 허용합니다. 인수가 제공되지 않으면 기본값 1이 사용됩니다.
const arr = [10, [20, [30]]]; console.log(arr.flat()); // => [10, 20, [30]] console.log(arr.flat(1)); // => [10, 20, [30]] console.log(arr.flat(2)); // => [10, 20, 30]
flatMap() 메서드는 map()과 flat()을 단일 메서드로 결합합니다. 먼저 제공된 함수의 반환 값을 사용하여 새 배열을 만든 다음 해당 배열의 모든 하위 배열 요소를 연결합니다. 예는 다음과 같습니다.
const arr = [4.25, 19.99, 25.5]; console.log(arr.map(value => [Math.round(value)])); // => [[4], [20], [26]] console.log(arr.flatMap(value => [Math.round(value)])); // => [4, 20, 26]
배열은 깊이 수준 1로 평면화됩니다. 결과에서 항목을 제거하려면 빈 배열을 반환하면 됩니다.
const arr = [[7.1], [8.1], [9.1], [10.1], [11.1]]; // do not include items bigger than 9 arr.flatMap(value => { if (value >= 10) { return []; } else { return Math.round(value); } }); // returns: // => [7, 8, 9]
콜백 함수는 현재 요소 외에 요소도 받습니다. 처리 중인 인덱스와 배열 자체에 대한 참조입니다. flat() 및 flatMap() 메서드는 현재 4단계에 있습니다.
4. Symbol 객체의 Description 속성
Symbol을 생성할 때 디버깅을 위해 설명(description)을 추가할 수 있습니다. 때로는 코드의 설명에 직접 액세스하는 것이 유용할 수 있습니다.
ES2019는 기호 설명이 포함된 문자열을 반환하는 기호 개체에 읽기 전용 속성 설명을 추가합니다.
let sym = Symbol('foo'); console.log(sym.description); // => foo sym = Symbol(); console.log(sym.description); // => undefined // create a global symbol sym = Symbol.for('bar'); console.log(sym.description); // => bar
5. 선택 사항 catch
try catch 문의 catch는 때때로 쓸모가 없습니다.
try { // 使用浏览器可能尚未实现的功能 } catch (unused) { // 这里回调函数中已经帮我们处理好的错误 }
이 코드의 catch 콜백 정보는 유용하지 않습니다. 그러나 SyntaxError 오류를 피하기 위해 이런 방식으로 작성되었습니다. ES2019는 catch 주위의 괄호를 생략할 수 있습니다:
try { // ... } catch { // .... }
추가: ES2020의 String.prototype.matchAll
matchAll() 메서드는 ES2020 4단계 제안으로, 정규식에 대한 모든 일치 항목(캡처 그룹 포함)에 대해 반복자 개체를 반환합니다.
match() 메서드와 일관성을 유지하기 위해 TC39는 "matches" 또는 Ruby의 "scan"과 같은 다른 제안된 이름 대신 "matchAll"을 선택했습니다. 간단한 예를 살펴보십시오.
const re = /(Dr\. )\w+/g; const str = 'Dr. Smith and Dr. Anderson'; const matches = str.matchAll(re); for (const match of matches) { console.log(match); } // logs: // => ["Dr. Smith", "Dr. ", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined] // => ["Dr. Anderson", "Dr. ", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]
이 정규 표현식의 캡처 그룹은 문자 "Dr" 뒤에 점과 공백이 오는 것과 일치합니다. w+는 임의의 단어 문자와 한 번 이상 일치합니다. 그리고 g 플래그는 엔진이 문자열 전체에서 패턴을 검색하도록 지시합니다.
이전에는 동일한 결과를 얻기 위해 루프에서 exec() 메서드를 사용해야 했는데 이는 그다지 효율적이지 않았습니다.
const re = /(Dr\.) \w+/g; const str = 'Dr. Smith and Dr. Anderson'; let matches; while ((matches = re.exec(str)) !== null) { console.log(matches); } // logs: // => ["Dr. Smith", "Dr.", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined] // => ["Dr. Anderson", "Dr.", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]
重要的是要注意尽管match() 方法可以与全局标志g一起使用来访问所有匹配,但它不提供匹配的捕获组或索引位置。 比较以下代码:
const re = /page (\d+)/g; const str = 'page 2 and page 10'; console.log(str.match(re)); // => ["page 2", "page 10"] console.log(...str.matchAll(re)); // => ["page 2", "2", index: 0, input: "page 2 and page 10", groups: undefined] // => ["page 10", "10", index: 11, input: "page 2 and page 10", groups: undefined]
总结
在这篇文章中,我们仔细研究了 ES2019 中引入的几个关键特性,包括Object.fromEntries(),trimStart(), trimEnd(), flat(), flatMap(),symbol 对象的description 属性以及可选的catch 。
更多相关知识请关注JavaScript视频教程栏目
위 내용은 ES10의 5가지 새로운 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

매트릭스 영화 효과를 페이지에 가져 오십시오! 이것은 유명한 영화 "The Matrix"를 기반으로 한 멋진 jQuery 플러그인입니다. 플러그인은 영화에서 클래식 그린 캐릭터 효과를 시뮬레이션하고 사진을 선택하면 플러그인이 숫자로 채워진 매트릭스 스타일 사진으로 변환합니다. 와서 시도해보세요. 매우 흥미 롭습니다! 작동 방식 플러그인은 이미지를 캔버스에로드하고 픽셀 및 색상 값을 읽습니다. data = ctx.getImageData (x, y, settings.grainsize, settings.grainsize) .data 플러그인은 그림의 직사각형 영역을 영리하게 읽고 jQuery를 사용하여 각 영역의 평균 색상을 계산합니다. 그런 다음 사용하십시오

이 기사에서는 jQuery 라이브러리를 사용하여 간단한 사진 회전 목마를 만들도록 안내합니다. jQuery를 기반으로 구축 된 BXSLIDER 라이브러리를 사용하고 회전 목마를 설정하기위한 많은 구성 옵션을 제공합니다. 요즘 그림 회전 목마는 웹 사이트에서 필수 기능이되었습니다. 한 사진은 천 단어보다 낫습니다! 그림 회전 목마를 사용하기로 결정한 후 다음 질문은 그것을 만드는 방법입니다. 먼저 고품질 고해상도 사진을 수집해야합니다. 다음으로 HTML과 일부 JavaScript 코드를 사용하여 사진 회전 목마를 만들어야합니다. 웹에는 다양한 방식으로 회전 목마를 만드는 데 도움이되는 라이브러리가 많이 있습니다. 오픈 소스 BXSLIDER 라이브러리를 사용할 것입니다. BXSLIDER 라이브러리는 반응 형 디자인을 지원 하므로이 라이브러리로 제작 된 회전 목마는

데이터 세트는 API 모델 및 다양한 비즈니스 프로세스를 구축하는 데 매우 필수적입니다. 그렇기 때문에 CSV 가져 오기 및 내보내기가 자주 필요한 기능인 이유입니다.이 자습서에서는 각도 내에서 CSV 파일을 다운로드하고 가져 오는 방법을 배웁니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!

mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

뜨거운 주제



