자바스크립트의 매우 유용한 10가지 기능

JavaScript를 처음 접했거나 가끔 사용해 본 적이 있을 수도 있습니다. 그럼에도 불구하고 JavaScript는 많이 변경되었으며 일부 기능은 사용할 가치가 있습니다. 이 기사에서는 진지한 JavaScript 개발자가 매일 어느 시점에 사용하게 될 몇 가지 기능을 소개합니다.

References

ES6+에 관한 다음 두 사이트가 제가 가장 좋아하는 사이트입니다.

● ES6 기능

● MDN

Expand Operator

이름에서 알 수 있듯이 확장을 사용하세요. 객체나 배열 앞에 연산자(...)를 사용하면 구조가 목록으로 확장됩니다. 시연해 보세요:

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]];
}

Remainingparameters

RemainingParameters는 나머지 매개변수를 시퀀스에 추가합니다. 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 메서드

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);
})

us 콜백은 일부 작업이 비동기적이고 완료하는 데 시간이 걸리기 때문에 사용됩니다. 그런 다음 우리는 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 => {
  // 处理排序后的成员
})

Module

거의 모든 프로그래밍 언어는 모듈을 지원합니다. . 코드를 여러 파일로 나누는 개념으로, 각 파일은 독립적인 단위(모듈)입니다. 다음 코드를 고려해보세요:

// 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 方面的内容，不过这篇文章中我只打算介绍我最偏爱的特性。 我觉得你应该从今天开始使用这些特性。

英文原文地址：https://dev.to/itnext/modern-javascript-10-things-you-should-be-using-starting-today-22dp

本文来自 js教程 栏目，欢迎学习！

위 내용은 자바스크립트의 매우 유용한 10가지 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!