Методы ярлыков JavaScript

Автор оригинала: Kushal Agrawal.

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

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

Это отличная заставка кода, когда вы хотите написать оператор IF..ELSE всего за одну строку. Длинный метод:

const x = 20;
let answer;
if (x > 10) {
    answer = "greater than 10";
} else {
    answer =  "less than 10";
}

Ярлык:

const answer = x > 10 ? "greater than 10" : "less than 10";
//OR you can also nest if statement like this
const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";

Оценка короткого замыкания сокращение

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

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

Ярлык:

const variable2 = variable1  || 'new';

Объявление переменных сокращения

Хорошей практикой для объявления ваших переменных назначений в начале ваших функций. Этот метод сокращения может экономить вас много времени и пространства при объявлении нескольких переменных одновременно. Длинный метод:

let x;
let y;
let z = 3;

Ярлык:

let x, y, z=3;

JavaScript для петли

Этот маленький наконечник действительно полезен, если вы хотите просто JavaScript и не хотите положиться на внешние библиотеки. Длинный метод: Const Fruits = [«Манго», «Персик», «Банан»]; для (пусть; i

for (let fruit of fruits)

Если вы просто хотели получить доступ к индексу, делайте:

for (let index in fruits)

Это также работает, если вы хотите получить доступ к ключам в буквальном объекте:

const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
  console.log(key) // output: continent, country, city

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

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

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

Ярлык:

const dbHost = process.env.DB_HOST || 'localhost';

Объектное свойство сокращение

Определение объектных литералов в JavaScript делает жизнь намного проще. ES6 предоставляет еще простым способом назначения объектов объектов. Если имя переменного то же самое, что и клавиша объекта, вы можете воспользоваться уведомлением со скользящей оборотой. Длинный метод:

const x = 1920, y = 1080;
const obj = { x:x, y:y };

Ярлык:

const obj = { x, y };

Стрелка функционирует сокращение

Классические функции легко читают и писать в своей простой форме, но они, как правило, становятся немного многословными и запутаны, как только вы начнете вкладывать их в другие вызовы функций. Длинный метод:

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));

Важно отметить, что значение этого внутри функции стрелки определяется по-разному, чем для функций Longhand, поэтому два примера не являются строго эквивалентными.

Неявный возврат состязания

Вернуться – это ключевое слово, которое мы часто используем для возврата окончательного результата функции. Функция стрелки с одним оператором будет неявно, возвращает результат его оценки (функция должна опускать брекеты ({}), чтобы пропустить ключевое слово возврата). Чтобы вернуть многострочный оператор, необходимо использовать () вместо {}, чтобы обернуть свой функциональный корпус. Это обеспечивает оценку кода как единое утверждение. Длинный метод:

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

Ярлык:

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

Шаблонные литералы

Все, что вам нужно сделать, это использовать Backtick и $ {}, чтобы заключить ваши переменные. Длинный метод:

const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;

Ярлык:

const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;

Разрушение назначения сокращения

Если вы работаете с любыми популярными веб-структурами (INVENTJS, угловые и т. Д.), Существует высокие шансы, которые вы будете использовать массивы или данные в виде объектных литералов для передачи информации между компонентами и 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 {магазин, форма, нагрузка, ошибки, объект. Вы можете даже назначить собственные имена переменных:

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

Распространение оператора сокращение

Оператор Spread, введенный в ES6, имеет несколько случаев использования, которые делают код 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 ]

//Глонирование массивов

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

В отличие от функции CONCAT (), вы можете использовать оператор SPRECT, чтобы вставить массив в любом месте внутри другого массива.

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

Вы также можете комбинировать оператор SPRECT с помощью деструктурирующегося деструктивной обработки ES6:

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 }

Array.find Shothandhand

Если вы когда-либо были нагружены с написанием функции поиска в простом JavaScript, вы, вероятно, использовали бы для цикла. В ES6 была представлена новая функция Array с именем Find (). Длинный метод:

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
  for(let i = 0; i

Ярлык:

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