開始行:
* キーワード [#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((d... * 例 [#t5baea0d] const data = { numbers: [ "one", "two", "three" ], greeting: { hi: "Hi!" }, } name = "numbers.3" value = "four" ;(a => { a.pop(); return a })(name.split('.')).reduce((d... console.log(name.split('.').reduce((data, prop) => data[... name = "greeting.hello" value = "Hello!" ;(a => { a.pop(); return a })(name.split('.')).reduce((d... console.log(name.split('.').reduce((data, prop) => data[... console.log(data) の結果は、 four Hello! {numbers:["one","two","three","four"],greeting:{hi:"Hi!"... になる。 オブジェクトならオブジェクトとしてプロパティが、配列なら... * ちなみに [#ne421bc1] ** 前提知識 [#sa8ec491] *** オブジェクトのプロパティは連想配列のようにできる [#fc... 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が先頭にあって、プロパティ名が後に続く配列を作る。%% *** .reduce((data, prop) => data[prop], data) [#iec5c1d5] dataから順番にプロパティを掘っていく。%%先にdataを先頭に... *** (a => { a.pop(); return a })(names) [#d563ac30] 更新の場合、末端のプロパティのプリミティブ型の値（の、ば... *** (a => a.pop())(name.split('.')) [#jcedc308] ひとつ手前までのオブジェクトまたは配列まで取得したら最後... *** ; [#ba5be070] 文末に「;」を書かない派だと、前の文によっては誤解が生じる... * 参考 [#yf784ea8] - [[String.prototype.split() - JavaScript | MDN>https://d... - [[スプレッド演算子 - JavaScript | MDN>https://developer... - [[Array.prototype.reduce() - JavaScript | MDN>https://d... - [[Array.prototype.pop() - JavaScript | MDN>https://deve... - [[アロー関数 - JavaScript | MDN>https://developer.mozil...

終了行:
* キーワード [#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((d... * 例 [#t5baea0d] const data = { numbers: [ "one", "two", "three" ], greeting: { hi: "Hi!" }, } name = "numbers.3" value = "four" ;(a => { a.pop(); return a })(name.split('.')).reduce((d... console.log(name.split('.').reduce((data, prop) => data[... name = "greeting.hello" value = "Hello!" ;(a => { a.pop(); return a })(name.split('.')).reduce((d... console.log(name.split('.').reduce((data, prop) => data[... console.log(data) の結果は、 four Hello! {numbers:["one","two","three","four"],greeting:{hi:"Hi!"... になる。 オブジェクトならオブジェクトとしてプロパティが、配列なら... * ちなみに [#ne421bc1] ** 前提知識 [#sa8ec491] *** オブジェクトのプロパティは連想配列のようにできる [#fc... 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が先頭にあって、プロパティ名が後に続く配列を作る。%% *** .reduce((data, prop) => data[prop], data) [#iec5c1d5] dataから順番にプロパティを掘っていく。%%先にdataを先頭に... *** (a => { a.pop(); return a })(names) [#d563ac30] 更新の場合、末端のプロパティのプリミティブ型の値（の、ば... *** (a => a.pop())(name.split('.')) [#jcedc308] ひとつ手前までのオブジェクトまたは配列まで取得したら最後... *** ; [#ba5be070] 文末に「;」を書かない派だと、前の文によっては誤解が生じる... * 参考 [#yf784ea8] - [[String.prototype.split() - JavaScript | MDN>https://d... - [[スプレッド演算子 - JavaScript | MDN>https://developer... - [[Array.prototype.reduce() - JavaScript | MDN>https://d... - [[Array.prototype.pop() - JavaScript | MDN>https://deve... - [[アロー関数 - JavaScript | MDN>https://developer.mozil...

ページ名: