ES for-of map set 学习

前言

没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。

这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

1.for-of 学习

window.onload = function(){
    const arr = ['red', 'green', 'blue'];
    //es6
    for(let v of arr) {
        console.log(v);  // red   green   blue
    }
    //能不能获取arr的索引
    for(let [i,v] of arr.entries()) {
        console.log(i);  // 0
        console.log(v);   //1
    }

    //es5
    for(let i in arr){
        console.log(i)  //0 1 2 
        console.log(arr[i]);
    }

    for(var i = 0;i<arr.length; i++){
        console.log(arr[i]);
        console.log(i);
    }

    arr.forEach(function(item,index) {
        console.log(item); // red green blue
        console.log(index);   // 0 1 2
    });

    //set遍历
    const set = new Set([2,3,52,3,4,43,3]);
    for(let v of set){
            console.log(v)  
    }

    //map遍历
    let m1 = new Map([['a',1],['b',2],['c',3],['id',4]]);
    for(let [k,v] of m1){
        console.log(k);
        console.log(v);
    };

    for(let k of m1){
        console.log(k);
    };
    //["a", 1]

    //object
    var obj = {'a':1,'b':2,'c':3};
    for(let k of obj){
        console.log(k);   //obj is not iterable
    };

    for(let k in obj){
        console.log(k); 
        console.log(obj[k]); 
    };

    //解决方法
    for(let k of Object.keys(obj)){   //Object.keys(obj);  //["a", "b", "c"]
        console.log(k);
    };

    for(let [k,v] of Object.entries(obj)){  
        console.log(k);
        console.log(v);
    };

    var arr = [2,3,4,5,6];
    for(let v of arr){
        if(v ==3){
            break;  //2
            //continue; //2 4 5 6
        };
        console.log(v)
    }
}

2.map数据结构

window.onload = function(){
    // map 类似于object  键值对
    var m = new Map();
    m.set('key','value');
    m.set('name','jindu').set('a','a');

    var o = {id:100};
    m.set(o,'abc');

    //另一种添加方式
    let m1 = new Map([['a',1],['b',2],['c',3],['id',4]]);

    // Map实例的属性和方法
    //size属性
    const m = new Map();
    m.set('a','a').set('b','b');
    m.size //2

    //set(key, value)
    const m = new Map();
    m.set('qq', '2429462491')        // 键是字符串
    m.set(100, 'jindu')     // 键是数值
    m.set(undefined, 'value')    // 键是 undefined

    //get(key)  读取`key`对应的键值，如果找不到`key`，返回`undefined`。
    const m = new Map();
    var a = {id:2};
    m.set(a,'value');
    m.set('name','jindu');
    m.get(a);     //'value'   通过变量a来获取
    m.get('name');   //jindu   通过'name'属性获取

    //has(key) 返回一个布尔值，表示某个键是否在当前 Map 对象之中。
    const m = new Map();
    var a = {id:2};
    m.set(a,'value');
    m.set('name','jindu');

    m.has('name')  //true
    m.has('a')   //false
    m.has(a)   //true

    //delete(key)  删除某个键，返回`true`。如果删除失败，返回`false`。
    const m = new Map();
    var a = {id:2};
    m.set(a,'value');
    m.set('name','jindu');

    m.delete('name')  
    m.has('name')  //false

    //clear()    清除所有成员，没有返回值。
    const m = new Map();
    var a = {id:2};
    m.set(a,'value');
    m.set('name','jindu');

    m.clear();

    // Map遍历方法
    for(let [k,v] of m1){
        console.log(k);
        console.log(v);
    };
    //keys()   values()  entries()
    for(let k of m1.keys()){
        console.log(k);
    };
    for(let v of m1.values()){
        console.log(v);
    };

    //map类型转换
    //1、对象转数组
    var obj = {'a':1,'b':2,'c':3};
    Object.keys(obj);  //["a", "b", "c"]
    Object.values(obj); //[1, 2, 3]

    //2、map类型转数组
    let m1 = new Map([['a',1],['b',2],['c',3],['id',4]]);
    [...m1.keys()];  //["a", "b", "c", "id"]   
    [...m1.values()];
    [...m1]; //[['a',1],['b',2],['c',3],['id',4]]

    //3、map转对象object
    let m2 = new Map([['a',1],['b',2],['c',3],['id',4]]);
    var o2 = {};
    for(let [k,v] of m2){
        o2[k] = v;
    };
    console.log(o2)  //{a: 1, b: 2, c: 3, id: 4}

    //4、对象object转map
    var obj = {'a':1,'b':2,'c':3};
    let m3 = new Map();
    for(let k in obj){
        m3.set(k,obj[k]);
    };
    console.log(m3);

    //二种方式
    let m4 = new Map(Object.entries(obj));

}

