Es6

Set

A is a special type collection – “set of values” (without keys), where each value may occur only once.


Its main methods are:

  • – creates the set, and if an object is provided (usually an array), copies values from it into the set.
  • – adds a value, returns the set itself.
  • – removes the value, returns if existed at the moment of the call, otherwise .
  • – returns if the value exists in the set, otherwise .
  • – removes everything from the set.
  • – is the elements count.

The main feature is that repeated calls of with the same value don’t do anything. That’s the reason why each value appears in a only once.

For example, we have visitors coming, and we’d like to remember everyone. But repeated visits should not lead to duplicates. A visitor must be “counted” only once.

is just the right thing for that:

The alternative to could be an array of users, and the code to check for duplicates on every insertion using arr.find. But the performance would be much worse, because this method walks through the whole array checking every element. is much better optimized internally for uniqueness checks.

Array.reduce()

The method runs a function on each array element to produce (reduce it to) a single value.

The method works from left-to-right in the array. See also .

The method does not reduce the original array.

This example finds the sum of all numbers in an array:

Example

var numbers1 = ;var sum = numbers1.reduce(myFunction);function myFunction(total, value, index, array) {  return total + value;}

Note that the function takes 4 arguments:

  • The total (the initial value / previously returned value)
  • The item value
  • The item index
  • The array itself

The example above does not use the index and array parameters. It can be rewritten to:

Example

var numbers1 = ;var sum = numbers1.reduce(myFunction);function myFunction(total, value) {  return total + value;}

The method can accept an initial value:

Example

var numbers1 = ;var sum = numbers1.reduce(myFunction, 100);function myFunction(total, value) {  return total + value;}

is supported in all browsers except Internet Explorer 8 or earlier.

Yes 9.0 Yes Yes Yes

Клонирование и объединение объектов, Object.assign

Как мы узнали ранее, при копировании переменной объекта создаётся ещё одна ссылка на тот же самый объект.

Но что, если нам всё же нужно дублировать объект? Создать независимую копию, клон?

Но если мы действительно этого хотим, то нам нужно создавать новый объект и повторять структуру дублируемого объекта, перебирая его свойства и копируя их.

Например так:

Кроме того, для этих целей мы можем использовать метод Object.assign.

Синтаксис:

  • Аргументы , и (может быть столько, сколько нужно) являются объектами.
  • Метод копирует свойства всех объектов в объект . То есть, свойства всех перечисленных объектов, начиная со второго, копируются в первый объект. После копирования метод возвращает объект .

Например, объединим несколько объектов в один:

Если принимающий объект () уже имеет свойство с таким именем, оно будет перезаписано:

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

Все свойства объекта будут скопированы в пустой объект, и ссылка на этот объект будет в переменной . На самом деле, такое клонирование работает так же, как и через цикл, но короче.

До сих пор мы предполагали, что все свойства пользователя примитивны. Но свойства могут быть ссылками на другие объекты. Что с ними делать?

Например, есть объект:

Чтобы исправить это, мы должны в цикле клонирования делать проверку, не является ли значение объектом, и если это так – копируем и его структуру тоже. Это называется «глубокое клонирование».

Существует стандартный алгоритм глубокого клонирования, . Он решает описанную выше задачу, а также более сложные задачи. Чтобы не изобретать велосипед, мы можем использовать реализацию этого алгоритма из JavaScript-библиотеки lodash, метод .

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Основание системы счисления

Когда мы считаем от нуля до девяти, мы используем разные символы для каждого из чисел (0-9). Однако, как только мы достигаем десяти, нам нужны два разных символа (1 и 0) для представления числа. Это связано с тем, что мы используем десятичную систему счисления.

Основание — наименьшее число, которое не представить только одним символом. У различных систем счисления разные основания, и поэтому, одни и те же цифры могут обозначать разные числа.

Например, цифры 11 обозначают разные числа в этих трёх системах счисления. Для двоичной — это число 3. Для шестнадцатеричной — это число 17.

