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


200

下面的代码来自jQuery UI Autocomplete:

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 = ....


您必须将数组转换为Javascript对象才能使用语法projects["jquery-ui"].desc。仅为了获得更好的语法就值得付出努力吗?
弗雷德里克·哈米迪

我已经用您的最新问题更新了解决方案。您可以使用“ projects.jquery-ui.desc”表示法。
阿斯顿

Answers:


135

您必须像这样在数组中搜索:

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”]表示法。)


有没有更快的方法来获取数据?我的意思是给对象命名以获取其数据。就像数组中的对象一样。因此,我可以这样使用:jquery-ui.jquery-ui.desc = ....
qinHaiXiang 2011年

2
您的更新由于-对象名称中的连字符而无法正常工作。您将不得不分别编写"jquery-ui": {}projects["jquery-ui"].desc
弗雷德里克·哈米迪

谢谢,我不知道。
阿斯顿

看看
安倍·库尔(

230

很简单

  • 使用查找对象索引 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])


2
有什么理由()findIndex方法上加倍?
Terkhos

3
它将使myArray变异。
Bimal Grg '18

1
是的,但是如果您不想变异。[...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], myArray.slice(objIndex + 1))]
Umair Ahmed '18

1
@UmairAhmed上面的代码不应该 [...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], ...myArray.slice(objIndex + 1))]吗?我认为您错过了第二个椭圆。
克雷格(Craig)

1
爱这是多么干净!
tdelam '19

56

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);

54

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

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

const newProjects = projects.map(p =>
  p.value === 'jquery-ui'
    ? { ...p, desc: 'new description' }
    : p
);

1
确实是最好的实际解决方案!谢谢。
弗雷德里科·塞萨尔

1
@FrederikoCesar并非在所有情况下都如此,迭代每个对象的成本要比切片数组和使用散布运算符注入新对象的成本更高
Maged Mohamed

如果要即时更改值怎么办?没有创建另一个变量?最好的方法是索引方法:const targetIndex = summerFruits.findIndex(f => f.id === 3);
塔纳西斯


34

使用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
);


17

您可以使用.find这样在您的示例中

   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"
            }
        ];

let project = projects.find((p) => {
    return p.value === 'jquery-ui';
});

project.desc = 'your value'

惊人!+1
Mike Musni

12

您需要知道要更改的对象的索引。那么它很简单

projects[1].desc= "new string";

8

我认为这样更好

const index = projects.findIndex(project => project.value==='jquery-ui');
projects[index].desc = "updated desc";

在您findIndex分配值而不是进行比较
avalanche1

6

给出下面的数据,我们要替换浆果summerFruits与列表西瓜

const summerFruits = [
{id:1,name:'apple'}, 
{id:2, name:'orange'}, 
{id:3, name: 'berries'}];

const fruit = {id:3, name: 'watermelon'};

有两种方法可以做到这一点。

第一种方法:

//create a copy of summer fruits.
const summerFruitsCopy = [...summerFruits];

//find index of item to be replaced
const targetIndex = summerFruits.findIndex(f=>f.id===3); 

//replace the object with a new one.
summerFruitsCopy[targetIndex] = fruit;

第二种方法:使用mapspread

const summerFruitsCopy = summerFruits.map(fruitItem => 
fruitItem .id === fruit.id ? 
    {...summerFruits, ...fruit} : fruitItem );

summerFruitsCopy list现在将返回一个包含更新对象的数组。


第一种方法是最好的。无需移动到另一个变量,然后再返回。动态方法。我投票赞成您的解决方案。
Thanasis

4

// using higher-order functions to avoiding mutation
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"
            }
        ];

// using higher-order functions to avoiding mutation
index = projects.findIndex(x => x.value === 'jquery-ui');
[... projects.slice(0,index), {'x': 'xxxx'}, ...projects.slice(index + 1, projects.length)];


