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

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

참고자료

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

• ES6 기능
• MDN

확장 연산자

이름에서 알 수 있듯이 객체나 배열 앞에 확장 연산자(...)로 사용되어 구조를 확장합니다. 목록. 시연:

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

구조 분해 할당

구조 분해 할당 개발자의 심리 건강에 좋습니다.

다음 코드를 고려하세요.

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) { ... }
}

배열 방법

ES6에는 다음과 같은 유용한 배열 방법이 많이 도입되었습니다.

• find(), 목록에서 멤버 찾기, null 반환은 찾을 수 없음을 의미
• findIndex(), 목록 멤버의 인덱스 찾기
• some( ), 목록
• includes, 목록에 항목이 포함되어 있는지 여부

중 적어도 하나의 구성원에 대한 어설션이 true인지 확인하세요. 다음 코드는 사용법을 이해하는 데 도움이 됩니다.

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

相关免费学习推荐：js视频教程

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