Поделитесь 15 советами по разработке JavaScript

JavaScript Программа перевода самородков

Поделитесь 15 советами по разработке JavaScript

Цель этой статьи

Большинство языков программирования достаточно открыты, чтобы позволить программистам во многих отношениях достигать схожих результатов. То же самое относится и к JavaScript, где мы часто можем добиться сходных результатов несколькими способами, хотя иногда и сбивающими с толку.

Некоторые из этих применений лучше, чем другие, и это то, чем я собираюсь поделиться. Я собираюсь перечислить их все в этой статье, и я уверен, что вы обнаружите, что вы и я делаем то же самое во многих местах.

1. Использование строк шаблона

использовать+оператор объединяет строки для создания осмысленных строк, что устарело. Кроме того, объединение строк с динамическими значениями (или выражениями) может привести к ошибкам вычислений или выражений.

let name = 'Charlse';
let place = 'India';
let isPrime = bit => {
  return (bit === 'P' ? 'Prime' : 'Nom-Prime');
}

// 使用`+`运算符的字符串连接
let messageConcat = 'Mr. ' + name + ' is from ' + place + '. He is a' + ' ' + isPrime('P') + ' member.'

Литералы шаблонов (или строки шаблонов) позволяют встраивать выражения. Он имеет уникальный синтаксис, строка должна быть заключена в обратные кавычки (``). Строки шаблона содержат заполнители, которые могут содержать динамические значения, отмеченные знаком доллара и фигурными скобками (${expression}).

Вот пример, демонстрирующий это,

let name = 'Charlse';
let place = 'India';
let isPrime = bit => {
  return (bit === 'P' ? 'Prime' : 'Nom-Prime');
}

// 使用模板字符串
let messageTemplateStr = `Mr. ${name} is from ${place}. He is a ${isPrime('P')} member.`
console.log(messageTemplateStr);

2. isInteger

Есть более чистый способ узнать, является ли значение целым числом. JavaScriptNumberAPI предоставляетisInteger()метод достижения этого. Это очень полезно и лучше знать об этом.

let mynum = 123;
let mynumStr = "123";

console.log(`${mynum} is a number?`, Number.isInteger(mynum));
console.log(`${mynumStr} is a number?`, Number.isInteger(mynumStr));

Выходной результат:

2.png

3. Ценности — это числа

Вы когда-нибудь замечали, что, несмотря на то, что поле ввода имеет числовой тип,event.target.valueВсе еще всегда возвращать значение типа string?

См. пример ниже. У нас есть простое текстовое поле числового типа. Это означает, что он принимает только числа в качестве входных данных и имеет обработчики событий для обработки событий нажатия клавиш.

<input type='number' onkeyup="trackChange(event)" />

В обработчике событий мы используемevent.target.valueУдалите значение, но оно возвращает значение строкового типа. Теперь мне нужно будет преобразовать его в целое число. Что делать, если поле ввода принимает числа с плавающей запятой (например, 16,56)? использоватьparseFloat()а потом? Ах, мне пришлось столкнуться со всевозможной путаницей и дополнительной работой!

function trackChange(event) {
   let value = event.target.value;
   console.log(`is ${value} a number?`, Number.isInteger(value));
}

Пожалуйста, используйте вместо этогоevent.target.valueAsNumber, который возвращает значение в виде числа.

let valueAsNumber = event.target.valueAsNumber;
console.log(`is ${value} a number?`, Number.isInteger(valueAsNumber));

4. Используйте оператор && для упрощения выражений

Рассмотрим случай с логическими значениями и функциями.

let isPrime = true;
const startWatching = () => {
    console.log('Started Watching!');
}

Как это, чтобы определить, назвать ли функцию, слишком большой код, изучив логическое значение.

if (isPrime) {
    startWatching();
}

Может ли форму сокращения использовать с оператором и (&&)? Да, если заявление о если его можно избежать целиком. Прохладный!

isPrime && startWatching();

5. Используйте оператор || для обработки значений по умолчанию

Если вы хотите установить значение по умолчанию для переменной, вы можете легко сделать это с помощью оператора ИЛИ (||).

let person = {name: 'Jack'};
let age = person.age || 35; // 如果 age 未定义，则将值设置为 35
console.log(`Age of ${person.name} is ${age}`);

6. Получайте случайные предметы

Генерация случайных чисел или получение случайных элементов из массива — очень полезный и удобный метод. Я видел их много раз во многих моих проектах.

получить случайный элемент из массива,

let planets = ['Mercury ', 'Mars', 'Venus', 'Earth', 'Neptune', 'Uranus', 'Saturn', 'Jupiter'];
let randomPlanet = planets[Math.floor(Math.random() * planets.length)];
console.log('Random Planet', randomPlanet);

Указав минимальные и максимальные значения, генерирует случайное число в диапазоне,

let getRandom = (min, max) => {
    return Math.round(Math.random() * (max - min) + min);
}
console.log('Get random', getRandom(0, 10));

7. Функция параметров по умолчанию

В JavaScript аргументы функции (или формальные параметры) подобны локальным переменным этой функции. При вызове функции вы можете передавать или не передавать значение. Если вы не передадите значение параметра, значение будетundefined, и может вызвать некоторые нежелательные побочные эффекты.

Существует простой способ передать значение по умолчанию параметру функции при определении параметра. В следующем примере по умолчаниюHelloПерейти кgreetingsаргументы функцииmessage.

let greetings = (name, message='Hello,') => {
    return `${message} ${name}`;
}

console.log(greetings('Jack'));
console.log(greetings('Jack', 'Hola!'));

8. Требуемые параметры функции

Основываясь на свойствах параметров по умолчанию, мы можем сделать параметры обязательными. Сначала определите функцию, которая выдает ошибку с сообщением об ошибке,

