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
Да, обычно есть два способа, в чем между ними разница?
- 'имя' в объекте
- 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 .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.