javascript解构的力量

const projects = [ { value: 'jquery', label: 'jQuery', desc: 'the write less, do more, JavaScript library', icon: 'jquery_32x32.png', anotherObj: { 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', }, ]; function createNewDate(date) { const newDate = []; date.map((obj, index) => { if (index === 0) { newDate.push({ ...obj, value: 'Jquery??', label: 'Jquery is not that good', anotherObj: { ...obj.anotherObj, value: 'Javascript', label: 'Javascript', desc: 'Write more!!! do more!! with JavaScript', icon: 'javascript_4kx4k.4kimage', }, }); } else { newDate.push({ ...obj, }); } }); return newDate; } console.log(createNewDate(projects));

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

我们也可以使用Array的map函数来使用Javascript修改数组的对象。

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

changeDesc('jquery', 'new description')

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 sure to avoid incorrect replacement
// When specific item is not found
if (objIndex === -1) {
  return;
}

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

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

javascript解构的力量

const projects = [ { value: 'jquery', label: 'jQuery', desc: 'the write less, do more, JavaScript library', icon: 'jquery_32x32.png', anotherObj: { 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', }, ]; function createNewDate(date) { const newDate = []; date.map((obj, index) => { if (index === 0) { newDate.push({ ...obj, value: 'Jquery??', label: 'Jquery is not that good', anotherObj: { ...obj.anotherObj, value: 'Javascript', label: 'Javascript', desc: 'Write more!!! do more!! with JavaScript', icon: 'javascript_4kx4k.4kimage', }, }); } else { newDate.push({ ...obj, }); } }); return newDate; } console.log(createNewDate(projects));