for,for...in,for...of,forEach对于数组、对象、Set和Map

这些虽然是基础知识，但在做的时候使用vue语法涉及到条件渲染，然而用错了for in和for of致使渲染数据出错，又来夯实了下这个基础知识。

我出的问题在于列表渲染时应该用键值（value），而我却拿的是键名（key），绝了。

---

1、for of---遍历键值

for of 语句遍历可迭代对象（包括数组、Set 和 Map 结构、arguments 对象、DOM NodeList 对象、字符串等）。

拿数组来说：

let arr = ['xi','bing','g'];
for (let v of arr){
    console.log(v);
}// xi bing g

拿字符串说：

let str = 'gxb'];
for (let v of str){
    console.log(v);
}// g x b

拿类数组的对象说：

let obj = {
    0:'g',
    1:'x',
    2:'b',
    length:3
};
// 将其转为可迭代对象————Array.from()
for (let v of Array.from(obj)){
    console.log(v);
} //  g x b

拿Set来说：

let s=new Set(['g','x','b']);
for(let v if s){
    console.log(v)
}// g x b

拿Map来说：

let m=new Map([
    ['optiona','geng'],
    ['optionb','xi'],
    ['optionc','bing']
]);

for(let i of m){
    console.log(i);
}// ['optiona','geng']  ['optionb','xi']  ['optionc','bing']

for(let [i,v] of m){
    console.log(i,v);
}// optiona geng    optionb xi    optionc bing

拿DOM NodeList来说：

    

       
geng
       
xi
       
bing
  
    

    

---

2、for in---遍历键名（俺就跌这里了，用了个for in拿成了索引）

拿数组来看：

let arr = ['xi','bing','g'];
for (let v in arr){
    console.log(v);
}// 0 1 2

拿类数组对象来看：

let obj = {
    0:'g',
    1:'x',
    2:'b',
    length:3
};
//  不用将其转为可迭代对象
for (let v in obj){
    console.log(v);
} //  0    1    2    length
// 给对象添加属性
obj.name="gxb";
// for in    后添加的、原型上的属性都会被暴露出来
for (let v in obj){
    console.log(v);
} //  0    1    2    length    name
// for of    不会暴露后来的和原型
for (let v of obj){
    console.log(v);
} //  g    x    b

---

3、forEach 

拿数组来看：

let arr = ['xi','bing','g'];
arr.forEach((v,k,d)=>{
	console.log(v,k,d)
});
//xi 0 (3)["xi", "bing", "g"]    bing 1 (3)["xi", "bing", "g"]    g 2 (3)["xi", "bing", "g"]
// 三个参数分别代表：元素、索引、数组本身

拿Map来看：

let m = new Map([
    ['optiona', 'geng'],
    ['optionb', 'xi'],
    ['optionc', 'bing']
]);
m.forEach((k,v,data)=>{
	console.log(k,v,data);
});
// 同上面的数组，三个参数分别是：Map元素的第二个值、Map元素的第一个值、Map数据对象本身

for in 可用于对象、数组、字符串等——key，对于对象会”刨根问底“；

for of 可用于对象、数组、Set、Map、字符串等——value；

forEach 可用于数组、Map；

for 也就用于数组吧，再加个擦边球的字符串；

对于forEach搭配不来的break、continue、return，在for in、for of、for这都合作愉快

---

还重温了下数组去重，reduce方法就先不说了

方法1： newArr=[...new Set(arr)]     

            利用Set对象的无重复特征，再用扩展运算符给展开到数组中赋值给newArr。

方法2：newArr=Array.from(new Set(arr))

            利用Set对象的无重复特征，再将转换后的Set对象转换为可迭代数组再赋值给newArr