Метод add в javascript

Как работат метод add в js?

Метод add() работает со множеством (Set). Set — это тип коллекции, хранящей только уникальные элементы. Метод add() используется для добавления нового элемента в коллекцию и возвращает ее саму.

const collection = new Set(); collection.add(1); collection.add('two'); console.log(collection.size); // => 2 // мы добавили два новых элемента в пустое множество 

При добавлении нового элемента делается проверка на наличие такого же элемента во множестве. Если такой элемент находится, множество не изменяется.

collection.add(1); console.log(collection.size); // => 2 // размер по-прежнему равен 2 collection.add(1); collection.add(1); console.log(collection.size); // => 2 // ничего не меняется 

Метод add() возвращает саму коллекцию, поэтому можно сделать цепочку вызовов, добавляющих элементы.

collection.add(3).add(4).add(5); console.log(collection.size); // => 5 

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

collection.add('5'); console.log(collection.size); // => 6 

Источник

Set.prototype.add()

Метод add() добавляет новый элемент с заданным значением в конец объекта Set .

Интерактивный пример

Синтаксис

Параметры

Обязательное. Значение элемента, добавляемого в объект Set .

Возвращаемое значение

Примеры

Использование метода add

var mySet = new Set(); mySet.add(1); mySet.add(5).add('some text'); // можно делать цепочки console.log(mySet); // Set [1, 5, "some text"] 

Спецификация

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 22 окт. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Метод add в javascript

Добавляет значение в коллекцию Set .

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Метод add ( ) добавляет значение в коллекцию Set . Если значение уже есть в коллекции, то вызов игнорируется.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Метод add ( ) вызывается со значением, которое нужно добавить в Set :

 const watched = new Set()watched.add('Отель Гранд Будапешт')console.log(watched.size)// 1 const watched = new Set() watched.add('Отель Гранд Будапешт') console.log(watched.size) // 1    Скопировать Скопировано Не удалось скопировать   

Если значение уже находится в коллекции, то вызов add ( ) не произведёт никакого эффекта:

 const watched = new Set()watched.add('Брат')console.log(watched.size)// 1 watched.add('Брат')watched.add('Брат')console.log(watched.size)// 1 const watched = new Set() watched.add('Брат') console.log(watched.size) // 1 watched.add('Брат') watched.add('Брат') console.log(watched.size) // 1    Скопировать Скопировано Не удалось скопировать   

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

 const watched = new Set()watched.add('Дюна').add('1917').add('Вверх') const watched = new Set() watched.add('Дюна').add('1917').add('Вверх')    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Коллекция Set хранит только уникальные значения. Добавление значений в коллекцию происходит с помощью вызова метода add ( ) .

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

При проверке используется строгое равенство, значения разных типов не будут приводиться к одному. 5 и ‘5’ будут добавлены в Set как разные элементы. Непримитивные структуры данных тоже могут быть добавлены в Set .

Будьте осторожны при добавлении в Set непримитивных типов — объектов, массивов и так далее. Они могут выглядеть одинаково, но по факту быть разными объектами. Пример и рекомендации по работе с ними описаны в обзорной статье по Set .

Источник

Метод add в javascript

The Set object lets you store unique values of any type, whether primitive values or object references.

Description

Set objects are collections of values. A value in the set may only occur once; it is unique in the set’s collection. You can iterate through the elements of a set in insertion order. The insertion order corresponds to the order in which each element was inserted into the set by the add() method successfully (that is, there wasn’t an identical element already in the set when add() was called).

The specification requires sets to be implemented «that, on average, provide access times that are sublinear on the number of elements in the collection». Therefore, it could be represented internally as a hash table (with O(1) lookup), a search tree (with O(log(N)) lookup), or any other data structure, as long as the complexity is better than O(N).

Value equality

Value equality is based on the SameValueZero algorithm. (It used to use SameValue, which treated 0 and -0 as different. Check browser compatibility.) This means NaN is considered the same as NaN (even though NaN !== NaN ) and all other values are considered equal according to the semantics of the === operator.

Performance

The has method checks if a value is in the set, using an approach that is, on average, quicker than testing most of the elements that have previously been added to the set. In particular, it is, on average, faster than the Array.prototype.includes method when an array has a length equal to a set’s size .

Set-like browser APIs

Browser Set -like objects (or «setlike objects») are Web API interfaces that behave in many ways like a Set .

Just like Set , elements can be iterated in the same order that they were added to the object. Set -like objects and Set also have properties and methods that share the same name and behavior. However unlike Set they only allow a specific predefined type for each entry.

The allowed types are set in the specification IDL definition. For example, GPUSupportedFeatures is a Set -like object that must use strings as the key/value. This is defined in the specification IDL below:

interface GPUSupportedFeatures  readonly setlikeDOMString>; >; 

Set -like objects are either read-only or read-writable (see the readonly keyword in the IDL above).

• Read-only Set -like objects have the property size , and the methods: entries() , forEach() , has() , keys() , values() , and @@iterator .
• Writeable Set -like objects additionally have the methods: clear() , delete() , and add() .

The methods and properties have the same behavior as the equivalent entities in Set , except for the restriction on the types of the entry.

The following are examples of read-only Set -like browser objects:

The following are examples of writable Set -like browser objects:

Constructor

Static properties

The constructor function that is used to create derived objects.

Instance properties

These properties are defined on Set.prototype and shared by all Set instances.

