for、for in、for of、forEach、set、Map的区别

1、for循环

var size=[1,2,3,4,5,6,7] //申明一个数组
for(var i=0，len=size.length; i<len; i++){ 
    document.write(size[i] + " ");//数组元素
}

2、for in 可以循环数组和对象推荐对象的时候用for in

var x;//可以不定义，也可以在括号内定义
var size=[1,2,3,4,5,6,7] //申明一个数组
var obj={name:'liushenghua',age:24,sex:'man'} //申明一个对象
for(x in size){ 
    document.write(size[x] + " ");//数组元素
}
for(x in obj){ 
    document.write(obj[x] + " ");//对象元素
}

3、for...of是 ES6 新引入的特性。它既比传统的for循环简洁，同时弥补了forEach和for-in循环的短板,for of无法循环遍历普通对象,for in 会遍历自定义属性，for of不会推荐数组的时候用for of

var size=[1,2,3,4,5,6,7] //申明一个数组
for(var value of size){ 
    document.write(value==7?value + "--":value + " ");//数组元素
}
//let 循环内部有效
for(let value of size){ 
    document.write(value==7?value + "--":value + " ");//数组元素
}
//const 循环里的不可修改的静态变量
for(const value of size){ 
    document.write(value + " ");//数组元素
}
//循环一个字符串
let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}
// 但是可以循环一个拥有enumerable属性的对象。
//如果我们按对象所拥有的属性进行循环，可使用内置的Object.keys()和方法
var obj = { name: 'zhangshan', age: 23, color: 'red' }
for (var item of Object.keys(obj)) {
        console.log(item)
}


    // for of遍历不出自定义属性,for in 可以如下：
    var arr = ['apple', 'banana', 'orange']
    arr.name = 'name';//自定义属性
    for (var key in arr) {
        console.log(arr[key])//apple banana orange name
    }
    for (var item of arr) {
        console.log(item)//apple banana orange grape
    }
   // for of不会跳过无定义的值,for in 会跳过无定义的值如下：
    var arr = [, 'apple', 'banana', 'orange']
    for (var key in arr) {
        console.log(arr[key])//apple banana orange
    }
    // console.log('--------')
    for (var item of arr) {
        console.log(item)//undefined apple banana orange
    }

4、for循环和while循环其实是可以相互转换的

while

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i]){
	document.write(cars[i] + "<br>");
	i++;
}

for循环

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
    document.write(cars[i] + "<br>");
    i++;
}

5、for和for in的区别

定义了数组后对数组进行赋值，中间如有某些下标未被使用（即未被赋值），在遍历的时候，采用一般的 for 循环和 for...in 循环得到的结果不同。for...in 循环会自动跳过那些没被赋值的元素，而 for 循环则不会，它会显示出 undefined。

<p>点击下面的按钮，循环遍历</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var array = new Array();
	var x;
	var txt=""
	array[0] = 1;
	array[3] = 2;
	array[4] = 3;
	array[10] = 4;
	for( x in array ){
		alert(array[x]);     // 依次显示出 1 2 3 4
	} 
	alert(array.length);    // 结果是11
	for( var i=0 ; i<4 ; i++){
		alert(array[i]);     // 依次显示出 1 undefined undefined 2 
	}
	document.getElementById("demo").innerHTML = txt;
}
</script>

for循环通过break可以随时跳出循环，当花括号只有一个时，不用括号，continue可以跳过此步骤 break

for (i=0;i<10;i++)
{
    if (i==3) break；
    x=x + "The number is " + i + "<br>";
}

continue

for (i=0;i<10;i++)
{
    if (i==3) continue；
    x=x + "The number is " + i + "<br>";
}

6、forEach方法

一、概念

forEach()方法按升序为数组中含有效值的每一项执行一次callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。

注意： forEach()的返回值为undefined forEach()对于空数组是不会执行回调函数的 没有办法中止或者跳出 forEach()循环，除了抛出一个异常

二、语法

arr.forEach(callback(currentValue, index, arr), thisArg) 参数说明：

callback：必须。为数组中每个元素执行的函数，该函数接受三个参数： currentValue：必须。数组中正在处理的当前元素。 index：可选。当前元素的索引值。 arr：可选。方法正在操作的数组。 thisArg：可选。当执行回调函数时用作this的值（参考对象）。

三、实例

打印出数组的内容：

let arr = [4, 9, 16, 25]
    arr.forEach((val, index, arr) => {
        console.log(index)
    })
    var newArr = arr.map((val, index, arr) => {
        return val * 2;
    })
    var roots = arr.map(Math.sqrt);
    console.log(newArr)
    console.log(roots)

7、Map方法

 var arr = ['1', '4', '3']
    var newArr = arr.map((value, index, array) => {
        return value
    })
    var newArr1 = arr.map(str => parseInt(str));
    var newArr2 = arr.map(Number)
    console.log(newArr)// '1', '4', '3'
    console.log(newArr1)// 1 4 3
    console.log(newArr2)// 1 4 3

8.set方法

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

var s = new Set([2, 3, 3, '3', 4]);
    console.log(s);//Set {2, 3,'3', 4,}
    //添加一个key
    s.add(5);
    //重复元素在Set中自动被过滤
    s.add(5);
    console.log(s);//Set {2, 3, 4,5}
    //删除一个key
    s.delete(2);
    //Set{3, "3", 4, 5}//注意数字3和字符串'3'是不同的元素。
    console.log(s);