Внимательный читатель вероятно заметил что код с parseInt возвращает 3, когда вход равен 11, что соответствует двоичному столбцу из таблицы выше.

map()

Мы почти у цели!

Map — это метод в прототипе массива, который возвращает новый массив из результатов вызова функции для каждого элемента исходного массива. Например, следующий код умножает каждый элемент массива на 3:

Теперь предположим, что я хочу вывести каждый элемент используя map() (и не используя return). Можно просто передать console.log в качестве аргумента в map() … правильно?

Происходит что-то странное. Вместо того чтобы выводить только значение, каждый вызов console.log выводит индекс и массив полностью.

При передаче функции в map() на каждой итерации она будет получать три аргумента: currentValue, currentIndex и полный array. Вот почему при каждой итерации выводятся три записи.

Теперь у нас есть всё что нужно для раскрытия тайны.

Built-in controls


Zoom control

Just a single line of code adds neat control your users can use to zoom in and out the map.

Another line enables the slider.

All elements can be controlled using mouse, touch, and are accessible controls, enabling keyboard control.

Mini map

Another easily-enabled control shows “bird’s eye” view on the map.

It will mark the position of the current viewport on a tiny version of the whole map.

And, of course, it supports multiple map series, so it is as functional as the map itself – add mini versions of polygon, image, or line series there.

Heat legend

A heat legend allows automatically showing the “heat scale” of the map areas.

It takes the whole range of values and heat colors, then builds a value/color scale.

And, best of all, it can display an indicator of where a particular area is within the scale.

Useful functionality

Projections

amCharts 4 comes with support for a lot of map projections.

Projections allow displaying the same map in different ways.

The following projections are already supported with more planned: Eckert6, Equirectangular , Mercator, Miller, and Orthographic.

Coordinate shifting

The map is not constrained to be centered on a single point. You can set your own center coordinates, meaning you can create a map centered any way you like.

Easily create a Pacific-centered world map with just a single configuration option.

Or how about a rotating globe by combining coordinate shift with an Orthographic projection?

Heat maps

amCharts 4 brings a very powerful “heat rules” functionality, which you can use with maps as well.

Basically, you can bind most of the element’s properties to a numeric value. E.g. color fill of the countries, based on their fields in data, allowing you to create heat maps.

And, of course, you have a “heat legend” control as well.

Array.filter()

The method creates a new array with array elements that passes a test.

This example creates a new array from elements with a value larger than 18:

Example

var numbers = ;var over18 = numbers.filter(myFunction);function myFunction(value, index, array) {  return value > 18;}

Note that the function takes 3 arguments:

  • The item value
  • The item index
  • The array itself

In the example above, the callback function does not use the index and array parameters, so they can be omitted:

Example

var numbers = ;var over18 = numbers.filter(myFunction);function myFunction(value) {  return value > 18;}

is supported in all browsers except Internet Explorer 8 or earlier.

Yes 9.0 Yes Yes Yes

Правдивость и ложность

Вот простой оператор if-else в Javascript:

В этом случае условие оператора всегда истинно, поэтому блок if всегда выполняется, а блок else всегда игнорируется. Это тривиальный пример, потому что true — булев тип. Что тогда если мы поставим не булево условие?

Попробуйте запустить этот код в консоли разработчика. Вы должны увидеть «Условие истинно», так как строка «hello world» воспринимается как true.

Каждый объект в Javascript воспринимается либо как true, либо как false. При размещении в логическом контексте, таком как оператор if-else, объекты рассматриваются как true или false на основе их «истинности». Какие же объекты истинны, а какие ложны? Действует простое правило:

Все значения являются истинными, за исключением: false, , «» (пустая строка), null, undefined, и NaN.

Контр интуитивно это означает, что строка «false», строка «0», пустой объект {} и пустой массив [] — правдивы. Вы можете убедиться в этом самостоятельно, передав функции Boolean любой из объектов выше (например, Boolean(«0»);).

