[ ]
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,370