Javascript 为什么要使用map创建新数组_Javascript

Javascript 为什么要使用map创建新数组

javascript

Javascript 为什么要使用map创建新数组,javascript,Javascript,使用map创建另一个数组有什么用，所以我需要一个使用map创建新数组的理由，因为我看过很多教程，但不明白使用这个有什么区别 ids = data.allItems[type].map(function(current){ return current.id; }) index = ids.indexOf(id) console.log(index) if(index !== -1){ data.allIte

使用map创建另一个数组有什么用，所以我需要一个使用map创建新数组的理由，因为我看过很多教程，但不明白使用这个有什么区别

     ids = data.allItems[type].map(function(current){
         return current.id;
     }) 
     index = ids.indexOf(id)
     console.log(index)
     if(index !== -1){
         data.allItems[type].splice(index,1) //[0,1,2,3,4]
     }

还有这个

    ids = data.allItems[type][id]
   index = data.allItems[type].indexOf(ids)
        if(index !== -1){
        data.allItems[type].splice(index,1) //[0,1,2,3,4]
    }

这两个函数都是相同的

这正是其他投影/

映射

选择

函数所做的。它在JS规范中。在第二个示例中，如果

ids

是一个对象数组，那么它将不起作用。

这正是其他投影/

映射

选择

函数所做的。它在JS规范中。在您的第二个示例中，如果

ids

是一个对象数组，那么它将不起作用。

map

允许转换数组的元素，这意味着几个优点

例如，给出了以下员工列表

const employees = [
  {
    id: 1,
    firstName: "john",
    lastName: "doe",
    salary: 10000,
  },
  {
    id: 2,
    firstName: "andy",
    lastName: "johnson",
    salary: 15000,
  },
];

const newEmployees = employees;

假设你只需要他们的薪水，你可以做以下事情

const salaries = employees.map((employee) => employee.salary);

// output [ 10000, 15000 ]

const employeeList = employees.map(({ id, firstName, lastName, salary }) => ({
  id,
  fullName: `${firstName} ${lastName}`,
  salary,
}));

// output [{ fullName: 'john doe', salary: 10000 }, { fullName: 'andy johnson', salary: 15000 }]

现在，假设您需要在他们的全名旁边获得他们的工资，您可以尝试以下方法

const salaries = employees.map((employee) => employee.salary);

// output [ 10000, 15000 ]

const employeeList = employees.map(({ id, firstName, lastName, salary }) => ({
  id,
  fullName: `${firstName} ${lastName}`,
  salary,
}));

// output [{ fullName: 'john doe', salary: 10000 }, { fullName: 'andy johnson', salary: 15000 }]

您可以在不使用循环的情况下完成此任务，这是一个优点

另一个优点是，它允许您避免意外的结果，例如，假设您需要一份员工列表的副本

const employees = [
  {
    id: 1,
    firstName: "john",
    lastName: "doe",
    salary: 10000,
  },
  {
    id: 2,
    firstName: "andy",
    lastName: "johnson",
    salary: 15000,
  },
];

const newEmployees = employees;

然后修改原始列表中一名员工的工资

employees[0].salary = 25000;

正如您在此处看到的，此操作将影响两个列表

console.log(JSON.stringify(employees, null, 2));
console.log(JSON.stringify(newEmployees, null, 2));

output

[
  {
    "id": 1,
    "firstName": "john",
    "lastName": "doe",
    "salary": 25000
  },
  {
    "id": 2,
    "firstName": "andy",
    "lastName": "johnson",
    "salary": 15000
  }
]
[
  {
    "id": 1,
    "firstName": "john",
    "lastName": "doe",
    "salary": 25000
  },
  {
    "id": 2,
    "firstName": "andy",
    "lastName": "johnson",
    "salary": 15000
  }
]

在原来的名单和新的名单中，约翰的薪水是25000英镑。原因是通过引用复制

为了避免这种情况，map允许您复制以获得新列表，从而避免意外结果

const anotherNewEmployess = employees.map(
  ({ id, firstName, lastName, salary }) => ({ id, firstName, lastName, salary })
);

output

[
  {
    "id": 1,
    "firstName": "john",
    "lastName": "doe",
    "salary": 25000
  },
  {
    "id": 2,
    "firstName": "andy",
    "lastName": "johnson",
    "salary": 15000
  }
]
[
  {
    "id": 1,
    "firstName": "john",
    "lastName": "doe",
    "salary": 10000
  },
  {
    "id": 2,
    "firstName": "andy",
    "lastName": "johnson",
    "salary": 15000
  }
]

在本例中，有更好的方法，或者更紧凑的方法，如

Array.from（）

或

解构

或其他一些男孩知道的隐藏jutsu

后者在函数式编程环境中非常相关，因为数据是不可变的。许多库和框架采用并推荐了它

我举了一个与你不同的例子，因为我相信它更容易证明map的有用性

我希望这个解释对您有用

map