[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map [Back]  [Original]

Array.prototype.map() - JavaScript | MDN

MDN Web Docs

View in English Always switch to English

Array.prototype.map()

Baseline

20157

map() Array

const array = [1, 4, 9, 16];

//  map 
const mapped = array.map((x) => x * 2);

console.log(mapped);
// : Array [2, 8, 18, 32]

js
map(callbackFn)
map(callbackFn, thisArg)

callbackFn

element

index

array

map()

thisArg

callbackFn this

map() callbackFn

callbackFn

map() this length

map map forEach for...of

js
const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots  [1, 2, 3] 
// numbers  [1, 4, 9] 

map

js
const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
];

const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value }));

console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }]
console.log(kvArray);
// [
//   { key: 1, value: 10 },
//   { key: 2, value: 20 },
//   { key: 3, value: 30 }
// ]

parseInt() map()

1 1

js
["1", "2", "3"].map(parseInt);

[1, 2, 3] [1, NaN, NaN]

parseInt 2 1 2 Array.prototype.map 3 parseInt 3 2

js
/*    0: */ parseInt("1", 0); // 1
/* 2  1: */ parseInt("2", 1); // NaN
/* 3  2: */ parseInt("3", 2); // NaN

1

js
["1", "2", "3"].map((str) => parseInt(str, 10)); // [1, 2, 3]

1 Number

js
["1", "2", "3"].map(Number); // [1, 2, 3]

// parseInt()  Number()  float  () 
["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300]

//  parseInt() 
["1.1", "2.2e2", "3e300"].map((str) => parseInt(str, 10)); // [1, 2, 3]

A JavaScript optional argument hazard (Allen Wirfs-Brock)

undefined

undefined undefined filter() flatMap()

js
const numbers = [1, 2, 3, 4];
const filteredNumbers = numbers.map((num, index) => {
  if (index < 3) {
    return num;
  }
});

// index  0  filterNumbers  1,2,3  undefined 
// filteredNumbers  [1, 2, 3, undefined]
// numbers  [1, 2, 3, 4] 

js
const cart = [5, 15, 25];
let total = 0;
const withTax = cart.map((cost) => {
  total += cost;
  return cost * 1.2;
});
console.log(withTax); // [6, 18, 30]
console.log(total); // 45

2

js
const cart = [5, 15, 25];
const total = cart.reduce((acc, cost) => acc + cost, 0);
const withTax = cart.map((cost) => cost * 1.2);

map()

js
const products = [
  { name: "sports car" },
  { name: "laptop" },
  { name: "phone" },
];

products.map((product) => {
  product.price = 100;
});

map() forEach() for...of

js
products.forEach((product) => {
  product.price = 100;
});

js
const productsWithPrice = products.map((product) => ({
  ...product,
  price: 100,
}));

callbackFn 3

array filter() map()

js
const numbers = [3, -1, 1, 4, 1, 5, 9, 2, 6];
const averaged = numbers
  .filter((num) => num > 0)
  .map((num, idx, arr) => {
    // arr 
    // 
    const prev = arr[idx - 1];
    const next = arr[idx + 1];
    let count = 1;
    let total = num;
    if (prev !== undefined) {
      count++;
      total += prev;
    }
    if (next !== undefined) {
      count++;
      total += next;
    }
    const average = total / count;
    //  2 
    return Math.round(average * 100) / 100;
  });
console.log(averaged); // [2, 2.67, 2, 3.33, 5, 5.33, 5.67, 4]

array

map()

map()

js
console.log(
  [1, , 3].map((x, index) => {
    console.log(`Visit ${index}`);
    return x * 2;
  }),
);
// Visit 0
// Visit 2
// [2, empty, 6]

map()

map() this length length

js
const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // length  3  map() 
};
console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));
// [ 4, 9, 16 ]

querySelectorAll querySelectorAll NodeList option

js
const elems = document.querySelectorAll("select option:checked");
const values = Array.prototype.map.call(elems, ({ value }) => value);

Array.from()

ECMAScript 2027 LanguageSpecification
# sec-array.prototype.map


Web Proxy Viewer  |  New URL  |  Original Page