Я хотел бы включить любые сводные методы в мои обычные привычки кодирования, а также иметь возможность читать их, когда вижу их в уплотненном коде.
Кто-нибудь знает ссылку или документацию, описывающую методы?
Изменить: ранее я упоминал minifiers, и теперь мне ясно, что минимизация и эффективные методы JS-типирования - это две почти полностью разделенные понятия.
Обновлено с 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);
Это относительно новые дополнения, поэтому не ожидайте широкой поддержки среди браузеров. Они могут поддерживаться современными средами (например: более новые node.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 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 также предлагает метод reduce() для массивов:
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():
Array Comprehensions были введены в 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.
Конечно, интересно посмотреть на что нового в JavaScript 1.6+, но вы не сможете использовать языковые функции (например, перечисление списков или ключевое слово yield) в дикой природе из-за отсутствия основной поддержки. Стоит также узнать о новых стандартных библиотечных функциях, если у вас еще не было воздействия на Lisp или Scheme. Многие типичные части функционального программирования, такие как map, reduce и filter хорошо знать и часто отображаться в библиотеках JavaScript, таких как jQuery; другая полезная функция bind (proxy в 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
Вывод: нет недостатков в использовании этой сокращенной версии.
Большинство браузеров поддерживают скрытые глобальные переменные для каждого элемента с идентификатором. Поэтому, если мне нужно что-то отлаживать, я обычно добавляю простой элемент к элементу, а затем использую консоль для доступа к ней через глобальную переменную. Вы можете проверить это самостоятельно: просто откройте консоль прямо здесь, введите footer и нажмите enter. Скорее всего, он вернет <div id="footer>, если у вас нет такого редкого браузера, у которого его нет (я его не нашел).
Если глобальная переменная уже занята какой-то другой переменной, я обычно использую ужасные document.all['idName'] или document.all.idName. Я, конечно, знаю, что это ужасно устарело, и я не использую его ни в одном из моих реальных сценариев, но я его использую, когда я действительно не хочу набирать полный document.getElementById('idName'), поскольку большинство браузеров поддерживают его в любом случае, Да, я действительно довольно ленив.
Этот репозиторий github посвящен методам экономии байтов для Javascript. Мне это очень удобно!