mdc

Если вы пробовали гуглить что-нибудь по JavaScript на эту тему, то добавьте в запрос "mdc" тогда первые результаты будут от Mozilla Developer Center.

Например:

Google:

 javascript array sort mdc

(в большинстве случаев можно исключить "javascript")

UPD: Mozilla Developer Center был переименован в Mozilla Developer Network. Ключевое слово "mdc" работает по-прежнему, но возможно вскоре нужно будет использовать "mdn".

#полезно

Замена IIFEs блоками

Проблема использования немедленно вызываемых функций, заключалась в том, что нужно было задавать значения переменным в пределах области функции. Теперь у нас есть возможность создавать блочные области, которые не ограничены исключительно функциональной областью.

(function () {
    var food = 'Meow Mix';
}());

console.log(food); // Reference Error

А теперь используем блочную область:

{
let food = 'Meow Mix';
};

console.log(food); // Reference Error

#функции

.includes( )

var string = 'food';
var substring = 'foo';

console.log(string.indexOf(substring) > -1);

Чтобы обозначить ограничение строки, мы можем просто использовать .includes(), который вернет логическое значение, вместо проверки > -1:

const string = 'food';
const substring = 'foo';

console.log(string.includes(substring));

#методы

.repeat( )

function repeat(string, count) {
    var strings = [];
    while(strings.length < count) {
        strings.push(string);
    }
    return strings.join('');
}

Теперь у нас есть доступ к реализации:

// String.repeat(numberOfRepetitions)
'meow'.repeat(3); // 'meowmeowmeow'

#функции

Литералы шаблонов в языке JavaScript

Используя литералы шаблонов, мы можем задавать строки со специальными символами, без необходимости их явного сокрытия.

var text = "This string contains "double quotes" which are escaped.";
let text = This string contains "double quotes" which don't need to be escaped anymore.;

Литералы шаблонов также поддерживают интерполяцию, что упрощает конкатенацию строк и значений:

var name = 'Tiger';
var age = 13;

console.log('My cat is named ' + name + ' and is ' + age + ' years old.');

Еще проще:

const name = 'Tiger';
const age = 13;

console.log(My cat is named ${name} and is ${age} years old.);

#функции

Деструктуризация

Деструктуризация позволяет нам извлекать значения из массивов или объектов и хранить их в переменных.

Деструктурированные массивы

var arr = [1, 2, 3, 4];
var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];
let [a, b, c, d] = [1, 2, 3, 4];

console.log(a); // 1
console.log(b); // 2

Деструктурированные объекты

var luke = { occupation: 'jedi', father: 'anakin' };
var occupation = luke.occupation; // 'jedi'
var father = luke.father; // 'anakin'
let luke = { occupation: 'jedi', father: 'anakin' };
let {occupation, father} = luke;

console.log(occupation); // 'jedi'
console.log(father); // 'anakin'

#объекты #массивы

Модули в языке JavaScript

До ES6 мы использовали библиотеки, такие как Browserify, для создания модулей на стороне клиента. С ES6 мы можем напрямую использовать модули всех типов (AMD и CommonJS).

Экспорт в CommonJS

module.exports = 1;
module.exports = { foo: 'bar' };
module.exports = ['foo', 'bar'];
module.exports = function bar () {};

#модули

Оператор распространения

В ES5 мы могли найти максимальные значения в массиве, используя метод apply на Math.max следующим образом:

Math.max.apply(null, [-1, 100, 9001, -32]); // 9001

В ES6 мы используется оператор распространения для передачи массива значений, которые выступают параметрами для функции:

Math.max(...[-1, 100, 9001, -32]); // 9001

Мы можем легко конкатенировать литералы массивов:

let cities = ['San Francisco', 'Los Angeles'];
let places = ['Miami', ...cities, 'Chicago']; // ['Miami', 'San Francisco', 'Los Angeles', 'Chicago']

#операторы

Symbol( )

Вызов Symbol () или Symbol (описание) создаст уникальный символ, который не может быть просмотрен глобально.

const refreshComponent = Symbol();

React.Component.prototype[refreshComponent] = () => {
// делать что-нибудь
}

#функции

Symbol.for(key)

Symbol.for(key) создает символ, который по-прежнему неизменен и уникален, но может быть просмотрен глобально. Два идентичных вызова Symbol.for(key) возвращают один и тот же символ.

Symbol('foo') === Symbol('foo') // false
Symbol.for('foo') === Symbol('foo') // false
Symbol.for('foo') === Symbol.for('foo') // true

Примечательным примером использования Symbol для взаимодействия является Symbol.iterator, который существует во всех повторяющихся типах в ES6: массивы, строки, генераторы и т. д.

#функции

Maps в языке JavaScript

Maps позволяют нам устанавливать, получать и искать значения (и многое другое).

let map = new Map();
> map.set('name', 'david');
> map.get('name'); // david
> map.has('name'); // true

