Блог

Я хотел бы создать что-нибудь, что помогло бы мне получить последний элемент из массива, подобного этому

 $$("div", list).getLastItem()
  

моя функция:

 const $$ = (selector, parent = document) => {
  x = parent.querySelectorAll(selector);
  x = Array.prototype.slice.call(x);
  return x;
}
  

Я думал о том, как это сделать, но я не могу в этом разобраться, я пытался сделать это следующим образом:

 $$.prototype.getLastItem = ()=>{
return this.slice(-1)[0];
}
  

но это выдает ошибку:
Неперехваченная ошибка типа: не удается установить для свойства ‘getLastItem’ значение undefined

1-Как это реализовать?

2-Почему мой код не работает?

Возвращает экземпляр класса, у которого есть getLastItem метод:

 class Dollar {
  constructor(selector, parent = document) {
    this.elements = [...parent.querySelectorAll(selector)];
  }
  getLastItem() {
    return this.elements.slice(-1)[0];
  }
}
const $$ = (...args) => new Dollar(...args);

console.log($$('.something').getLastItem());  

 <div class='something'>something</div>
<div class='something'>something else</div>  

Чтобы получить доступ к n -му элементу, обратитесь к .elements[n] свойству экземпляра.

Если вы также хотите иметь доступ к базовым элементам, не проходя через .elements , присвоите числовым свойствам в конструкторе:

 class Dollar {
  constructor(selector, parent = document) {
    this.elements = [...parent.querySelectorAll(selector)];
    Object.assign(this, this.elements);
  }
  getLastItem() {
    return this.elements.slice(-1)[0];
  }
}
const $$ = (...args) => new Dollar(...args);

const somethings = $$('.something');
console.log(somethings[0]);
console.log(somethings.getLastItem());  

 <div class='something'>something</div>
<div class='something'>something else</div>  

getLastItem должен быть привязан к прототипу Array :

 Array.prototype.getLastItem = function () { ... }
  

Я не уверен, хотите ли вы просто получить последний элемент или требуется создать метод для функции.

Если вы просто хотите получить последний элемент, разве вы не можете просто сделать:

 const lastItem = $$('div').slice(-1)[0];
  

Кажется, что последний div получается просто отлично…

Вы могли бы добиться того, чего ожидали от своего текущего решения, с некоторыми изменениями

• используйте function для доступа к this контексту
• используйте не зависящий от новизны шаблон конструктора (как описано в книге Дэвида Германа «Эффективный JavaScript») для создания объекта без необходимости использования new
• верните сам экземпляр ( return this ), чтобы использовать дальнейший определенный метод

 function $$(selector, parent = document) {
  if (!(this instanceof $$)) {
    return new $$(selector, parent);
  }

  const x = parent.querySelectorAll(selector);
  this.selected = Array.prototype.slice.call(x);
  return this;
}

$$.prototype.getLastItem = function() {
  return this.selected.slice(-1)[0];
}

console.log($$("div").getLastItem())  

 <div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>  

Вы можете просто переместить функцию getLastItem внутрь $$ и назначить ее x как x.getLastItem , использовать return x.slice(-1)[0] и возвращать x . Это будет работать.

Попробуйте это ниже.

 const $$ = (selector, parent = document) => {  
  let x = parent.querySelectorAll(selector);
  x = Array.prototype.slice.call(x);
  x.getLastItem = () => {
    return x.slice(-1)[0];
  }
  return x;
}

console.log($$("div").getLastItem());
console.log($$("div")[0]);  

 <div id='test'></div>