这个...在项目之前是必须的吗?
lazzy_ms

@lazzy_ms ...被称为传播运算符。google it :)
rmcsharry19年

4

这是另一个涉及的答案find。这取决于以下事实find

  • 遍历数组中的每个对象,直到找到匹配项
  • 每个对象都提供给您,并且可以修改

这是关键的Javascript代码段:

projects.find( function (p) {
    if (p.value !== 'jquery-ui') return false;
    p.desc = 'your value';
    return true;
} );

这是相同Javascript的替代版本:

projects.find( function (p) {
    if (p.value === 'jquery-ui') {
        p.desc = 'your value';
        return true;
    }
    return false;
} );

这是一个更短的(有些邪恶的版本):

projects.find( p => p.value === 'jquery-ui' && ( p.desc = 'your value', true ) );

这是完整的工作版本:

  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"
            }
        ];

projects.find( p => p.value === 'jquery-ui' && ( p.desc = 'your value', true ) );

console.log( JSON.stringify( projects, undefined, 2 ) );


3

您可以使用地图功能-

const answers = this.state.answers.map(answer => {
  if(answer.id === id) return { id: id, value: e.target.value }
  return answer
})

this.setState({ answers: answers })


0

我们还可以使用Array的map函数通过Javascript修改数组的对象。

function changeDesc(value, desc){
   projects.map((project) => project.value == value ? project.desc = desc : null)
}

changeDesc('jquery', 'new description')

这将返回[null,具有更新后的值的对象,null]
Fernando Caride,

0

首先找到索引:

function getIndex(array, key, value) {
        var found = false;
        var i = 0;
        while (i<array.length && !found) {
          if (array[i][key]==value) {
            found = true;
            return i;
          }
          i++;
        }
      }

然后:

console.log(getIndex($scope.rides, "_id", id));

然后使用此索引执行您想要的操作,例如:

$ scope [returnedindex] .someKey =“ someValue”;

注意:请不要使用for,因为for将检查所有数组文档,并与塞子一起使用,因此一旦找到它便将停止,从而加快了代码的速度。


0

在这里我正在使用角度js。在javascript中,您可以使用for循环进行查找。

    if($scope.bechval>0 &&$scope.bechval!=undefined)
    {

                angular.forEach($scope.model.benhmarkghamlest, function (val, key) {
                $scope.model.benhmarkghamlest[key].bechval = $scope.bechval;

            });
    }
    else {
        alert("Please sepecify Bechmark value");
    }

-1

使用匹配项更新多个项目,请使用:

_.chain(projects).map(item => {
      item.desc = item.value === "jquery-ui" ? "new desc" : item.desc;
      return item;
    })

-1

这是我对问题的回应。我的下划线版本是1.7,因此无法使用.findIndex

因此,我手动获得了项目的索引并替换了它。这是相同的代码。

 var students = [ 
{id:1,fName:"Ajay", lName:"Singh", age:20, sex:"M" },
{id:2,fName:"Raj", lName:"Sharma", age:21, sex:"M" },
{id:3,fName:"Amar", lName:"Verma", age:22, sex:"M" },
{id:4,fName:"Shiv", lName:"Singh", age:22, sex:"M" }
               ]

下面的方法将用id:4对象中的更多属性替换学生

function updateStudent(id) {
 var indexOfRequiredStudent = -1;
    _.each(students,function(student,index) {                    
      if(student.id === id) {                        
           indexOfRequiredStudent = index; return;      
      }});
 students[indexOfRequiredStudent] = _.extend(students[indexOfRequiredStudent],{class:"First Year",branch:"CSE"});           

}

下划线1.8将简化我们提供的方法_.findIndexOf



-1
let thismoth = moment(new Date()).format('MMMM');
months.sort(function (x, y) { return x == thismoth ? -1 : y == thismoth ? 1 : 0; });

1
请提供您的答案的描述。
Lajos Arpad
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.