ES6中的迭代器和set、map集合

什么是迭代器?

一种机制,也是一种接口,为数据结构提供统一访问接口,依次处理数据据结构成员 
  只要实现了迭代器接口,就可以使用for...of循环遍历。

/*** 迭代器是一种机制 是一种接口 只要数据解构实现了接口 就可以使用for ...of遍历*/
// 遍历字符串  str = 'hello'
/*** 1.for 循环* 2.for in循环 * 3.split('')* 4.Array.from()* 5.Array.prototype.slice.call(str,0)* 6.[...res] = str;* 7.for of循环遍历字符串*/
let str = 'hello';
for(let key of str){console.log(key);
}for(let i=0;i<str.length;i++){console.log(i,str[i])
}
for(let key in str){console.log(key,str[key]);
}


  迭代器本质就是迭代器对象调用next方法,迭代对象理解为指针对象,指针指向数据结构成员
  第一次调用指向第一个成员 依次调用指向后面成员 。

let arr = ['terry','larry','ronda','jacky','briup'];
let keys = arr.keys();//返回值是迭代器对象 实现了迭代器接口 for ...of遍历 
let values = arr.values();
let entries = arr.entries();
console.log(keys,values,entries);
// console.log(keys);
/*** 迭代器本质就是迭代器对象调用得next方法 迭代器对象创建一个指针 指向数据结构首位成员位置* 第一次调用指向第一个成员 依次调用依次指向后面成员*/
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 }
let result;
while(!(result=keys.next()).done){console.log(result)
}
for(let key of keys){console.log(key);
}
for(let value of values){console.log(value);
}
for(let entry of entries){console.log(entry);
}
console.log(values.next());
console.log(entries.next());function foo(){for(let key of arguments){console.log(key);}
}
foo(1,2,3,4)
let arr1 = [1,2,3,4];
for(let key of arr1){console.log(key,'222');
}
let obj = {name:'zhangsan',age:12,gender:'male'
}
for(let key of obj){console.log(key,'333');
}

set集合 

  类似于数组,特点内部成员不会重复,Set构造函数创建set集合,接收参数实现了迭代器接口数据结构
          key和value一致

  1.添加成员

  set.add('hello')
  set.add(10)
  set.add(null);
  set.add('hello');//不会被添加 
  set.add([]);
  set.add([]);//会被依次添加

  2.删除成员 

  set.delete('hello');
  set.delete(arr);

  3.清空成员

  set.clear();

  4.遍历成员 

  set.forEach((key,value)=>{

  })

  5.keys  获取key值组成数组

    values 获取value值组成数组
    entries 获取key value组成数组

  6.获取成员个数 

  set.size 

  7.检测set有没有次成员 

  set.has('hello');

  可以用set来进行数组去重复 
/*** set 类似于数组  使用Set构造函数创建  key和value是一致得* 特点:成员的值都是唯一得 参数:数组或者实现了迭代器接口对象*/
// let set = new Set([1,2,3,4,3,2,1]);
// let set1 = new Set('hello');
// // let set2 = new Set({name:'zhangsan'});报错 
// console.log(set,set1);
let set = new Set();
// 添加成员 add
set.add('hello');
set.add(10);
set.add('hello');
let arr = [];
set.add(arr);
set.add([]);
// console.log(set);
// 删除成员 delete 
// console.log(set.delete('hello'));
// console.log(set.delete(arr));
// console.log(set);// keys values entries 
// console.log(set.keys());
// console.log(set.values());
// console.log(set.entries());
// for(let key of set.keys()){
//   console.log(key);
// }// forEach 遍历set集合
// set.forEach((key,value)=>{
//   console.log(key,value)
// })// 返回set成员个数
// console.log(set.size,'返回成员个数');
// 判断set集合中有没有这个成员
// console.log(set.has(null))
// 清空set成员
// set.clear();
// console.log(set)// set应用 数组去重 
let set1 = new Set([1,2,3,4,5,4,3,2,1]);
console.log(Array.from(set1));
console.log([...set1])

map集合 

  类似于对象,也是键值对形式得数据结构,键可以是任意数据类型,实现了迭代器接口 
  let map = new Map();//接收参数数组 键值对组成数组

  1.添加键值对 

  map.set(funtion(){},null);
  map.set(1,1);

  2.删除一个属性

  map.delete(1)

  3.keys values entries 

  keys返回得是键迭代器对象
  values返回的是值迭代器对象
  entries返回得键值对迭代器对象

  4.forEach

  map.forEach((value,key)=>{

  })

  5.size 

  map.size 获取键值对个数

  6.获取属性 

  map.get(键)

