[ ]

ARRAYS ARE EVERYTHING

QUICK! GO TO: arrays.ansble.com

Arrays are like trains

mutators

Stable

Array.prototype.pop()
Array.prototype.push()
Array.prototype.reverse()
Array.prototype.shift()
Array.prototype.sort()
Array.prototype.splice()
Array.prototype.unshift()

 

Unstable

Array.prototype.copyWithin()
Array.prototype.fill()


[1, 2, 3, 4, 5].pop() // returns 5 and array = [1, 2, 3, 4]

[1, 2, 3, 4, 5].shift() // returns 1 and array = [2, 3, 4, 5]

[1, 2, 3, 4, 5].push(6) // returns 6 and array = [1, 2, 3, 4, 5, 6]

[1, 2, 3, 4, 5].unshift(0) // returns 6 and array = [0, 1, 2, 3, 4, 5]

Pop / Shift

Push / Unshift


[1, 2, 3, 4, 5].reverse() // returns array and array = [5, 4, 3, 2, 1]

[1, 2, 3, 4, 5].splice(1,3) // returns array and array = [2, 3, 4]

[5, 2, 4, 3, 1].sort() // returns array and array = [1, 2, 3, 4, 5]


[5, 2, 1, 4, 3].sort(function (a, b) {
  return a - b;
}) // returns array and array = [1, 2, 3, 4, 5]


[5, 2, 1, 4, 3].sort(function (a, b) {
  return b - a;
}) // returns array and array = [5, 4, 3, 2, 1]

reverse / splice

sort

compareFunction(a, b) must always return the same value when given a specific pair of elements a and b as its two arguments. If inconsistent results are returned then the sort order is undefined - MDN

THINK FUNCTIONALLY


arr = [];

arr.length = 10; // arr now has length 10 and undefined contents

arr.fill(1); //arr now has length 10 and each value is 1

[1, 2, 3, 4, 5].copyWithin(0, 3); // returns array and array = [4, 5, 3, 4, 5]

//copyWithin(target, start, end)

fill

copyWithin

accessors

Stable

Array.prototype.concat()
Array.prototype.join()
Array.prototype.slice()
Array.prototype.toString()
Array.prototype.toLocaleString()
Array.prototype.indexOf()
Array.prototype.lastIndexOf()

 

Unstable

Array.prototype.includes()


[1, 2, 3, 4].join('|') // returns '1|2|3|4'

[1, 2, 3, 4].toString() // returns '1,2,3,4'

[1000, new Date(), 3000, 4000].toLocaleString() 
// returns "1000,9/24/2015, 10:52:44 PM,3000,4000"

[1, 2, 3, 4, 1].indexOf(1); // returns 0

[1, 2, 3, 4, 1].lastIndexOf(1); // returns 4

[1, 2, 3, 4, 1].indexOf(6); //returns -1

[1, 2, 3, 4, 1].includes(1); // returns true

join / toString / toLocaleString

indexOf / lastIndexOf / includes (ES 7)


[].concat([1, 2, 3, 4], 1, 2, [1,2]) // returns [1, 2, 3, 4, 1, 2, 1, 2]

arr = [1, 2];

arr.concat([3, 4], 5) // returns [1, 2, 3, 4, 5] | arr = [1, 2] still

[1, 2, 3, 4, 5].slice(1, 2); // returns [2]

[].slice(startIndex, endIndex);

arr = [1, 2, 3];
arr.slice(0,1); // returns [1,2] arr = [1, 2, 3] still

concat

slice

iterators

Stable

Array.prototype.forEach()
Array.prototype.every()
Array.prototype.some()
Array.prototype.filter()
Array.prototype.map()
Array.prototype.reduce()
Array.prototype.reduceRight()

 

Unstable

Array.prototype.entries()

Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.keys()

Array.prototype.values()
 


[1, 2, 3, 4, 1, 2, 1, 2].every(function (number) { return number > 0}) //true

[1, 2, 3, 4, 1, 2, 1, 2].every(function (number) { return number > 2}) //false

[1, 2, 3, 4, 1, 2, 1, 2].some(function (number) { return number > 0}) //true

[1, 2, 3, 4, 1, 2, 1, 2].some(function (number) { return number > 2}) //true

[1, 2, 3, 4, 1, 2, 1, 2].some(function (number) { return number < 0}) //false

every

some


[1, 2, 3, 4, 1, 2, 1, 2].filter(function (number) { return number > 1}) 
// returns [2, 3, 4, 2, 2]

[1, 2, 3, 4, 1, 2, 1, 2].find(function (number) { return number > 2}) 
// returns 3

[1, 2, 3, 4, 1, 2, 1, 2].findIndex(function (number) { return number > 2}) 
// returns 2

filter

find / findIndex


[1, 2, 3, 4, 1, 2, 1, 2].map(function (number) { return number * 2}) 
// returns [2, 4, 6, 8, 2, 4, 2, 4]

['a', 'b', 'c', 'd'].reduce(function (prev, cur) { return prev + cur}) 
// returns 'abcd'

['a', 'b', 'c', 'd'].reduceRight(function (prev, cur) { return prev / cur}) 
// returns 'dcba'

[1, 2, 3, 4, 1, 2, 1, 2].reduce(function (prev, cur) { return prev / cur}) 
// returns 0.010416666666666666

[1, 2, 3, 4, 1, 2, 1, 2].reduceRight(function (prev, cur) { return prev / cur}) 
// returns 0.041666666666666664

map

reduce / reduceRight


[1, 2, 3].forEach(function (number) { console.log(number)}) 
// returns undefined
// 1
// 2
// 3

//WARNING: Is not exactly the same as a for loop to [].length

forEach


iter = ['a', 'b', 'c'].keys() 
// returns Iterator

iter.next() // returns {value: 0, done: false}
iter.next() // returns {value: 1, done: false}
iter.next() // returns {value: 2, done: false}
iter.next() // returns {value: undefined, done: true}

iter = ['a', 'b', 'c'].values() 
// returns Iterator

iter.next() // returns {value: 'a', done: false}
iter.next() // returns {value: 'b', done: false}
iter.next() // returns {value: 'c', done: false}
iter.next() // returns {value: undefined, done: true}

iter = ['a', 'b', 'c'].entries() 
// returns Iterator

iter.next() // returns {value: [0,'a'], done: false}
iter.next() // returns {value: [1,'b'], done: false}
iter.next() // returns {value: [2,'c'], done: false}
iter.next() // returns {done: true}

entries / keys / values

Play Time!

arrays.ansble.com

fin.

@daniel_sellers

designfrontier.net

Arrays Are Everything

By Daniel Sellers

Arrays Are Everything

  • 2,277