把JS中的map方法玩出花来

一  map是什么

map(callbackFn)
map(callbackFn, thisArg)
map() 方法是一个迭代方法。它为数组中的每个元素调用一次提供的 callbackFn 函数，并用结果构建一个新数组。

参数

callbackFn

数组中的每个元素执行的函数。它的返回值作为一个元素被添加为新数组中。该函数被调用时将传入以下参数：

element

数组中当前正在处理的元素。

index  可选

正在处理的元素在数组中的索引。

arrary  可选

调用了 map() 的数组本身。

thisArg 可选

执行 callbackFn 时用作 this 的值。参见迭代方法。

返回值

一个新数组，每个元素都是回调函数的返回值。

示例

1.下面的代码创建了一个新数组，值为原数组中对应数字的平方根。

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

// roots 现在是     [1, 2, 3]
// numbers 依旧是   [1, 4, 9]

2.以下代码使用一个包含对象的数组来重新创建一个格式化后的数组。

(1).

const arrayUsers = [
    {
        id: 1,
        username: "Magic",
        address: "Johnson",
    },
    {
        id: 2,
        username: "Kobe",
        address: "Bryant",
    },
    {
        id: 3,
        username: "Lebron",
        address: "James",
    },
    {
        id: 4,
        username: "Kareem",
        address: "Abdul-Jabbar",
    },
    {
        id: 5,
        username: "Shaquille",
        address: "O’Neal",
    },
];
const newUsers = arrayUsers.map((item) => item.username);
console.log(arrayUsers);
// [
//     { id: 1, username: 'Magic', address: 'Johnson' },
//     { id: 2, username: 'Kobe', address: 'Bryant' },
//     { id: 3, username: 'Lebron', address: 'James' },
//     { id: 4, username: 'Kareem', address: 'Abdul-Jabbar' },
//     { id: 5, username: 'Shaquille', address: 'O’Neal' }
//   ]
console.log(newUsers); // [ 'Magic', 'Kobe', 'Lebron', 'Kareem', 'Shaquille' ]

(2). 

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 }
// ]

3. 回调数组中的部分素

const arrayNumbers = [1, 2, 3, 4];
const doubles = (nums) => nums.map((num) => (num % 2 === 1 ? num * 2 : num));
console.log(arrayNumbers); // [ 1, 2, 3, 4 ]
console.log(doubles(arrayNumbers)); // [ 2, 2, 6, 4 ]

4.在非数组上使用map

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

map() 方法读取 this 的 length 属性，然后访问每个整数索引。不能直接使用map()方法。

5.将字符串转换为数组。

const language = "China";
const map = Array.prototype.map;
const letters = map.call(language, (eachLetter) => `${eachLetter}`);

console.log(letters); // [ 'C', 'h', 'i', 'n', 'a' ]

与上例子还是有点区别的。

6.数组与对象数组

（1).

let myperson= ['xiaoli','xiaona','xiaoyu','xiaozhu']
let newArr = myperson.map((name) => ({name:name}))
console.log(newArr);

(4) [{…}, {…}, {…}, {…}]

0:
{name: 'xiaoli'}
1:
{name: 'xiaona'}
2:
{name: 'xiaoyu'}
3:
{name: 'xiaozhu'}
length:
4
[[Prototype]]:
Array(0)
[[Prototype]]:
Object

let myage = [18,28,38,19]
let myperson= ['xiaoli','xiaona','xiaoyu','xiaozhu']
let newArr = myage.map((age, i) => ({age, name: myperson[i]}))
console.log(newArr);

(4) [{…}, {…}, {…}, {…}]
xiaoyu.js:4
0:
{name: 'xiaoli', age: 18}
1:
{name: 'xiaona', age: 28}
2:
{name: 'xiaoyu', age: 38}
3:
{name: 'xiaozhu', age: 19}
length:
4

myperson.map((name,index) => ({name:name,age:myage[index]}))

这样更好理解给些，ES6语法。

7.与parseInt()

const returnInt = (element) => parseInt(element, 10);

let arr1=["1", "2", "3"].map(returnInt); // [1, 2, 3]
// 实际结果是一个数字数组（如预期）

// 与上面相同，但使用简洁的箭头函数语法
let arr2=["1", "2", "3"].map((str) => parseInt(str)); // [1, 2, 3]

// 但与 parseInt() 不同，Number() 还会返回一个浮点数或（解析）指数表示法：
let arr4=["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300]

// 为了进行比较，如果我们对上面的数组使用 parseInt():
let arr5=["1.1", "2.2e2", "3e300"].map((str) => parseInt(str)); // [1, 2, 3]

console.log(arr1);
console.log(arr2);
console.log(arr4);
console.log(arr5);

(3) [1, 2, 3]
(3) [1, 2, 3]
(3) [1.1, 220, 3e+300]
(3) [1, 2, 3]

有时间继续学习。