JavaScript 連想配列とハッシュテーブル
- オブジェクトを使用して JavaScript 連想配列を作成する
-
Map()関数を使用して JavaScript 連想配列を作成する - JavaScript オブジェクトを使用してハッシュテーブルを実装する
オブジェクトと Map() を使用した JavaScript 連想配列とハッシュテーブルの実装について学習します。
JavaScript には、オブジェクト以外の連想配列/ハッシュテーブルはありませんが。しかし、それを回避する方法は他にもあります。
詳細な実装に飛び込む前に、連想配列、マップ、辞書、およびハッシュテーブルの違いを理解する必要があります。これらはすべて、キーと値のペアのデータを保持するために使用されますが、それでも違いがあります。
- 連想配列は、（キー、値）ペアのデータを含むデータ構造の概念です。マップや辞書と同様に、抽象データ型とも呼ばれます。ここで、インデックスは文字列であり、整数ではありません。連想配列を実装するにはさまざまな方法があります。ハッシュテーブルはその 1つです。
- ディクショナリは、連想配列と同じ（キー、値）ペアのデータも保持します。ただし、そのインデックスは整数です。
- マップには、キーと値のペアのデータもあります。キーの元の挿入順序を記憶しています。
- ハッシュテーブルとは、ハッシュメソッドを使用してメモリ内にデータを配置することです。これは、連想配列をシミュレートする方法の 1つです。
オブジェクトを使用して JavaScript 連想配列を作成する
// first way to create associative array
const person = [];
person['firstname'] = 'Mehvish';
person['lastname'] = 'Ashiq';
person['age'] = 30;
person['city'] = 'Multan';
person['email'] = 'delfstack@example.com';
// second way to create associative array
const person = {
firstname: 'Mehvish',
lastname: 'Ashiq',
age: 30,
city: 'Multan',
email: 'delfstack@example.com'
};
上記のコードで連想配列として機能する JavaScript オブジェクトを作成しました。firstname、lastname、age、city、および email はキー（インデックス）です。値は、Mehvish、Ashiq、30、Multan、delfstack@example.com です。
新しいキーと値のペアを phone:12334567 として追加するとします。そのために、Object.assign() 関数を使用できます。2 番目のオブジェクトを最初のオブジェクトの最後にコピーします。
// Here the second object is {phone:12334567}
// Here the first object is person
Object.assign(person, {phone: 12334567});
キー（インデックス）をターゲットにすることで、各キーの値にアクセスできます。インデックスは文字列であり、数値ではないことを忘れないでください。したがって、ここでは person[0] のようにアクセスすることはできません（辞書を使用している場合は person[0] を使用できます）。
// to print in the browser
document.write(person.firstname); // OUTPUT: Mehvish
document.write(person['firstname']); // OUTPUT: Mehvish
document.write(person[0]); // OUTPUT: undefined
// to print on console
console.log(person.firstname); // OUTPUT: Mehvish
console.log(person[0]); // OUTPUT: undefined
for ループを使用して、完全な連想配列を出力できます。
// print complete associative array using for look
for (var key in person) {
var value = person[key];
document.write(value);
document.write(' ');
}
出力：
"[firstname: Mehvish]"
"[lastname: Ashiq]"
"[age: 30]"
"[city: Multan]"
"[email: delfstack@example.com]"
"[phone: 12334567]"
連想配列全体を出力するためのより最適化された方法は、オブジェクトデータ型の 1つのパラメーターを受け取る Object.entries() メソッドです。その他のオブジェクトの機能については、ここを読むことができます。
// print complete associative array using for look
let completeAssociateArray = Object.entries(person);
console.log(completeAssociateArray);
出力：
[["firstname", "Mehvish"], ["lastname", "Ashiq"], ["age", 30], ["city", "Multan"], ["email", "delfstack@example.com"], ["phone", 12334567]]
Map() 関数を使用して JavaScript 連想配列を作成する
// first way to create associative array using Map function
const person = new Map();
person.set('firstname', 'Mehvish');
person.set('lastname', 'Ashiq');
person.set('age', 30);
person.set('city', 'Multan');
person.set('email', 'delfstack@example.com');
// second way to create associative array using Map function
const person = new Map([
['firstname', 'Mehvish'], ['lastname', 'Ashiq'], ['age', 30],
['city', 'Multan'], ['email', 'delfstack@example.com']
]);
get(key) メソッドを使用して、特定の値を取得できます。
person.get('city'); // output is "Multan"
連想配列のキーと値のペア全体を表示します。
for (const [key, value] of person.entries()) {
console.log(key + ' = ' + value)
}
出力：
"firstname = Mehvish"
"lastname = Ashiq"
"age = 30"
"city = Multan"
"email = delfstack@example.com"
keys() 関数を使用してキーのみを出力します。
for (const key of person.keys()) {
console.log(key)
}
出力：
"firstname"
"lastname"
"age"
"city"
"email"
values() 関数を使用してのみ値を取得します。
for (const value of person.values()) {
console.log(value)
}
出力：
"Mehvish"
"Ashiq"
30
"Multan"
"delfstack@example.com"
delete(key) を使用して要素を削除できます。正常に削除されると、true を返します。要素が指定されたキーに関連付けられている場合、has(key) は true を返しますが、clear() はすべてのキーと値のペアを削除します。
詳細については、こちらページをご覧ください。ハッシュテーブルの実装を探している場合は、Map() 関数を使用できますが、ハッシュテーブルの実装には JavaScript オブジェクトを使用しています。
JavaScript オブジェクトを使用してハッシュテーブルを実装する
var ht = new HashTable({firstname: 'Mehvish', lastname: 'Ashiq', age: 30});
function HashTable(person) {
this.size = 0;
this.item = {};
for (var p in person) {
if (person.hasOwnProperty(p)) {
this.item[p] = person[p];
this.size++;
}
}
this.set =
function(key, value) {
var previousItem = undefined;
if (this.has(key)) {
previousItem = this.item[key];
} else {
this.size++;
}
this.item[key] = value;
return previousItem;
}
this.get =
function(key) {
return this.has(key) ? this.item[key] : undefined;
}
this.has = function(key) {
return this.item.hasOwnProperty(key);
}
}
次のコードを使用してテストしてみましょう。
console.log(ht.size);
console.log(ht.get('firstname'));
以下の結果が得られます。
3
"Mehvish"
hasOwnProperty は、キーが item オブジェクトに属しているかどうかを確認するために使用されます。つまり、指定されたプロパティが item オブジェクトに直接属している場合は、true を返します。
set、get、および has は、Object の関数を模倣したものです。
