第三讲_JavaScript的集合容器

1. Array

Array 对象支持在单个变量名下存储多个元素。

• JavaScript 数组是可调整大小的，并且可以包含不同的数据类型。
• JavaScript 数组的索引从 0 开始。
• JavaScript 数组允许重复元素

1.1 创建数组的两种方式

• 通过[]创建

let arr = ['张三', '李四', '王五'];

• 通过new关键字创建

let arr = new Array('张三', '李四', '王五');

1.2 数组常用的属性

• length：返回数组的元素长度

1.3 数组常用的方法

• push()：添加元素到数组的尾部
• unshift()：添加元素到数组的首端
• pop()：移除数组中尾部的一个元素
• shift()：移除数组中首端的一个元素
• splice(startIndex, deleteCount)：从指定索引开始删除并指定删除元素数量，用一个数组返回删除的元素
• splice(startIndex, deleteCount, element1, element2)：从指定索引开始删除并指定删除元素数量，再指定一个或多个元素替换删除的元素，用一个数组返回删除的元素
• indexOf()：查找元素的索引
• map()：映射器
• filter()：过滤器
• reduce()：累加器

const arr = [1, 3, 5, 7, 9];

// 对元素进行处理后，返回一个新数组
const newArr = arr.map((element) => {
    return element + "hello";
})

// 对元素进行过滤后，返回一个新数组
const newArr = arr.filter((element => {
    return element > 3;
}));

// 累计器，返回累计处理的结果
// 下面操作即将数组元素累加，没有指定accumulator的初始值，它的初始值为数组第一个元素
const result = arr.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
})
// 下面操作即将数组元素累加，但指定了accumulator的初始值为0
const result = arr.reduce((accumulator, currentValue, 0) => {
    return accumulator + currentValue;
})

1.4 数组遍历的四种方式

 let arr = ['张三', '李四', '王五']
 // 数组遍历方式一
 for(let i = 0; i < arr.length; i++) {
   console.log(arr[i]);
 }

 let arr = ['张三', '李四', '王五']
 // 数组遍历方式二
 arr.forEach(item => {
   console.log(item)
 })

 let arr = ['张三', '李四', '王五']
 // 数组遍历方式三
 for(index in arr) {
   console.log(arr[index])
 }

 let arr = ['张三', '李四', '王五']
 // 数组遍历方式四
 for(item of arr) {
   console.log(item)
 }

2. Set

Set 对象允许存储任何类型的唯一值。

• Set中的元素只会出现一次
• 可以按照插入顺序迭代集合中的元素

2.1 创建Set集合

let set = new Set();

2.2 Set常用的属性

• size：返回集合中元素的个数

2.3 Set常用的方式

• add()：添加一个元素在集合尾部
• delete()：删除指定元素
• has()：集合中是否有指定元素
• clear()：清空集合

2.4 Set遍历的两种方式

 let set = new Set();
 set.add(1);
 set.add(3);
 set.add(2);

// Set遍历的方式二
 set.forEach(item => {
   console.log(item);
 })

 let set = new Set();
 set.add(1);
 set.add(3);
 set.add(2);
 
// Set遍历的方式一
 for(item of set) {
   console.log(item);
 }

3. Map

Map 对象保存键值对（key-value）。

• 可以记住键的原始插入顺序
• 任何值都可以作为键或值

3.1 创建Map对象

let map = new Map();

3.2 Map常用的属性

• size：Map中键值对的个数

3.3 Map常用的方式

• set()：添加键值对
• has()：Map中是否包含指定的键
• delete()：删除指定键值对
• clear()：清空Map
• get()：获取指定键的值

3.4 Map遍历的三种方式

 let map = new Map();
 map.set("张三", 18);
 map.set("李四", 20);
 map.set("王五", 19);

// Map遍历的方式一
 map.forEach((key, value) => {
   console.log(`key=${key}, value=${value}`);
 })

let map = new Map();
map.set("张三", 18);
map.set("李四", 20);
map.set("王五", 19);

// Map遍历的方式二
for([key, value] of map.entries()) {
  console.log(`key=${key}, value=${value}`);
}

let map = new Map();
map.set("张三", 18);
map.set("李四", 20);
map.set("王五", 19);

// Map遍历的方式三
for(key of map.keys()) {
 console.log(`key=${key}`);
}

for(value of map.values()) {
 console.log(`value=${value}`);
}