map,join学习

179 阅读1分钟

Array.map

//Array.forEach
//forEach() 方法对数组的每个元素执行一次给定的函数。
let arr = ["ha", 2, 3, 4, 5, 6];
arr.forEasch((item, index) => {
  item += "ni";
  console.log(index, item);
});
//结果:          0 'hani'
//                1 '2ni'
//                2 '3ni'
//                3 '4ni'
//                4 '5ni'
//                5 '6ni'

//array.map
let a = arr.map((item, index) => {
  return item + "ni";
});
console.log(a);// ['hani', '2ni', '3ni', '4ni', '5ni', '6ni']

Map和Array.map是不同的

Map

Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者基本类型)都可以作为一个键或一个值。

Array.map

map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

也要区分Array.map和Array.forEach,最明显的不同是Array.map有返回值,返回一个新的数组,而forEach没有返回值
上面的代码中,为什么在Array.map中要加return,而forEach中不需要加return,因为map创建的是新数组,你必须告诉代码你要给新数组返回什么数据。
而forEach没有创建新数组,你不需要返回任何东西,他本来就只有一个数组

map,join案例

const data = [
        {
          name: "tom",
          age: 18,
          address: "北京",
        },
        {
          name: "jerry",
          age: 18,
          address: "上海",
        },
      ];
      const tr = data.map(ele => {
        return `<tr>
            <td>${ele.name}</td>
            <td>${ele.age}</td>
            <td>${ele.address}</td>
        </tr>`;
      });
      document.querySelector(".demo").innerHTML = tr.join('')  

image.png