Дурні трюки з ES6

Це переклад статейки про деяких не зовсім очевидних прикольних можливості, які надає ES6 стандарт JavaScript'а. У статті час від часу проходить щось наркоманское, так що цілком можливо я не зміг перевести все досить якісно. Якщо знайшли косяки, напишіть мені про це — поправлю.
{в оригіналі тут була якась незрозуміла гифка з мавпою, яку я якось не дуже зрозумів, тому і не буду її тут ставити}
Ось вам кілька методів на основі ES6, які насправді не зовсім трюки — просто, використовуючи деякі речі з нового синтаксису, ми можемо непогано скоротити код, поліпшити його читабельність, або, можливо, просто весело провести час. Я (автор оригіналу, автор цієї статті на хабре — прим. пер.) планую збирати більше в цій статті, тому, будь ласка, не соромтеся додавати її в закладки і перевіряти час від часу. Ну і якщо у вас теж є якісь кумедні трюки, які я не згадую тут, будь ласка, напишіть про це!
Деструктуризация
Деструктуризация — моя найулюбленіша частина синтаксису ES6. Тепер вона є і в Node 6, так що цю справу можна використати і на фронтенде, і на серверній стороні. Для великих подробиць можна почитати роз'яснення цієї справи на сайті Mozilla (там теж російською, до речі), якщо ви не знаєте основу, а для тих, хто МБ/НЧ — це можливість легко призначати певним змінним якісь значення у вкладених об'єктах.
Кілька простих прикладів:
// можна деструктурировать масиви
const [a, b] = [1,2]; // a = 1, b = 2

// можна деструктурировать ключі в об'єктах
const { a } = { a: 3 }; // a = 3

// навіть параметри функцій
function foo({ a }) {
console.log(a);
}

foo({ a: 4 }); // виведе 4

Перейменування
Одна з фішок деструктуризації, про яку ви, можливо, не знаєте — це можливість перейменування по ходу справи. Якщо ви використовували ES6 модулі, ви можете знати, як працює оператор імпорту при перейменуванні імпортованих об'єктів і, можливо, задавалися питанням, чому так не виходить робити при деструктуризації. Ну, там насправді просто трохи інший синтаксис:
// просте перейменування для уникнення колізій або просто для краси.
const first = 5;
const { first: second } = { first: 3 };

console.log(second); // виведе 3

// перейменувати для іншого API з використанням розширеного використання присвоювання
function verifyUser({ userId: id }) {
return User.update({ id, verified: true });
}

У поєднанні з параметрами за замовчуванням
Параметри за замовчуванням дозволяють вам вказувати значення параметрів, які не були передані користувачем, але що якщо ви збиралися деструктуризовать їх, коли вони приходять? Не проблема… У нас є ліва сторона присвоювання (a.k.a. lvalue) з параметрами за замовчуванням, так що ви можете використовувати деструктуризацию і тут!
function defaults({ a, b } = { a: 1, b: 2 }) {
console.log('a', a); 
console.log('b', b);
}

defaults();
// a 1
// b 2

defaults({ a: 42, b: 32 });
// a 42
// b 32

// Будьте обережні з численними параметрами!
// Вся права сторона буде замінена вашими аргументами.
defaults({ a: 87 });
// a 87
// b undefined

Деструктуризация самого себе також може мати значення за замовчуванням, так що ми можемо змішати обидва варіанти!
function defaults({ a = 1, b = 2 } = {}) {
console.log('a', a); 
console.log('b', b);
}

defaults();
// a 1
// b 2

defaults({ a: 42, b: 32 });
// a 42
// b 32

// множинні параметри? Немає проблем, просто введіть те, що ви хочете змінити
defaults({ a: 87 });
// a 87
// b 2

