35 лучших сокращений JavaScript для начинающих
Изучите 35 лучших сокращений JavaScript, которые помогут вам писать более лаконичный и эффективный код. Эти сокращения охватывают широкий спектр тем: от объявления переменных до условных операторов, поэтому вы сможете быстро и легко улучшить свои навыки работы с JavaScript.
Сокращения JavaScript не только ускоряют процесс кодирования, но и делают сценарии короче, что приводит к более быстрой загрузке страниц.
Этот пост действительно необходимо прочитать любому разработчику JavaScript . Я написал это руководство по сокращенным методам кодирования JavaScript, которые я освоил за многие годы. Чтобы помочь вам понять, что происходит, я включил подробные версии, чтобы дать представление о кодировании.
первый.The Ternary Operator
Это отличная экономия кода, если вы хотите написать 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";
Вы также можете вложить свой ifоператор следующим образом:
const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";
let someThingTrue = true
if(someThingTrue){
console.log(“its true”)
}else{
console.log(“its not true”)
}
****** Short Hand version below ******
let someThingTrue = true
someThingTrue ? console.log(“its true”) : console.log(“its not true”)
2.Short-circuit Evaluation Shorthand
При присвоении значения переменной другой переменной вам может потребоваться убедиться, что исходная переменная не имеет значения NULL, неопределена или пуста. Вы можете либо написать длинный ifоператор с несколькими условными выражениями, либо использовать сокращенную оценку.
От руки:
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}
Сокращение:
const variable2 = variable1 || 'new';
Не верите мне? Проверьте это самостоятельно (вставьте следующий код в es6console ):
let variable1;
let variable2 = variable1 || 'bar';
console.log(variable2 === 'bar'); // prints true
variable1 = 'foo';
variable2 = variable1 || 'bar';
console.log(variable2); // prints foo
Обратите внимание: если вы установите variable1значение falseили 0, значение barбудет присвоено.
var someValueNotSureOfItsExistance = null
var expectingSomeValue = someValueNotSureOfItsExistance || “Value”
3.Declaring Variables Shorthand
Хорошей практикой является объявление назначений переменных в начале функций. Этот сокращенный метод может сэкономить вам много времени и места при одновременном объявлении нескольких переменных.
От руки:
let x;
let y;
let z = 3;
Сокращение:
let x, y, z=3;
4.If Presence Shorthand
Это может быть тривиально, но стоит упомянуть. При выполнении « ifпроверок» операторы присваивания иногда можно опустить.
От руки:
if (likeJavaScript === true)
Сокращение:
if (likeJavaScript)
Примечание. Эти два примера не совсем равны, поскольку сокращенная проверка будет проходить успешно, пока likeJavaScriptзначение истинно .
Вот еще один пример. Если aНЕ равно true, то сделайте что-нибудь.
От руки:
let a;
if ( a !== true ) {
// do something...
}
Сокращение:
let a;
if ( !a ) {
// do something...
}
5.JavaScript For Loop Shorthand
Этот небольшой совет действительно полезен, если вам нужен простой JavaScript и вы не хотите полагаться на внешние библиотеки, такие как jQuery или lodash.
От руки:
const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; 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
Сокращение для Array.forEach:
function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9
6.Short-circuit Evaluation
Вместо написания шести строк кода для присвоения значения по умолчанию, если предполагаемый параметр равен нулю или не определен, мы можем просто использовать сокращенный логический оператор и выполнить то же самое с помощью всего лишь одной строки кода.
От руки:
let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}
Сокращение:
const dbHost = process.env.DB_HOST || 'localhost';
7.Decimal Base Exponents
Возможно, вы видели это поблизости. По сути, это необычный способ записи чисел без конечных нулей. Например, 1e7 по сути означает 1, за которой следуют 7 нулей. Он представляет собой десятичную систему счисления (которую JavaScript интерпретирует как тип с плавающей запятой), равную 10 000 000.
От руки:
for (let i = 0; i < 10000; i++) {}
Сокращение:
for (let i = 0; i < 1e7; i++) {}
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
8.Object Property Shorthand
Определение литералов объектов в JavaScript значительно упрощает жизнь. ES6 предоставляет еще более простой способ назначения свойств объектам. Если имя переменной совпадает с ключом объекта, вы можете воспользоваться сокращенной записью.
От руки:
const x = 1920, y = 1080;
const obj = { x:x, y:y };
Сокращение:
const obj = { x, y };
9.Arrow Functions Shorthand
Классические функции легко читать и писать в их простой форме, но они становятся немного многословными и запутанными, когда вы начинаете вкладывать их в вызовы других функций.
От руки:
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));
Важно отметить, что значение thisвнутри стрелочной функции определяется иначе, чем для длинных функций, поэтому эти два примера не являются строго эквивалентными. Дополнительную информацию см. в этой статье о синтаксисе функций стрелок .
десять.Implicit Return Shorthand
Return — это ключевое слово, которое мы часто используем для возврата окончательного результата функции. Стрелочная функция с одним оператором неявно возвращает результат его оценки (функция должна опускать фигурные скобки ( {}), чтобы опустить ключевое слово return).
Чтобы вернуть многострочный оператор (например, литерал объекта), необходимо использовать ()вместо него {}тело функции. Это гарантирует, что код оценивается как один оператор.
От руки:
function calcCircumference(diameter) {
return Math.PI * diameter
}
Сокращение:
calcCircumference = diameter => (
Math.PI * diameter;
)
11.Default Parameter Values
Вы можете использовать этот 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
двенадцатый.Template Literals
Вы не устали использовать ' + 'объединение нескольких переменных в строку? Нет ли более простого способа сделать это? Если вы умеете использовать ES6, то вам повезло. Все, что вам нужно сделать, это использовать обратный апостроф и ${}заключить переменные.
От руки:
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}`;
13.Destructuring Assignment Shorthand
Если вы работаете с какой-либо популярной веб-платформой, велика вероятность, что вы будете использовать массивы или данные в виде объектных литералов для передачи информации между компонентами и 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;
14.Multi-line String Shorthand
Если вам когда-либо приходилось писать в коде многострочные строки, вы бы написали это следующим образом:
От руки:
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.Spread Operator Shorthand
Оператор распространения , представленный в 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 ]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];
В отличие от concat()функции, вы можете использовать оператор расширения для вставки массива в любое место внутри другого массива.
const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];
Вы также можете объединить оператор расширения с нотацией деструктуризации 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 }
16.Mandatory Parameter Shorthand
По умолчанию JavaScript устанавливает параметры функции, undefinedесли им не передано значение. Некоторые другие языки выдают предупреждение или ошибку. Чтобы принудительно назначить параметр, вы можете использовать ifоператор, выдающий ошибку if undefined, или воспользоваться преимуществом «сокращенной записи обязательного параметра».
От руки:
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 Shorthand
Если бы вам когда-либо приходилось писать функцию поиска на простом JavaScript, вы, вероятно, использовали бы цикл for. find()В ES6 была представлена новая функция массива .
От руки:
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.Object [key] Shorthand
Знаете ли вы, что это Foo.barтакже можно записать как Foo['bar']? На первый взгляд кажется, что нет причин, по которым вам следует писать именно так. Однако эта нотация дает вам строительный блок для написания повторно используемого кода.
Рассмотрим этот упрощенный пример функции проверки:
function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true
Эта функция отлично справляется со своей задачей. Однако рассмотрим сценарий, в котором у вас очень много форм, в которых необходимо применить проверку, но с разными полями и правилами. Не правда ли, было бы неплохо создать общую функцию проверки, которую можно было бы настроить во время выполнения?
Сокращение:
// object validation rules
const schema = {
first: {
required:true
},
last: {
required:true
}
}
// universal validation function
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.Double Bitwise NOT Shorthand
Побитовые операторы — одна из тех функций, о которых вы узнаете в учебниках по JavaScript для начинающих, и вам никогда не удастся их где-либо реализовать. Кроме того, кто захочет работать с единицами и нулями, если вы не имеете дело с двоичными числами?
Однако существует очень практичный вариант использования оператора двойного побитового НЕ. Вы можете использовать его как замену Math.floor(). Преимущество оператора двойного побитового НЕ заключается в том, что он выполняет ту же операцию гораздо быстрее. Подробнее о побитовых операторах можно прочитать здесь .
От руки:
Math.floor(4.9) === 4 //true
Сокращение:
~~4.9 === 4 //true
20.Exponent Power Shorthand
Сокращение математической функции экспоненты:
От руки:
Math.pow(2,3); // 8
Math.pow(2,2); // 4
Math.pow(4,3); // 64
Сокращение:
2**3 // 8
2**4 // 4
4**3 // 64
21.Converting a String into a Number
Бывают случаи, когда ваш код получает данные в строковом формате, но их необходимо обработать в числовом формате. Это не имеет большого значения, мы можем выполнить быстрое преобразование.
От руки:
const num1 = parseInt("100");
const num2 = parseFloat("100.01");
Сокращение:
const num1 = +"100"; // converts to int data type
const num2 = +"100.01"; // converts to float data type
22.Object Property Assignment
Рассмотрим следующий фрагмент кода:
let fname = { firstName : 'Black' };
let lname = { lastName : 'Panther'}
Как бы вы объединили их в один объект? Один из способов — написать функцию, которая копирует данные из второго объекта в первый. К сожалению, это может быть не то, что вам нужно — вам может потребоваться создать совершенно новый объект без изменения каких-либо существующих объектов. Самый простой способ — использовать Object.assignфункцию, представленную в ES6:
let full_names = Object.assign(fname, lname);
Вы также можете использовать нотацию уничтожения объекта, представленную в ES8:
let full_names = {...fname, ...lname};
Нет ограничений на количество свойств объекта, которые можно объединить. Если у вас есть объекты с одинаковыми именами свойств, значения будут перезаписаны в том порядке, в котором они были объединены.
23.Bitwise IndexOf Shorthand
При выполнении поиска с использованием массива функция indexOf()используется для получения позиции искомого элемента. Если элемент не найден, -1возвращается значение. В JavaScript 0считается «ложным», а числа, большие или меньшие, 0считаются «истинными». В результате приходится писать правильный код вот так.
От руки:
if(arr.indexOf(item) > -1) { // Confirm item IS found
}
if(arr.indexOf(item) === -1) { // Confirm item IS NOT found
}
Сокращение:
if(~arr.indexOf(item)) { // Confirm item IS found
}
if(!~arr.indexOf(item)) { // Confirm item IS NOT found
}
Оператор bitwise(~)вернет истинное значение для чего угодно, кроме -1. Отрицать это так же просто, как сделать !~. В качестве альтернативы мы также можем использовать includes()функцию:
if(arr.includes(item)) { // Returns true if the item exists, false if it doesn't
}
24.Object.entries()
Это функция, представленная в ES8, которая позволяет конвертировать литеральный объект в массив пар ключ/значение. См. пример ниже:
const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.entries(credits);
console.log(arr);
/** Output:
[ [ 'producer', 'John' ],
[ 'director', 'Jane' ],
[ 'assistant', 'Peter' ]
]
**/
25.Object.values()
Это также новая функция, представленная в ES8, которая выполняет функцию, аналогичную функции Object.entries(), но без ключевой части:
const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.values(credits);
console.log(arr);
/** Output:
[ 'John', 'Jane', 'Peter' ]
**/
26. Оператор распространения
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
27.Decimal numbers
Если вы регулярно работаете с большими десятичными дробями , это сокращение может оказаться настоящей находкой, поскольку вам больше не придется вводить все нули, просто замените их обозначением e. Например, 1e8означает добавление восьми нулей после 1цифры, это равно 100000000.
Число после буквы e указывает количество нулей , следующих за цифрой (цифрами) перед e. Аналогично, 16e4это сокращение для 160000и т. д.
/* Shorthand */
var myVar = 1e8;
/* Longhand */
var myVar = 100000000;
28.Increment, decrement
Сокращение приращения состоит из двух +знаков и означает, что значение переменной должно быть увеличено на единицу . Аналогично, сокращение декремента состоит из двух -знаков и означает, что переменная должна быть уменьшена на единицу .
Эти два сокращения можно использовать только для числовых типов данных .
/* Shorthand */
i++;
j--;
/* Longhand */
i=i+1;
j=j-1;
29.Add, distract, multiply, divide
Существует сокращение для каждой из четырех основных математических операций : сложения, отвлечения, умножения и деления. Они работают аналогично операторам увеличения и уменьшения, только здесь вы можете изменить значение переменной на любое число (а не только на единицу).
В приведенном ниже примере iпеременная увеличивается на 5, jуменьшается на 3, kумножается на 10и lделится на 2.
/* Shorthand */
i+=5;
j-=3;
k*=10;
l/=2;
/* Longhand */
i=i+5;
j=j-3;
k=k*10;
l=l/2;
30.Determine character position
Метод charAt — один из наиболее часто используемых строковых методов, он возвращает символ в указанной позиции (например, 5-й символ строки). Вместо этого вы можете использовать простое сокращение: вы добавляете позицию символа, заключенную в квадратные скобки, после строки.
Обратите внимание, что charAt()метод отсчитывается от нуля . Следовательно, myString[4]вернет пятый символ строки ( "y"в примере).
var myString = "Happy birthday";
/* Shorthand */
myString[4];
/* Longhand */
myString.charAt(4);
тридцать первый.Declare variables in bulk
Если вы хотите создать более одной переменной одновременно, вам не нужно вводить их одну за другой. Достаточно использовать ключевое слово var(или let) только один раз , после чего вы можете просто перечислить переменные, которые хотите создать, через запятую .
С помощью этого сокращения вы можете объявлять как неопределенные переменные , так и переменные со значением .
/* Shorthand */
var i, j=5, k="Good morning", l, m=false;
/* Longhand */
var i;
var j=5;
var k="Good morning";
var l;
var m=false;
32.Declare an associative array
Объявление массива в JavaScript — относительно простая задача с использованием синтаксиса var myArray = ["apple", "pear", "orange"]. Однако объявление ассоциативного массива немного сложнее, поскольку здесь вам нужно определить не только значения, но и ключи (в случае обычных массивов ключами являются 0, 1, 2, 3, etc.).
Ассоциативный массив — это набор пар ключ-значение . Длинный способ — объявить массив, а затем добавить каждый элемент один за другим. Однако с помощью приведенного ниже сокращения вы также можете одновременно объявить ассоциативный массив и все его элементы .
В примере ниже myArrayассоциативный массив присваивает известным людям (ключи) место рождения (значения).
/* Shorthand */
var myArray = {
"Grace Kelly": "Philadelphia",
"Clint Eastwood": "San Francisco",
"Humphrey Bogart": "New York City",
"Sophia Loren": "Rome",
"Ingrid Bergman": "Stockholm"
}
/* Longhand */
var myArray = new Array();
myArray["Grace Kelly"] = "Philadelphia";
myArray["Clint Eastwood"] = "San Francisco";
myArray["Humphrey Bogart"] = "New York City";
myArray["Sophia Loren"] = "Rome";
myArray["Ingrid Bergman"] = "Stockholm";
33.Declare an object
Сокращение объявления объекта работает аналогично объявлению ассоциативных массивов. Однако здесь есть не пары «ключ-значение», а пары «свойство-значение» , которые вам нужно поместить в фигурные скобки {}.
Единственное отличие в сокращенном синтаксисе заключается в том, что свойства объекта не заключаются в кавычки ( name, placeOfBirth, в примере ниже).agewasJamesBond
/* Shorthand */
var myObj = { name: "Sean Connery", placeOfBirth: "Edinburgh",
age: 86, wasJamesBond: true };
/* Longhand */
var myObj = new Object();
myObj.name = "Sean Connery";
myObj.placeOfBirth = "Edinburgh";
myObj.age = 86;
myObj.wasJamesBond = true;
34.Use the conditional operator
Условный (тройной) оператор часто используется как сокращение для if-elseоператора . Он состоит из трех частей :
- состояние _
- что произойдет, если условие истинно ( if)
- что произойдет, если условие ложно ( else)
В примере ниже мы отправляем простое сообщение (внутри переменной message) людям, которые хотят вступить в клуб. Если использовать сокращенную форму, то для запуска оценки потребуется всего лишь одна строка кода .
var age = 17;
/* Shorthand */
var message = age >= 18 ? "Allowed" : "Denied";
/* Longhand */
if( age >= 18) {
var message = "Allowed";
} else {
var message = "Denied";
}
Если вы хотите протестировать его, просто скопируйте код в веб-консольage (F12 в большинстве браузеров) и несколько раз измените значение переменной .
35.Check presence
Часто случается, что вам нужно проверить, присутствует ли переменная или нет . Сокращение «if присутствие» помогает вам сделать это с гораздо меньшим количеством кода.
Имейте в виду, что большинство статей о сокращенных версиях JavaScript не дают правильной развернутой формы, поскольку нотация if( myVar )не просто проверяет, не является ли переменная ложной, но также выполняет ряд других проверок. А именно, переменная не может быть неопределенной, пустой, нулевой и ложной .
var myVar = 99;
/* Shorthand */
if( myVar ) {
console.log("The myVar variable is defined AND it's not empty
AND not null AND not false.");
}
/* Longhand */
if( typeof myVar !== "undefined" && myVar !== "" && myVar !== null
&& myVar !== 0 && myVar !== false ) {
console.log("The myVar variable is defined AND it's not empty
AND not null AND not false.");
}
Вы можете проверить, как работает сокращение «if присутствия», вставив следующий фрагмент кода в веб-консоль и изменив значениеmyVar несколько раз.
Чтобы понять, как работает это сокращение, стоит протестировать его со значениями ""(пустая строка), false, 0, true, непустой строкой (например "Hi"), числом (например 99) и когда переменная не определена (просто var myVar;).
Выводы
Может быть, предложите технику кодирования JS? Добавьте, пожалуйста, в комментарии
Примеры кода (полная и сокращенная запись)
Небольшое описание, когда это полезно, предостережения и тому подобное.
Спасибо за чтение!
#javascript