
Enter a search term above to see results...
Enter a search term above to see results...
The Looping utilities provide functions for iterating over arrays, objects, Sets, and Maps in JavaScript. These functions offer flexible ways to loop through data structures, often providing more concise alternatives to traditional for loops.
function each(obj, func, context)
Iterates over an array, object, Set, or Map, invoking the provided function for each element.
Name | Type | Description |
---|---|---|
obj | object/array/Set/Map | The collection to iterate over |
func | function | The function to invoke for each element. Receives (value, key/index, collection) |
context | object | Optional. The context to bind the function to |
The original object or array.
import { each } from '@semantic-ui/utils';
// Array iterationeach([1, 2, 3], (num, index) => { console.log(`Number at index ${index}: ${num}`);});
// Object iterationeach({ a: 1, b: 2 }, (value, key) => { console.log(`${key}: ${value}`);});
// Set iteration (index is 0-based counter)each(new Set(['apple', 'banana']), (value, index) => { console.log(`Set item ${index}: ${value}`);});
// Map iteration (preserves key types)each(new Map([['key1', 'value1'], ['key2', 'value2']]), (value, key) => { console.log(`${key}: ${value}`);});
// Breaking earlyeach([1, 2, 3, 4], (value) => { console.log(value); if (value === 2) return false; // stops iteration});
Flexible Iteration This function can iterate over arrays, array-like objects (e.g., NodeList), plain objects, Sets, and Maps. It uses
for...of
for iterables (Set/Map), arrays for array-likes, andObject.keys()
for plain objects. Returnfalse
from the callback to break iteration early.
function asyncEach(obj, func, context)
Asynchronously iterates over an array, object, Set, or Map, invoking the provided async function for each element.
Name | Type | Description |
---|---|---|
obj | object/array/Set/Map | The collection to iterate over |
func | async function | The async function to invoke for each element. Receives (value, key/index, collection) |
context | object | Optional. The context to bind the function to |
A Promise that resolves to the original object or array.
import { asyncEach } from '@semantic-ui/utils';
// Array iterationawait asyncEach([1, 2, 3], async (num, index) => { await someAsyncOperation(num); console.log(`Processed number at index ${index}: ${num}`);});
// Set iterationawait asyncEach(new Set(['a', 'b', 'c']), async (value, index) => { await processValue(value); console.log(`Processed Set item ${index}: ${value}`);});
// Map iterationawait asyncEach(new Map([['id', 123], ['name', 'John']]), async (value, key) => { await updateField(key, value); console.log(`Updated ${key}: ${value}`);});
// Breaking earlyawait asyncEach([1, 2, 3], async (value) => { const result = await checkValue(value); if (!result) return false; // stops iteration});
function asyncMap(obj, func, context)
Asynchronously maps over an array, object, Set, or Map, invoking the provided function for each element and collecting the results.
Name | Type | Description |
---|---|---|
obj | object/array/Set/Map | The collection to map over |
func | async function | The async function to invoke for each element. Receives (value, key/index, collection) |
context | object | Optional. The context to bind the function to |
A Promise that resolves to a new collection with the mapped values. Arrays and objects return the same type, Sets return arrays, Maps return new Maps with the same keys.
import { asyncMap } from '@semantic-ui/utils';
// Array mappingconst numbers = [1, 2, 3];const doubled = await asyncMap(numbers, async (num) => { await someAsyncOperation(); return num * 2;});console.log(doubled); // [2, 4, 6]
// Object mappingconst obj = { a: 1, b: 2, c: 3 };const mappedObj = await asyncMap(obj, async (value, key) => { return await processValue(value);});console.log(mappedObj); // { a: processedValue1, b: processedValue2, c: processedValue3 }
// Set mapping (returns array)const mySet = new Set(['apple', 'banana', 'cherry']);const uppercased = await asyncMap(mySet, async (fruit, index) => { await delay(50); return fruit.toUpperCase();});console.log(uppercased); // ['APPLE', 'BANANA', 'CHERRY']
// Map mapping (returns new Map with same keys)const userMap = new Map([ ['user1', { name: 'John', age: 25 }], ['user2', { name: 'Jane', age: 30 }]]);const enrichedUsers = await asyncMap(userMap, async (user, userId) => { const permissions = await fetchUserPermissions(userId); return { ...user, permissions };});// Returns Map with same keys but enriched user objects
These looping utilities provide powerful tools for iterating over and manipulating data structures in JavaScript, supporting both synchronous and asynchronous operations. They offer more flexibility and often more concise syntax compared to traditional looping methods.