Directorio de artículos
1. Información general
Las estructuras de datos más utilizadas en JavaScript no son más que Array y Object, y recorrerlas es muy frecuente en el trabajo diario. En ES6, se agregan las estructuras de datos Set y Map, y los métodos transversales son similares.
En el trabajo real, el programa en segundo plano lee la base de datos para obtener datos de la lista y, después de regresar al front-end, el front-end necesita renderizar y mostrar, como los datos de la lista de productos:
- Se reciben varias listas de productos a través de una matriz y cada elemento de la matriz es un objeto de producto.
- El nombre, atributo, estado del producto dentro y fuera del lineal, si tiene descuento, etc. son los atributos del objeto del producto.
2. Matriz - Matriz
Una matriz es una colección ordenada de valores. Cada valor de la matriz se denomina elemento y cada elemento tiene una posición numérica en la matriz, denominada índice. El índice comienza en 0 y aumenta secuencialmente. En JavaScript, puede utilizar el objeto Array para definir una matriz. Además, el objeto Array también proporciona varias propiedades y métodos relacionados con la matriz.
para
El número de recorridos está determinado por la longitud de la matriz.
let cars = ["Benz", "BMW", "Lexus"];
// 方式1：for
for (let i = 0; i < cars.length; i++) {
console.log(`for遍历下：第 ${
i} 的值： ${
cars[i]}`)
}
para cada
let cars = ["Benz", "BMW", "Lexus"];
// 方式2：forEach
cars.forEach(function (value, index) {
console.log(`forEach遍历下：第 ${
index} 的值： ${
value}`)
});
para… de…
let cars = ["Benz", "BMW", "Lexus"];
// 方式3：for...of...
for (let car of cars) {
console.log(`for...of遍历下： ${
car}`)
}
para…en
let cars = ["Benz", "BMW", "Lexus"];
// 方式4：for...in
for (let index in cars) {
console.log(`for...in遍历下： ${
cars[index]}`)
}
ES6 - claves()
let cars = ["Benz", "BMW", "Lexus"];
// 方式5：ES6 - keys()
for (let index of cars.keys()) {
console.log(`ES6 - keys 遍历下：第 ${
index} 的值： ${
cars[index]}`)
}
ES6 - valores()
// 方式6：ES6 - values()
for (let car of cars.values()) {
console.log(`ES6 - values 遍历下：${
car}`)
}
ES6 - entradas()
let cars = ["Benz", "BMW", "Lexus"];
// 方式7：ES6 - entries()
for (let [index, car] of cars.entries()) {
console.log(`ES6 - keys 遍历下：第 ${
index} 的值： ${
car}`)
}
3. Objeto - Objeto
JavaScript es un lenguaje de programación orientado a objetos y casi todo en JavaScript es un objeto. Por lo tanto, para utilizar JavaScript de forma eficaz, primero es necesario comprender cómo funcionan los objetos y cómo crearlos y utilizarlos.
Podemos pensar en un objeto como una colección desordenada de propiedades, cada una de las cuales tiene un nombre y un valor (par clave/valor). Sabemos por la sección "Tipos de datos JS" que una matriz es una colección de valores y que cada valor tiene un índice numérico (comenzando desde cero y aumentando en secuencia). Un objeto es similar a una matriz, excepto que el índice del objeto está personalizado, como nombre (nombre), edad (edad), género (sexo), etc.
para… en…
const benzCarObj = {
"brand": "Benz",
"name": "Benz E300L",
"price": 550000
}
// 方式1: for...in...
for (let attr in benzCarObj) {
console.log(`for...in遍历下的汽车： ${
attr}=> ${
benzCarObj[attr]}`)
}
Objeto.claves(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]}`)
});
Objeto.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]}`)
});
Objeto.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);
Reflejar.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. Colección - Conjunto
ES6 proporciona un nuevo conjunto de estructuras de datos. Es similar a una matriz, pero los valores de los miembros son todos únicos y no hay valores duplicados. Set en sí es un constructor utilizado para generar la estructura de datos Set.
Establecer.prototipo.claves()
let carSet = new Set(["Benz", "BMW", "Lexus"]);
// 方式1：Set.prototype.keys()
for (let car of carSet.keys()) {
console.log(`Set.prototype.keys()遍历下的集合元素： ${
car}`)
}
Establecer.prototipo.valores()
let carSet = new Set(["Benz", "BMW", "Lexus"]);
// 方式2：Set.prototype.values()
for (let car of carSet.values()) {
console.log(`Set.prototype.values()遍历下的集合元素： ${
car}`)
}
Establecer.prototipo.entradas()
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}`)
}
para cada()
let carSet = new Set(["Benz", "BMW", "Lexus"]);
// 方式4：forEach()
carSet.forEach((index, car) => {
console.log(`forEach()遍历下的集合元素：${
index} => ${
car}`)
});
5. Mapeo - Mapa
Estructura de datos del mapa. Es similar a un objeto y también es una colección de pares clave-valor, pero el alcance de la "clave" no se limita a cadenas y se pueden utilizar varios tipos de valores (incluidos objetos) como claves. En otras palabras, la estructura del Objeto proporciona una correspondencia "valor-cadena", y la estructura del Mapa proporciona una correspondencia "valor-valor", que es una implementación más completa de la estructura Hash. Si necesita una estructura de datos de "par clave-valor", Map es más adecuado que Object.
Mapa.prototipo.claves()
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}`)
}
Mapa.prototipo.valores()
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}`)
}
Mapa.prototipo.entradas()
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}`)
}
para cada()
const carMap = new Map([
['name', 'BMW 530Li'],
['price', 498520],
]);
// 方式4：forEach()
carMap.forEach((index, car) => {
console.log(`forEach()遍历下的集合元素：${
index} => ${
car}`)
});
6 Resumen
6.1 El problema de interrumpir y continuar
- En forEach, mapear, filtrar, reducir, cada, algunas funciones, las palabras clave break y continue no tendrán efecto porque están en la función, pero la función resuelve el problema de la trampa de cierre.
- Para usar pausa y continuar, puede usar for, for...in, for...of, while.
6.2 Recomendaciones de uso
- Atravesando una matriz: for(), forEach(), map(), for...of.
- Atravesar objetos: para...en...
Documento de referencia:
documento de Ruan Yifeng https://es6.ruanyifeng.com/#docs/iterator