Наиболее часто используемые сокращения для сокращения строк кода в JavaScript.

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

  1. Использование циклов for
const fruits = ['apple', 'peach', 'banana'];
for (let i=0; i < fruits.length; i++) {}; 
// shorthand
for(let fruit of fruits)
// if you want to access index only
for(let fruit in fruits)

2. Математическая стенография

Math.floor(4.9) 
// shorthand
~~4.9 
Math.pow(2,3);
// shorthand
2**3

3. Найти функцию

const members = [
{gender: 'M', name: 'John'},
{gender: 'M', name: 'Tim'},
{gender: 'F', name: 'Jenny'},
{gender: 'F', name: 'Alice'}
]
findTim = (name) => {
 for(let member of members) {
  if(member.name === name && member.gender === 'M') {
return member.name
} 
// shorthand
member = members.find(member => member.gender === 'M' && member.name === 'Tim');

4. Объединение и клонирование массивов с помощью операторов расширения

const oddNumbers = [3,5,7]
const numbers = [2,4,6].concat(oddNumbers);
// shorthand
const numbers = [2,4,6,...oddNumbers];
const array = [1,2,3];
const arrayClone = array.slice();
//shorthand
const arrayClone = [...array];

5. Строка для числа

const num1 = parseInt("100");
const num1 = parseFloat("100");
// shorthand
const num1 = +"100";

6. Разрушение

const id = this.props.id;
const title = this.props.title;
const author = this.props.author;
// shorthand
const {id, title, author} = this.props;

7. Литералы шаблонов

const db = "http://" + host + ":" + port + "/" + database;
// shorthand
const db = `http://${host}:${port}/${database}`;

8. Объявление переменных

let a = 3;
let b = 3;
let c = 3; 
//shorthand
let a=3, b=3, c = 3;

9. Тернарный оператор

Это сокращение от традиционного оператора if…else.

if (condition) {
  return "true"
} else {
  return "false"
}
// shorthand
let condition = true;
let result = condition ? 'true' : 'false';

10. Нулевой оператор объединения

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

// case 1 
let value = null;
let finalValue = value ?? 'default value'; 
console.log(finalValue); // 'default value'
// case 2
let value = 'intended value';
let finalValue = value ?? 'default value';
console.log(finalValue);  // 'intended value'

Заключение

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

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.