JavaScript를 처음 접했거나 가끔 사용해 본 적이 있을 수도 있습니다. 그럼에도 불구하고 JavaScript는 많이 변경되었으며 일부 기능은 사용할 가치가 있습니다. 이 기사에서는 진지한 JavaScript 개발자가 매일 어느 시점에 사용하게 될 몇 가지 기능을 소개합니다.
References
ES6+에 관한 다음 두 사이트는 제가 가장 좋아하는 사이트입니다:
ES6 특징
MDN
Expand 연산자
이름에서 알 수 있듯이 객체나 배열 앞에 사용됩니다. 확장 연산자(...)는 구조를 목록으로 확장합니다. 시연해 보세요:
let firstHalf = [ 'one', 'two']; let secondHalf = ['three', 'four', ...firstHalf];
이런 글쓰기 방식은 우아하고 간결하죠? 스프레드 연산자를 사용하지 않으면 다음과 같이 작성해야 합니다:
let firstHalf = [ 'one', 'two'];
let secondHalf = ['three', 'four'];
for(var i=0, i <firstHalf.length; i++ ) {
secondHalf.push(firstHalf[i]);
}스프레드 연산자는 객체의 속성을 병합하는 데에도 적합합니다.
const hero = {
name: 'Xena - Warrior Princess',
realName: 'Lucy Lawless'
}
const heroWithSword = {
...hero,
weapon: 'sword'
}스프레드 연산자를 사용하지 않으면 순회해야 합니다. 개체의 속성:
let keys = Object.keys(hero);
let obj = {};
for(var i=0; i< keys.length; i++) {
obj[keys[i]] = keys[props[i]];
}나머지 매개변수
나머지 매개변수는 다음과 같습니다. 나머지 매개변수는 시퀀스에 포함됩니다. JavaScript의 특징은 매개변수의 개수가 매우 유연하다는 것입니다. 일반적으로 인수를 수집하는 인수 변수가 있습니다. 예를 살펴보겠습니다.
function add(first, second, ...remaining) {
return first + second;
}위의 코드 조각은 첫 번째와 두 번째를 추가하는 것뿐입니다. 즉, add(1, 2) 및 add(1, 2, 3, 4)를 호출하면 동일한 결과를 얻게 됩니다. 아래에서 수정해 보겠습니다.
function add(first, second, ...remaining) {
return first + second + remaining.reduce((acc, curr) => acc + curr, 0);
}
앞서 언급했듯이 ...remaining은 나머지 매개변수를 수집하고 이러한 매개변수에 대한 이름을 제공하여 나머지 매개변수를 처리할 의도가 있음을 분명히 합니다. ES5에는 최근에 이미 논쟁이 있었지만 이에 대해 아는 사람은 거의 없다는 것을 기억합니다.
문자열 보간
이런 문장을 본 적이 있나요?
class Product {
constructor(name, description, price) {
this.name = name;
this.description = description;
this.price = price;
}
getDescription() {
return " Full description \n" +
" name: " + this.name +
" description: " + this.description
}
}
물론, 저는 getDescription() 메소드에서 길고 읽을 수 없는 여러 줄 문을 언급하고 있습니다. 대부분의 프로그래밍 언어에도 비슷한 현상이 존재합니다. 일부 언어에서는 문자열 보간을 제공하는데, 다행히도 JavaScript가 그 중 하나입니다. getDescription() 메서드를 다시 작성해 보겠습니다.
getDescription() {
return `Full description \n:
name: ${this.name}
description ${this.description}
`;
}
${} 보간법은 `-래핑된 문자열 쌍에 사용될 수 있습니다. 이제 훨씬 더 편안해 보입니다.
약어 속성
은 ES5에서는
function createCoord(x, y) {
return {
x: x,
y: y
}
}
다음과 같이 작성해야 합니다. ES6에서는 앞으로 약어 속성을 사용할 수 있습니다.
function createCoord(x, y) {
return {
x,
y
}
}
더 멋있어 보이지 않나요?
메소드 속성
메소드 속성은 메소드를 가리키는 객체에 정의된 속성입니다. 예를 들어 다음 ES5 코드를 생각해 보세요.
const math = {
add: function(a,b) { return a + b; },
sub: function(a,b) { return a - b; },
multiply: function(a,b) { return a * b; }
}
ES6에서는 앞으로 이것만 작성하면 됩니다.
const math = {
add(a,b) { return a + b; },
sub(a,b) { return a - b; },
multiply(a,b) { return a * b; }
}
Destructuring 할당
Destructuring 할당은 개발자 자신의 정신 건강에 좋습니다.
다음 코드를 고려하세요.
function handle(req, res) {
const name = req.body.name;
const description = req.body.description;
const url = req.url;
log('url endpoint', url);
// 大量代码逻辑
dbService.createPerson(name, description)
}
위 코드는 결코 완벽하지는 않지만 객체의 다양한 수준에서 데이터를 가져오려는 애플리케이션 시나리오를 나타냅니다. 여기서 문제가 무엇입니까? 글쎄, 너무 많은 변수를 선언하지 않음으로써 키 입력을 절약할 수 있습니다.
function handle(req, res) {
const { body: { name, description }, url } = req;
log('url endpoint', url);
// 大量代码逻辑
dbService.createPerson(name, description)
보세요, 위의 코드는 세 줄을 하나로 압축합니다.
구조 분해 할당은 객체에만 국한되지 않습니다. 배열에서도 똑같이 잘 작동합니다. 다음 코드를 고려해보세요.
const array = [1,2,3,4,5,6]; const a = array[0]; const c = array[2];
위 코드는 더 우아한 방식으로 다시 작성할 수 있습니다.
const array = [1,2,3,4,5,6]; const [a, ,c, ...remaining] = arr; // remaining = [4,5,6]
위의 패턴 일치를 사용하여 배열의 값을 분해할 수 있습니다. 특정 값을 건너뛰려면 , 를 사용합니다. 위에서 언급한 나머지 매개변수도 여기서 사용할 수 있습니다. 여기서는 나머지 매개변수를 통해 나머지 배열 구성원을 캡처합니다.
구조 분해 할당은 함수와 매개변수에도 사용할 수 있습니다. 함수에 2~3개 이상의 매개변수가 있는 경우 객체를 사용하여 모든 매개변수를 수집하는 것이 JavaScript의 사실상 표준입니다. 예를 들어,
function doSomething(config) {
if(config.a) { ... }
if(config.b) { ... }
if(config.c) { ... }
}
함수는 더 나은 작성 방법을 제공합니다.
function doSomething({ a, b, c }) {
if(a) { ... }
if(b) { ... }
if(c) { ... }
}
Array method
ES6에서는 다음과 같은 유용한 배열 메서드를 많이 도입했습니다.
- find(), 목록에서 멤버를 찾으려면 null을 반환합니다. 찾은 항목이 없음을 나타냅니다.
- findIndex(), 목록 구성원의 색인을 찾습니다.
- some(), 목록의 최소 한 구성원에 대해 특정 주장이 참인지 확인합니다.
- 포함 여부, 목록 항목이 포함되어 있습니다
아래 코드는 사용법을 이해하는 데 도움이 됩니다.
const array = [{ id: 1, checked: true }, { id: 2 }];
arr.find(item => item.id === 2) // { id: 2 }
arr.findIndex(item => item.id === 2) // 1
arr.some(item => item.checked) // true
const numberArray = [1,2,3,4];
numberArray.includes(2) // true
Promises + Async/Await
이 서클에 몇 년 동안 있었다면 콜백만 있었던 때가 있었다는 것을 기억할 것입니다. , 다음과 같습니다:
function doSomething(cb) {
setTimeout(() => {
cb('done')
}, 3000)
}
doSomething((arg) => {
console.log('done here', arg);
})
일부 작업은 비동기적이고 완료하는 데 시간이 걸리기 때문에 콜백을 사용합니다. 그런 다음 우리는 Promise 라이브러리를 얻었고 사람들은 그것을 사용하기 시작했습니다. 그런 다음 JavaScript는 점차적으로 Promise에 대한 기본 지원을 추가했습니다.
function doSomething() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('done')
}, 3000)
})
}
doSomething().then(arg => {
console.log('done here', arg);
})
우리는 함께 약속을 묶는다고 이렇게 부를 수도 있습니다:
getUser()
.then(getOrderByUser)
.then(getOrderItemsByOrder)
.then(orderItems => {
// 处理排序后的成员
})
后来生活更加美好，我们有了 async/await， 上面一段代码可以这样写：
async function getItems() {
try {
const user = await getUser();
const order = await getOrderByUser(user);
const items = await getOrderItemsByOrder(order);
return items;
} catch(err) {
// 在这里处理错误，建议返回某个值或者重新抛出错误
}
}
getItems().then(items => {
// 处理排序后的成员
})
模块
差不多任何编程语言都支持模块这一概念，也就是将代码分为多个文件，每个文件是一个自我包含的单元（模块）。 考虑下面的代码：
// math.js
export function add(a,b) { return a + b; }
export function sub(a,b) { return a - b; }
export default mult(a,b) => a * b;
// main.js
import mult, { add, sub } from './math';
mult(2, 4) // 8
add(1,1) // 2
sub(1,2) // -1
我们在上面用 export 关键字注明了 add 和 sub 这两个结构对任何引入该模块的模块都公开可见。 export default 关键字则注明仅仅 import 模块时得到的结构。 在 main.js 中，我们将导入的 default 命名为 mult，同时指明我们引入 add() 和 sub() 这两个方法。
箭头函数和字典作用域 this
我在这篇文章中很多地方都用到了箭头函数，它不过是另一种函数表示法。 过去我们只能这么声明函数：
function printArray(arr) {
// 具体操作
}
现在我们也可以这么写：
const printArray = (arr) => {
// 具体操作
}
我们也可以将函数声明写到一行里：
const add = (a,b) => a + b
上面的代码表明我们进行操作并返回结果。 我们也可以采用下面的语法返回一个对象：
const create = (a,b) = > ({ x: a, y: b })
过去会碰到搞不清 this 是什么的问题。 考虑下面的代码：
let array = [1,2,3];
function sum() {
this.total = 0;
arr.forEach(function(item) {
this.total+= item; // 糟糕，`this` 是内层函数的 `this`
})
return total;
}
上面代码中的 this 指向 forEach 内部函数的 this，这可不是我们想要的。 过去我们通过以下方式解决这个问题：
function sum() {
this.total = 0;
var self = this;
arr.forEach(function(item) {
self.total+= item; // 这里我们使用 `self`，它能解决问题，但是感觉有点别扭
})
return total;
}
箭头函数可以解决问题，再也不用 self 了，现在代码看起来是这样的：
function sum() {
this.total = 0;
arr.forEach((item) => {
this.total+= item; // 一切安好，`this` 指向外层函数
})
return total;
}
大胜！
结语
我还可以讲讲更多 ES6 方面的内容，不过这篇文章中我只打算介绍我最偏爱的特性。 我觉得你应该从今天开始使用这些特性。
【相关推荐：javascript高级教程】