3.set

window.onload = function(){
    //JS数据结构   Array  Object  Set  Map

    var arr1 = new Array();
    var arr2 = [3,4,5,6,7,7,8];
    arr2.push(1);
    arr2[1] = 2;

    var obj = new Object();
    var obj2 = {}
    
    var set = new Set();  //类似于数组，成员是唯一的    全等进行匹配
    set.add(4);
    set.add(2);
    set.add(3).add(4).add(5).add('5');
    // {4, 2, 3, 5,'5'}

    //另一种定义方式
    var set2 = new Set([3,4,5,6,7,7,8]);
    console.log(set2);  //{3,4,5,6,7,8}

  
    //数组去重
    var arr3 = [1,2,1,2,3,4,2,3,4,3,2,3,4,2,3,4,2,5];
    var s = new Set(arr3);  //{1,2,3,4,5}

    //es5
    function f(){
        var arr = [];
        for(var i = 0;i<arr3.length;i++){
            if(arr.indexOf(arr3[i])==-1){  //没有匹配成功
                arr.push(arr3[i])
            }
        };
        return arr;
    }
    //类型转换
    //1、...扩展运算符
    var arr4 = [...new Set(arr3)];   //[1, 2, 3, 4, 5]
    //2、Array.from()
    var arr5 = Array.from(new Set(arr3))  // [1, 2, 3, 4, 5]

    //求出大于20的数据且去重处理
    var arr6 = [10,23,42,23,14,23,42,23,10,55,23,43,42,55,67,42,20,20];
    var x = [...new Set(arr6.filter(v=>v>20))];
    console.log(x);   //[23, 42, 55, 43, 67]
    //分析思路
    //1、求出大于20
    // var max = arr6.filter(function(v){
    //     return v>20
    // });
    var max = arr6.filter(v=>v>20);    //[23, 42, 23, 23, 42, 23, 55, 23, 43, 42, 55, 67, 42]
    //2、去重
    var y = new Set(max);  //{23, 42, 55, 43, 67}
    //3、类型转换
    Array.from(y);  //[23, 42, 55, 43, 67]
    [...y];
    //4、合并代码
    var x2 = Array.from(new Set(arr6.filter(v=>v>20)));
    var x3 = [...new Set(arr6.filter(v=>v>20))];

    //取二组数据的并集，交集，差集且去重
    var a1 = [1,2,3,4,5,6,4,5,6];
    var a2 = [4,5,6,7,8,9,7,8,9];

    //并集：
    //1、数组合并
    var merge = [...a1,...a2];
    //2、去重
    var noDuplicate = new Set(merge);
    //3、类型转换
    var a3 = [...noDuplicate];
    //4、合并代码
    var a3 = [...new Set([...a1,...a2])];

    //遍历方法
    const set = new Set([2,3,52,3,4,43,3]);
    for(let v of set){
            console.log(v)  
    }
    set.forEach((v,i)=>{
            console.log(v)
    });


    
 
}

总结

学习贵在坚持