Но для наших целей просто достаточно помнить, что это ложь.

Object.fromEntries: Object from Map

We’ve just seen how to create from a plain object with .

There’s method that does the reverse: given an array of pairs, it creates an object from them:

We can use to get a plain object from .


E.g. we store the data in a , but we need to pass it to a 3rd-party code that expects a plain object.

Here we go:

A call to returns an iterable of key/value pairs, exactly in the right format for .

We could also make line shorter:

That’s the same, because expects an iterable object as the argument. Not necessarily an array. And the standard iteration for returns same key/value pairs as . So we get a plain object with same key/values as the .

Map

Map is a collection of keyed data items, just like an . But the main difference is that allows keys of any type.

Methods and properties are:

  • – creates the map.
  • – stores the value by the key.
  • – returns the value by the key, if doesn’t exist in map.
  • – returns if the exists, otherwise.
  • – removes the value by the key.
  • – removes everything from the map.
  • – returns the current element count.

For instance:

As we can see, unlike objects, keys are not converted to strings. Any type of key is possible.

isn’t the right way to use a

Although also works, e.g. we can set , this is treating as a plain JavaScript object, so it implies all corresponding limitations (no object keys and so on).

So we should use methods: , and so on.

Map can also use objects as keys.

For instance:

Using objects as keys is one of most notable and important features. For string keys, can be fine, but not for object keys.

Let’s try:

As is an object, it converts all keys, such as to strings, so we’ve got the string key . Definitely not what we want.

How compares keys

To test keys for equivalence, uses the algorithm . It is roughly the same as strict equality , but the difference is that is considered equal to . So can be used as the key as well.

This algorithm can’t be changed or customized.

Chaining

Every call returns the map itself, so we can “chain” the calls:

Instance Methods

clear() : undefined

Clears the key/value pairs from .

Example:

var x = new Map(, , ]);

console.log(x.size);

x.clear();

console.log(x.size);

delete(key : Object) : Boolean

Removes and its corresponding value from . Returns if was in before deleting it.

Example:

var x = new Map(, , ]);

console.log(‘size before delete: ‘ + x.size); console.log(‘deleted «a» = ‘ + x.delete(‘a’));

console.log(‘size after delete: ‘ + x.size); console.log(‘value for «a» = ‘ + x.get(‘a’));

console.log(‘deleted «foo» = ‘ + x.delete(‘foo’)); console.log(‘size after delete: ‘ + x.size);

entries() : Iterator<Array>

Returns an iterator of the index and items in where the of the iterator are of the form . The function is also returned for so you can iterate over directly to get the entries. See also and .

Example:

var x = new Map(, , ]);

// entries is returned by x so you can just // use x directly in the for (… of …) loop for (var value of x) { console.dir(value); }

// You can iterate over entries explicitly for (var entry of x.entries()) { console.dir(entry); }

// Or access the iterator manually var entries = x.entries();

console.dir(entries.next()); console.dir(entries.next()); console.dir(entries.next()); console.dir(entries.next());

forEach(callback : Function, ) : undefined callback(value : Object, key : Object, map : Map) : undefined

Calls for each key/value pair in . The passed to is the of the call to .

Example:


var x = new Map(, , ]);

x.forEach(function(value, key, map) { console.log(‘key: «‘ + key + ‘», value: «‘ + value + ‘»‘); });

get(key : Object) : Object

Returns the value stored for . If no value is stored, returns . See also and .

Example:

var x = new Map(, , ]);

console.log(x.get(‘a’)); console.log(x.get(‘b’));

// Notice the values stored in the map are not properties on // the object. get() is the only way to retrieve the values. console.log(x);

has(key : Object) : Boolean

Returns if the map has a value stored for .

Example:

var x = new Map(, , ]);

console.log(x.has(‘a’)); console.log(x.has(‘foo’));

