Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Javascript Array map method

•
•
T
tanerochris

The map method iterates through each element of an array and returns a new array with the results of calling a provided callback function on each element. The callback function is used to transform each element and return a new element, which gets placed in the same index of the new array. Map allows transforming each element of an array easily without using for loops. Other ways to transform arrays include forEach, for..of loops, and regular for loops but map provides a cleaner syntax for one-to-one transformations of each element.

1 of 15
Array Map Method
What is the map method? What it does is go through every element of the array, and returns a new array.
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.
Illustration 1 2 3 1 4 6Map: 2*input
Array Map method be looking like? let new_array = arr.map(function callback( currentValue[, index[, array]]) { // return element for new_array }[, thisArg])
Other ways than map ● forEach ● for..of ● for
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]
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]
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]
And finally Map const array = [1, 2, 3] const new_array = array.map( x => x * x) console.log(new_array) // [1, 4, 9]
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]
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 }]
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); });
Sample code React <div className="gallery"> { this.props.images.map((el, i) => <img alt={el.item} key={i} src={el.url} />)} </div>
Questions THE END

More Related Content

Javascript Array map method

  • 2. 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])
  • 6. Other ways than map ● forEach ● for..of ● for
  • 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>