От автора: Es6 пришел надолго, с крутыми новыми функциями, добавленными в javascript, разработка приложений теперь стала проще и интереснее. Я хотел бы поделиться с вами этими 10 советами, которые облегчат ваш рабочий процесс и помогут писать современный и эффективный JavaScript (меньше строк кода). Я не буду утомлять вас менее важной информацией, плюс вы всегда можете прочитать о es6, если захотите. Давайте начнем изучение JavaScript.
1. Шаблон строки
Интерполяция строки ранее выполнялась в JavaScript с помощью оператора +, теперь вы можете использовать строки шаблонов через обратные кавычки и ${variable}, чтобы добавить переменную в строку. Это позволяет легко интерполировать переменные со строками. Клавиша обратных кавычек находится слева от 1 на клавиатуре.
//Старый способ
const age = 20;
let message = 'I am '+age+' years old'; console.log(message); // I am 20 years old // Новый способ
message = `I am ${age} years old`; console.log(message); // I am 20 years old2. Обмен данными в переменных
Если вы хотите поменять значения двух переменных, скажем, x и y . Чтобы сделать это раньше, нужно было объявить переменную temp, в которой будет храниться значение x. Теперь x может сохранить значение y, а затем восстановить значение temp для y.
// Старый способ
let x = 10;
let y = 5;
let temp = x;
x = y;
y = temp;
console.log(`x = ${x}`, `y = ${y}`); //x = 5 y = 10 // Новый способ
x = 10;
y = 5;
[x, y] = [y, x];
console.log(`x = ${x}`, `y = ${y}`); //x = 5 y = 10Новый способ довольно прост. Это просто означает, что мы берем значение y справа, сохраняем его в x слева и принимаем значение x справа и сохраняем его в y слева. Как бы вы обменяли значения 3 переменных?
let a = 10;
let b = 5;
let c = 6;
[b, c, a] = [a, b, c];
console.log(`a = ${a}`, `b = ${b}`, `c = ${c}`); //a = 6 b = 10 c = 53. Деструктурирование
Деструктурирование позволяет вам выбирать нужные данные из массива элементов, объектов, карт и наборов.
const [a, b] = [1, 2, 7]; console.log(a, b); // 1 2 // Опускаем определенные значения const [c, , d] = [1, 2, 3]; console.log(c, d); //1 3
При деструктурировании массивов вы используете квадратную скобку в левой части оператора присваивания и вводите столько переменных, сколько хотите. Данные, выбранные из массива, зависят от порядка переменных. a соответствует 1, b — 2. Вы можете опустить определенные переменные, используя запятые, если хотите.
const user = {
firstname: "Ahmed",
lastname: "Adebsi",
socials: [ { twiterHandle: "Ade_Phil" }, { instagramHandle: "Ade_Phil" }, ]
}
//Чтобы получить имя и фамилию без деструтурирования
console.log(user.firstname, user.lastname); //Ahmed Adebsi
//С деструтурированием
const { firstname, lastname } = user;
console.log(firstname, lastname); //Ahmed Adebsi
// Деструтурирование с новыми именами переменных
const { firstname: first, lastname: last } = user;
console.log(first, last); // Ahmed AdebsiПервый метод работает хорошо, но представьте, что мне нужно использовать свой имя и фамилию в нескольких местах в коде, я бы сохранил ссылки user.firstname и user.lastname. Что я могу сделать, так это разложить их на отдельные переменные. Обратите внимание на фигурные скобки, в которые взяты Firstname и Lastname, это показывает, что они являются свойством объекта, в данном случае пользователя. При деструктурировании имя переменной должно соответствовать свойству этого объекта. Вы можете изменить имена переменных, как показано выше, если хотите.
4. Spread и Rest
Операторы Spread и Rest представлены как (…). Это называется Spread или Rest — в зависимости от варианта использования.
Spread
Важность оператора Spread в его неизменности. Он поможет создать вам новый массив без изменения старого. Давайте рассмотрим некоторые примеры.
const oldArray = [1, 3, 5,6]; const newArray = [...oldArray, 8]; console.log(oldArray); //[ 1, 3, 5, 6 ] console.log(newArray); //[ 1, 3, 5, 6, 8 ]
Первая строка создает массив с несколькими числами. Вторая строка создает новый массив, распределяет в него данные старого массива и добавляет новое число, равное 8. Здесь оператор Spread берет каждый элемент в старом массиве и добавляет его в новый массив перед добавлением нового числа 8.
console.log(Math.min(2, 3, 1)); // ожидаемый вывод: 1 const numbers = [2, 3, 1]; console.log(Math.min(...numbers)); // ожидаемый вывод: 1
В этом случае функция min ожидает разделенный запятыми список аргументов, которые должны быть числами. То, что мы можем просто сделать, это расширить данные массива в функцию. Да! Это работает.
Rest
state = { email: '', password: '', errors: {}
} const {errors, ...formData} = state; const validationErrors = validate(formData);В этом примере объект состояния содержит объект ошибок, который не является частью данных, получаемых от пользователя. Данные, которые нам нужны для проверки и отправки на сервер — это email и password. Поэтому, используя деструктуризацию, мы убираем объект ошибок, а оставшиеся данные в этом случае называются formData. formData теперь является объектом только со свойствами email и password.
5. Метод map в JavaScript
Метод map является неизменяющим (старый массив не изменяется) методом массива, который создает новый массив с каждым измененным элементом. Вы можете представить его, как сборочную линию товаров, в которой машиной добавляются этикетки к каждому элементу. Метод map принимает в качестве аргумента функцию обратного вызова. Функция обратного вызова принимает в качестве аргумента переменную, которая ссылается на каждый элемент в массиве.
Пример 1
const surname = 'Adebisi';
const siblings= ['Taofeek', 'Saheed', 'Akeem', 'Motunrayo', 'Bukola'];
const siblingsWithSurname = siblings.map(member => { return `${member} ${surname}`;
});
siblingsWithSurname.forEach(person => console.log(person));
// Taofeek Adebisi
// Saheed Adebisi
// Akeem Adebisi
// Motunrayo Adebisi
// Bukola AdebisiЗдесь переменная фамилия представляет ярлык, который прикреплен к каждому из продуктов, в данном случае это имя моих братьев и сестер. Чтобы произвести объединение каждого из имен с фамилией, вы можете сократить код до одной строки. Если это одна строка кода, нет необходимости в ключевом слове return. Это подразумевается.
const siblingsWithSurname = siblings.map(member =>`${member} ${surname}`);Пример 2
linksDiv.innerHTML = links.map((link, i) => { return ` <li class = "items"> <span class="fa fa-star " data-star=star${i}></span> <label for="item${i}">${link.text}</label> <span data-index=${i} class="fa fa-close options"></span> <span data-index=${i} class="fa fa-external-link options"> </span> </li> ` }).join('');
links — это массив ссылок. Каждая ссылка должна быть представлена каким-то html. name ссылки, star rating для ссылки, кнопка открытия в новой вкладке и кнопка закрытия. Применив метод map мы получим массив, где каждая ссылка теперь представлена соответствующим html. Поскольку это массив строк, разделенных запятыми, мы можем использовать для возвращенного массива join(), чтобы объединить их в одну большую строку. linksDiv — это просто div, в который мы можем вставить html.
Последний пример.
const productItems = this.state.products.map(product => { return ( <Product product={product} key={product.id} addToCart={this.addToCart} /> ) });
В React у нас есть список продуктов, установленных в состоянии. Каждый продукт — это объект, который будет представлен компонентом. Поэтому мы отображаем его, чтобы вернуть компонент Product. В конце метод map возвращает новый массив с тем же количеством элементов, только представленных по-новому.
6. Метод Reduce в JavaScript
Reduce принимает массив элементов и возвращает один элемент. Я люблю представлять это, как выпечку торта. Вам нужны такие ингредиенты, как мука, сахар, яйца, молоко … Ингредиенты представляют собой то, что вы передаете в Reduce, а торт представляет собой результат (единый объект).
Пример 1
const orderItems = [ {name: 'hp-envy m6', price: '2500', rating: 4}, {name: 'lenovo', price: '2500', rating: 5}, {name: 'mac book pro', price: '2500', rating: 5}
]; const totalPrice = orderItems.reduce((sum, item) => { return sum + item.price; },0);Для Reduce требуется два аргумента: функция обратного вызова, которая принимает два аргумента — сумму на текущий момент, а также ссылку на каждый элемент в массиве; и начальное значение суммы . В этом случае начальное значение суммы равно 0. Сумма начинается с 0. Мы добавляем цену первого элемента к сумме, затем второго, третьего … последнего.
Пример 2
const people = ['boy', 'girl', 'girl', 'girl', 'man', 'woman','boy']; const count = people.reduce((sum, person) => { sum[person] = (sum[person] === undefined) ? 1 : ++sum[person]; return sum;
}, {});
console.log(count); // { boy: 2, girl: 3, man: 1, woman: 1 }В этом случае в массиве есть повторяющиеся элементы. Итак, нам нужен объект, ключ которого — это элемент в массиве, а значение — это число раз, которое встречается каждый из элементов. Изначально сумма является пустым объектом. Первое, что мы хотим проверить — есть ли у объекта суммы свойство, имя которого соответствует человеку. Если его не существует, устанавливаем счетчик на 1, т.е. мы впервые видим этого человека . (в первый раз, когда мы встретим мальчика, sum[‘boy’] будет неопределенно, поэтому мы устанавливаем значение 1). В следующий раз, когда встретится тот же человек, свойство объекта уже существует, поэтому мы просто увеличиваем начальную сумму.
В заключение, каждый раз, когда у вас есть массив элементов, и вам нужно вернуть только один элемент, используйте команду Reduce.
7. Метод Filter в JavaScript
Filter принимает массив и возвращает новый массив на основе некоторого логического условия. Я люблю представлять это, как процесс найма, когда некоторые кандидаты отбираются для работы на основе определенных критериев.
const orderItems = [ {name: 'hp-envy m6', price: '2500', rating: 4}, {name: 'lenovo', price: '2500', rating: 5}, {name: 'mac book pro', price: '2500', rating: 5}
];
const fiveStarOrders = orderItems.filter((order) => order.rating == 5);
/*
[ { name: 'lenovo', price: '2500', rating: 5 }, { name: 'mac book pro', price: '2500', rating: 5 } ]
*/Здесь я проверяю заказанные товары с рейтингом 5 звезд.
8. Обновление литерала объекта
Литералы объекта подверглись обновлению. Если ключ литерала объекта совпадает со значением, вы просто пропускаете ключ и используете только значение. Существует также новый способ объявления функций внутри объекта, который удаляет ключевое слово функции и двоеточие перед ним.
const price = 4.20;
const quantity = 20;
// Старый способ
let invoiceData = { price: price, quantity: quantity, printInvoice: function () { console.log(`price = ${this.price}`, `quantity = ${this.quantity}`); }
}
invoiceData.printInvoice(); // price = 4.2 quantity = 20
// Новый способ
invoiceData = { price, quantity, printInvoice() { console.log(`price = ${this.price}`, `quantity = ${this.quantity}`); }
}
invoiceData.printInvoice(); //price = 4.2 quantity = 209. Использование сокращенного синтаксиса && и ||
Вы можете использовать в javascript операторы && и ||, чтобы проверить истинность / ложность переменной в javascript. Затем на основании этого что-то делать.
синтаксис &&
param && fieldProps.input.onChange(param.value);
В приведенном выше коде я проверяю, является ли переменная (param) истинным значением. Если это так, я получаю свойство value из объекта param и передаю ему функцию onChange и вызываю ее. Обратите внимание, что функция вызывается, только если объект param имеет истинное значение. Суть этого заключается в том, чтобы гарантировать, что объект param определен при вызове для него свойства value.
синтаксис ||
const links = JSON.parse(localStorage.getItem(‘links’)) || [];
В приведенном выше коде я получаю список ссылок из localStorage и преобразовываю его в объект javascript. Если в localStorage ссылки не существуют, он возвращает ноль, а вызов JSON.parse для него возвращает ноль. Так как то, что слева от || оператор равен нулю, он берет то, что справа от него — пустой массив, и сохраняет его в переменной links.
В заключение, если то, что слева от оператора || — это ложное значение, по умолчанию оно равно тому, что справа от него, иначе используется то, что слева.
10. Использование в JavaScript метода some
Метод some возвращает логическое значение (true или false), которое указывает, присутствует ли элемент в массиве или нет. Старый добрый способ — использовать цикл for для перебора массива, проверить, существует ли элемент и выйти из цикла. some() — более чистый способ сделать это.
const friends = [ { name: 'deji', age: 16 }, { name: 'damola', age: 18 }, { name: 'itunu', age: 20 }, { name: 'ore', age: 21 }, { name: 'Maxy', age: 20 }, { name: 'jide', age: 19 }, { name: 'Dami', age: 20 }, { name: 'Philip', age: 26 }, { name: 'Bridget', age: 44 }, { name: 'Yusuf', age: 30 }, { name: 'OG', age: 35 },
];
const minor = friends.some(friend => friend.age < 18); //trueЭта статья предназначена для начинающих, и я искренне надеюсь, что вы можете выбрать одну или две вещи, которые сможете использовать в своей повседневной работе.
Автор: Adebisi Ahmed Philip
Источник: https://blog.usejournal.com/
Редакция: Команда webformyself.