// has() lets you check if a value is stored, even if // the value is undefined x.set(‘e’, undefined); console.log(x.has(‘e’) + ‘ ‘ + x.get(‘e’)); console.log(x.has(‘f’) + ‘ ‘ + x.get(‘f’));

keys() : Iterator

Returns an iterator of the keys in . See also and .

Example:

var x = new Map(, , ]);

// Use for (… of …) to loop over the iterator for (var key of x.keys()) { console.dir(key); }

// Or access the iterator manually var keys = x.keys();

console.dir(keys.next()); console.dir(keys.next()); console.dir(keys.next()); console.dir(keys.next());

set(key : Object, value : Object) : Map

Stores in at the specified . If a value is already stored for that , it is replaced with . Returns . See also and .

Example:

var x = new Map(, , ]);

console.log(x.get(‘a’));

x.set(‘a’, ‘a different value’); console.log(x.get(‘a’));

values() : Iterator

Returns an iterator of the values in . See also and .

Example:

var x = new Map(, , ]);

// Use for (… of …) to loop over the iterator for (var value of x.values()) { console.dir(value); }

// Or access the iterator manually var values = x.values();

console.dir(values.next()); console.dir(values.next()); console.dir(values.next()); console.dir(values.next());

Итого

Шпаргалка по методам массива:

  • Для добавления/удаления элементов:

    • – добавляет элементы в конец,
    • – извлекает элемент с конца,
    • – извлекает элемент с начала,
    • – добавляет элементы в начало.
    • – начиная с индекса , удаляет элементов и вставляет .
    • – создаёт новый массив, копируя в него элементы с позиции до (не включая ).
    • – возвращает новый массив: копирует все члены текущего массива и добавляет к нему . Если какой-то из является массивом, тогда берутся его элементы.
  • Для поиска среди элементов:

    • – ищет , начиная с позиции , и возвращает его индекс или , если ничего не найдено.
    • – возвращает , если в массиве имеется элемент , в противном случае .
    • – фильтрует элементы через функцию и отдаёт первое/все значения, при прохождении которых через функцию возвращается .
    • похож на , но возвращает индекс вместо значения.
  • Для перебора элементов:

    forEach(func) – вызывает func для каждого элемента. Ничего не возвращает.

  • Для преобразования массива:

    • – создаёт новый массив из результатов вызова для каждого элемента.
    • – сортирует массив «на месте», а потом возвращает его.
    • – «на месте» меняет порядок следования элементов на противоположный и возвращает изменённый массив.
    • – преобразует строку в массив и обратно.
    • – вычисляет одно значение на основе всего массива, вызывая для каждого элемента и передавая промежуточный результат между вызовами.
  • Дополнительно:

    Array.isArray(arr) проверяет, является ли arr массивом.

Обратите внимание, что методы , и изменяют исходный массив. Изученных нами методов достаточно в 99% случаев, но существуют и другие

Изученных нами методов достаточно в 99% случаев, но существуют и другие.

  • arr.some(fn)/arr.every(fn) проверяет массив.

    Функция вызывается для каждого элемента массива аналогично . Если какие-либо/все результаты вызовов являются , то метод возвращает , иначе .

  • arr.fill(value, start, end) – заполняет массив повторяющимися , начиная с индекса до .

  • arr.copyWithin(target, start, end) – копирует свои элементы, начиная со и заканчивая , в собственную позицию (перезаписывает существующие).

Полный список есть в справочнике MDN.

На первый взгляд может показаться, что существует очень много разных методов, которые довольно сложно запомнить. Но это гораздо проще, чем кажется.

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

Всякий раз, когда вам будет необходимо что-то сделать с массивом, а вы не знаете, как это сделать – приходите сюда, смотрите на таблицу и ищите правильный метод. Примеры помогут вам всё сделать правильно, и вскоре вы быстро запомните методы без особых усилий.


С этим читают