The constructor function that created the instance object. For Set instances, the initial value is the Set constructor.

Returns the number of values in the Set object.

The initial value of the @@toStringTag property is the string «Set» . This property is used in Object.prototype.toString() .

Instance methods

Inserts a new element with a specified value in to a Set object, if there isn’t an element with the same value already in the Set .

Removes all elements from the Set object.

Removes the element associated to the value and returns a boolean asserting whether an element was successfully removed or not. Set.prototype.has(value) will return false afterwards.

Returns a new iterator object that contains an array of [value, value] for each element in the Set object, in insertion order. This is similar to the Map object, so that each entry’s key is the same as its value for a Set .

Calls callbackFn once for each value present in the Set object, in insertion order. If a thisArg parameter is provided, it will be used as the this value for each invocation of callbackFn .

Returns a boolean asserting whether an element is present with the given value in the Set object or not.

Returns a new iterator object that yields the values for each element in the Set object in insertion order.

Returns a new iterator object that yields the values for each element in the Set object in insertion order.

Examples

Using the Set object

const mySet1 = new Set(); mySet1.add(1); // Set(1) mySet1.add(5); // Set(2) mySet1.add(5); // Set(2) mySet1.add("some text"); // Set(3) const o =  a: 1, b: 2 >; mySet1.add(o); mySet1.add( a: 1, b: 2 >); // o is referencing a different object, so this is okay mySet1.has(1); // true mySet1.has(3); // false, since 3 has not been added to the set mySet1.has(5); // true mySet1.has(Math.sqrt(25)); // true mySet1.has("Some Text".toLowerCase()); // true mySet1.has(o); // true mySet1.size; // 5 mySet1.delete(5); // removes 5 from the set mySet1.has(5); // false, 5 has been removed mySet1.size; // 4, since we just removed one value mySet1.add(5); // Set(5) < 1, 'some text', , , 5 > - a previously deleted item will be added as a new item, it will not retain its original position before deletion console.log(mySet1); // Set(5) < 1, "some text", , , 5 > 

Iterating sets

The iteration over a set visits elements in insertion order.

for (const item of mySet1)  console.log(item); > // 1, "some text", < "a": 1, "b": 2 >, < "a": 1, "b": 2 >, 5 for (const item of mySet1.keys())  console.log(item); > // 1, "some text", < "a": 1, "b": 2 >, < "a": 1, "b": 2 >, 5 for (const item of mySet1.values())  console.log(item); > // 1, "some text", < "a": 1, "b": 2 >, < "a": 1, "b": 2 >, 5 // key and value are the same here for (const [key, value] of mySet1.entries())  console.log(key); > // 1, "some text", < "a": 1, "b": 2 >, < "a": 1, "b": 2 >, 5 // Convert Set object to an Array object, with Array.from const myArr = Array.from(mySet1); // [1, "some text", , , 5] // the following will also work if run in an HTML document mySet1.add(document.body); mySet1.has(document.querySelector("body")); // true // converting between Set and Array const mySet2 = new Set([1, 2, 3, 4]); console.log(mySet2.size); // 4 console.log([. mySet2]); // [1, 2, 3, 4] // intersect can be simulated via const intersection = new Set([. mySet1].filter((x) => mySet2.has(x))); // difference can be simulated via const difference = new Set([. mySet1].filter((x) => !mySet2.has(x))); // Iterate set entries with forEach() mySet2.forEach((value) =>  console.log(value); >); // 1 // 2 // 3 // 4 

Implementing basic set operations

function isSuperset(set, subset)  for (const elem of subset)  if (!set.has(elem))  return false; > > return true; > function union(setA, setB)  const _union = new Set(setA); for (const elem of setB)  _union.add(elem); > return _union; > function intersection(setA, setB)  const _intersection = new Set(); for (const elem of setB)  if (setA.has(elem))  _intersection.add(elem); > > return _intersection; > function symmetricDifference(setA, setB)  const _difference = new Set(setA); for (const elem of setB)  if (_difference.has(elem))  _difference.delete(elem); > else  _difference.add(elem); > > return _difference; > function difference(setA, setB)  const _difference = new Set(setA); for (const elem of setB)  _difference.delete(elem); > return _difference; > // Examples const setA = new Set([1, 2, 3, 4]); const setB = new Set([2, 3]); const setC = new Set([3, 4, 5, 6]); isSuperset(setA, setB); // returns true union(setA, setC); // returns Set intersection(setA, setC); // returns Set symmetricDifference(setA, setC); // returns Set difference(setA, setC); // returns Set 

Relation to arrays

const myArray = ["value1", "value2", "value3"]; // Use the regular Set constructor to transform an Array into a Set const mySet = new Set(myArray); mySet.has("value1"); // returns true // Use the spread syntax to transform a set into an Array. console.log([. mySet]); // Will show you exactly the same Array as myArray 

Remove duplicate elements from an array

// Use to remove duplicate elements from an array const numbers = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5]; console.log([. new Set(numbers)]); // [2, 3, 4, 5, 6, 7, 32] 

Relation to strings

const text = "India"; const mySet = new Set(text); // Set(5) mySet.size; // 5 // case sensitive & duplicate omission new Set("Firefox"); // Set(7) new Set("firefox"); // Set(6) 

Use a set to ensure the uniqueness of a list of values

const array = Array.from(document.querySelectorAll("[id]")).map((e) => e.id); const set = new Set(array); console.assert(set.size === array.length); 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник