Перегрузите свои собственные объекты JavaScript для лучшего повторного использования и более чистого кода.
Проблемное пространство
С момента появления ES6 появилось множество новых методов JavaScript, таких как map, reduce, find. Все они являются функциональными помощниками для вашего кода, чтобы упростить вам манипулирование структурами данных Javascript и работу с ними.
В нашей повседневной жизни как разработчики JavaScript мы по-прежнему пишем одно и то же снова и снова, и именно здесь в игру вступают такие библиотеки, как Lodash. Но действительно ли все это необходимо, когда люди спорят о том, почему размер пакета React составляет 145 КБ, а Angular - 2,4 МБ? Ничего особенного в Lodash, впечатляющей библиотеке.
Мое решение
Доступен вариант расширения объектов JavaScript тем, что мы уже знаем. ES6 также был представлен с классами, которые являются просто синтаксическим сахаром, но исходящие из фона ООП, улучшают ваше понимание, хотя в JavaScript все еще есть много причуд.
В моей повседневной работе мне часто нужно найти уникальное вхождение элемента в массив. Мне нужно проверить, существует ли элемент в массиве или нет, что, как мне кажется, является частью обычного рабочего процесса, ничего нестандартного.
class PowerArray extends Array {
checkIfExist(value){
return !!this.find(val=>val==value)
}
unique(){
console.log(this)
return new PowerArray(...new Set(this))
}
sum(){
return this.reduce((val,acc)=>val+acc,0)
}
}
const array=new PowerArray()
В этой реализации у вас есть все функции, которые изначально предоставляются массивом, а также добавлены 3 различных метода.
Теперь мы можем использовать этот новый массив как обычный массив и связать наши методы вместе с собственными методами.
array.push(1) array.push(2) array.push(2) console.log(array.unique().sum())//3 console.log(array.sum())//5 console.log(array.checkIfExist(7))//false
Переходим к другой важной структуре данных, которая часто используется в мире JavaScript - объектам.
class PowerObject extends Object{
getKeys(){
return Object.keys(this)
}
getValues(){
return Object.values(this)
}
prettyPrint(){
console.group('Object...')
console.log('Object Values',this)
console.groupEnd()
}
deepClone(){
const temp=JSON.stringify(this);
return Object.assign(new PowerObject(),JSON.parse(temp))
}
}
Мы использовали ту же концепцию и здесь, и с помощью этого кода мы можем добавить к нашему приложению еще 3 полезных метода.
Для клонирования объекта мы часто используем оператор распространения
const a = {...b}//works only with first level keys, shallow copy
Эта реализация отлично работает до тех пор, пока у вас нет вложенных объектов в b, и многие новички изо всех сил пытаются найти проблемы, когда они ожидают, что это будет работать и с вложенными объектами.
const myObject = new PowerObject();
myObject['a']=5;
myObject['b']={'m':'5'};
const normalObject={...myObject}
normalObject.a=7;
normalObject.b.m=6;
console.log(myObject)
//a: 5 , b:{m:6} so the value of m is changed despite using the //spread operator
Исправление:
Как это работает? Когда вы конвертируете объект в строку и анализируете ее обратно в объект, он прерывает ссылку на исходный объект, преобразовывая его в примитивные типы, которые передаются по значению и являются неизменяемыми, в отличие от объектов, которые передаются по ссылке.
const normalObject = myObject.deepClone()//this will make a deep copy console.log(normalObject) normalObject.a = 7 normalObject.b.m = 6 myObject.prettyPrint()// the original object intact //YEAHHH
Теперь другие методы также являются более синтаксическим сахаром, чтобы сделать вашу работу чище и более читабельным кодом.
myObject.getKeys() //["a", "b"]
myObject.getValues() //[5, {…}]
Итак, мы подошли к концу статьи. Ключевые выводы? Всегда старайтесь упростить кодовую базу для себя и своих коллег; Излишняя инженерия - это реальная вещь в программировании, поэтому постарайтесь ее избегать. Вы можете укрепить свое понимание, создав свои собственные методы и сделав свой код максимально развязанным.
Совет:
Вы можете добавить этот класс к объекту окна в вашем входном файле или любом из файлов сценария, чтобы они были доступны во всем проекте без необходимости импортировать его повсюду.
window.PowerClass=PowerClass
Избегайте использования тех же имен функций или методов, которые доступны в собственном JavaScript. Это может причинить вам больше вреда, чем пользы.
Следите за новостями. Мир!
Больше контента на plainenglish.io
