Переводчик: Front-end Xiaozhi
оригинал:medium.com/@like ET Cam два часа…
Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статья
GitHubGitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.
Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.
Когда я начал изучать JavaScript, я составил список всех способов сэкономить время, которые я нашел в чужом коде, на сайтах с вызовами кода и где угодно, кроме учебных пособий, которые я использовал.
В этой статье я поделюсь 11 советами, которые я считаю особенно полезными. Этот пост предназначен для начинающих, но я надеюсь, что даже продвинутые разработчики JavaScript найдут в этом списке что-то новое.
1.. Фильтровать уникальные значения
SetТип объекта был введен в ES6 с операцией раскрытия...Вместе мы можем использовать его для создания нового массива только с уникальными значениями.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]
До ES6 выделение уникальных значений требовало гораздо больше кода, чем это.
Этот трюк работает для массивов, содержащих примитивные типы:undefined,null,boolean,stringиnumber. (Если у вас есть массив, содержащий объекты, функции или другие массивы, вам нужен другой подход!)
№ 2. И ИЛИ
Тернарный оператор — это быстрый способ написать простые (а иногда и не очень простые) условные операторы, подобные этому:
x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';
Но иногда обработка тернарным оператором также усложняется. Вместо этого мы можем использовать «и»&&и/или'||Логические операторы записывают выражения более лаконично. Это часто упоминается как «короткое замыкание» или «операции короткого замыкания».
как это работает
Предположим, мы хотим вернуть только один из двух или более вариантов.
использовать&&вернет первое условие как假значение . Если вычисленное значение каждого операндаtrue, возвращается последнее оцененное выражение.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0
использовать||вернет первое условие как真значение . Если каждый операнд оценивается какfalse, возвращается последнее оцененное выражение.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null
Пример 1
Предположим, мы хотим вернуть длину переменной, но не знаем тип переменной.
мы можем использоватьif/elseзаявление для проверкиfooявляется приемлемым типом, но это может стать очень подробным. Или бег может помочь нам упростить вещи:
return (foo || []).length
если переменнаяfooверно, он будет возвращен. В противном случае будет возвращена длина пустого массива:0.
Пример 2
У вас возникли проблемы с доступом к свойствам вложенных объектов? Вы можете не знать, существует ли объект или одно из его подсвойств, что может привести к досадным ошибкам.
Предположим, мы хотимthis.stateполучить доступ к названномуdataproperties, но до того, как наша программа успешно вернет запрос на получение,dataне определено.
В зависимости от того, где мы его используем, вызовитеthis.state.dataможет помешать запуску нашего приложения. Чтобы решить эту проблему, мы можем сделать дополнительные суждения:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}
Но это кажется повторяющимся. '或'оператор предоставляет более краткое решение:
return (this.state.data || 'Fetching Data');
Новая функция: Необязательная цепочка
В прошлом при вызове цепочки свойств Object это легко могло появиться позже, потому что свойство не существовало.Cannot read property xxx of undefinedошибка.
Тотoptional chainingтолько что добавленное?.Такой оператор сначала определит предыдущее значение, если оноnullилиundefined, завершить вызов и вернутьсяundefined.
Например, мы можем реорганизовать приведенный выше пример какthis.state.data?.(). Или, если мы в основном сосредоточимся наstateопределено, мы можем вернутьсяthis.state？.data.
Предложение в настоящее время находится на этапе 1 в качестве экспериментальной функции. ты сможешьздесьПрочитав его, вы теперь можете использовать свой JavaScript через Babel для@babel/plugin-proposal-optional-chainingдобавить в свой.babelrcв файле.
3. Преобразование в логическое значение
В дополнение к обычным булевым значениямtrueиfalse, JavaScript обрабатывает все остальные значения как«правдивый»или **'ложь'**.
Если не указано иное, все значения в JavaScript являются «истинными», кроме0,“”,null,undefined,NaN, и конечноfalse, это **'ложь'**
Мы можем легко использовать оператор отрицания вtrueиfalseпереключаться между. Он также преобразует тип в "логический".
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"
4. Преобразовать в строку
Чтобы быстро преобразовать числа в строки, мы можем использовать оператор конкатенации+за которым следует набор пустых кавычек"".
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"
5. Преобразовать в числа
Используйте оператор сложения+Обратного эффекта можно добиться быстро.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"
Это также можно использовать для преобразования логических значений в числа следующим образом.
console.log(+true); // Return: 1
console.log(+false); // Return: 0
В некоторых контекстах+будет интерпретироваться как оператор конкатенации, а не как оператор сложения. Когда это происходит (вы хотите вернуть целое число, а не число с плавающей запятой), вы можете использовать две тильды:~~.
Использование двух волн подряд фактически сводит на нет операцию, потому что— ( — n — 1) — 1 = n + 1 — 1 = n. другими словами,~—16равный15。
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"
Хотя я не могу придумать много вариантов использования, побитовый оператор НЕ также можно использовать с логическими значениями:~true = -2и~false = -1.
6. Вычисления с большей производительностью
Начиная с ES7 можно использовать экспоненциальный оператор**Как сокращение от мощности, это быстрее, чем писатьMath.pow(2, 3)Быстрее. Это довольно простая вещь, но она есть в списке, потому что этот оператор обновлен не во многих учебниках.
console.log(2 ** 3); // Result: 8
Его не следует путать с символом ^, обычно используемым для обозначения степени, но в JavaScript он побитовый.异或оператор.
До ES7 только2Существует сокращение мощности основания с использованием побитового оператора сдвига влево.<<
Math.pow(2, n);
2 << (n - 1);
2**n;
Например,2 << 3 = 16равный2 ** 4 = 16.
7. Быстрое преобразование с плавающей запятой в целое
Если вы хотите преобразовать число с плавающей запятой в целое число, вы можете использоватьMath.floor(),Math.ceil()илиMath.round(). Но есть более быстрый способ использовать|(Побитовой или оператор) усекает номер плавающего точка в целое число.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23
|поведение зависит от того, имеете ли вы дело с положительными или отрицательными числами, поэтому лучше использовать этот ярлык только тогда, когда вы уверены.
еслиnположительно, тоn | 0Эффективно округляет в меньшую сторону. еслиnОтрицательное число эффективно округляется. Точнее, эта операция удалит все после запятой, усекая число с плавающей запятой до целого числа.
ты можешь использовать~~чтобы получить такой же эффект округления, как описано выше, практически любой побитовый оператор заставит число с плавающей запятой быть целым числом. Эти специальные операции работают, потому что после приведения к целому значению значение остается прежним.
удалить последний номер
按位或Операторы также можно использовать для удаления любого количества цифр с конца целого числа. Это означает, что нам не нужно использовать такой код для преобразования между типами.
let str = "1553";
Number(str.substring(0, str.length - 1));
И наоборот, побитовый оператор ИЛИ можно записать так:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1
8. Автоматическая привязка в классах
Мы можем использовать стрелочную нотацию ES6 в методах класса, и тем самым мы можем неявно связываться. Обычно это экономит несколько строк кода в нашем конструкторе класса, и мы можем с радостью попрощаться с повторяющимися выражениями, такими какthis.myMethod = this.myMethod.bind(this)
import React, { Component } from React;
export default class App extends Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};
9. Усечение массива
Если вы хотите удалить значения из конца массива, есть лучший способ использоватьsplice()более быстрый метод.
Например, если вы знаете размер исходного массива, вы можете переопределить егоlengthсвойства, как это
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]
Это особенно изящное решение. Однако я нашелslice()Время выполнения метода быстрее. Если скорость — ваша главная цель, рассмотрите возможность использования:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]
10. Получить последний элемент в массиве
метод массиваslice()Допускаются отрицательные целые числа, и если они предоставлены, будет принято значение в конце массива, а не значение в начале массива.
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]
11. Отформатируйте код JSON
Наконец, вы, возможно, использовалиJSON.stringify, но знаете ли вы, что это также помогает делать отступы в JSON?
stringify()Метод имеет два необязательных параметра:replacerФункция, которую можно использовать для фильтрации отображаемого JSON и значения пробела.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'
общаться
Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.