JavaScript 字典 取值 javascript字典遍历

文章目录

• 1. 概述
• 2. 数组 - Array

• for
• forEach
• for...of...
• for...in
• ES6 - keys()
• ES6 - values()
• ES6 - entries()

• 3. 对象 - Object

• for...in...
• Object.keys(obj)
• Object.getOwnPropertyNames(obj)
• Object.getOwnPropertySymbols(obj)
• Reflect.ownKeys(obj)

• 4. 集合 - Set

• Set.prototype.keys()
• Set.prototype.values()
• Set.prototype.entries()
• forEach()

• 5. 映射 - Map

• Map.prototype.keys()
• Map.prototype.values()
• Map.prototype.entries()
• forEach()

• 6 总结

• 6.1 break 和 Continue 问题
• 6.2 使用推荐

1. 概述

JavaScript中使用的最频繁的数据结构无非就是 Array和Object，在日常的工作当中遍历它们是非常频繁的。在ES6中新增了Set和Map数据结构，遍历方式也大同小异。
在实际的工作中，后台程序读取数据库获取列表数据，返回给前端之后，前端要进行渲染展示，比如商品列表数据：

• 多个商品列表，通过数组接收，数组每一个元素都是商品对象。
• 商品的名称、属性、上下架状态、是否打折等就是商品对象的各个属性。

2. 数组 - Array

数组是值的有序集合，数组中的每个值称为一个元素，每个元素在数组中都有一个数字位置，称为索引，索引从 0 开始，依次递增。在 JavaScript 中，您可以使用 Array 对象定义数组，此外，Array 对象中还提供了各种有关数组的属性和方法。

for

遍历的次数由数组的长度决定。

let cars = ["Benz", "BMW", "Lexus"];
// 方式1：for
    for (let i = 0; i < cars.length; i++) {
        console.log(`for遍历下：第 ${i} 的值： ${cars[i]}`)
    }

forEach

let cars = ["Benz", "BMW", "Lexus"];
// 方式2：forEach
	cars.forEach(function (value, index) {
		console.log(`forEach遍历下：第 ${index} 的值： ${value}`)
	});

for…of…

let cars = ["Benz", "BMW", "Lexus"];
// 方式3：for...of...
	for (let car of cars) {
		console.log(`for...of遍历下： ${car}`)
	}

for…in

let cars = ["Benz", "BMW", "Lexus"];
// 方式4：for...in
    for (let index in cars) {
		console.log(`for...in遍历下： ${cars[index]}`)
    }

ES6 - keys()

let cars = ["Benz", "BMW", "Lexus"];
// 方式5：ES6 - keys()
    for (let index of cars.keys()) {
		console.log(`ES6 - keys 遍历下：第 ${index} 的值： ${cars[index]}`)
    }

ES6 - values()

// 方式6：ES6 - values()
	for (let car of cars.values()) {
		console.log(`ES6 - values 遍历下：${car}`)
	}

ES6 - entries()

let cars = ["Benz", "BMW", "Lexus"];
// 方式7：ES6 - entries()
	for (let [index, car] of cars.entries()) {
		console.log(`ES6 - keys 遍历下：第 ${index} 的值： ${car}`)
	}

3. 对象 - Object

JavaScript 是一种面向对象的编程语言，在 JavaScript 中几乎所有的东西都是对象。因此，要想有效的使用 JavaScript，首先需要了解对象的工作原理以及如何创建并使用对象。

我们可以将对象看作是一个属性的无序集合，每个属性都有一个名称和值（键/值对）。通过《JS数据类型》一节我们知道，数组是值的集合，每个值都有一个数字索引（从零开始，依次递增）。对象类似与数组，不同的是对象中的索引是自定义的，例如 name（姓名）、age（年龄）、gender（性别）等。

for…in…

const benzCarObj = {
        	"brand": "Benz",
            "name": "Benz E300L",
            "price": 550000
        }
// 方式1: for...in...
    for (let attr in benzCarObj) {
    	console.log(`for...in遍历下的汽车： ${attr}=> ${benzCarObj[attr]}`)
    }

Object.keys(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. 集合 - Set

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. 映射 - Map

Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

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 break 和 Continue 问题

• 在 forEach、map、filter、reduce、every、some 函数中 break 和 continue 关键词都会不生效，因为是在function中，但function解决了闭包陷阱的问题。
• 要使用 break、continue 可以使用 for、for…in、for…of、while。

6.2 使用推荐

• 遍历数组：for()，forEach()，map()，for…of 。
• 遍历对象：for…in…