Data Loading...
civilised_guide_to_javascript_array_methods Flipbook PDF
civilised_guide_to_javascript_array_methods
125 Views
75 Downloads
FLIP PDF 119.01KB
I have an array… .find()
I want…
Something in the array
The same number of items
.map()
Something else Fewer items
I want…
Another array
The new array has… More items
.filter()
Only adding to the end?
Yes
No
.concat()
.flatMap()*
Sometimes more, sometimes less
A Civilised Guide to JavaScript Array Methods
Join elements together with something in-between A string
.join()
I want to…
R
Do something else
Every item passes a test
A boolean
I want to check…
.every()
At least one item passes a test
.some()
The array includes an item
Some other type
.includes()
R R
Something else
No value at all
Are you sure?
No
Back to start
Yes
Really sure?
Yes
.forEach()
No
R
.reduce()
https://jrsinclair.com
S A M P LE D ATA
This data is used across all the examples for each array method. const heroes = [ {name: 'Hulk', strength: 90000}, {name: 'Spider-Man', strength: 25000}, {name: 'Hawk Eye', strength: 136}, {name: 'Thor', strength: 100000}, {name: 'Black Widow', strength: 136}, {name: 'Vision', strength: 5000}, {name: 'Scarlet Witch', strength: 60}, {name: 'Mystique', strength: 120}, {name: 'Namora', strength: 75000}, {name: 'Captain America', strength: 362}, {name: 'Deadpool', strength: 1814}, {name: 'Black Panther', strength: 1814}, ];
.find()
.map()
The .find() method will return the first element in the array that matches a test you provide.
The .map() method will apply a given function to every item in your array and give you a new array with those values.
EXA MPLE: function isHulk(hero) { return hero.name === 'Hulk'; } const hulk = heroes.find(isHulk);
EXAMPLE: function getName(hero) { return hero.name; } const names = heroes.map(getName);
.filter()
.concat()
.flatMap()
.join()
The .filter() method takes your array and removes items that don't pass a test you give it.
The .concat() method adds new items to the end of your array.
The .join() method will insert a given string between each item, and return a joined-up string.
E XA M P L E :
E X A MPLE:
function strong(hero) { return hero.strength >= 200; } const tuff = heroes.filter(strong);
const extras = [ {name: 'Cyclops', strength: 136}, {name: 'Gambit', strength: 136}, ]; const more = heroes.concat(extras);
This method is only a proposal, so it's not available everywhere. You pass it a function that returns an array and it will squish all the results together into a flat array. EXA MPLE: function space(hero, i) { return ((i > 0) && (i % 5 === 0)) ? ['', hero.name] : [hero.name]; } const list = heroes.flatMap(space);
EXAMPLE: function getName(hero) { return hero.name; } const list = heroes .map(getName) .join('\n');
.every()
.some()
.includes()
.reduce()
The .every() method checks that every single item in your
The .some() method checks that at least one item in your array
The .includes() method checks that at least one item
The .reduce() method is the most flexible array iterator. It
array matches some criteria.
matches some criteria.
in your array matches some criteria.
E XA M P L E :
E X A MPLE:
processes each item of the array and lets you modify a value as you go.
function strong(hero) { return hero.strength >= 200; } const tuff = heroes.every(strong);
function isHulk(hero) { return hero.name === 'Hulk'; } const hulkIn = heroes.some(isHulk);
EXA MPLE: function getName(hero) { return hero.name; } const hulkIn = heroes .map(getName) .includes('Hulk');
EXAMPLE: function sumStrength(total, hero) { return total + hero.stength; } const totalStength = heroes.reduce( sumStrength, 0 );
.forEach() The .forEach() method applies a given function to every element in the array. It doesn't return a value though. So, by definition, it's only useful for side effects. E XA M P L E : function logHero(h) { console.log( 'Name: ' + h.name + '\nStrength: ' + h.strength ); } heroes.forEach(logHero);
© James Sinclair 2018, https://jrsinclair.com
A Civilised Guide to JavaScript Array Methods