getting to know array iterators. OR why you don't need lodash.

QUICK! GO TO: arrays.ansble.com

iterators

Stable

Array.prototype.forEach()
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()
Array.prototype[@@iterator]()


[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

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}

arr = ['a', 'b', 'c'];
iter = arr[@@iterator];
// 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}

array[@@iterator]

Play Time!

arrays.ansble.com

Extra Credit!

Stable

Array.prototype.every()
Array.prototype.some()

 

Unstable

Array.prototype.includes()

 


[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].includes(1) //true

[1, 2, 3, 4, 1, 2, 1, 2].includes(42) //false

[1, 2, NaN].includes(NaN); // True

['Tom', 'Joe', 'Greg'].includes('Tom'] // True

includes

fin.

@daniel_sellers

designfrontier.net

Made with Slides.com