映射对象并使用本机JS更改一个属性值

Question

我希望能够返回结果数据集,只需将日期字段的格式更改为更可读的内容,使所有其他数据保持不变.如果没有第三方库,我宁愿这样做.

这是我到目前为止:

//Get all the Tasks
function getAllTasks() {
  return models.gantt_tasks.findAll()
  .then(function(tasks){

    let results = tasks.map(task => task.start_date = task.start_date.format("YYYY-MM-DD"));
    return results;
  })
  .catch(function(e) {
    console.error(e);
    return e;
  });
}

我想在Map返回数据之前完成Map.

Answer 1

.map()不是修改现有对象数组的属性的常用方法.你可以这样做,但它不是.map()通常用的.相反,它是一种创建新数组的方法.一个.map()回调函数返回一个值,这些返回的值将被推到一个新的数组,.map()最后返回.

在将格式化日期分配给.map()回调task.start_date后,您的回调会隐式返回.这意味着您只创建一个格式化日期数组,而不创建其他原始task对象.如果你想在.map()这里使用它需要task在完成赋值后返回task.start_date.

但相反,您可能希望.forEach()在.then()回调中使用.这是为此作业所做的方法:它只是遍历数组并允许您修改每个元素:

tasks.forEach( task => task.start_date = task.start_date.format("YYYY-MM-DD") );
return tasks;

此外,正如达斯汀所提到的,从中返回一个值.then()可能不会在这里做你想要的.最安全的赌注是在那里做一些事情tasks,或者调用另一个函数并tasks作为参数传递.(尽管......我对承诺有点生疏了)

Answer 2

您可以使用Object.assign(target, ...sources)(此处)通过保持其他值保持不变来仅更改一个值.

例如:

const object1 = {
 a: 1,
 b: 2,
 c: 3
};

现在假设你想改变的值b来22,你可以这样做:

const object2 = Object.assign({}, object1, {b: 22});

console.log(object1);  // { a: 1, b: 2, c: 3 } 
console.log(object2);  // { a: 1, b: 22, c: 3 } 

注意,这不会改变object1的值,它会创建一个新的空对象,如第一个参数中所定义的那样Object.assign(),它会向空对象添加更多参数,如果它再次遇到相同的密钥,那么它会更新密钥的值.

通过这种方式,您可以更改Object的一个甚至多个值.

一个更好的方式

Airbnb's JavaScript Style Guide() {} 说:

首选对象扩展运算符Object.assign到浅复制对象.

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates 
`original` ?_?
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, 
b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

您可以在此处查看完整文档

Answer 3

您可以创建一个通用函数，该函数采用对象数组并使用map()和返回带有修改道具对象的数组Object.assign()。

const users = [
    { name: 'Jhon', logged: 'Tue Feb 04 2020 14:16:10 GMT+0200 (Eastern European Standard Time)'  },
    { name: 'Doe', logged: 'Tue Feb 04 2020 14:20:10 GMT+0200 (Eastern European Standard Time)'  }
];


const handleDates = (list, prop) => {
    return list.map(item => {
      const obj = Object.assign({}, item);
      obj[prop] = new Date(obj[prop]).toLocaleDateString();
      return obj;
    });
}

console.log(users)
console.log(handleDates(users, 'logged'))

Answer 4

您还可以使用map数组解构：

//Get all the Tasks
function getAllTasks() {
  return models.gantt_tasks.findAll()
  .then(function(tasks){
     return tasks.map(task => {
         return {...task, start_date = task.start_date.format("YYYY-MM-DD")}
     }
  })
  .catch(function(e) {
    console.error(e);
    return e;
  });
}