1.# at

Когда мы хотим получить N-й элемент массива, мы обычно используем [], чтобы добраться туда.

const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]

console.log(array[ 1 ], array[ 0 ]) // medium fatfish

О, это, кажется, не редкость. Но, друзья мои, помогите мне вспомнить, если мы хотим получить последний N-й элемент массива, что мы будем делать?

const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]
const len = array.length

console.log(array[ len - 1 ]) // fish
console.log(array[ len - 2 ]) // fat
console.log(array[ len - 3 ]) // blog

Это выглядит уродливо, и мы должны найти более элегантный способ сделать это. Да, с этого момента используйте метод массивов at!

Это делает вас похожим на продвинутого разработчика.

const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]

console.log(array.at(-1)) // fish
console.log(array.at(-2)) // fat
console.log(array.at(-3)) // blog

2. # Object.hasOwn

Да, обычно есть два способа, в чем между ними разница?

  1. 'имя' в объекте
  2. obj.hasOwnProperty('имя')

оператор "in"

Оператор in возвращает true, если указанное свойство находится в specified object или его prototype chain.

const Person = function (age) {
  this.age = age
}

Person.prototype.name = 'fatfish'

const p1 = new Person(24)

console.log('age' in p1) // true 
console.log('name' in p1) // true  pay attention here

obj.hasOwnProperty

Метод hasOwnProperty возвращает логическое значение, указывающее, имеет ли объект указанное свойство в качестве своего own property (в отличие от его наследования).

Используйте тот же пример выше

const Person = function (age) {
  this.age = age
}

Person.prototype.name = 'fatfish'

const p1 = new Person(24)

console.log(p1.hasOwnProperty('age')) // true 
console.log(p1.hasOwnProperty('name')) // fasle  pay attention here

Возможно, "obj.hasOwnProperty" уже может отфильтровывать свойства в цепочке прототипов, но в некоторых случаях это небезопасно и приведет к сбою программы.

Object.create(null).hasOwnProperty('name')
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a function

Object.hasOwn

Не волнуйтесь, мы можем использовать Object.hasOwn, чтобы обойти эти две проблемы, что более удобно и безопасно, чем метод obj.hasOwnProperty.

let object = { age: 24 }

Object.hasOwn(object, 'age') // true

let object2 = Object.create({ age: 24 })

Object.hasOwn(object2, 'age') // false  The 'age' attribute exists on the prototype

let object3 = Object.create(null)

Object.hasOwn(object3, 'age') // false an object that does not inherit from "Object.prototype"

3.# Использовать ожидание на верхнем уровне модуля

from mdnОператор await используется для ожидания промиса и получения значения его выполнения.

const getUserInfo = () => {
  return new Promise((rs) => {
    setTimeout(() => {
      rs({
        name: 'fatfish'
      })
    }, 2000)
  })
}
// If you want to use await, you must use the async function.
const fetch = async () => {
  const userInfo = await getUserInfo()
  console.log('userInfo', userInfo)
}

fetch()
// SyntaxError: await is only valid in async functions
const userInfo = await getUserInfo()
console.log('userInfo', userInfo)

На самом деле, после ES13 мы можем использовать await на верхнем уровне модуля, что является очень приятной новой функцией для разработчиков. Замечательно.

const getUserInfo = () => {
  return new Promise((rs) => {
    setTimeout(() => {
      rs({
        name: 'fatfish'
      })
    }, 2000)
  })
}

const userInfo = await getUserInfo()
console.log('userInfo', userInfo)

4. # Используйте # для объявления частных свойств

В прошлом мы использовали "_" для представления частных свойств, но это небезопасно и все еще может быть изменено извне.

class Person {
  constructor (name) {
    this._money = 1
    this.name = name
  }

  get money () {
    return this._money
  }

  set money (money) {
    this._money = money
  }

  showMoney () {
    console.log(this._money)
  }
}

const p1 = new Person('fatfish')

console.log(p1.money) // 1
console.log(p1._money) // 1

p1._money = 2 // Modify private property _money from outside

console.log(p1.money) // 2

console.log(p1._money) // 2

Мы можем использовать '#' для реализации действительно безопасных частных свойств

class Person {
  #money=1

  constructor (name) {
    this.name = name
  }

  get money () {
    return this.#money
  }

  set money (money) {
    this.#money = money
  }

  showMoney () {
    console.log(this.#money)
  }
}

const p1 = new Person('fatfish')

console.log(p1.money) // 1

// p1.#money = 2 // We cannot modify #money in this way
p1.money = 2

console.log(p1.money) // 2

console.log(p1.#money) // Uncaught SyntaxError: Private field '#money' must be declared in an enclosing class

5.# Проще установить переменные-члены для классов

В дополнение к установке частных атрибутов для класса с помощью #, мы также можем установить переменные-члены класса по-новому.

class Person {
  constructor () {
    this.age = 1000
    this.name = 'fatfish'
  }

  showInfo (key) {
    console.log(this[ key ])
  }
}

const p1 = new Person()

p1.showInfo('name') // fatfish
p1.showInfo('age') // 1000

Теперь вы можете использовать следующий способ, который действительно более удобен в использовании.

class Person {
  age = 1000
  name = 'fatfish'

  showInfo (key) {
    console.log(this[ key ])
  }
}

const p1 = new Person()

p1.showInfo('name') // fatfish
p1.showInfo('age') // 1000

6.# Найти элементы с конца массива

Когда мы хотим найти в массиве элемент, удовлетворяющий определенным условиям, find и findIndex — хороший выбор.

const array = Array(10000000).fill(1)

array.push(2)

const d1 = Date.now()
const el = array.find((el) => el >= 2)
const d2 = Date.now()

console.log({ el, time: d2 - d1 })

Чтобы получить 2, время поиска заняло 84 миллисекунды, что является ужасным числом, и это заняло слишком много времени.

К счастью, начиная с ES13, использование findLast значительно сократит время поиска, если вы ранее указали, что целевой элемент находится ближе к хвосту.

const array = Array(10000000).fill(1)

array.push(2)

const d1 = Date.now()
const el = array.findLast((el) => el >= 2)
const d2 = Date.now()

console.log({ el, time: d2 - d1 })

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.