Присвоювання, розгалуження і листя
Ви навіть можете деструктурировать глибокий об'єкт або масив! Але проміжні ключі об'єктів не будуть присвоєні в цей час. Що робити, якщо ви хочете привласнити якісь проміжні ключі і якийсь глибокий вузол? Просто запитайте про нього! Іншими словами, як ми покажемо в нижеидущем прикладі, ви можете просто оголосити будь-яку змінну, яку ви хочете (проміжне з'єднання в даному випадку) і використовувати її знову як специфікацію для переходу на інший рівень (проміжний -> вкладений) (от же ж-ж наркоманія… — прим. пер.).
const {
topLevel: {
intermediate, // проміжної оголошення
intermediate: {
nested // вкладеної оголошення
}
}
} = {
topLevel: {
intermediate: {
nested: 56
}
}
};

// intermediate is { nested: 56 }
// nested is 56

Ідіоматичні аргументи командного рядка для Node
Node.js прекрасна річ для написання скриптів. Для аргументів командного рядка, ви можете витягти їх з
process.argv
. Якщо ви робите щось складне, чи дійсно щось призначення для використання людьми, краще буде заюзать що-небудь на зразок yargs для їх парсингу. Але… якщо у вас є скрипт, який просто бере невелика кількість аргументів, ви можете використовувати деструктуризацию масиву для того щоб пропустити перші два аргументи (зазвичай шлях до Node.js і шлях до скрипта) і привласнити інші змінним.
#!/usr/bin/env node

// пропустити перші два аргументи, які є node.js і цим скриптом
const [,,filepath] = process.argv;

doSomethingFSLike(filepath);

Розширені літерали об'єктів
Оновлення в синтаксисі літерала об'єкта реально класні, і ми зараз заюзаем деякі вищенаведені приклади з використанням "коротких назв значень". Перша техніка — це навіть більше не трюк, а можливість уникнути зв'язування, якщо ви в ньому не потребуєте. Скажімо, ви хочете бачити змінну або функцію ззовні, але також хочете використовувати її всередині функцій, які ви експортуєте як допоміжний об'єкт. Техніка оголошення її поза повернутого об'єкта і вкладання її нижче дозволяє вам уникнути зв'язування.
const moment = require('moment');
const PERIOD = moment.duration(3, 'days');

module.exports = {
PERIOD,

isWithinPeriod(test) {
return moment().add(PERIOD).isAfter(test);
},
};

/// В той же час, у нашому файлі тесту...

const timeUtils = require('./time-utils');

describe('timeUtils.isWithinPeriod', () => {
it('помилково за межами його власної тимчасового періоду', () => {
const beyondPeriod = moment().add(timeUtils.PERIOD).add(timeUtils.PERIOD);
assert(timeUtils.isWithinPeriod(beyondPeriod) === false);
});
});

Разом з JSX
Окей, це не ES6 звичайно, але ви можете використовувати деякі фічі ES6 зразок короткого значення властивості дуже зручним чином разом з JSX.
function WhySoManyProps(props) {
const user = extractUser(props);
const fudge = calculateFudge();
const bits = computeBits();

// Це тааак надлишково.
return <SomeComponent user={user} fudge={fudge} bits={bits} />;
}

function Shorthand(props) {
const user = extractUser(props);
const fudge = calculateFudge();
const bits = computeBits();

// відправимо все нові змінні, які мають таке ж ім'я, як і властивості
return <SomeComponent {...{ user, fudge, bits }} />;
}

Правда, такий підхід не дуже рекомендують використовувати в офіційній документації до React.js — прим. перекладача.
Object.assign
Object.assign — це фантастичне нове доповнення, яке дуже допомагає зберігати речі иммутабельными (або, принаймні, робити лише ефемерні мутації до проміжних об'єктів). Але чи знаєте ви, що їх можна встановлювати і для значень масивів в тому числі?
const original = [0,1,2,3];
const copy = Object.assign([], original, { 2: 42 }); // [0,1,42,3]

console.log(original);
// [ 0, 1, 2, 3 ]

console.log(copy);
// [ 0, 1, 42, 3 ]

Ваші пропозиції?
Є якісь інші трюки, які вам подобаються, і які відсутні в даній статті? Поділіться ними в коментарях!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.