Categories
JavaScript

Array

  1. Remove duplicate values
  2. Get the last item
  3. Toggle an element
  4. Check existence of an element
  5. Loop
  6. Deep copy
  7. Merge Arrays

Remove duplicate values

function uniq(a) {
   return Array.from(new Set(a));
}

uniq = [...new Set(array)];

https://stackoverflow.com/a/9229821

Get the last item

// Method 1
array[array.length - 1];

// Method 2
arr.slice(-1)[0]

// Method 3
arr.pop() -> Last item removed from arr

// Method 4
[...arr].pop(); -> arr not changed 

// Method 5
arr.slice(-1).pop() -> arr not changed 

// Method 6
arr.reverse()[0]

https://stackoverflow.com/questions/3216013/get-the-last-item-in-an-array

https://stackoverflow.com/questions/9050345/selecting-last-element-in-javascript-array

Toggle an element

function toggleInArray(array, value) {
    var index = array.indexOf(value);

    if (index === -1) {
        array.push(value);
    } else {
        array.splice(index, 1);
    }
}

PS: only removes the first instance of the value

https://stackoverflow.com/questions/17153238/how-to-toggle-an-element-in-array-using-javascript

Check existence of an element

  • Array.prototype.some()

tests whether at least one element in the array passes the test implemented by the provided function

Scenario: To check if an element contains at least one of the target classes

targetClassNames.some(className => el.classList.contains(className))

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Loop

  • For
var list= document.getElementsByClassName("events");
for (var i = 0; i < list.length; i++) {
    console.log(list[i].id); 
}
  • For/of
    The for…of statement creates a loop Iterating over iterable objects (including Array, Map, Set, arguments object and so on),
var list = document.getElementsByClassName("events");
for (let item of list) {
    console.log(item.id);
}
  • Array.from() [ES6]
"use strict";

Array.from(document.getElementsByClassName("events")).forEach(function(item) {
   console.log(item.id);
});
  • For/in (Do not recommend)
    The for…in statement iterates a specified variable over all the enumerable properties of an object.
    Although it may be tempting to use this as a way to iterate over Array element, the for…in statement will return the name of your user-defined properties in addition to the numeric indexes.

https://stackoverflow.com/a/22754453

Deep copy

var newArr = oldArr.map(item => ({
    attr1: item.attr[x],
    attr2: item.attr[y]
}));

https://stackoverflow.com/a/36602215

let newArr = oldArr.slice() // this is how to make a copy

Merge Arrays

// 2 Ways to Merge Arrays

const cars = ['πŸš—', 'πŸš™'];
const trucks = ['🚚', 'πŸš›'];

// Method 1: Concat
const combined1 = [].concat(cars, trucks);
const combined2 = cars.concat(trucks);
// cars stays the same, so version 1 is better.


// Method 2: Spread
const combined3 = [...cars, ...trucks];

// Result
// [ 'πŸš—', 'πŸš™', '🚚', 'πŸš›' ]

// Method 3: push
const combined4 = cars.push(...trucks);
// Pay attention:
const combined5 = cars.push(trucks);
// cars: [ 'πŸš—', 'πŸš™', [ '🚚', 'πŸš›' ] ]


// For method 1 & 2, the original variables stay the same, while for method 3, the original variable is changed.

  • Deference with Concat and Spread
Merge vars with no clear data type:

const isArray = [1, 2, 3];
const notArray = 'random';

Spread result:
[ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]

Concat result:
[ 1, 2, 3, 'random' ] βœ… 

https://www.samanthaming.com/tidbits/49-2-ways-to-merge-arrays/

Leave a comment