Categories
JavaScript

Array

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