学习前端第二十九天（可迭代对象，映射和解构【弱】，Object.keys values）

一、可迭代对象

1、Symbol.iterator方法，使对象可迭代

[Symbol.iterator]() {
                let i = 5;
                return {
                    next() {
                        i--;
                        return { done: !i, value: i }
                    }
                }
            }

next（）方法返回的结果的格式必须是{done：Boolean，value：any}，当done=true时，表示循环结束，否则value是下一个值。

2、字符串是可迭代的

3、类数组对象 ，有索引和 length 属性的对象

let users = {  
            0: "css",
            1: "js",
            2: "html",
            length: 3,
        }

4、Array.from，将类数组对象转为数组

  let users = {  //必须在类数组对象中使用，形式与下面的相似，有索引和 length 属性
            0: "css",
            1: "js",
            2: "html",
            length: 3,
        }
        let newUsers = Array.from(users);   // 将类数组对象转为数组

        // 现在 ，newUsers是一个和users差不多的数组了
        console.log(newUsers); // ['css', 'js', 'html']

二、映射和集合（Map and Set）

1、Map  一个带键的数据项的集合，就像一个 Object 一样

• new Map() —— 创建 一个新的map。
• map.set(key, value) —— 根据键存储值。
• map.get(key) —— 根据键来返回值，如果 map 中不存在对应的 key，则返回 undefined。
• map.has(key) —— 如果 key 存在则返回 true，否则返回 false。
• map.delete(key) —— 删除指定键的值。
• map.clear() —— 清空 map。
• map.size —— 返回当前元素个数。

2、Map 可以使用对象作为键；在对象中，无法使用对象作为键

let john = { name: "John" };

// 存储每个用户的来访次数
let visitsCountMap = new Map();

// john 是 Map 中的键
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

3、链式调用

    const map = new Map();
        map
            .set("name", "jack")
            .set("age", 0)
            .set("gender", "male")
            .set("fugender", "male");

4、Map 迭代，按照值插入的顺序进行

• map.keys() —— 遍历并返回一个包含所有键的可迭代对象
• map.values() —— 遍历并返回一个包含所有值的可迭代对象
• map.entries() —— 遍历并返回一个包含所有实体 [key, value] 的可迭代对象

5、对象，数组，Map相互转换

        // Object，Array，Map

        // Object -> Array: Object.entries({});

        // Array -> Object: Object.fromEntries([ [ ] ]);

        // Array -> Map: new Map([[]]);

        // Map -> Array: Array.from(new Map());

        // Object -> Map:new Map(Object.entries({}));

        // Map -> Object:Object.fromEntries(new Map());

6、Set，一个特殊的类型集合， “值的集合”（没有键），它的每一个值只能出现一次。

• new Set(iterable) —— 创建一个 set，如果提供了一个 iterable 对象（通常是数组），将会从数组里面复制值到 set 中。
• set.add(value) —— 添加一个值，返回 set 本身
• set.delete(value) —— 删除值，如果 value 在这个方法调用的时候存在则返回 true ，否则返回 false。
• set.has(value) —— 如果 value 在 set 中，返回 true，否则返回 false。
• set.clear() —— 清空 set。
• set.size —— 返回元素个数。

7、Set 可以迭代，按照值插入的顺序进行的

• set.keys() —— 遍历并返回一个包含所有值的可迭代对象，
• set.values() —— 与 set.keys() 作用相同，这是为了兼容 Map，
• set.entries() —— 遍历并返回一个包含所有的实体 [value, value] 的可迭代对象

8、数组去重

let arr = ["css", "css", "css", "git", "vue"]
let hobby = new Set(arr); // Set 自动合并相同元素
arr = Array.from(hobby); // 将Set 变为数组
console.log(arr); // ['css', 'git', 'vue']

9、弱映射和弱集合（用得少）

WeakMap 是类似于 Map 的集合，它仅允许对象作为键，并且一旦通过其他方式无法访问这些对象，垃圾回收便会将这些对象与其关联值一同删除。

WeakSet 是类似于 Set 的集合，它仅存储对象，并且一旦通过其他方式无法访问这些对象，垃圾回收便会将这些对象删除。

它们的主要优点是它们对对象是弱引用，所以被它们引用的对象很容易地被垃圾收集器移除。

这是以不支持 clear、size、keys、values 等作为代价换来的……

WeakMap 和 WeakSet 被用作“主要”对象存储之外的“辅助”数据结构。一旦将对象从主存储器中删除，如果该对象仅被用作 WeakMap 或 WeakSet 的键，那么该对象将被自动清除。

三、Object.keys,values,entries

1、使用

• Object.keys(obj) —— 返回一个包含该对象所有的键的数组。
• Object.values(obj) —— 返回一个包含该对象所有的值的数组。
• Object.entries(obj) —— 返回一个包含该对象所有 [key, value] 键值对的数组。

const user = {
            name: "jack",
            age: 20,
            gender: "male",
            [Symbol("allow")]: true,
        }

// 返回一个包含该对象所有的键/值/键值对的数组。忽略隐藏属性
console.log(Object.keys(user)); //(3) ['name', 'age', 'gender']
console.log(Object.values(user)); // ['jack', 20, 'male']
console.log(Object.entries(user)); //  [Array(2), Array(2), Array(2)]

2、返回Symbol属性

        const user = {
            name: "jack",
            age: 20,
            gender: "male",
            [Symbol("allow")]: true,
        }

        // 返回隐藏键
        console.log(Object.getOwnPropertySymbols(user));  //    [Symbol(allow)]
        // 返回所有键
        console.log(Reflect.ownKeys(user)); // ['name', 'age', 'gender', Symbol(allow)]