如何使用 JavaScript 或 jQuery 更改数组内对象的值?

IT技术 javascript jquery arrays
2021-01-29 21:09:06

下面的代码来自 jQuery UI 自动完成:

var projects = [
    {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
    },
    {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
    },
    {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
    }
];

例如,我想更改jquery-uidesc 值我怎样才能做到这一点?

另外,有没有更快的方法来获取数据?我的意思是给对象一个名字来获取它的数据,就像数组中的对象一样?所以它会是这样的jquery-ui.jquery-ui.desc = ....

6个回答

这很简单

  • 使用findIndex方法查找对象的索引
  • 将索引存储在变量中。
  • 做一个这样的简单更新: yourArray[indexThatyouFind]

//Initailize array of objects.
let myArray = [
  {id: 0, name: "Jhon"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"}
],
    
//Find index of specific object using findIndex method.    
objIndex = myArray.findIndex((obj => obj.id == 1));

//Log object to Console.
console.log("Before update: ", myArray[objIndex])

//Update object's name property.
myArray[objIndex].name = "Laila"

//Log object to console again.
console.log("After update: ", myArray[objIndex])

是的,但如果你不想变异。 [...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], myArray.slice(objIndex + 1))]
2021-03-19 21:09:06
它会改变 myArray。
2021-04-02 21:09:06
()findIndex方法加倍的任何原因
2021-04-07 21:09:06
@UmairAhmed 上面的代码不应该是 [...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], ...myArray.slice(objIndex + 1))]吗?我认为你错过了第二个省略号。
2021-04-11 21:09:06
爱这是多么干净!
2021-04-11 21:09:06

您必须在数组中搜索,例如:

function changeDesc( value, desc ) {
   for (var i in projects) {
     if (projects[i].value == value) {
        projects[i].desc = desc;
        break; //Stop this loop, we found it!
     }
   }
}

并像使用它一样

var projects = [ ... ];
changeDesc ( 'jquery-ui', 'new description' );

更新:

要更快地获得它:

var projects = {
   jqueryUi : {
      value:  'lol1',
      desc:   'lol2'
   }
};

projects.jqueryUi.desc = 'new string';

(根据 Frédéric 的评论,您不应该在对象键中使用连字符,或者您应该使用“jquery-ui”和 projects[“jquery-ui”] 符号。)

看看 abe kur 的回答,没错,这个和其他人很长
2021-03-14 21:09:06
有没有更快的方法来获取数据?我的意思是给对象一个名字来获取它的数据。就像数组中的对象一样。所以,我可以这样使用:jquery-ui.jquery-ui.desc = ....
2021-03-25 21:09:06
谢谢,我不知道。
2021-03-25 21:09:06
由于-对象名称中的连字符您的更新将不起作用你必须分别"jquery-ui": {}projects["jquery-ui"].desc
2021-03-28 21:09:06
对于新人,只需使用.find()它作为数组的方法,在这种情况下非常有用。请参阅abe kur对此的回答
2021-04-06 21:09:06

最好的解决方案,感谢 ES6。

这将返回一个新数组,其中包含一个等于“jquery-ui”的值的对象的替换描述。

const newProjects = projects.map(p =>
  p.value === 'jquery-ui'
    ? { ...p, desc: 'new description' }
    : p
);
@SgtPepperAut 也许是这样: proj.map(p => ['jquery-ui', 'other-value'].includes(p.value) ? { ...p, desc: 'new-description' } : p )
2021-03-12 21:09:06
对于新人,只需使用.find()它作为数组的方法,在这种情况下非常有用。请参阅abe kur对此的回答
2021-03-18 21:09:06
这是伟大而短暂的。你能写出如何同时更新两个值吗?速记符号对我来说肯定很难理解。? : 如果还有什么是“...”
2021-04-09 21:09:06
@FrederikoCesar 并非在所有情况下,迭代每个对象的成本都高于切片数组并使用扩展运算符注入新对象
2021-04-10 21:09:06
如果您想即时更改值怎么办?不创建另一个变量?最好的方法是索引方法: const targetIndex = summerFruits.findIndex(f=>f.id===3);
2021-04-10 21:09:06

使用 map 是不使用额外库的最佳解决方案。(使用 ES6)

const state = [
{
    userId: 1,
    id: 100,
    title: "delectus aut autem",
    completed: false
},
{
    userId: 1,
    id: 101,
    title: "quis ut nam facilis et officia qui",
    completed: false
},
{
    userId: 1,
    id: 102,
    title: "fugiat veniam minus",
    completed: false
},
{
    userId: 1,
    id: 103,
    title: "et porro tempora",
    completed: true
}]

const newState = state.map(obj =>
    obj.id === "101" ? { ...obj, completed: true } : obj
);
此解决方案已提供:stackoverflow.com/a/51718190/6543875
2021-04-03 21:09:06

ES6方式,不改变原始数据。

var projects = [
{
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "jquery_32x32.png"
},
{
    value: "jquery-ui",
    label: "jQuery UI",
    desc: "the official user interface library for jQuery",
    icon: "jqueryui_32x32.png"
}];

//find the index of object from array that you want to update
const objIndex = projects.findIndex(obj => obj.value === 'jquery-ui');

// make new object of updated object.   
const updatedObj = { ...projects[objIndex], desc: 'updated desc value'};

// make final new array of objects by combining updated object.
const updatedProjects = [
  ...projects.slice(0, objIndex),
  updatedObj,
  ...projects.slice(objIndex + 1),
];

console.log("original data=", projects);
console.log("updated data=", updatedProjects);