espcms易思企业网站管理系统,wordpress 中文响应式,网站策划案,wordpress特点一 map是什么
map(callbackFn) map(callbackFn, thisArg)map() 方法是一个迭代方法。它为数组中的每个元素调用一次提供的 callbackFn 函数#xff0c;并用结果构建一个新数组。
参数
callbackFn
数组中的每个元素执行的函数。它的返回值作为一个元素被添加为新数组中。该…
一 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, 3e300]// 为了进行比较如果我们对上面的数组使用 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, 3e300]
(3) [1, 2, 3]
有时间继续学习。
