19 полезных приемов стенографии для JavaScript

внешний интерфейс JavaScript

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

Если вы хотите написать оператор if...else, используйте вместо этого тернарный оператор.

const x = 20;
let answer;
if (x > 10) {
    answer = 'is greater';
} else {
    answer = 'is lesser';
}

Сокращение:const answer = x > 10 ? 'is greater' : 'is lesser';

Вы также можете вложить операторы if:const big = x > 10 ? " greater 10" : x

2. Стенограмма оценки короткого замыкания

При присвоении переменной другого значения необходимо убедиться, что исходное значение не равно null, undefined или null. Вы можете написать оператор if с несколькими условиями.

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

Или вы можете использовать метод оценки короткого замыкания:const variable2 = variable1 || 'new';

3. Объявить сокращенный метод переменной

let x;
let y;
let z = 3;

Сокращенный метод:let x, y, z=3;

4. Если есть условный метод сокращения

if (likeJavaScript === true)

Сокращение:if (likeJavaScript)

Два утверждения равны, только если likeJavaScript истинно.

Если значение оценки не является значением истины, вы можете сделать это:

let a;
if ( a !== true ) {
// do something...
}

Сокращение:

let a;
if ( !a ) {
// do something...
}

5. Сокращенный метод цикла JavaScript

for (let i = 0; i < allImgs.length; i++)

Сокращение:for (let index in allImgs)Array.forEach также можно использовать:

function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9

6. Оценка короткого замыкания

Чтобы присвоить значение переменной, определив, является ли ее значение нулевым или неопределенным, вы можете:

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

Сокращение:const dbHost = process.env.DB_HOST || 'localhost';

7. Десятичные показатели

Когда вам нужно написать число со многими нулями (например, 10000000), вы можете использовать показатель степени (1e7) вместо числа:for (let i = 0; i < 10000; i++) {}Сокращение:

for (let i = 0; i < 1e7; i++) {}

// 下面都是返回true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

8. Сокращение свойства объекта

Если имя свойства совпадает с именем ключа, вы можете использовать метод ES6:const obj = { x:x, y:y };

Сокращение:const obj = { x, y };

9. Сокращение стрелочной функции

Традиционный способ написания функций прост для понимания и написания людьми, но когда он вложен в другую функцию, эти преимущества теряются.

function sayHello(name) {
  console.log('Hello', name);
}

setTimeout(function() {
  console.log('Loaded')
}, 2000);

list.forEach(function(item) {
  console.log(item);
});

Сокращение:

sayHello = name => console.log('Hello', name);

setTimeout(() => console.log('Loaded'), 2000);

list.forEach(item => console.log(item));

10. Сокращение неявного возвращаемого значения

Оператор return часто используется для возврата окончательного результата функции, стрелочная функция одного оператора может неявно возвращать свое значение (функции должны опускать {}, чтобы опустить ключевое слово return).

Чтобы вернуть многострочный оператор (например, литеральное выражение объекта), вам нужно окружить тело функции символом ().

function calcCircumference(diameter) {
  return Math.PI * diameter
}

var func = function func() {
  return { foo: 1 };
};

Сокращение:

calcCircumference = diameter => (
  Math.PI * diameter;
)

var func = () => ({ foo: 1 });

11. Значения параметров по умолчанию

Чтобы передать значения по умолчанию параметрам в функции, обычно пишут с помощью оператора if, но используя ES6 для определения значений по умолчанию, это очень лаконично:

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

Сокращение:

volume = (l, w = 3, h = 4 ) => (l * w * h);

volume(2) //output: 24

12. Строки шаблона

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

const welcome = 'You have logged in as ' + first + ' ' + last + '.'

const db = 'http://' + host + ':' + port + '/' + database;

ES6 может использовать обратные кавычки и сокращение ${}:

const welcome = `You have logged in as ${first} ${last}`;

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

13. Сокращение деструктурирующего присваивания

В веб-фреймворках часто необходимо передавать данные в виде массивов или литералов объектов туда и обратно из компонента в API, а затем нужно их деструктурировать.

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');

const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

Сокращение:

import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

Имена переменных также могут быть назначены:

const { store, form, loading, errors, entity:contact } = this.props;
//最后一个变量名为contact

14. Сокращение многострочной строки

Чтобы вывести многострочную строку, вам нужно использовать + для конкатенации:

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'
    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'

Используйте обратные кавычки для сокращения:

const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse.`

15. Сокращение оператора расширения

Есть несколько вариантов использования оператора распространения, чтобы сделать код JavaScript более эффективным для использования вместо функции массива.

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

Сокращение:

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

В отличие от функции concat() оператор расширения можно использовать для вставки массива в другой массив в любом месте.

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

Деструктурирование также можно выполнить с помощью оператора распространения:

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

16. Сокращение обязательного параметра

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

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}

Сокращение:

mandatory = () => {
  throw new Error('Missing parameter!');
}

foo = (bar = mandatory()) => {
  return bar;
}

17. Array.find сокращение

Чтобы найти значение из массива, вам нужно выполнить цикл. В ES6 функция find() делает то же самое.

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]

function findDog(name) {
  for(let i = 0; i<pets.length; ++i) {
    if(pets[i].type === 'Dog' && pets[i].name === name) {
      return pets[i];
    }
  }
}

Сокращение:

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

18. Объект[ключ] сокращение

Рассмотрим функцию проверки

function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}

console.log(validate({first:'Bruce',last:'Wayne'})); // true

Гипотетически, когда для проверки необходимы разные домены и правила, можно ли написать общую функцию для проверки во время выполнения?

// 对象验证规则
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}

// 通用验证函数
const validate = (schema, values) => {
  for(field in schema) {
    if(schema[field].required) {
      if(!values[field]) {
        return false;
      }
    }
  }
  return true;
}


console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

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

19. Сокращение двойной небитовой операции

Существует допустимый вариант использования оператора двойного НЕ. Может использоваться вместо Math.floor(), преимущество в том, что он работает быстрее, прочтите эту статью, чтобы узнать больше о битовых операциях.Math.floor(4.9) === 4 //true

Сокращение:~~4.9 === 4 //true

Эта статья воспроизводится на SitePoint: https://www.sitepoint.com/shorthand-javascript-techniques/

Категории