Самая удивительная часть Maps - это то, что мы больше не ограничиваемся использованием строк. Теперь мы можем использовать любой тип в качестве ключа, и он не будет привязан к типу для строки.

let map = new Map([
['name', 'david'],
[true, 'false'],
[1, 'one'],
[{}, 'object'],
[function () {}, 'function']
]);

for (let key of map.keys()) {
console.log(typeof key);
// > string, boolean, number, object, function
}

Примечание. Использование функций или объектов не будет работать при проверке равенства с использованием таких методов, как map.get(). Таким образом, придерживайтесь примитивных значений, таких как строки, булевы и числа.

#функции

WeakMaps

Чтобы хранить частные версии данны можем использовать WeakMaps для хранения наших значений:

let _age = new WeakMap();
class Person {
constructor(age) {
_age.set(this, age);
}

incrementAge() {
let age = _age.get(this) + 1;
_age.set(this, age);
if (age > 50) {
console.log('Midlife crisis');
}
}
}

Самое интересное в использовании WeakMaps для хранения наших личных данных заключается в том, что их ключи не выдают имена свойств, которые можно увидеть с помощью Reflect.ownKeys():

> const person = new Person(50);
> person.incrementAge(); // 'Midlife crisis'
> Reflect.ownKeys(person); // []

#функции

Async Await в языке JavaScript

Async Await позволяет выполнять то же самое, что мы выполнили с помощью генераторов и промисов, но с меньшими усилиями:

var request = require('request');

function getJSON(url) {
return new Promise(function(resolve, reject) {
request(url, function(error, response, body) {
resolve(body);
});
});
}

async function main() {
var data = await getJSON();
console.log(data); // NOT undefined!
}

#функции

С наступающим Новым Годом, дорогие подписчики ❤️

Пусть 2023 принесёт только счастье, радость и успехов 🎈

Геттеры и сеттеры в языке JavaScript

ES6 начал поддерживать функции getter и setter внутри классов.

Последние браузеры также поддерживают функции getter / setter в объектах, и мы можем использовать их для вычисляемых свойств, добавляя предварительную обработку перед настройкой / получением:

var person = {
firstName: 'James',
lastName: 'Bond',
get fullName() {
console.log('Getting FullName');
return this.firstName + ' ' + this.lastName;
},
set fullName (name) {
console.log('Setting FullName');
var words = name.toString().split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
}

#функции

Генераторы в языке JavaScript

Подобно тому, как промисы позволяют нам избегать обратного вызова, генераторы позволяют придать нашему асинхронному коду синхронность. Генераторы – новый вид функций в современном языке JavaScript. Они отличаются от обычных тем, что могут приостанавливать своё выполнение, возвращать промежуточный результат и далее возобновлять его позже, в произвольный момент времени.

function* sillyGenerator() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
}

var generator = sillyGenerator();
> console.log(generator.next()); // { value: 1, done: false }
> console.log(generator.next()); // { value: 2, done: false }
> console.log(generator.next()); // { value: 3, done: false }
> console.log(generator.next()); // { value: 4, done: false }

#функции

Переменные let и const

У них блочная область видимости: такие переменные существуют только в пределах участка кода, ограниченного фигурными скобками. Такой подход позволяет избежать конфликта переменных, делая код более предсказуемым.

let используется для переменных, которые нужно переназначить после создания. Переменные, объявленные с помощью const, невозможно переназначить или изменить.

#переменные

Шаблонные строки

Достаточно использовать синтаксис ${}, чтобы вставить допустимое в JS выражение. Для конкатенации и комбинирования строк не нужен оператор «+», проще писать многострочные объекты типа String, поскольку не нужно создавать новые строки с помощью символа новой строки (\n) или возврата каретки (\r).

Кроме того, в шаблонных строках можно использовать вложенные кавычки (одинарные и двойные), не опасаясь ошибок.

#общее

Стрелочные функции

Со стрелочными функциями можно использовать сокращённый синтаксис. Это делает весь код короче. Можно заменить ключевое слово return (возврат происходит по умолчанию, если нет фигурных скобок) и тело функции (фигурные скобки) большой стрелкой (=>).

Проще работать с объектами и классами через ключевое слово this. Кроме того, можно удалить скобки вокруг одиночного параметра.

#общее

Методы массивов .map(), .filter(), .reduce(), и т. д.

Так же, как и цикл for, методы массивов map, filter и reduce позволяют перебирать элементы массива:

• .map() — позволяет преобразовать каждый элемент массива;
• .filter() — создаёт новый массив со всеми элементами, которые прошли проверку, заданную в функции;
• .reduce() — позволяет преобразовать весь массив в соответствии с нашими нуждами (даже в другой тип данных).

Указанные методы короче и читаются легче, чем цикл for. Комбинируя эти методы и стрелочные функции, можно ещё больше сократить код.

#методы