零、文章目录

文章地址

• 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
• 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

• Gitee：https://gitee.com/bluecusliyou/TechLearn
• Github：https://github.com/bluecusliyou/TechLearn

JavaScript基础四、集合类型

1、Map

（1）Map是什么

• Map 是一组键值对的结构，具有极快的查找速度。

（2）Map基本使用

• Map声明：var m = new Map()

• Map操作：

  • 增：m.set(key,value)，存在就被修改，不存在就添加

  • 删：m.delete(key)

  • 改：m.set(key,value)，存在就被修改，不存在就添加

  • 查：m.get(key)

  • 存在：m.has(key)

• 注意事项：由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值覆盖

案例如下：

2、Set

• Set 是一组key的集合，在 Set 中，没有重复的key。
• 重复元素在 Set 中自动被过滤
• 添加key：add(key)
• 删除key：delete(key)

案例如下：

3、Array

（1）数组是什么

• 数组：(Array)是一种可以按顺序保存数据的引用数据类型。
• 场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

（2）数组基本使用

• 声明语法
  • 数组是按顺序保存，所以每个数据都有自己的编号
  • 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
  • 在数组中，数据的编号也叫索引或下标
  • 数组可以存储任意类型的数据

• 数组长度：

  • 获取数组长度arr.length
  • 直接修改数组长度：arr.length=newlength，这个会引起数组的变化，一般不建议这样操作，防止索引越界数据丢失等情况。

• 一些术语

  • **元素：**数组中保存的每个数据都叫数组元素

  • **下标：**数组中数据的编号

  • **长度：**数组中数据的个数，通过数组的length属性获得

• 操作数组：数组本质是数据集合， 操作数据无非就是 增 删 改 查

案例如下：

（3）修改：数组[下标]=新值

案例如下：

（4）新增：push、unshift

• arr.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
• arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

案例如下：

（5）删除：pop、shift、splice

• arr. pop() 方法从数组中删除最后一个元素，并返回该元素的值

• arr. shift() 方法从数组中删除第一个元素，并返回该元素的值

• arr. splice(start,deleteCount) 方法 删除指定元素

  • start：指定修改的开始位置（从0计数）

  • deleteCount：表示要移除的数组元素的个数，可选， 如果省略则默认从指定的起始位置删除到最后

案例如下：

（6）排序：sort

• arr. sort() ：默认排序规则
• 可以传入排序规则实现自定义排序

案例如下：

（7）查索引：indexOf

• indexOf(内容)：返回元素在数组中的索引

案例如下：

（8）截取：slice

• arr.slice(start, end)：返回索引start到end的新数组，不包含end
• arr.slice(start)：返回索引start到数组结束的新数组

（9）拼接：concat

• arr.concat(newArrary):arr拼接数组newArrary，返回一个拼接后的新数组，不会影响源数组

案例如下：

（10）翻转：reverse

• arr.reverse()，返回新数组

案例如下：

（11）数组拼接字符串：join

• arr.join('指定字符') 方法是一个非常实用的方法，它把当前 Array 的每个元素都用指定的字符串连接起来，然后返回连接后的字符串

案例如下：

4、Iterable

• 遍历 Array 可以采用下标循环，遍历Map 和 Set 就无法使用下标。
• 为了统一集合类型，ES6标准引入了新的 iterable 类型，Array，Map，Set 属于继承 iterable 类型的集合可以通过新的 for … of 循环来遍历。
• 更好的方式是直接使用 iterable 内置的 forEach 方法，它接收一个函数，每次迭代就自动回调该函数。
  • forEach() 方法是ES5.1标准引入的，你需要测试浏览器是否支持。
  • Set 没有索引，因此回调函数的前两个参数都是元素本身
  • Map 的回调函数参数依次为 value 、 key 和 map 本身

案例如下：