1。概要
JavaScript で最も頻繁に使用されるデータ構造は配列とオブジェクトにほかならず、これらを走査することは日常業務で非常に頻繁に行われます。ES6 では、Set および Map データ構造が追加され、走査方法は類似しています。
実際の作業では、バックグラウンド プログラムがデータベースを読み取ってリスト データを取得し、フロントエンドに戻った後、フロントエンドで商品リスト データなどをレンダリングして表示する必要があります。
- 複数の製品リストは配列を通じて受信され、配列の各要素は製品オブジェクトです。
- 名前、属性、商品の店頭および在庫外の状態、割引の有無などが商品オブジェクトの属性です。
2. 配列 - 配列
配列は、順序付けられた値のコレクションです。配列内の各値は要素と呼ばれ、各要素にはインデックスと呼ばれる配列内の数値位置があります。インデックスは 0 から始まり、順番に増加します。JavaScript では、Array オブジェクトを使用して配列を定義できます。さらに、Array オブジェクトは配列に関連するさまざまなプロパティとメソッドも提供します。
のために
走査の数は配列の長さによって決まります。
let cars = ["Benz", "BMW", "Lexus"];
// 方式1：for
for (let i = 0; i < cars.length; i++) {
console.log(`for遍历下：第 ${
i} 的值： ${
cars[i]}`)
}
それぞれに
let cars = ["Benz", "BMW", "Lexus"];
// 方式2：forEach
cars.forEach(function (value, index) {
console.log(`forEach遍历下：第 ${
index} 的值： ${
value}`)
});
の…
let cars = ["Benz", "BMW", "Lexus"];
// 方式3：for...of...
for (let car of cars) {
console.log(`for...of遍历下： ${
car}`)
}
のために…で
let cars = ["Benz", "BMW", "Lexus"];
// 方式4：for...in
for (let index in cars) {
console.log(`for...in遍历下： ${
cars[index]}`)
}
ES6 - キー()
let cars = ["Benz", "BMW", "Lexus"];
// 方式5：ES6 - keys()
for (let index of cars.keys()) {
console.log(`ES6 - keys 遍历下：第 ${
index} 的值： ${
cars[index]}`)
}
ES6 - 値()
// 方式6：ES6 - values()
for (let car of cars.values()) {
console.log(`ES6 - values 遍历下：${
car}`)
}
ES6 - エントリ()
let cars = ["Benz", "BMW", "Lexus"];
// 方式7：ES6 - entries()
for (let [index, car] of cars.entries()) {
console.log(`ES6 - keys 遍历下：第 ${
index} 的值： ${
car}`)
}
3. オブジェクト - オブジェクト
JavaScript はオブジェクト指向プログラミング言語であり、JavaScript のほとんどすべてがオブジェクトです。したがって、JavaScript を効果的に使用するには、まずオブジェクトがどのように機能するか、およびオブジェクトの作成方法と使用方法を理解する必要があります。
オブジェクトは、それぞれが名前と値 (キーと値のペア) を持つ、順序付けされていないプロパティのコレクションと考えることができます。「JS データ型」セクションから、配列は値のコレクションであり、各値には数値インデックス (0 から始まり、順番に増加する) があることがわかります。オブジェクトは配列に似ていますが、名前 (name)、年齢 (age)、性別 (性別) など、オブジェクト内のインデックスがカスタマイズされる点が異なります。
のために…で…
const benzCarObj = {
"brand": "Benz",
"name": "Benz E300L",
"price": 550000
}
// 方式1: for...in...
for (let attr in benzCarObj) {
console.log(`for...in遍历下的汽车： ${
attr}=> ${
benzCarObj[attr]}`)
}
オブジェクト.キー(obj)
const benzCarObj = {
"brand": "Benz",
"name": "Benz E300L",
"price": 550000
};
// 方式2: Object.keys(obj)
Object.keys(benzCarObj).forEach(function (attr) {
console.log(`Object.keys()遍历下的汽车： ${
attr}=> ${
benzCarObj[attr]}`)
});
Object.getOwnPropertyNames(obj)
const benzCarObj = {
"brand": "Benz",
"name": "Benz E300L",
"price": 550000
};
// 方式3： Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames(benzCarObj).forEach(function (attr) {
console.log(`Object.getOwnPropertyNames()遍历下的汽车： ${
attr}=> ${
benzCarObj[attr]}`)
});
Object.getOwnPropertySymbols(obj)
// 方式4： Object.getOwnPropertySymbols(obj)
let brand = Symbol('brand');
let name = Symbol('name');
let price = Symbol('price');
let bmwCarObj = {
[brand]: "BMW",
[name]: "BMW 530Li",
[price]: 489800
};
let bmwCarObjSymbols = Object.getOwnPropertySymbols(bmwCarObj);
console.log(bmwCarObjSymbols);
Reflect.ownKeys(obj)
const benzCarObj = {
"brand": "Benz",
"name": "Benz E300L",
"price": 550000
};
// 方式5： Reflect.ownKeys(obj)
Reflect.ownKeys(benzCarObj).forEach(function (attr) {
console.log(`Reflect.ownKeys()遍历下的汽车： ${
attr}=> ${
benzCarObj[attr]}`)
});
4. コレクション - セット
ES6 は新しいデータ構造 Set を提供します。配列に似ていますが、メンバーの値はすべて一意であり、重複する値はありません。Set 自体は、Set データ構造を生成するために使用されるコンストラクターです。
Set.prototype.keys()
let carSet = new Set(["Benz", "BMW", "Lexus"]);
// 方式1：Set.prototype.keys()
for (let car of carSet.keys()) {
console.log(`Set.prototype.keys()遍历下的集合元素： ${
car}`)
}
Set.prototype.values()
let carSet = new Set(["Benz", "BMW", "Lexus"]);
// 方式2：Set.prototype.values()
for (let car of carSet.values()) {
console.log(`Set.prototype.values()遍历下的集合元素： ${
car}`)
}
Set.prototype.entries()
let carSet = new Set(["Benz", "BMW", "Lexus"]);
// 方式3：Set.prototype.entries()
for (let [index, car] of carSet.entries()) {
console.log(`Set.prototype.entries()遍历下的集合元素： ${
index} => ${
car}`)
}
forEach()
let carSet = new Set(["Benz", "BMW", "Lexus"]);
// 方式4：forEach()
carSet.forEach((index, car) => {
console.log(`forEach()遍历下的集合元素：${
index} => ${
car}`)
});
5. マッピング - 地図
マップのデータ構造。オブジェクトと似ており、キーと値のペアの集合でもありますが、「キー」の範囲は文字列に限定されず、さまざまな種類の値（オブジェクトを含む）をキーとして使用できます。言い換えれば、Object 構造は「文字列と値」の対応を提供し、Map 構造は「値と値」の対応を提供します。これは、ハッシュ構造のより完全な実装です。「キーと値のペア」データ構造が必要な場合は、Object よりも Map の方が適しています。
Map.prototype.keys()
const carMap = new Map([
['name', 'BMW 530Li'],
['price', 498520],
]);
// 方式1：Map.prototype.keys()
for (let attr of carMap.keys()) {
console.log(`Map.prototype.keys()遍历下的集合元素： ${
attr}`)
}
Map.prototype.values()
const carMap = new Map([
['name', 'BMW 530Li'],
['price', 498520],
]);
// 方式2：Map.prototype.values()
for (let attr of carMap.values()) {
console.log(`Map.prototype.values()遍历下的集合元素： ${
attr}`)
}
Map.prototype.entries()
const carMap = new Map([
['name', 'BMW 530Li'],
['price', 498520],
]);
// 方式3：Map.prototype.entries()
for (let [attr, value] of carMap.entries()) {
console.log(`Map.prototype.entries()遍历下的集合元素： ${
attr} => ${
attr}`)
}
forEach()
const carMap = new Map([
['name', 'BMW 530Li'],
['price', 498520],
]);
// 方式4：forEach()
carMap.forEach((index, car) => {
console.log(`forEach()遍历下的集合元素：${
index} => ${
car}`)
});
6 まとめ
6.1 ブレークアンドコンティニューの問題
- forEach、map、filter、reduce、every、一部の関数では、break および continue キーワードは関数内にあるため有効になりませんが、この関数はクロージャ トラップの問題を解決します。
- Break と continue を使用するには、for、for...in、for...of、while を使用できます。
6.2 使用上の推奨事項
- 配列の走査: for()、forEach()、map()、for...of。
- オブジェクトの走査: 〜中...
参考ドキュメント:
Ruan Yifeng のドキュメントhttps://es6.ruanyifeng.com/#docs/iterator