Iteradores, conjuntos, colecciones de mapas y funciones asincrónicas asíncronas de ES6

Tabla de contenido

Iterador

El papel del iterador

El proceso transversal de Iterator.

Colocar

colección de mapas

¿Cuál es la diferencia entre mapa y objeto?

función asíncrona asíncrona

Iterador

Iterador (Iterador) es uno de esos mecanismos. Es una interfaz que proporciona un mecanismo de acceso unificado para varias estructuras de datos diferentes. Siempre que cualquier estructura de datos implemente la interfaz Iterator, puede completar la operación transversal (es decir, procesar todos los miembros de la estructura de datos en secuencia).

El papel del iterador

Proporcionar una interfaz de acceso unificada y sencilla para diversas estructuras de datos;

Permite organizar los miembros de una estructura de datos en un orden determinado;

ES6 creó un nuevo comando transversal para...of loop, y la interfaz Iterator se utiliza principalmente para el consumo de for...of.

El proceso transversal de Iterator.

Crea un objeto puntero que apunta a la posición inicial de la estructura de datos actual. En otras palabras, el objeto transversal es esencialmente un objeto puntero.
La primera vez que llama al siguiente método de un objeto puntero, puede apuntar el puntero al primer miembro de la estructura de datos.
La segunda vez que se llama al siguiente método del objeto puntero, el puntero apunta al segundo miembro de la estructura de datos.
Continúe llamando al siguiente método del objeto puntero hasta que apunte al final de la estructura de datos.

/**
 * 数组 keys values entries
 * 方法全部返回迭代器对象 就可以使用 for of遍历
 * 迭代器接口本质就是调用迭代器对象的next方法   指针 
 *          调用next方法会依次指向内部成员
 */
let arr = [1,2,3,4,5];
let keys = arr.keys();
let values = arr.values();
let entries = arr.entries();
console.log(keys.next());   //{ value: 0, done: false }
console.log(keys.next());   //{ value: 1, done: false }
console.log(keys.next());   //{ value: 2, done: false }
console.log(keys.next());   //{ value: 3, done: false }
console.log(keys.next());   //{ value: 4, done: false }
console.log(keys.next());   //{ value: undefined, done: true }
// console.log(values.next());
// console.log(entries.next());
// let result;
// while(!(result = keys.next()).done){
//     console.log(result.value);  //这里用keys.next() 会再次执行一次
// }


console.log(keys,values,entries);
for(let key of keys){
    console.log(key,'key');
}
for(let value of values){
    console.log(value,'value');
}
for(let entry of entries){
    console.log(entry,'entry');
}

function test(){
    // arguments 是迭代器对象
    for(let key of arguments){
        console.log(key);
    }
}
test('1','2',3,4,5)

Las estructuras de datos con interfaz nativa Iterator son las siguientes:
Array, Map, Set, String, TypedArray, arguments, NodeList

También podemos convertir el tipo de datos que no era iterable en iterable, para que pueda admitir bucles for...of, como objct. Si ejecutamos for...of directamente en el objeto, definitivamente ocurrirá un error:


let obj = {
    name:'zhangsan',
    age:12
}

for(let key of obj){         //报错 obj is not iterable
    console.log(key);
}

let obj = {
    name:'zhangsan',
    age:12
}

// for(let key of obj){         //报错 obj is not iterable
//     console.log(key);
// }
let keys = Object.keys(obj);
console.log(keys);
for(let key of keys){
    console.log(key);
}

Colocar

Set es similar a una matriz, pero los valores de sus miembros son únicos y no hay valores duplicados. Set en sí es un constructor utilizado para generar la estructura de datos Set. El constructor Set puede aceptar una matriz (u otra estructura de datos con una interfaz iterable) como parámetro para la inicialización.

/**
 * set集合
 *  特点:内部成员值是唯一的
 *  参数:无或者实现了迭代器接口的数据结构 数组 字符串
 * 创建使用set构造函数 new Set() typeof
 */
let set = new Set();
// console.log(set,typeof(set),set instanceof Object);
// 添加内部成员 add
// 注意:如果是基本数据类型相同的值添加两次会自动去重 
//      如果是引用数据类型 会添加多次 (引用地址不同)
set.add('hello');
set.add('world');
set.add('hello');
let arr1 = [];
set.add(arr1);
set.add([]);
console.log(set);

// 删除内部成员delete
// 注意:删除引用数据类型的时候如果是内容则无法删除 是指向地址的变量则可以删除
set.delete([]); //无法删除
set.delete(arr1);   //可以删除
console.log(set);

