More Related Content Similar to Javascript Array map method (20) Javascript Array map method2. What is the map method?
What it does is go through
every element of the array,
and returns a new array.
3. What is the array map method?
Each element X at index i is
transformed/mapped to a
new element Y at index i of
the new array.
5. Array Map method be looking like?
let new_array = arr.map(function callback( currentValue[,
index[, array]]) {
// return element for new_array
}[, thisArg])
7. Other ways than map
forEach
const array = [1, 2, 3]
const new_array = []
array.forEach(x => new_array.push(x * x))
console.log(new_array) // [1, 4, 9]
8. Other ways than map
for..of
const array = [1, 2, 3]
const new_array = []
for ( let x of array)
new_array.push(x * x )
console.log(new_array) // [1, 4, 9]
9. Other ways than map
for
const array = [1, 2, 3]
const new_array = []
for ( let x = 0; x < array.length; x++)
new_array.push(array[x] * array[x])
console.log(new_array) // [1, 4, 9]
10. And finally Map
const array = [1, 2, 3]
const new_array = array.map( x => x * x)
console.log(new_array) // [1, 4, 9]
11. Calculate area of rectangles 1
const rectangles = [ { length: 2, width: 3 }, { length: 5, width: 2 }, { length:
10, width: 3 }]
const areaRectangles = rectangles.map( x => x.length * x.width)
console.log(areaRectangles) // [1, 4, 9]
12. Calculate area of rectangles 2
const rectangles = [ { length: 2, width: 3 }, { length: 5, width: 2 }, { length:
10, width: 3 }]
const areaRectangles = rectangles.map( x => x.area = x.length * x.width)
console.log(areaRectangles) // [ { length: 2, width: 3 , area: 6}, { length:
5, width: 2, area: 10 }, { length: 10, width: 3, area: 30 }]
13. Sample angular code
this.commandService .getCommands( {[queryName]: queryValue })
.subscribe((filtered: any) => {
this.commands = filtered.commands.map( (el: any) => {
return {
agent: el.user.displayName,
title: el.name,
client: el.sendername,
date: el.createdAt,
};
});
this.commandTableSource.load(this.commands);
});
14. Sample code React
<div className="gallery">
{ this.props.images.map((el, i) => <img alt={el.item} key={i} src={el.url} />)}
</div>