let isRequired = () => {
    throw new Error('This is a mandatory parameter.');
}

Затем используйте функцию в качестве значения по умолчанию для требуемого параметра. Помните, что если вы передаете значение параметра при вызове функции, значение по умолчанию игнорируется. Однако, если значение параметра «не определено», будет использоваться значение по умолчанию.

let greetings = (name=isRequired(), message='Hello,') => {
    return `${message} ${name}`;
}
console.log(greetings());

В приведенном выше кодеnameбудет неопределенным, поэтому попытаемся использовать значение по умолчанию, т.е.isRequired()функция. Выдаст такую ​​ошибку:

9. Командный оператор

Когда я понимаю запятую (,) — это отдельный оператор, и я был удивлен, что не заметил этого раньше. Я много использовал запятые в своем коде, но никогда не понимал их другого использования.

Оператор оценивает каждый из своих операндов слева направо и возвращает значение последнего операнда.

let count = 1;
let ret = (count++, count);
console.log(ret);

В приведенном выше примере переменнаяretбудет 2. Точно так же следующий код выведет значение 32 в консоль и войдет в консоль.

let val = (12, 32);
console.log(val);

где мы его используем? Есть идеи? запятая (,Чаще всего оператор используется для предоставления нескольких параметров в цикле FOR.

for (var i = 0, j = 50; i <= 50; i++, j--)

10. Объедините несколько объектов

Возможно, вам придется объединить два объекта вместе и создать лучший, более информативный объект для использования. Для этого вы можете использовать оператор спреда...(Да, три точки!).

рассматривается отдельноempа такжеjobэти два объекта,

let emp = {
 'id': 'E_01',
 'name': 'Jack',
 'age': 32,
 'addr': 'India'
};

let job = {
 'title': 'Software Dev',
  'location': 'Paris'
};

Расширенный оператор объединяет их в

// spread operator
let merged = {...emp, ...job};
console.log('Spread merged', merged);

Есть еще один способ реализовать слияние. Вы можете использовать, как показано нижеObject.assign():

console.log('Object assign', Object.assign({}, emp, job));

Выходной результат:

Обратите внимание, что оператор спреда иObject.assignОба выполняют поверхностное слияние. При неглубоком слиянии свойства первого объекта будут перезаписаны теми же значениями свойств второго объекта.

Для глубокого слияния рассмотрите возможность использованияlodashсередина_merge.

11. Деконструкция

Техника разбиения элементов массива и свойств объектов на переменные называется "деструктурированием". Давайте посмотрим несколько примеров,

множество

Здесь у нас есть серия смайликов,

let emojis = ['🔥', '⏲️', '🏆', '🍉'];

Для деструктуризации мы будем использовать следующий синтаксис:

let [fire, clock, , watermelon] = emojis;

Это то же самое, чтоlet fire = emojis [0];То же самое, но с большей гибкостью. Вы заметили, что я просто использую пробел на месте трофейных смайлов и игнорирую его? Ну, это будет вывод, что это?

console.log(fire, clock, watermelon);

Выходной результат:

11.png

Позвольте мне представить еще одну вещь, называемую оператором «отдых». Если вы хотите деструктурировать массив, чтобы назначить один или несколько элементов переменной и временно поместить остальные в другой массив, вы можете использовать...restдля завершения, как показано ниже.

let [fruit, ...rest] = emojis;
console.log(rest);

Выходной результат:

11.a.png

объект

Как и массивы, мы также можем деструктурировать объекты.

let shape = {
  name: 'rect',
  sides: 4,
  height: 300,
  width: 500
};

Подобно этой деконструкции, мы можем поместить объектnameсвойства иsidesПрисвоение атрибутов двум переменным, а остальные свойства хранятся в другом объекте.

let {name, sides, ...restObj} = shape;
console.log(name, sides);
console.log(restObj);

Выходной результат:

11.b.png

Подробнее об этой темеfrom here.

12. Поменять местами переменные

Теперь, используя деструктуризацию, которую мы только что изучили, замена переменных будет очень простой.

let fire = '🔥';
let fruit = '🍉';

[fruit, fire] = [fire, fruit];
console.log(fire, fruit);

13. isArray

Еще один полезный способ определить, является ли ввод массивом.

let emojis = ['🔥', '⏲️', '🏆', '🍉'];
console.log(Array.isArray(emojis));

let obj = {};
console.log(Array.isArray(obj));

14. неопределенный и нулевой

undefinedЭто означает, что переменная еще не дана, но эта переменная была объявлена.

nullявляется пустым и несуществующим значением, которое должно быть явно присвоено переменной.

undefinedа такжеnullстрого не равны,

undefined === null // false

Подробнее об этой темеfrom here.

15. Получить параметры запроса

window.locationОбъекты имеют множество служебных методов и свойств. Используя эти свойства и методы, мы можем получить информацию о протоколе, хосте, порте, домене и т. д. из URL-адреса браузера.

Вот недвижимость, которую я нашел очень полезным:

window.location.search

searchСвойство возвращает строку запроса из URL-адреса местоположения. Возьмите этот URL в качестве примера:https：//tapasadhiary.com？project = js.location.searchвернусь？project = js

Мы можем использовать другое имяURLSearchParamsполезные интерфейсы дляlocation.searchчтобы получить значение параметра запроса.

let project = new URLSearchParams(location.search).get('project');

Выходной результат:js

Подробнее об этой темеfrom here.

Эта статья не закончена

Навыки программирования на JavaScript — это гораздо больше, и я планирую обновлять проект GitHub в качестве примеров по мере изучения новых.GitHub.com/ах он лезет/это-он...

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории