オブジェクトキー、値とエントリにアクセスする方法

オブジェクトは、キー値組の形でデータを保存するのに役に立ちます.これらのキーと値を格納することは一つのことです.もう一つは、どのようにそれらを取得するかを知ることです.この記事では、4つの異なる方法を学びます.オブジェクトキー、値、およびエントリJavaScriptにアクセスします.

簡単な紹介
つのことがアクセスし、オブジェクトから取得することができます:キー、値とエントリ.キーはオブジェクト内のプロパティ名です.値はプロパティ名に関連付けられたプロパティ値です.エントリは、プロパティ名とその値の(key value)ペアです.どのようにアクセスし、それぞれを取得できるかを見てみましょう.

オブジェクトを持つオブジェクトキーにアクセスします.keys ()メソッド
オブジェクトキーにアクセスする場合はObject.keys() メソッドは最適なツールです.このメソッドは、ES 6のJavaScriptに導入されました.このメソッドの動作方法は簡単です.引数として取得するキーを持つオブジェクトを受け取ります.返される値は、そのオブジェクト内に存在するキーです.
あなたが得る値は、キーの形であるarray . 次に、forEach() 方法for これらの値を反復処理し、個別に取得します.インデックスを使用することもできます.これは、キーがオブジェクト内で定義されている順序を知っていれば別のオプションかもしれません.
The Object.keys() メソッドはこれらを定義した順序で返します.ですから、2番目か3番目のキーが欲しいなら、インデックスを使うことができます1 or 2 これらのキーを取得します.オブジェクトがキーを持たない場合、取得する配列も空になります.

// Example no.1: object with keys
// Create an object
const cat = {
  name: 'Tom',
  color: 'gray',
  age: 3,
  gender: 'male',
}

// Get all keys
const objKeys = Object.keys(cat)

// Log all keys
console.log(objKeys)
// Output:
// [ 'name', 'color', 'age', 'gender' ]

// Log all keys individually
objKeys.forEach(key => console.log(key))
// Output:
// 'name'
// 'color'
// 'age'
// 'gender'

// Log specific key
console.log(objKeys[3])
// Output:
// 'gender'


// Example no.2: empty object
const emptyObj = {}

console.log(Object.keys(emptyObj))
// Output:
// []

オブジェクトによるオブジェクト値へのアクセス.values ()メソッド
すべての値を与える前のメソッドの代わりにObject.values() メソッド.このメソッドの使用方法は前と同じです.いくつかのオブジェクトを取り、引数として名前を渡します.取得する値は配列になります.このとき、配列は指定したオブジェクト内のすべての値を格納します.

// Example no.1: object with values
// Create an object
const mouse = {
  name: 'Jerry',
  color: 'brown',
  age: 2,
  gender: 'male',
}

// Get all values
const objValues = Object.values(mouse)

// Log all values
console.log(objValues)
// Output:
// [ 'name', 'color', 'age', 'gender' ]

// Log all values individually
objValues.forEach(value => console.log(value))
// Output:
// 'Jerry'
// 'brown'
// 2
// 'male'

// Log specific value
console.log(objValues[0])
// Output:
// 'Jerry'


// Example no.2: empty object
const emptyObj = {}

console.log(Object.values(emptyObj))
// Output:
// []

オブジェクトを持つすべてのエントリを取得します.entries ()メソッド
両方のキーと値を取得する場合は、ベストフィットされますObject.entries() メソッド.このメソッドは、彼女の2人の前任者のように動作します.引数としてオブジェクトを受け取り、配列を返します.この場合の違いは、あなたが得る価値です.配列になります.
ただし、この配列には、キーと値の両方が含まれます.これらのキーと値は、追加ネストされた配列の中でグループ化されます.キーと値の各グループ、またはペアにネストした配列が1つあります.これらの入れ子状配列内のデータの順序は常に同じです.キーは最初に、そして2番目の値として来る.
すべてのこれらのペア、またはエントリを取得するには、再度使用することができますforEach() 方法for ループ.特定のペア、またはエントリを取得するには、特定のインデックスを使用できます.特定のペアから具体的なデータを取得したい場合は?追加のインデックスを追加します.0 キーまたは1 を返します.

// Example no.1: object with keys
// Create an object
const dog = {
  name: 'Spike',
  color: 'gray',
  age: 5,
  gender: 'male',
}

// Get all entries
const objEntries = Object.entries(dog)

// Log all entries
console.log(objEntries)
// Output:
// [
//   [ 'name', 'Spike' ],
//   [ 'color', 'gray' ],
//   [ 'age', 5 ],
//   [ 'gender', 'male' ]
// ]

// Log all entries individually
objEntries.forEach(entry => console.log(entry))
// Output:
// [ 'name', 'Spike' ]
// [ 'color', 'gray' ]
// [ 'age', 5 ]
// [ 'gender', 'male' ]

// Log specific entry
console.log(objEntries[2])
// Output:
// [ 'age', 5 ]

// Log only key from a specific entry
console.log(objEntries[2][1])
// Output:
// 5


// Example no.2: empty object
const emptyObj = {}

console.log(Object.entries(emptyObj))
// Output:
// []

結合オブジェクト.例例39 - 1 prepare ()の使用法
これらの入れ子状の配列を使用すると、Object.entries() 痛みはありえます.より快適にする方法があります.あなたができることはObject.entries() メソッドをforEach() メソッド.The forEach() メソッドを使用すると、配列内の各項目に対して実行する関数を指定できます.
この関数は、現在の値、現在の値のインデックス、およびソース配列の3つのパラメータを取ることができます.現在のパラメータをそのまま使用すると、各反復中に現在のエントリ、キー値ペアを取得します.もう一つのことは、使うことですdestructuring assignment .
これにより、オブジェクトキーまたは値に直接アクセスできます.foo ()メソッドの関数の中で、デストラリングの割り当てを使用できます.または、現在の値のパラメーターを指定するときに使用できます.どちらの場合でも、キーと値で直接動作することができます.
あなたが破壊的な割り当てを使用したくないならば、あなたはそうしません.代わりに、forEach() メソッドパラメータと配列インデックス.これによりキーにアクセスできます0 ) と値1 ) 各エントリでも.

// Example of Object.entries() and forEach() method
// Create an object
const man = {
  name: 'George',
  color: 'white',
  age: 40,
  gender: 'male',
}

// Get all entries
const myObjEntries = Object.entries(man)

// Use forEach() method to iterate over man object entries
myObjEntries.forEach((entry) => {
  // Use destructuring assignment
  // to get direct access to keys and values
  const [key, value] = entry

  // Log each key, value and entry
  console.log(`
    key: ${key}
    value: ${value}
    entry: { ${key}: ${value} }
  `)
})
// Output:
// '
//   key: name
//   value: George
//   entry: { name: George }
// '
// '
//   key: color
//   value: white
//   entry: { color: white }
// '
// '
//   key: age
//   value: 40
//   entry: { age: 40 }
// '
// '
//   key: gender
//   value: male
//   entry: { gender: male }
// '


// Example no.2: destructuring assignment with parameter
myObjEntries.forEach(([key, value]) => {
  // Log each key, value and entry
  console.log(`
    key: ${key}
    value: ${value}
    entry: { ${key}: ${value} }
  `)
})
// Output:
// '
//   key: name
//   value: George
//   entry: { name: George }
// '
// '
//   key: color
//   value: white
//   entry: { color: white }
// '
// '
//   key: age
//   value: 40
//   entry: { age: 40 }
// '
// '
//   key: gender
//   value: male
//   entry: { gender: male }
// '


// Example no.3: without destructuring
myObjEntries.forEach((entry) => {
  // Log each key, value and entry
  console.log(`
    key: ${entry[0]}
    value: ${entry[1]}
    entry: { ${entry[0]}: ${entry[1]} }
  `)
})

結合オブジェクト.に対してループの
もう一つのオプションはObject.entries() with for...of ループ.The for...of ループは、基本的にはforEach() . 構文だけが異なります.同様にforEach() メソッドを使用すると、キーと値に直接アクセスするために、破壊課題を使用できます.
この場合、2つの方法で破壊を使用できます.つ目は、現在のエントリを含む変数のループ内です.または、ループ変数に直接使用することができます.破壊せずに、ループ変数と配列インデックスの組み合わせを使用できます.

// Example of Object.entries() and for...of loop
// Create an object
const woman = {
  name: 'Joan',
  color: 'white',
  age: 30,
  gender: 'female',
}

