home wiki.fukuchiharuki.me
Menu
Top/JavaScript/文字列からオブジェクトのプロパティを参照・更新する 
#author("2017-12-27T17:11:22+00:00","default:haruki","haruki")
#author("2017-12-27T17:12:43+00:00","default:haruki","haruki")
* キーワード [#t66b9647]
- JavaScript
- オブジェクト
-- プロパティ
- 配列
-- インデックス

* したいこと [#te139c2c]

 name = "a.b"

で

 data.a.b

を参照したい。また更新したい。

* どうやって [#a7802d0a]

** 参照 [#f9bba347]

 console.log(
   name.split('.').reduce((data, prop) => data[prop], data)
 )

** 更新 [#dc4fd270]

 ;(a => { a.pop(); return a })(name.split('.')).reduce((data, prop) => data[prop], data)[(a => a.pop())(name.split('.'))] = value

* 例 [#t5baea0d]

 const data = {
 	numbers: [ "one", "two", "three" ],
 	greeting: {
 		hi: "Hi!"
 	},
 }
 
 name = "numbers.3"
 value = "four"
 
 ;(a => { a.pop(); return a })(name.split('.')).reduce((data, prop) => data[prop], data)[(a => a.pop())(name.split('.'))] = value
 console.log(name.split('.').reduce((data, prop) => data[prop], data))
 
 name = "greeting.hello"
 value = "Hello!"
 
 ;(a => { a.pop(); return a })(name.split('.')).reduce((data, prop) => data[prop], data)[(a => a.pop())(name.split('.'))] = value
 console.log(name.split('.').reduce((data, prop) => data[prop], data))
 
 console.log(data)

の結果は、

 four
 Hello!
 {numbers:["one","two","three","four"],greeting:{hi:"Hi!",hello:"Hello!"}}

になる。

オブジェクトならオブジェクトとしてプロパティが、配列なら配列としてインデックスが追加できてしまうのがJavaScriptの融通が効くすばらしいところ。

* ちなみに [#ne421bc1]

** 前提知識 [#sa8ec491]

*** オブジェクトのプロパティは連想配列のようにできる [#fc7b1c8a]

 data.a.b

は

 data[a][b]

と同じ。

*** 配列のインデックスは文字列でもよい [#dbc17b81]

 data.c

が配列なら

 data.c[0]

と

 data.c['0']

は同じに振る舞う。ので、名前は "c.0" とできる。

** 解説 [#d39a1cde]

*** name.split('.') [#t38a8b13]

プロパティの階層を掘るのに「.」を使うことを決めて、プロパティ名の配列を作る。

*** [data, ...names] [#u363d7ae]
*** %%[data, ...names]%% [#u363d7ae]

dataが先頭にあって、プロパティ名が後に続く配列を作る。
%%dataが先頭にあって、プロパティ名が後に続く配列を作る。%%

*** .reduce((data, prop) => data[prop]) [#iec5c1d5]
*** .reduce((data, prop) => data[prop], data) [#iec5c1d5]

dataから順番にプロパティを掘っていく。先にdataを先頭に乗せたのはそのため。
dataから順番にプロパティを掘っていく。%%先にdataを先頭に乗せたのはそのため。%%reduce()でinitialValueを与えることができる。

*** (a => { a.pop(); return a })(names) [#d563ac30]

更新の場合、末端のプロパティのプリミティブ型の値（の、ばっかり）を得てしまっても意味がない。ので、ひとつ手前まで取得するように、プロパティ名の配列（末端を除く）を作成する。

*** (a => a.pop())(name.split('.')) [#jcedc308]

ひとつ手前までのオブジェクトまたは配列まで取得したら最後に末端のプロパティ名またはインデックスを指定する。そこに値を代入する。

*** ; [#ba5be070]

文末に「;」を書かない派だと、前の文によっては誤解が生じるので文を切っておく。

* 参考 [#yf784ea8]
- [[String.prototype.split() - JavaScript | MDN>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split]] 
- [[スプレッド演算子 - JavaScript | MDN>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator]]
- [[Array.prototype.reduce() - JavaScript | MDN>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce]]
- [[Array.prototype.pop() - JavaScript | MDN>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop]]
- [[アロー関数 - JavaScript | MDN>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions]]