javascript中各种循环（Set和Map结构循环、去重）_js set map 底层还是for循环吗

一、for...in, for...of, for和 forEach 循环的区别

1.1、for…in和for…of的区别

• for … in 获取的是对象的键名key；for … of遍历获取的是对象的键值value

• 如果要通过for…of循环，获取数组的索引，可以借助数组实例的 entries()方法和 keys()方法

• for … in会遍历对象的整个原型链,性能非常差不推荐使用；而 for … of只遍历当前对象，不会遍历原型链

• 对于数组的遍历：for … in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for … of只返回数组的下标对应的属性值

var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
  console.log('forin', a); // 下标0 1 2 3
}
for (let a of arr) {
  console.log('forof', a); // 值a b c d
}
1
2
3
4
5
6
7

1.2、for

优点：程序简洁，结构清晰，循环初始化，循环变量化，循环体和循环条件位置突出

缺点：结构比while循环复杂，容易出编码错误

//for
//它和forEach,forof一样不可以遍历对象
//解决办法：就是把对象先转化为数组类型
let obj = {a:1, b:2, c:3}
let obj2 = Object.keys(obj)  //用Object.keys属性转化
for(let i=0; i<obj2.length; i++){
  console.log('obj2', obj2[i])
}
1
2
3
4
5
6
7
8

1.3、for…in（主要用于遍历对象）

• for … in 获取的是对象的键名 key，数组的键名是数字，但是 for…in 循环的是index是string类型的：以字符串作为键名“0”、“1”、“2”等等。
• 用于循环遍历数组或对象属性。

优点：可以遍历数组的键名，遍历对象简洁方便；

缺点：某些情况下可能开销较大

//for...in遍历对象
let obj = {a:1, b:2, c:3}
for(let i in obj){
  console.log('obj', obj[i])
}

//for...in遍历数组
let array=[1, 2, 3, 4, 5]
for (let i in array){
  console.log('array', array[i])
}
1
2
3
4
5
6
7
8
9
10
11

1.4、for...of(ES6新增，利用了遍历对象内部的iterator接口，主要用于遍历数组)

for … of遍历获取的是对象的键值 value

 1.目前遍历 数组 最便利的方法
 2.避免了for-in，forEach的所有缺陷（可以使用break,continue和return）
 3.可以用在 类数组，字符串，set和map数据 上
 4.不支持对象的遍历（但是它提供了其他的三种方法）
        ①Object.keys()
        ②Object.values()
        ③Object.entries()
1
2
3
4
5
6
7

for … of遍历数组对象

const todo = [
    {
        id : '1',
        name : 'zhangsan',
        age : '20',
    },
    {
        id : '2',
        name : 'lisis',
        age : '22',
    },
    {
        id : '3',
        name : 'wangwu',
        age : '22',
    }
]

 for(let td of todo){
    console.log(td.name)
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1.5、forEach（参数分别为value,index,数组体）

优点：不用关心集合下标的问题，减少了出错的效率

缺点：不能同时遍历多个集合，方法不能使用break，continue语句跳出循环，不能使用return从函数体返回，对于空数组不会执行回调函数

javascript中的 for…in, for…of, for 和 forEach 循环的区别

二、Set 和 Map 结构

• 遍历的顺序是按照各个成员被添加进数据结构的顺序。
• Set 结构遍历时，返回的是一个值，而 Map 结构遍历时，返回的是一个数组，该数组的两个成员分别为当前 Map 成员的键名和键值。

// set结构
var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
    for (var e of engines) {
      console.log(e);
    }
    // Gecko  Trident    Webkit
1
2
3
4
5
6

// map结构
var es6 = new Map();
    es6.set("edition", 6);
    es6.set("committee", "TC39");
    es6.set("standard", "ECMA-262");
    for (var [name, value] of es6) {
      console.log(name + ": " + value);
    }
    // edition: 6
    // committee: TC39
    // standard: ECMA-262

1
2
3
4
5
6
7
8
9
10
11
12

2.1、通过Set和Map结构去重

1. 利用Map对象和数组的filter方法

通过Map对象中的has()和set()方法判断某个值是否存在当前的Map对象，然后再设置key/value，最后通过filter()方法创建一个新的数组

2. 利用Set对象和数组的Array.from方法

通过Set结构的无重复的特性，直接把数组给到Set对象，new Set(array)，最后通过Array.form()方法将其转化为一个真正的数组

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。
ES6之Array.from()方法

3. 利用Set+扩展运算符 …

const arr = [1,'1',2,3,4,2,undefined,undefined,NaN,NaN,'4']
const arr1 = [...new Set(arr)]
1
2

三、while循环

while循环()中的表达式，运算结果可以是各种类型，但是最终都会转为真假，转换规则如下。

   ①Boolean：true为真，false为假；
　　②String：空字符串为假，所有非空字符串为真；
　　③Number：0为假，一切非0数字为真；
　　④null/Undefined/NaN:全为假；
　　⑤Object：全为真。
1
2
3
4
5

var num = 1;//1、声明循环变量
            
while (num<=10){//2、判断循环条件;
    document.write(num+"<br />");//3、执行循环体操作；
    num++;//4、更新循环变量；
}
1
2
3
4
5
6

1、break：跳出本层循环，继续执行循环后面的语句。
　　　　如果循环有多层，则break只能跳出一层。
2、continue：跳过本次循环剩余的代码，继续执行下一次循环。
　　　　①对与for循环，continue之后执行的语句，是循环变量更新语句i++；
　　　　②对于while、do-while循环，continue之后执行的语句，是循环条件判断；
　　　　因此，使用这两个循环时，必须将continue放到i++之后使用，否则，continue将跳过i++进入死循环。

JS中的循环—最全的循环总结