// 遍历set集合
console.log(set.keys());
console.log(set.values());
console.log(set.entries());
for(let key of (set.keys())){
    console.log(key);
}
set.forEach((key,value)=>{
    console.log(key,value);
})

/**
 * has 检验set集合有没有该内部成员
 * 引用数据类型最好放引用地址
 */
console.log(set.has('hello'));
console.log(set.has([]));

/**
 * 属性
 * 查看set内部成员个数 size
 */
console.log(set.size);
let obj = {};
set.add(obj);
console.log(set.size);

/**
 * 应用 数组去重 set
 */
let set1 = new Set([1,2,3,4,3,2,1]);
console.log(set1);
let res1 = Array.from(set1);
console.log(res1);
console.log(set1[0]);
let res2 = Array.prototype.slice.call(set1,0);
console.log(res2);

let res3 = [...set1];
console.log(res3);

let set2 = new Set('hello');
console.log(set2);

colección de mapas

El mapa es similar a un objeto y también es una colección de pares clave-valor, pero el alcance de las "claves" no se limita a cadenas. Se pueden utilizar varios tipos de valores (incluidos objetos) como claves. En otras palabras, la estructura del Objeto proporciona correspondencia "valor-cadena" y la estructura del Mapa proporciona 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. Map puede aceptar una matriz como parámetro. Los miembros de esta matriz son matrices que representan pares clave-valor.

/**
 * 键值对的一种数据结构 键可以是任意数据类型
 */
let obj = {
    name:'zhangsan',
    age:12,
    [Symbol('email')]:"[email protected]",
}
obj[{}] = 1;        //期望出现{} =>1 结果出现'[object Object]' => 1
let res = Object.entries(obj);
let map = new Map(res);
console.log(map,typeof map,map instanceof Object);
map.set({},1);
map.set([],function(){});
map.set(undefined,'hello');
console.log(map);
/**
 * 遍历map keys values entries forEach
 */
console.log(map.keys());
console.log(map.values());
console.log(map.entries());

for(let key of map){
    console.log(key,'22222');
}

map.forEach((key,value)=>{
    console.log(key,value);
})

map.forEach((key,value)=>{
    console.log(value,key,'value是值,key是键');
})

console.log(map.size);
// 删除某一个属性
map.delete('name');
console.log(map);
// 获取属性键对应的值
console.log(map.get('age'));
console.log(Map.prototype);
console.log(Set.prototype);

¿Cuál es la diferencia entre mapa y objeto?

1. La clave del mapa puede ser cualquier tipo de datos y la clave del objeto solo puede ser una cadena o un valor de símbolo.
2. El mapa se puede recorrer usando for...of, que implementa la interfaz del iterador.
3. El objeto solo puede Se puede atravesar usando el bucle for in porque no está implementado. La interfaz del iterador
4.map puede llamar directamente al método forEach para atravesar
5. El número de pares clave-valor del mapa se puede obtener directamente a través del atributo de tamaño, y el objeto necesita para obtener manualmente
6.map es más adecuado para pares clave-valor, y se han realizado algunas optimizaciones para la eliminación frecuente del mapa
7. Los pares clave-valor internos del mapa están ordenados, pero los atributos del objeto no están ordenados.

función asíncrona asíncrona

Una función asíncrona es una función declarada utilizando la palabra clave async. Una función asíncrona es una instancia del constructor AsyncFunction y la palabra clave await está permitida dentro de ella. Las palabras clave async y await nos permiten escribir comportamientos asincrónicos basados en promesas de una manera más concisa sin encadenar promesas deliberadamente.

La palabra clave await solo es válida dentro de funciones asíncronas. Si lo usa fuera del cuerpo de una función asíncrona, se generará un error de sintaxis. El propósito de async/await es simplificar la sintaxis requerida cuando se utilizan API basadas en promesas. async/await se comporta como una combinación de generadores y promesas. La función asíncrona debe devolver un objeto de promesa. Si el valor de retorno de una función asíncrona no parece ser una promesa, estará implícitamente envuelto en una promesa.

En pocas palabras, es una función, que es una solución de programación asincrónica. Encapsula internamente la función generadora, que es un azúcar sintáctico. Tiene su propio ejecutor y se usa junto con await, programación asincrónica y procesamiento sincrónico.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
</head>

<body>
    <script>
        async function getFindAll() {
            try {
                let res = await axios.get('http://121.199.0.35:8888/index/carousel/findAll');
                console.log(res);
            } catch {
                throw new Error('请求失败')
            } finally {
                console.log('请求完成');
            }
        }
        getFindAll();
    </script>
</body>

</html>