/*** 对象键只能是string类型和symbol类型* Map类似于对象 */
// let obj = {
//   name:'zhangsan',
//   null:'hello',
//   [Symbol('email')]:'xxxx.com'
// }
let obj = {name:'zhangsan',age:12
}
// console.log(Object.entries(obj));
let map = new Map(Object.entries(obj));
// 添加成员 set
map.set({name:'map'},'hello');
let foo = function(){}
map.set(foo,null);
// console.log(map);// 删除成员 
// map.delete('name');
// map.delete(foo);
// console.log(map);// 获取成员键所对应的值
console.log(map.get('age'));
console.log(map.get(foo));console.log(map.size);//获取成员个数 console.log(map.keys());//获取键组成迭代器对象 
console.log(map.values());//获取值组成迭代器对象
console.log(map.entries());//获取键和值组成迭代器对象// 遍历map
map.forEach((value,key)=>{console.log(value,key)
})
console.log(Map.prototype.get,Set.prototype);

对象和map区别?

1.对象键只能是symbol值或者字符串,map键可以是任意数据类型
2.map属性是有序得,按照插入键得顺序依次返回,对象属性无序的,但是也保留字符串或symbol值得插入顺序
3.map键值对个数可以通过size获取,对象键值对个数只能手动计算
4.map实现了迭代器接口,可以直接使用for...of遍历,对象没有实现迭代器接口,无法直接for..of遍历但是对象可以调用keys,values,entries得到数组进行遍历
5.都是引用数据类型,都有原型对象

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/213591.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣labuladong一刷day36天

力扣labuladong一刷day36天 一、96. 不同的二叉搜索树 题目链接&#xff1a;https://leetcode.cn/problems/unique-binary-search-trees/ 思路&#xff1a;这是一道典型的动态规划题&#xff0c;从n3来看 子树有几种形态 (0, 2)、(1, 1)、(2, 0)有规律可循&#xff0c;即为左…

飞天使-linux操作的一些技巧与知识点4

文章目录 ansible配置文件的优先级尝试开始进行操作ansible常用模块ansible 的playbook示例安装phpplaybook中变量的引用 ansible yum install -y ansible 测试是否可用 ansible localhost -m ping /etc/ansible/ansible.cfg &#xff1a;主配置文件&#xff0c;配置 ansible…

大公司求我用Kotlin写个通用爬虫模板

bug虐我千百遍&#xff0c;我待他如初恋。每次深夜挑灯都是我与bug较量的时间。今天我要说的就是写一个爬虫模版&#xff0c;自动抓取百度图片的教程&#xff0c;这次使用Kotlin编写的爬虫程序在Scrapy框架下完成的&#xff0c;如有不足欢迎指正。 首先&#xff0c;使用Kotlin编…

Mybatis-Plus源码解析之@MapperScan(一)

group : com.baomidou version:3.5.2.2-SNAPSHOT baomidou官网可以从快速开始了解到&#xff0c;除了配置数据源&#xff0c;最重要的就是MapperScan 注解&#xff0c;在 Spring Boot 启动类中添加 MapperScan 注解&#xff0c;扫描 Mapper 文件夹。 MapperScan 按照惯例&…

angular form 组件、双向绑定;反应式表单

1.使用双向绑定&#xff0c;以及angular的表单提交功能 app.moudle中引入 双向绑定 [(ngModel)]"text" ​​​​​​​ 效果 提交表单 2.反应式表单 在app.module.ts中引入在组件中引入&#xff0c;并放在一个变量里 在初始化时实列化这个module 定义规则 在html…

Linux:环境变量

目录 1.基本变量 2.通过代码获取环境变量 2.1 main传参 2.2 全局变量environ 2.3 系统调用getenv() 3.在脚本文件中添加环境变量 4.环境变量通常是具有全局属性 1.基本变量 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数…

商用中央空调市场分析:预计2028年将达到628亿元

商用空调一直以来都没有一个相对比较明确的概念&#xff0c;一直以来被认为是制冷空调市场的一个细分子行业。现在比较一致的观点是&#xff0c;可以纳入商用空调范畴的产品可以包括户式中央空调产品、部分传统中央空调产品以及部分家用空调。商用空调已普遍采用直流变频领先技…

网络计算机模拟实现

今天给大家说说前几天完成的一个模拟的网络计算机吧&#xff0c;虽然计算机的模拟实现的原理很简单&#xff0c;但是如果要想写乘网络的&#xff0c;个人认为是不简单的。基本上算是包涵了套接字编程的三分之一的知识点&#xff0c;此处的套接字编程指的是在理解TCP/IP五层协议…

泡沫玻璃市场分析:预计2028年将达到14亿美元

