2016년부터 2021년까지 JavaScript에 추가된 최고의 기능
이 기사에서는 우리 모두가 프로젝트에서 사용해야 하는 놀라운 기능에 대해 이야기할 것입니다.
ECMAScript 2015 이후에는 화살표 함수, 집합, 지도, 클래스 및 구조 분해와 같은 주요 변경 사항이 있는 새 버전의 자바스크립트가 거의 있습니다.
ES7(ECMAScript 2016)
Array.prototype.includes
배열에 특정 요소가 포함되어 있는지 여부를 결정합니다.
[1, 2, 3].includes(3, 0, 7); // true
[1, 2, NaN].includes(NaN); // true
[0,+1,-1].includes(42); // false
ES8(ECMAScript 2017)
비동기 함수
다음은 코드 타격에 대한 좋은 예입니다.
async function foo() {
const result1 = await new Promise((resolve) => setTimeout(() => resolve('1')))
const result2 = await new Promise((resolve) => setTimeout(() => resolve('2')))
}
foo()
비동기 함수에서 await 키워드를 사용한 다음 result1이 해결 또는 거부를 반환할 때까지 코드를 중지한 다음 코드가 다음 줄로 이동하고 다시 해결되거나 거부될 때까지 result2를 기다릴 수 있습니다.
다른 예를 보자.
async function foo() {
try {
const bar = await new Promise((resolve) => setTimeout(() => resolve('1')));
}
catch(e) {
console.log(e)
}
}
foo()
in this example you could simply use async function to use try catch
개체.값
get all the values of the object as an array.
var person = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
Object.values(person);
// ["Hemanth","HM","Earth","Human"]
ES9(ECMAScript 2018)
물체 레스트 속성
Rest properties for object destructuring assignment.
let { fname, lname, ...rest } = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
fname; //"Hemanth"
lname; //"HM"
rest; // {location: "Earth", type: "Human"}
스프레드 연산자
The spread operator can be used to combine multiple objects or cloning objects.
remember: speart operator can do shallow clone not deep clone, if you do not know the difference between shallow and deep wait for my next article :D
const obj1 = {a:10,b:20}
const obj2={c:30}
const clone_obj={...obj1}
const obj3 = {...obj1,...obj2}
console.log(clone_obj) // {a: 10, b: 20}
console.log(obj3) // {a: 10, b: 20, c: 30}
약속: 마침내()
finally is a new callback that always executed, no matter if then or catch is called. it is too useful for clean up state especially in reactjs
fetch(url)
.then()
.catch()
.finally(() => console.log());
ES10(ECMAScript2019)
Array.flat()
The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. depth can pass as first param. in down example, i send number 2 for depth.
const array1 = [1,2,[3,4,[5,6]]]
console.log(array1.flat(2)) // [1,2,3,4,5,6]
동적 가져오기
To dynamically import a module, the import keyword may be called as a function. When used this way, it returns a promise.
in dynamic import, you could call the module when you really need it to use.
import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});
ES11(ECMAScript2020)
선택적 체인
Optional Chaining, known to babel users, is now supported natively by Javascript. This functionality removes the need for conditionals before calling a variable or method enclosed in it. optional chaining prevent to pass Error object, if our code has an undefined value
const smartphones = {
brands: {
apple: true
}
}
console.log(smartphones.companies?.motorola) // output is: undefined
무효 병합 연산자
A new operator was added to Javascript. It came to cause a discrepancy between Javascript's falsey value. We use the falsey condition with the || operator. The falsey values are: 0, undefined, null, false, NaN
console.log(null || 'not false value'); // 'not false value'
ES12(ECMAScript2021)
String.replaceAll()
The replaceAll()function on the String prototype allows replacing all instances of a sub-string, without using regex.
const orgStr = 'JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled and multi-paradigm.';
let newStr2 = orgStr.replaceAll('JavaScript', 'TypeScript');
console.log(newStr2); // 'TypeScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. TypeScript is high-level, often just-in-time compiled and multi-paradigm.'
thank you for reading the article, I will be glad if you write a comment. if you know other features that are useful for you and I forget to write, you can write in comments for me and other readers.
Reference
이 문제에 관하여(2016년부터 2021년까지 JavaScript에 추가된 최고의 기능), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/realattila/the-best-features-added-to-javascript-from-2016-to-2021-5803텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