// Get all entries
const myObjEntries = Object.entries(woman)

// Use for...of loop to iterate over woman object
for (const entry of myObjEntries) {
  // Use destructuring assignment
  // to get direct access to keys and values
  const [key, value] = entry

  // Log each key, value and entry
  console.log(`
    key: ${key}
    value: ${value}
    entry: { ${key}: ${value} }
  `)
}
// Output:
// '
//   key: name
//   value: Joan
//   entry: { name: Joan }
// '
// '
//   key: color
//   value: white
//   entry: { color: white }
// '
// '
//   key: age
//   value: 30
//   entry: { age: 30 }
// '
// '
//   key: gender
//   value: female
//   entry: { gender: female }
// '


// Example no.2: destructuring assignment with loop variable
for (const [key, value] of myObjEntries) {
  // Log each key, value and entry
  console.log(`
    key: ${key}
    value: ${value}
    entry: { ${key}: ${value} }
  `)
}
// Output:
// '
//   key: name
//   value: Joan
//   entry: { name: Joan }
// '
// '
//   key: color
//   value: white
//   entry: { color: white }
// '
// '
//   key: age
//   value: 30
//   entry: { age: 30 }
// '
// '
//   key: gender
//   value: female
//   entry: { gender: female }
// '


// Example no.3: without destructuring
for (const entry of myObjEntries) {
  // Log each key, value and entry
  console.log(`
    key: ${entry[0]}
    value: ${entry[1]}
    entry: { ${entry[0]}: ${entry[1]} }
  `)
}
// Output:
// '
//   key: name
//   value: Joan
//   entry: { name: Joan }
// '
// '
//   key: color
//   value: white
//   entry: { color: white }
// '
// '
//   key: age
//   value: 30
//   entry: { age: 30 }
// '
// '
//   key: gender
//   value: female
//   entry: { gender: female }
// '

代替案: .インループ
我々が議論したメソッドは、オブジェクトキーか値かエントリーにアクセスする1つの方法です.しかし、別の選択肢もあります.また、使用することによって、オブジェクトキーと値、またはエントリにアクセスできますfor...in ループ.この代替案は、3つの方法のいずれかよりもいくつかのケースでより有用かもしれません.
理由はfor...in ループは、より柔軟にすることができます.それを使用するときは、両方のキーと値で動作することができます.これらの3つのメソッドは、それぞれ1つのタイプのデータだけで動作します.The Object.entries() メソッドも両方とも動作します.しかし、それは非常に友好的ではないfor...of or forEach() それをよりよくします.
さて、そのことを考えましょうfor...in 代替案としてループあなたが必要とする最初のものはいくつかのオブジェクト、あなたが繰り返すことを望むオブジェクトです.必要なのは変数名を一つ指定することです.これはfor...in ループ.実行されると、ループは、各変数に現在のオブジェクトキーを割り当てます.
この簡単なセットアップと変数を使用すると、すぐにオブジェクトキーにアクセスできます.オブジェクト値にアクセスする必要がある場合は、オブジェクト(オブジェクト変数の名前)と変数を結合できます.両方を必要とする場合は、変数を使用して、オブジェクト(オブジェクト変数の名前)と組み合わせることもできます.

// Example of for...in loop
// Create an object
const cuckoo = {
  name: 'Cuckoo',
  color: 'yellow',
  age: 1,
  gender: 'male',
}

// Iterate over cuckoo object
for (const key in cuckoo) {
  // Log each key
  // then each value
  // and lastly each entry
  console.log(`
    key: ${key}
    value: ${cuckoo[key]}
    entry: { ${key}: ${cuckoo[key]} }
  `)
}
// Output:
// '
//   key: name
//   value: Cuckoo
//   entry: { name: Cuckoo }
// '
// '
//   key: color
//   value: yellow
//   entry: { color: yellow }
// '
// '
//   key: age
//   value: 1
//   entry: age: 1
// '
// '
//   key: gender
//   value: male
//   entry: { gender: male }
// '

JavaScriptのオブジェクトキー、値とエントリにアクセスする方法
オブジェクトキー、値とエントリを使用すると、どのようなツールは、仕事をするのを助ける知っているときに簡単になります.このチュートリアルでは、どのような方法を使用するかを理解するのに役立ちます.