JavaScript数组map方法详解：语法、参数与实战示例

let newArray = arr.map(function(element, index, array) {
    // 返回新数组的元素
}, thisArg);

const numbers = [10, 20, 30, 40];

// 使用 element, index, 和 array 参数
const newArray = numbers.map(function(element, index, array) {
    console.log(`当前正在处理的数组元素： ${element} 当前元素的索引： ${index}, 原始数组的引用： ${array}`);
    return element / 10;
});

console.log(newArray); // 输出: [1, 2, 3, 4]

function Counter() {
  this.num = 2;
}

const counter = new Counter();

const numbers = [1, 2, 3, 4];

// 使用 thisArg 参数
const multiplied = numbers.map(function(element) {
    return element * this.num; // 'this'现在指的是'counter'对象
}, counter); // 将'counter'作为'thisArg'传递

console.log(multiplied); // 输出: [2, 4, 6, 8]

const numbers = [1, 2, 3, 4];
const squares = numbers.map(number => number * number);
console.log(squares); // 输出: [1, 4, 9, 16]

const users = [
  { id: 1, name: 'Alice', age: 22 },
  { id: 2, name: 'Bob', age: 25 }
];
const names = users.map(user => user.name);
console.log(names); // 输出: ['Alice', 'Bob']

const dates = ['2021-01-01', '2021-12-31'];
const formattedDates = dates.map(date => new Date(date).toLocaleDateString('zh-CN'));
console.log(formattedDates); // 输出: ['2021/1/1', '2021/12/31'] (输出格式可能因地区设置不同而异)

const products = [
  { id: 1, price: 100 },
  { id: 2, price: 200 }
];
const productsWithTax = products.map(product => ({
  ...product,
  priceWithTax: product.price * 1.15
}));
console.log(productsWithTax);
// 输出: [{ id: 1, price: 100, priceWithTax: 115 }, { id: 2, price: 200, priceWithTax: 230 }]

const points = [
  { x: 10, y: 20 },
  { x: 20, y: 30 }
];
const shiftedPoints = points.map(({ x, y }) => ({ x: x + 5, y: y + 5 }));
console.log(shiftedPoints); // 输出: [{ x: 15, y: 25 }, { x: 25, y: 35 }]