JS map函数

目录

作用

1.遍历和进行运算

需要注意的点

1.map()的遍历会跳过空位置

2.当有parseInt的时候,map显示NaN

---

map()不会修改原数组.  arr.map((item, index, array))接受三个参数,第一个参数是arr的当前一项的值，第二个参数当前索引值，第三个参数是本身数组对象。

作用

1.遍历和进行运算

例子一：

const arr = [1,4,9,16]
console.log(arr.map((item) => Math.sqrt(item)))

结果如下：      

例子二：

          let arr = ['aaa','bbb','ccc'];
          let arr2 = arr.map((x,i) => [x,i])
          console.log(arr2)

结果如下：

 例子三：

 const bookList = [
            {"id":10,"title":"Web前端开发","price":99.9},
            {"id":11,"title":"C++","price":80.9},
            {"id":12,"title":"Python","price":100.9}
          ]
         console.log(bookList.map(book =>{
            return {title:book.title,price:book.price}
          })) 

结果如下：

需要注意的点

1.map()的遍历会跳过空位置

但是它会保留空的元素！

const arr = [1, , , 3, ,2 ,]
console.log(arr.map((item) => item*2))

 结果如下：

                        

2.当有parseInt的时候,map显示NaN

          let arr = [1,2,3,4,5,6]
          console.log(arr.map(parseInt))

结果如下

 为什么会这样？ 答：parseInt有两个参数(parse,radix),如果可能，该函数会把传入的parse转换为数字，map会把index的值传给parseInt的radix参数。

那怎么避免这种情况的发生？答：我在这里介绍一下我在一本书上看到的一个函数unary   。这个函数的作用是让多个参数的函数只写一个参数

const unary = (fn) =>fn.length === 1 ? fn : (arg) => fn(arg)

例子一：

const unary = (fn) =>fn.length === 1 ? fn : (arg) => fn(arg)
        btn.addEventListener('click', () => {
          let arr = [1,2,3,4,5,6]
          console.log(arr.map(unary(parseInt)))

结果如下：