Я начал свою карьеру в качестве разработчика PHP, но через некоторое время я почувствовал, что у фронтенд-разработчика есть огромные возможности, и начал изучать JS. Поскольку у меня не так много опыта в JS, я сделал много ошибок в начале. Сегодня я смеюсь над этими ошибками. Я делюсь некоторыми ошибками, чтобы помочь новичкам.
- Использование Var для объявления переменной
Никогда не используйте Var для объявления переменной, потому что если вы объявите с помощью var, то она станет глобальной переменной, и она активна до тех пор, пока не будет запущено ваше приложение. Это может вызвать утечку памяти
Итак, что мы должны использовать для объявления переменных? Мы можем использовать Let и Const.
Let и Const используются для объявления уровня области видимости. Это означает, что он будет жить до тех пор, пока его область действия не будет жива, а позже он будет автоматически освобождать свою память. Это никогда не вызовет у вас проблемы с утечкой памяти.
2. Клонировать объект, используя знак равенства”=”
В Javascript объекты хранятся по ссылке, поэтому, если вы скопируете объект по знаку равенства, оба объекта будут указывать на один и тот же адрес памяти. Например
let student = { "firstName":"James", "lastName":"Smith", "address":{ "street":"Janpath", "city":"Delhi", "country":"India" } } let secondStudent = student; newStudent.firstName = 'Robert' console.log(student); console.log(newStudent);
Здесь, в примере, скопируйте объект ученика и назначьте его объекту newStudent
, поэтому, если я изменю firstName нового ученика, он также изменит объект ученика, потому что оба указывают на один и тот же адрес памяти. Если вы измените объект копирования, он автоматически изменит исходный объект. Иногда это создаст проблемы, и вы не сможете получить ожидаемый результат.
Итак, каково решение?
A. Скопируйте объект с помощью оператора REST.
let secondStudent = {...student};
Используя оператор rest, вы можете просто копировать объекты с ссылкой.
B. Скопируйте объект Object.assign()
let secondStudent = Object.assign({}, student);
Оба метода имеют проблемы при копировании с объектами. Если у объекта есть внутренний объект, то внутренний объект будет скопирован по ссылке. поэтому, если вы сделаете какое-либо изменение внутреннего объекта объекта копии, внутренний объект исходного объекта будет автоматически изменен. Давайте найдем решение этой проблемы и наш второй способ копирования объектов.
C. Скопируйте, используя JSON.stringify()
и JSON.parse()
secondStudent JSON.parse(JSON.stringify(student))
D. Вы также можете использовать метод cloneDeep
Lodash
secondStudent= _.cloneDeep(
student);
3. Без использования оператора Rest and Spread.
Что такое оператор спреда?
Оператор расширения позволяет расширять итерируемый объект, такой как выражение массива или строка, в местах, где ожидается ноль или более аргументов (для вызовов функций) или элементов (для литералов массива), или выражение объекта, которое нужно расширять в местах, где ноль или более ожидаются пары ключ-значение (для литералов объектов).
Позвольте мне привести пример в реальном времени, где мы можем использовать оператор спреда.
- Вы можете создать копию массива с помощью оператора rest. Когда создается копия массива с использованием = (равно), JavaScript создает второй массив с копией по ссылке. Это может создать проблему некоторое время. Потому что, если вы измените второй массив, он автоматически отразится в первом массиве и повлияет на вывод. поэтому, когда вы хотите создать копию массива, попробуйте использовать оператор распространения.
let originalArray = [1,2,3,4]; let copyWithSpreadOperator = [...originalArray]; // It will create copy of array by copy by value. let copyWihoutSpreadOperator = originalArray // It will create copy of array by copy by reference.
Мы также можем скопировать объект по значению, используя оператор распространения.
2. Мы можем легко объединить два массива или добавить элемент в массив в первую или последнюю позицию. То же самое мы можем сделать для объекта. мы можем объединить два объекта в один объект.
e.g.
const arr = [1,2,3,4]; const arr2 = [5,6,7,8]; const combineArr = [...arr, ...arr2]; // combine two array const arr = [...arr, 5]; // append item into last index of existing array.
Более подробный пример вы можете посмотреть здесь.
Что такое Rest оператор?
Синтаксис остального параметра позволяет функции принимать неопределенное количество аргументов в виде массива, обеспечивая способ представления функций с переменным числом аргументов в JavaScript.
Некоторое время в функции вы не знаете, сколько аргументов требуется в функции, чтобы вы могли использовать оператор остатка, оператор остатка будет объединять все аргументы в массив.
например мы хотим создать функцию суммы, мы разрешаем вызывающему абоненту передавать столько, сколько значение в функцию, чтобы сделать общее число. Как вы можете видеть в примере, мы передали разное количество аргументов при вызове функции суммы. Функция Sum объединит все аргументы в массив с помощью оператора rest.
sum(...numbers) { return numbers.reduce((a,b)=>a+b, 0); } // Pass 2 arguments in sum function console.log(sum(1,2)); Pass 5 arguments in sum function console.log(sum(11,12,13,14,15));
4. Не использовать асинхронность и ожидание
Объект
Promise
представляет возможное завершение (или сбой) асинхронной операции и ее результирующее значение.
обещание — замечательная функция javascript. обещание используется для обработки асинхронных событий. Здесь вы можете увидеть пример того, как мы используем async/await.
e.g.
// Normal function getList () { fetch("./list.json") .then((list) => { console.log("resolved", list); }) .catch((err) => { console.log("error retrieving data", err); }); } // Await/Async function Async getList () { try { let list = await fetch("./list.json"); console.log("resolved", list); }catch(
err) {
console.log("error retrieving data", err);}
}
5. Напишите код вручную для поиска индекса, фильтрации, поиска объекта и других операций, даже если метод массива уже существует.
На начальном этапе, когда я начал работать в javascript, чтобы найти индекс из массива или отфильтровать данные из массива, я пишу свою пользовательскую логику для поиска индекса. Позже, через некоторое время, я обнаружил, что в Javascript уже существует какой-то встроенный метод, который я могу использовать без написания собственной логики. Таким образом, я могу сэкономить время и написать нерушимый код. Существует множество методов массива, вы можете найти их здесь. Некоторые примеры методов
// To find index from array const indexOn = students.findIndex(student => student.firstName === 'James'); // filter array where firstName is 'James' const studentList = students.filter(student => student.firstName === 'James');
6. Чтобы получить доступ к объекту проверки вложенных объектов вместо использования необязательной цепочки.
Существует очень хорошая функция опциональной цепочки для доступа к вложенным объектам. Без дополнительной цепочки вы должны проверить, существует ли свойство или нет, иначе оно выдаст ошибку.
// Without optional chaining let name = ''; if(student.name){ name = student.name } // Using optional chaining name = student?.name
Спасибо, ребята, читающие эту статью, дайте мне знать ваши отзывы и какая будет следующая тема для блога.