連想配列が入った配列の、要素のひとつの値を上書きしたい

Question

ES6についての質問です。
現在、lodashというライブラリを使用しています。

例えば、以下のような配列があったとして

const users = [
  {
    id:1,
    name:'田中太郎',
    point:30,
    profile:'こんにちは',
  },
  {
    id:2,
    name:'青井花子',
    point:50,
    profile:'おはよう',
  },
  {
    id:3,
    name:'石野次郎',
    point:45,
    profile:'おやすみ',
  },
]

この、「id:1」の要素の「point」を「40」に、「profile」を「'ハロー'」に変更し、
さらに「name」の昇順に並び替えをしたい、という場合
どのようにすれば簡潔に処理できるでしょうか？

現在は以下のような形で書いていますが、冗長な気がします…

  const userChange (id, point, profile) => {
    const oldItem = _.find(users, ['id', id]);
    const newItem = _.assign({}, oldItem, { point, profile });
    return _.sortBy(_.concat(_.without(users, oldItem), newItem), 'name');
  }
  // userChange(1, 40, 'ハロー');

翻訳に頼りつつ、何とかlodashのドキュメントを読みながら、自分なりに調べていますが
なかなか良い方法が見つかりません。
どなたかアドバイスや案内してもらえると嬉しいです＞＜
もし、既に似たような質問があったり、これに該当する解決策の記事があったりしたらすみません…！

追記・・・
修正依頼ありがとうございます…！
非破壊的な方法で変更したいです。

Comments

[maisumakun]

users[0]やusers自身は破壊的に変更して問題ないですか？

Answer 1

JavaScript標準のAPIを使えばこんな感じ.

//当該要素の抽出
const user = users.find(user => user.id == 1);
user.point = 40;
user.profile = "ハロー";
//ソート(破壊的)
users.sort((a, b) => a.name < b.name ? -1 : a.name == b.name ? 0 : 1);
console.log(users);

ソートを非破壊的に行うなら, 配列の(シャロー)コピーを作ってからソートすればよい.

//ソート(配列をシャローコピーした後ソート)
const sorted = users.concat().sort((a, b) => a.name < b.name ? -1 : a.name == b.name ? 0 : 1);

Comments

[serona]

回答ありがとうございます！
こういうやり方があるんですね…！参考にさせて頂きますー！！

Answer 2

ES6 を使用していいいのなら、ここまで短く書けます(Polyfill で対応可能な範疇ですね)。

var user = Object.assign(users.find(user => user.id === 1), {point: 40, profile: 'ハロー'});
console.log(JSON.stringify(user));  // {"id":1,"name":"田中太郎","point":40,"profile":"ハロー"}

Re: serona さん

Comments

[serona]

回答ありがとうございます！参考にさせて頂きます！

Answer 3

あんまり省略できてなさそうですが、とりあえず書いて見ました。
Arrayの機能で済ませるとこうなりますかね。
参考になれば
https://jsfiddle.net/oligin/7t5kv7gd/10/

Comments

[serona]

回答ありがとうございます！
こういう書き方があるんですね…！この方が変更が分かりやすいですね
参考になりました！感謝です(*´∀｀*)

Answer 4

lodashのメリットはchainでつなげての遅延評価(v3以降)による最適化処理だと思います。
今回はfindで絞っているし、sortはその特性上、流れが切られるので最適化の対象とならないですが＾＾
lodashを使うなら、chain(遅延評価)を使うことをお勧めします。

var userChange = (id, point, profile)=> {
		_.chain( users )
			.find( {id:id} )
			.assign( { point: point, profile: profile } )
			.commit();
		return _.sortBy( users, 'name' );
	}

lodashの遅延評価についての参考ページ
http://yohshiy.blog.fc2.com/blog-entry-308.html

あとlodashはわりと破壊的なのでassignを使わなくても
findで取り出したオブジェクトをそのまま触ると上書きされます。
ただこれなら標準APIでいいかな～

var userChange = (id, point, profile)=> {
		const user = _.find( users, {id:id} );
		user.point = point;
		user.profile = profile;
		return _.sortBy( users, 'name' );
	}

追記です。
「非破壊的な方法で変更したい」というのを見逃していたので修正版も。

const userChange = (id, point, profile)=> {
		return _.chain( users )
			.cloneDeep() //複製
			.tap( users => {
				//強引に中間操作・・・
				_.chain(users).find( {id:id} ).assign( { point: point, profile: profile } ).commit();
			})
			.sortBy('name')
			.value();
	}

Comments

[serona]

回答ありがとうございます！
なるほど！そうやって使うんですね…(@_@)
勉強不足でお恥ずかしい限りです…！とても参考になりました！

Answer 5

lodashはわかりませんが

var users = [
  {
    id:1,
    name:'田中太郎',
    point:30,
    profile:'こんにちは',
  },
  {
    id:2,
    name:'青井花子',
    point:50,
    profile:'おはよう',
  },
  {
    id:3,
    name:'石野次郎',
    point:45,
    profile:'おやすみ',
  },
];

//プロパティ変更
with(users.filter(function(x){
  return x.id==1;
})[0]){point=40;profile='ハロー'};

//nameでソート
users.sort(function(x,y){
  return x.name == y.name?0:(x.name<y.name?1:-1);
});

console.log(users);

各要素のidがユニークである前提です。

Comments

[serona]

回答ありがとうございます！
各要素のidはユニークな値です。
参考にさせて頂きます！（>人<）