ES6 filter方法和Map结构

filter方法

filter方法 返回值是一个新数组 是用来检查数组中的元素是否符合某一条件 把符合条件元素过滤出来，filter方法不会改变原数组

 var arr = [10, 30, 50, 70, "", "  90", 55];
        var res = arr.filter(function (item, index, self) {
            console.log(item);
            console.log(index);
            console.log(self);

            return item % 2 == 0
        })

        console.log(res);
        console.log(arr);

删除数组中空字符串 元素前后的空格需要遍历删除

var res = arr.filter(function (item) {
            return item.toString().trim();
        });
        console.log(res);

数组去重

  var arr1 = ["aaa", "bbb", "ccc", "aaa", "bbb"];

        var arr2 = arr1.filter(function (item, index, arr) {
            return arr.indexOf(item) == index;
        })

        console.log(arr2);

Map结构

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。

如果你需要“键值对”的数据结构，Map 比 Object 更合适。

Object 和 Map 的比较

Objects 和 Maps 类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。因此（并且也没有其他内建的替代方式了）过去我们一直都把对象当成 Maps 使用。不过 Maps 和 Objects 有一些重要的区别，在下列情况里使用 Map 会是更好的选择

一个Object的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值，包括函数、对象、基本类型。

Map 中的键值是有序的，而添加到对象中的键则不是。因此，当对它进行遍历时，Map 对象是按插入的顺序返回键值。

你可以通过 size 属性直接获取一个 Map 的键值对个数，而 Object 的键值对个数只能手动计算。

Map 可直接进行迭代，而 Object 的迭代需要先 获取它的键数组，然后再进行迭代。

Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。虽然 ES5 开始可以用 map = Object.create(null) 来创建一个没有原型的对象，但是这种用法不太常见。

Map 在涉及频繁增删键值对的场景下会有些性能优势。

var arr=[
            ["name","Tom"],
            ["age",18],
            ["gender","man"],
            ["girlFriend","rose"]
        ]

        var map=new Map();

        arr.forEach(function(item,index,self){
            console.log(item);
            console.log(item[0],item[1]);
            console.log(index);
            console.log(self);
        })


        arr.forEach(([key,value])=>{
            console.log(key);
            console.log(value);
            
            map.set(key,value);
        })

        console.log(map);

new Map()

构造函数：创建Map集合

 var m = new Map();

set()方法

往集合中添加新元素[键值对] null 会被当做 undefined。 可以是数组 字符串或者其他 iterable 对象，其元素为键值对(两个元素的数组，例如: [[ 1, 'one' ],[ 2, 'two' ]])。

是给map集合设置键值对元素 参数1:键 参数2：值

m.set("name", "cjt");
m.set("age", 20);

size属性

集合元素个数

console.log(m.size); //2

get()方法

从集合中获取某个键对应的值，获取map集合中指定键的值

判断指定键是否存在于map集合中 返回布尔类型的值

console.log(m.get("name")); //cjt
console.log(m.get("age")); //20

set()方法

设置集合中某个键的值

m.set("name", "wq");
console.log(m);

has()方法

判断集合中是否存在某键的元素

console.log(m.has("name")); //true
console.log(m.has("IQ")); //false

delete()方法

从集合中删除某键的元素

返回布尔类型的值 能找到就删除 返回true 否则返回false

console.log(map.delete("girlFriend"));

map集合换成数组

var res=[...map];
console.log(res);

clear()方法

清空集合元素，没有参数 没有返回值

m.clear();
console.log(m);

map集合的遍历

for-of 方法遍历

 for(var item of map){
            console.log(item);
            console.log(item[0]);
            console.log(item[1]);
            
        }
        

和结构赋值进行结合

优点：取值方便

for(var [key,value]of map){
            console.log(key);
            console.log(value);
            
        }
        

forEach()方法

遍历集合元素

 let map = new Map([['name', 'zz'], ['age', 18]]);
        console.log(map.get('name'));//zz
        console.log(map);


        map.forEach(function (key, value, map) {
            console.log(key + value)//namezz //age 18
        })

Map源码

class Mymap {

    constructor(iterator = []) {
        if (typeof iterator[Symbol.iterator] !== "function") {
            throw new TypeError(`您输入的${iterator}不是可遍历的数据`);
        }

        this._datas = [];


        for (var item of iterator) {
            if (typeof item[Symbol.iterator] !== "function") {
                throw new TypeError(`您输入的${item}不是可遍历的数据`);
            }

            var obj = item[Symbol.iterator]();
            // console.log(obj.next());
            // console.log(obj.next());

            var key = obj.next().value;
            var value = obj.next().value;

            console.log(key, value);

            this.set(key, value)


        }
    }

    set(key, value) {
        var obj = this._getObject(key);
        if (!obj) {
            this._datas.push({
                key,
                value
            })
        } else {
            obj["value"] = value;
        }
    }

    get(key) {
        var obj = this._getObject(key);
        if (obj) {
            return obj["value"];
        }
    }

    has(key) {
        var obj = this._getObject(key);

        // if (obj) {
        //     return true;
        // } else {
        //     return false;
        // }

        return obj !== undefined;

    }


    delete(key) {
        for (var i = 0; i < this._datas.length; i++) {
            if (this.isEqual(this._datas[i].key, key)) {
                this._datas.splice(i, 1);
                return true;
            }
        }

        return false;
    }

    clear() {
        this._datas.length = 0;
    }

    *[Symbol.iterator]() {
        for (var item of this._datas) {
            yield [item.key, item.value];
        }
    }

    forEach(callback) {
        for (var item of this._datas) {
            callback(item.key, item.value, this);
        }
    }


    isEqual(data1, data2) {
        // 特殊处理-0 +0
        if (data1 === 0 && data2 === 0) {
            return true;
        }

        return Object.is(data1, data2);
    }

    _getObject(key) {
        for (var item of this._datas) {
            if (this.isEqual(key, item["key"])) {
                console.log(item);
                return item;
            }
        }
    }
}