Использование метода .splice в подклассе Array в javascript?

Я пытаюсь создать подкласс массива javascript. Я хочу инициировать подкласс с аргументом типа массива и добавить метод для удаления элемента из массива (подкласса).

Мой код выглядит так:

class CustomArray extends Array {
        
  constructor(array) {
    console.log('Initiating array:', array)
    super(...array);
  }

  remove(element) {
    let index = this.indexOf(element);
    if (index > -1) {
      return this.splice(index, 1);
    } 
    return [];
  }

}

var a = ['a', 'b', 'c', 'd', 'e'];

var list = new CustomArray(a)
console.log('list:', list);
console.log('remove:', list.remove('c'));
console.log('list:', list);

Проблема в том, что когда я вызываю .splice( ) он удаляет элемент из массива, но также возвращает массив удаленных элементов, на самом деле он возвращает новый экземпляр моего подкласса CustomArray, который должен быть инициирован с аргументом типа массива, но .splice() инициирует его с аргументами целого числа тип.

Вот пример того, что, по моему мнению, происходит, когда я вызываю .splice():

Допустим, у нас есть экземпляр list класса CustomArray, инициированный с аргументом ['a','b','c','d','e'], а затем мы вызываем метод list.remove('c'). (Точно так же, как в фрагменте кода).
Метод remove класса CustomArray проверяет, находится ли индекс c в массиве ['a','b','c','d','e'], то есть 2, а затем вызывает method this.splice(2,1), который должен удалить 1 элемент по индексу 2 в массиве ['a','b','c','d','e']. Метод splice удаляет элемент c из массива формы, но также возвращает что-то вроде new CustomArray(1), потому что один элемент был удален из массива формы, поэтому он пытается создать массив длины 1, но это не удается, потому что класс CustomArray является ожидаемым массивом.

Я хочу, чтобы метод splice не инициировал новый экземпляр класса CustomArray и вместо этого возвращал обычный массив (экземпляр объекта Array).

ссылка Jsbin.


javascript arrays subclass mutators
person ands    schedule 18.03.2018    source источник
comment
FWIW, я только что заметил ошибку в коде в своем ответе, которую я исправил (отсутствует строка ++index;).   -  person T.J. Crowder    schedule 18.03.2018
comment
Спасибо за исправление ++index, но я использовал цикл for вместо while. И это CustomArray, я отредактировал это в вопросе.   -  person ands    schedule 19.03.2018
comment
Ваш constructor не работает.   -  person Bergi    schedule 17.12.2019

Ответы (2)


arrow_upward
1
arrow_downward

Я хочу, чтобы метод splice не инициировал новый экземпляр класса CustomArray, а вместо этого возвращал обычный массив (экземпляр объекта Array).

Затем вам нужно создать другой метод с другим именем. Семантика splice ясно и точно определена; они формируют контракт для типа Array. Если ваш CustomArray нарушает этот контракт, это будет означать, что это больше не Array, а нечто похожее на массив и не должно расширять Array.

Поскольку ваш метод называется remove, это нормально; если вы хотите, чтобы remove возвращало Array, а не CustomArray, вам просто нужно реализовать логику самостоятельно:

remove(element) {
  let index = this.indexOf(element);
  if (index > -1) {
    const newLength = this.length - 1;
    while (index < newLength) {
        this[index] = this[index + 1];
        ++index;
    }
    this.length = newLength;
    return [element];
  } 
  return [];
}

В качестве альтернативы, конечно, заставить конструктор CustomArray работать правильно при вызове различными методами Array.prototype. (Тот, который у вас есть в вопросе, работает отлично, за исключением регистрации чего-то, чего вы не ожидаете с помощью console.log.)

person T.J. Crowder    schedule 18.03.2018

arrow_upward
1
arrow_downward

Возможно, splice вернет стандартный массив, поэтому без вызова вашего конструктора. Это достигается изменением свойства @@species< /a> вашего пользовательского класса, который определяет, какой конструктор будет использоваться. Но имейте в виду, что это повлияет не только на splice, но и на все другие методы, создающие новый экземпляр, включая map, filter, slice,...

Вы можете изменить свойство @@species, перезаписав соответствующий статический геттер:

class CustomArray extends Array {
  static get [Symbol.species]() { return Array; } // <-----------

  constructor(array) {
    console.log('Initiating array:', array)
    super(...array);
  }

  remove(element) {
    let index = this.indexOf(element);
    if (index > -1) {
      return this.splice(index, 1); // Now calls Array constructor, not CustomArray
    } 
    return [];
  }

}

var a = ['a', 'b', 'c', 'd', 'e'];

var list = new CustomArray(a)
console.log('list:', list);
console.log('remove:', list.remove('c'));
console.log('list:', list);

// Some examples of effects on other methods
console.log(list.map(x => x) instanceof CustomArray); // false
console.log(list.filter(x => 1) instanceof CustomArray); // false
console.log(list.slice() instanceof CustomArray); // false
console.log(list.concat() instanceof CustomArray); // false
// Other methods, that do not return a new instance, are not affected:
console.log(list.reverse() instanceof CustomArray); // true
console.log(list.sort() instanceof CustomArray); // true

person trincot    schedule 17.05.2019