Это действительно необходимо прочитать для любого разработчика JavaScript . Я написал это руководство по методам стенографического JavaScript-кодирования, которые я использовал за эти годы. Чтобы помочь вам понять, что происходит, я включил сокращенные версии, чтобы дать некоторое представление о кодировании.
25 августа 2019 года : эта статья была обновлена, чтобы добавить новые сокращенные советы, основанные на последних спецификациях. Если вы хотите узнать больше о ES6 и более поздних версиях, зарегистрируйтесь в SitePoint Premium и ознакомьтесь с нашей обширной библиотекой современных ресурсов JavaScript .
1. Тернарный оператор
Это отличная заставка кода, когда вы хотите написать оператор 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";
2. Сокращение оценки короткого замыкания
При назначении значения переменной другой переменной вы можете убедиться, что исходная переменная не является нулевой, неопределенной или пустой. Вы можете написать длинную инструкцию 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 значений.
3. Объявление переменных
Хорошей практикой является объявление ваших переменных в начале ваших функций. Этот сокращенный метод может сэкономить много времени и пространства при одновременном объявлении нескольких переменных.
обыкновенное письмо:
let x; let y; let z = 3;
стенографии:
let x, y, z=3;
4. Если присутствие сокращение
Это может быть тривиально, но стоит упомянуть. При выполнении «проверок if » операторы присваивания иногда могут быть опущены.
обыкновенное письмо:
if (likeJavaScript === true)
стенографии:
if (likeJavaScript)
Примечание: эти два примера не совсем совпадают, поскольку стенографическая проверка будет проходить до тех пор, пока
likeJavaScriptявляется истинным значением .
Вот еще один пример. Если a НЕ равно true, то сделать что-то.
обыкновенное письмо:
let a; if ( a !== true ) { // do something... }
стенографии:
let a; if ( !a ) { // do something... }
5. JavaScript для 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. Оценка короткого замыкания
Вместо написания шести строк кода для назначения значения по умолчанию, если предполагаемый параметр равен нулю или не определен, мы можем просто использовать логический оператор короткого замыкания и выполнить то же самое с помощью всего одной строки кода.
обыкновенное письмо:
let dbHost; if (process.env.DB_HOST) { dbHost = process.env.DB_HOST; } else { dbHost = 'localhost'; }
стенографии:
const dbHost = process.env.DB_HOST || 'localhost';
7. Десятичные базовые показатели
Возможно, вы видели это вокруг. По сути, это причудливый способ писать числа без конечных нулей. Например, 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. Сокращение свойства объекта
Определение литералов объектов в JavaScript значительно облегчает жизнь. ES6 обеспечивает еще более простой способ присвоения свойств объектам. Если имя переменной совпадает с ключом объекта, вы можете воспользоваться сокращенной записью.
обыкновенное письмо:
const x = 1920, y = 1080; 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));
Важно отметить, что значение this внутри функции стрелки определяется не так, как для обычных функций, поэтому два примера не являются строго эквивалентными. См. Эту статью о синтаксисе функции стрелки для более подробной информации.
10. Сокращенное неявное возвращение
Return — это ключевое слово, которое мы часто используем для возврата конечного результата функции. Функция со стрелкой с одним оператором будет неявно возвращать результат своей оценки (функция должна опускать фигурные скобки ( {} ), чтобы пропустить ключевое слово return).
Чтобы вернуть многострочный оператор (например, литерал объекта), необходимо использовать () вместо {} для переноса тела функции. Это гарантирует, что код оценивается как один оператор.
обыкновенное письмо:
function calcCircumference(diameter) { return Math.PI * diameter }
стенографии:
calcCircumference = diameter => ( Math.PI * diameter; )
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. Шаблонные литералы
Вы не устали использовать ' + ' для объединения нескольких переменных в строку? Разве нет намного более простого способа сделать это? Если вы можете использовать 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. Сокращения Сокращения Назначения
Если вы работаете с какой-либо популярной веб-платформой, высока вероятность того, что вы будете использовать массивы или данные в виде литералов объектов для передачи информации между компонентами и 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. Строковое сокращение в несколько строк
Если вам когда-нибудь понадобилось писать многострочные строки в коде, вы должны написать это так:
обыкновенное письмо:
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. Сокращение оператора спреда
Оператор распространения , представленный в 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. Обязательное сокращение параметра
По умолчанию JavaScript установит параметры функции на undefined если им не передано значение. Некоторые другие языки выдают предупреждение или ошибку. Для принудительного назначения параметров вы можете использовать оператор 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 Сокращения
Если бы вам когда-нибудь было поручено написать функцию поиска на простом JavaScript, вы, вероятно, использовали бы цикл for . В 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. Объект [ключ] Сокращение
Знаете ли вы, что 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. Двойной побитовый НЕ Сокращения
Битовые операторы — это одна из тех функций, о которых вы узнаете в руководствах по JavaScript для начинающих, и вы никогда не сможете их реализовать где-либо. Кроме того, кто хочет работать с единицами и нулями, если вы не имеете дело с бинарным?
Однако существует очень практичный пример использования оператора Double Bitwise NOT. Вы можете использовать его в качестве замены для Math.floor() . Преимущество оператора Double Bitwise NOT заключается в том, что он выполняет ту же операцию намного быстрее. Вы можете прочитать больше о побитовых операторах здесь .
обыкновенное письмо:
Math.floor(4.9) === 4 //true
стенографии:
~~4.9 === 4 //true
20. Сокращение экспоненциальной мощности
Сокращение для математической степенной функции степени:
обыкновенное письмо:
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. Преобразование строки в число
Есть моменты, когда ваш код получает данные, которые поступают в формате String, но должны обрабатываться в числовом формате. Это не имеет большого значения, мы можем выполнить быстрое преобразование.
обыкновенное письмо:
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. Назначение объекта недвижимости
Рассмотрим следующий фрагмент кода:
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. Побитовый индекс сокращения
При выполнении поиска с использованием массива indexOf() используется для получения позиции 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. Предложить?
Я действительно люблю это и хотел бы найти больше, поэтому, пожалуйста, оставьте комментарий, если вы знаете один!