Es6 остался, с новыми классными функциями, добавленными в javascript, разработка приложений на javascript теперь стала проще и увлекательнее.
Я хотел бы показать вам эти 10 полезных советов, которые упростят ваш рабочий процесс и помогут вам писать современные и эффективный JavaScript (меньше строк кода). Я не буду утомлять вас менее важной информацией, к тому же вы всегда можете почитать es6, если хотите. Давайте начнем прямо сейчас.
1. Шаблонные строки
Строковая интерполяция раньше выполнялась с помощью оператора + в javascript, теперь вы можете использовать строки шаблона ', называемые обратными кавычками и $ {переменная}, чтобы добавить в строку переменную. Это позволяет легко интерполировать переменные со строками. Кнопка обратные кавычки находится слева от 1 на клавиатуре.
//The old way
const age = 20;
let message = 'I am '+age+' years old';
console.log(message); // I am 20 years old
// The new way
message = `I am ${age} years old`;
console.log(message); // I am 20 years old
2. Обмен данными в переменных
Если вы хотите поменять местами значения двух переменных, скажите x и y. Раньше вы это делали, объявляя переменную temp, в которой будет храниться значение x, теперь x может хранить значение y, затем восстановите значение temp на y.
//The old way
let x = 10;
let y = 5;
let temp = x;
x = y;
y = temp;
console.log(`x = ${x}`, `y = ${y}`); //x = 5 y = 10
//The new way
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 = 5
3. Разрушение
Деструктуризация позволяет вам выбирать нужные данные из массива элементов, объектов, карт и наборов.
const [a, b] = [1, 2, 7]; console.log(a, b); // 1 2 // Omit certain values 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" },
]
}
//To get first and lastname without destructuring
console.log(user.firstname, user.lastname); //Ahmed Adebsi
//With destructuring
const { firstname, lastname } = user;
console.log(firstname, lastname); //Ahmed Adebsi
//Destructuring with new variable names
const { firstname: first, lastname: last } = user;
console.log(first, last); // Ahmed Adebsi
Первый метод работает нормально, но представьте, что мне пришлось использовать свои имя и фамилию в нескольких местах моего кода, я бы продолжал ссылаться на user.firstname и user.lastname. что я могу сделать, так это разложить их на отдельные переменные. Обратите внимание на фигурные скобки, вокруг которых заключены имя и фамилия, это показывает, что они являются свойствами объекта, в данном случае пользователя. При деструктуризации имя переменной должно соответствовать свойству этого объекта. Вы можете изменить имена переменных, как показано выше, если хотите.
4. Распространение и отдых
Операторы распространения и отдыха представлены с помощью (…). Это называется распространением или отдыхом в зависимости от варианта использования.
- распространение
Важность оператора спреда - неизменность. Это поможет вам создать новый массив, не изменяя старый. Давайте посмотрим на несколько примеров.
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 ]
Первая строка создает массив с некоторыми числами в нем. Вторая строка создает новый массив, распределяет в него данные oldArray и добавляет новое число, равное 8. Оператор распространения здесь принимает каждый элемент в oldArray и добавляет его в newArray перед добавлением нового числа 8.
console.log(Math.min(2, 3, 1)); // expected output: 1 const numbers = [2, 3, 1]; console.log(Math.min(...numbers)); // expected output: 1
В этом случае функция min ожидает список аргументов, разделенных запятыми, которые должны быть числами. Что мы можем просто сделать, так это распространить данные из массива в функцию. Да! оно работает.
- Отдых
Оператор rest позволяет группировать элементы, которые вы деструктурируете, вместе. Простой пример входа в систему в react.
state = {
email: '',
password: '',
errors: {}
}
const {errors, ...formData} = state;
const validationErrors = validate(formData);
В этом примере объект state содержит объект ошибок, который не является частью данных, которые мы получаем от пользователя. Данные, которые нам нужны для проверки и отправки на серверную часть, - это адрес электронной почты и пароль. поэтому, используя деструктуризацию, мы извлекаем объект ошибок, а остальные оставшиеся данные в этом случае называются formData. formData теперь является объектом только со свойствами электронной почты и пароля.
5. Метод карты в javascript
Метод 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
Здесь переменная surname представляет собой ярлык, который прикреплен к каждому из продуктов, в данном случае имя моих братьев и сестер. Произвести объединение каждого имени с фамилией. Вы можете сократить код до одной строки. Если это одна строка кода, ключевое слово 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('');
ссылки - это массив ссылок. Каждая ссылка предназначена для представления некоторого html. Ссылка название, рейтинг для ссылки, кнопка открыть в новой вкладке и кнопка закрыть. Сопоставление ссылок возвращает массив, в котором каждая ссылка теперь представлена для нее в виде HTML. Поскольку это массив строк, разделенных запятыми, мы можем join () в возвращенном массиве объединить их в одну большую строку. linksDiv - это просто div, в который мы можем вставить наш html.
И последний пример.
const productItems = this.state.products.map(product => {
return (
<Product product={product} key={product.id} addToCart={this.addToCart} />
)
});
В React Land у нас есть список продуктов, установленных в состоянии. Каждый продукт - это объект, который будет представлен компонентом. Поэтому мы отображаем его, чтобы вернуть компонент Product.
В заключение, метод map возвращает новый массив того же количества элементов, представленных по-новому.
6. Метод сокращения в javascript
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, т.е. мы впервые видим этого человека. (когда мы впервые встретим мальчика, сумма [‘boy’] будет неопределенной, поэтому мы устанавливаем значение 1). В следующий раз, когда тот же человек встретится, свойство уже существует для объекта, поэтому мы просто увеличиваем начальное количество.
В заключение, если у вас есть массив элементов и вам нужно вернуть только один элемент, используйте сокращение.
7. Метод фильтрации в javascript
Фильтр принимает массив и возвращает новый массив на основе некоторого логического условия. Мне нравится думать о фильтре как о процессе приема на работу, когда некоторые кандидаты отбираются на работу на основе определенных критериев.
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. Улучшения Object Literal
Объектные литералы подверглись обновлению. Если ключ литерала объекта совпадает со значением, вы просто не учитываете ключ и используете только значение. Существует также новый способ объявления функций внутри объекта, который позволяет удалить ключевое слово function и двоеточие перед ним.
const price = 4.20;
const quantity = 20;
// The old way
let invoiceData = {
price: price,
quantity: quantity,
printInvoice: function () {
console.log(`price = ${this.price}`, `quantity = ${this.quantity}`);
}
}
invoiceData.printInvoice(); // price = 4.2 quantity = 20
// The new way
invoiceData = {
price,
quantity,
printInvoice() {
console.log(`price = ${this.price}`, `quantity = ${this.quantity}`);
}
}
invoiceData.printInvoice(); //price = 4.2 quantity = 20
9. Использование && и || сокращенный синтаксис
Вы можете использовать && и || операторы в 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, он возвращает значение null, а вызов JSON.parse возвращает значение null. Поскольку то, что находится слева от || имеет значение null, он берет то, что справа от него, то есть пустой массив, и сохраняет его в переменной ссылок.
Таким образом, если то, что находится слева от || Оператор - это ложное значение, по умолчанию он соответствует тому, что находится справа от него, иначе он использует то, что находится слева.
10. Использование какого-либо метода в javascript
Метод 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
Эта статья предназначена для начинающих, и я искренне надеюсь, что вы сможете выбрать одну или две вещи, которые сможете использовать в повседневной разработке. Это редактировал Адегок Дамола. Вы можете следить за мной в твиттере Адебизи Ахмед Филип. Скоро появятся и другие интересные статьи.
📝 Прочтите этот рассказ позже в Журнале.
🗞 Просыпайтесь каждое воскресное утро и слышите самые интересные истории, мнения и новости недели, ожидающие в вашем почтовом ящике: Получите примечательный информационный бюллетень›