泡沫玻璃最早是由美国匹兹堡康宁公司发明的&#xff0c;是由碎玻璃、发泡剂、改性添加剂和发泡促进剂等&#xff0c;经过细粉碎和均匀混合后&#xff0c;再经过高温熔化&#xff0c;发泡、退火而制成的无机非金属玻璃材料。它是由大量直径为1~2毫米的均匀气泡结构组成。其中吸声…

Linux 常用命令----mktemp 命令

文章目录 基本用法实例演示高级用法注意事项 mktemp 命令用于创建一个临时文件或目录&#xff0c;这在需要处理临时数据或进行安全性测试时非常有用。使用 mktemp 可以保证文件名的唯一性&#xff0c;避免因文件名冲突而导致的问题。 基本用法 创建临时文件: 命令 mktemp 默认…

Go语言基础知识学习(一)

Go基本数据类型 bool bool型值可以为true或者false,例子&#xff1a; var b bool true数值型 类型表示范围int8有符号8位整型-128 ~ 127int16有符号16位整型-32768 ~ 32767int32有符号32位整型-2147783648 ~ 2147483647int64有符号64位整型uint8无符号8位整型0 ~ 255uint16…

优思学院|如何建立公司运营指标体系?如何推行六西格玛改进运营指标?

关键绩效指标 (KPI) 是测量您团队或组织朝重要商业目标进展表现如何的量化指标&#xff0c;组织会在多个层面使用 KPI&#xff0c;这视乎您想要追踪何指标而定&#xff0c;您可以设定全组织的、特定团队的、或甚至是个人 KPI。 良好的KPI能让公司管理者掌握组织的营运是否进度…

使用React 18、Echarts和MUI实现温度计

关键词 React 18 Echarts和MUI 前言 在本文中&#xff0c;我们将结合使用React 18、Echarts和MUI&#xff08;Material-UI&#xff09;库&#xff0c;展示如何实现一个交互性的温度计。我们将使用Echarts绘制温度计的外观&#xff0c;并使用MUI创建一个漂亮的用户界面。 本文…

点评项目——分布式锁

2023.12.10 集群模式下的并发安全问题及解决 随着现在分布式系统越来越普及&#xff0c;一个应用往往会部署在多台机器上&#xff08;多节点&#xff09;&#xff0c;通过加锁可以解决在单机情况下的一人一单安全问题&#xff0c;但是在集群模式下就不行了。见下图&#xff1a…

在 Android WebView 中实现和 JavaScript 的互操作

前言 在 APP 中内嵌一个 H5 来实现特定的业务功能已经是非常成熟且常用的方案了。 虽然 H5 已经能够实现大多数的需求&#xff0c;但是对于某些需求还是得依靠原生代码来实现然后与 JavaScript 进行交互&#xff0c;例如我目前所负责的项目就是一个 “智能硬件” 设备&#x…

【PyTorch】卷积神经网络

文章目录 1. 理论介绍1.1. 从全连接层到卷积层1.1.1. 背景1.1.2. 从全连接层推导出卷积层 1.2. 卷积层1.2.1. 图像卷积1.2.2. 填充和步幅1.2.3. 多通道 1.3. 池化层&#xff08;又称汇聚层&#xff09;1.3.1. 背景1.3.2. 池化运算1.3.3. 填充和步幅1.3.4. 多通道 1.4. 卷积神经…

实现React18加TS,解决通用后台管理系统,实战方案落地有效实践经验

随着前端技术的不断发展和更新&#xff0c;使用React 18结合TypeScript&#xff08;TS&#xff09;来构建通用后台管理系统已成为一种常见的选择。本文将介绍如何在项目中应用React 18和TS&#xff0c;并分享一些实战方案的有效实践经验。 一、搭建React 18 TS项目 首先&…

12.2每日一题(1无穷型幂指函数:二倍角公式+三部曲+等价无穷小代换(只有整体的因子不为0才能先算出来))

注意&#xff1a;求极限不能想先算哪里就先算哪里&#xff0c;只有整体的因子不为0才能先算出来&#xff0c;部分不为0不可以先算

外贸老业务也棘手的一个问题

这几天有2个老业务都被一个类同的问题缠住了。 客户定购了三台车&#xff0c;由于是非常规要求所以我建议收取全款或者最少收50%的定金。但是业务员为了当月业绩或者为了拿到就收了客户20% 或者30% &#xff0c;定金收到了&#xff0c;我也不好再逼着业务员去加收定金。 订单就…

记录 | ubuntu上安装fzf

在 ubuntu 上采用命令行安装 fzf 的方式行不通 指的是采用下面的方式行不通&#xff1a; sudo apt install fzf # 行不通 sudo snap install fzf --classic # 行不通正确的安装方式是&#xff1a; ● 到 fzf 的 git 仓库&#xff1a;https://github.com/junegunn/fzf/re…