Есть ли хорошая стенографическая ссылка JS?
Я хотел бы включить любые методы стенографии в мои обычные привычки кодирования, а также иметь возможность читать их, когда я вижу их в уплотненном коде.
кто-нибудь знает справочную страницу или документацию, которая описывает методы?
Edit: я ранее упоминал минификаторы, и теперь мне ясно, что методы минимизации и эффективного ввода JS-это две почти полностью отдельные концепции.
5 ответов
Обновлено С ECMAScript 2015 (ES6) вкусности. Смотрите внизу.
наиболее распространенными условными сокращениями являются:
a = a || b // if a is falsy use b as default
a || (a = b) // another version of assigning a default value
a = b ? c : d // if b then c else d
a != null // same as: (a !== null && a !== undefined) , but `a` has to be defined
объектная литеральная нотация для создания объектов и массивов:
obj = {
prop1: 5,
prop2: function () { ... },
...
}
arr = [1, 2, 3, "four", ...]
a = {} // instead of new Object()
b = [] // instead of new Array()
c = /.../ // instead of new RegExp()
встроенные типы (числа, строки, даты, логические значения)
// Increment/Decrement/Multiply/Divide
a += 5 // same as: a = a + 5
a++ // same as: a = a + 1
// Number and Date
a = 15e4 // 150000
a = ~~b // Math.floor(b) if b is always positive
a = +new Date // new Date().getTime()
// toString, toNumber, toBoolean
a = +"5" // a will be the number five (toNumber)
a = "" + 5 + 6 // "56" (toString)
a = !!"exists" // true (toBoolean)
объявление переменной:
var a, b, c // instead of var a; var b; var c;
символ строки в индексе:
"some text"[1] // instead of "some text".charAt(1);
в ECMAScript 2015 (ЕС6) стандарт shorthands
это относительно новые дополнения, поэтому не ожидайте широкой поддержки среди браузеров. Они могут поддерживаться современными средами (например: новый узел.js) или через транспиляторы. Конечно," старые " версии будут продолжать работать.
функции стрелочку
a.map(s => s.length) // new
a.map(function(s) { return s.length }) // old
параметры остальные
// new
function(a, b, ...args) {
// ... use args as an array
}
// old
function f(a, b){
var args = Array.prototype.slice.call(arguments, f.length)
// ... use args as an array
}
параметр по умолчанию значения
function f(a, opts={}) { ... } // new
function f(a, opts) { opts = opts || {}; ... } // old
разрушение
var bag = [1, 2, 3]
var [a, b, c] = bag // new
var a = bag[0], b = bag[1], c = bag[2] // old
определение метода внутри объектных литералов
// new | // old
var obj = { | var obj = {
method() { ... } | method: function() { ... }
}; | };
вычисляемое свойство имена внутри объектных литералов
// new | // old
var obj = { | var obj = {
key1: 1, | key1: 5
['key' + 2]() { return 42 } | };
}; | obj['key' + 2] = function () { return 42 }
бонус: новые методы на встроенных объектах
// convert from array-like to real array
Array.from(document.querySelectorAll('*')) // new
Array.prototype.slice.call(document.querySelectorAll('*')) // old
'crazy'.includes('az') // new
'crazy'.indexOf('az') != -1 // old
'crazy'.startsWith('cr') // new (there's also endsWith)
'crazy'.indexOf('az') == 0 // old
'*'.repeat(n) // new
Array(n+1).join('*') // old
Бонус 2: функции стрелки также делают self = this захват ненужное
// new (notice the arrow)
function Timer(){
this.state = 0;
setInterval(() => this.state++, 1000); // `this` properly refers to our timer
}
// old
function Timer() {
var self = this; // needed to save a reference to capture `this`
self.state = 0;
setInterval(function () { self.state++ }, 1000); // used captured value in functions
}
если с помощью JavaScript вы также включаете версии новее версии 1.5, то вы также можете увидеть следующее:
выражение укупорочные средства:
в JavaScript 1.7 и старше:
var square = function(x) { return x * x; }
JavaScript 1.8 добавлена стенография лямбда-нотация для написания простых функций с закрытие выражение:
var square = function(x) x * x;
метод reduce ():
JavaScript 1.8 также вводит уменьшить() метод для массивов:
var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });
// total == 6
Реструктуризующее присваивание:
в JavaScript 1.7, вы можете использовать реструктуризующее присваивание, например, чтобы поменять значения, избегая временных переменных:
var a = 1;
var b = 3;
[a, b] = [b, a];
понимание массива и метод filter ():
Выделения Массива были введены в JavaScript 1.7, который можно уменьшить следующий код:
var numbers = [1, 2, 3, 21, 22, 30];
var evens = [];
for (var i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
evens.push(numbers[i]);
}
}
что-то вроде этого:
var numbers = [1, 2, 3, 21, 22, 30];
var evens = [i for each(i in numbers) if (i % 2 === 0)];
или с помощью filter() метод в массивах который был введен в JavaScript 1.6:
var numbers = [1, 2, 3, 21, 22, 30];
var evens = numbers.filter(function(i) { return i % 2 === 0; });
вы ищете идиомы языка JavaScript.
- краткий, но непонятный список: http://ajaxian.com/archives/javascript-idioms-you-need-to-know
- Совет Дугласа Крокфорда:http://javascript.crockford.com/style2.html
конечно, интересно взглянуть на что нового в JavaScript 1.6+ но вы не сможете использовать язык особенности (например, список понимания или yield ключевое слово) в дикой природе из-за отсутствия поддержки. Однако стоит узнать о новых стандартных библиотечных функциях, если вы не подвергались воздействию Lisp или Scheme. Многие типичные части функционального программирования, такие как карта, уменьшить и фильтр хорошо знать и часто появляются в библиотеках JavaScript, таких как jQuery; еще одна полезная функция -bind (прокси в jQuery, в некоторой степени), что полезно при указании методов в качестве обратных вызовов.
получение последнего значения массива
это на самом деле не стенография, но больше похоже на более короткую альтернативу технике, которую использует большинство людей
когда мне нужно получить последнее значение массива, я обычно использую следующую технику:
var str = 'Example string you actually only need the last word of FooBar';
var lastWord = str.split(' ').slice(-1)[0];
часть .slice(-1)[0] являясь методом стенографии. Это короче по сравнению с методом, который я видел почти у всех остальных:
var str = 'Example string you actually only need the last word of FooBar';
var lastWord = str.split(' ');
lastWord = lastWord[lastWord.length-1];
тестирование этой стенографии относительная скорость вычислений
чтобы проверить это, я сделал следующее:
var str = 'Example string you actually only need the last word of FooBar';
var start = +new Date();
for (var i=0;i<1000000;i++) {var x=str.split(' ').slice(-1)[0];}
console.log('The first script took',+new Date() - start,'milliseconds');
и затем отдельно (для предотвращения возможного синхронного запуска):
var start2 = +new Date();
for (var j=0;j<1000000;j++) {var x=str.split(' ');x=x[x.length-1];}
console.log('The second script took',+new Date() - start,'milliseconds');
результаты:
The first script took 2231 milliseconds
The second script took 8565 milliseconds
заключение: отсутствие недостатков в использовании этой стенографии.
shorthands отладки
большинство браузеров поддерживают скрытые глобальные переменные для каждого элемента с идентификатором. Поэтому, если мне нужно что-то отладить, я обычно просто добавить простой код к элементу, а затем используйте мою консоль для доступа к нему через глобальную переменную. Вы можете проверить это сами: просто откройте консоль прямо здесь, типа footer и нажмите enter. Скорее всего, он вернет <div id="footer> если у вас нет этого редкого браузера, у которого нет этого (я не нашел).
если глобальная переменная уже занята какой-то другой переменной я обычно использую ужасно document.all['idName'] или document.all.idName. Я, конечно, знаю, что это ужасно устарело, и я не использую его ни в одном из моих реальных сценариев, но я использую его, когда я действительно не хочу печатать полный document.getElementById('idName') поскольку большинство браузеров поддерживают его в любом случае, да я действительно очень ленивый.
это репозиторий github посвящен методам сохранения байтов для Javascript. Я нахожу это довольно удобным!