不成器的for...in

可以用来遍历数组，

但是，

最好只用来遍历对象属性。

照理说，变量 i 在循环结束后不能再被获取（其他语言都是如此），但JavaScript嘛，ʅ(‾◡◝)ʃ

JavaScript中数组，又有很多“不同”：

• 可以包含任意类型元素，比如：['a', 1, null, false]
• 没有越界限制。就是说比如数组总共10个元素，但你可以number[15]，随便取值或者赋值，^_^
  
• 不能删除
  

演示

数组的更多特性我们将在后面继续学习。

switch...case

也可以算是if...else...的另一种写法：

var weekday = 3;
switch (weekday) {
    case 1:     //if(weekday == 1)
        console.log('星期一');
        break;  //:和break类似于 {}
    case 2:     //else if(weekday == 1)
        console.log('星期二');
        break;
    //省略....
    case 6:
        console.log('星期六');
        break;
    case 7:
        console.log('星期天');
        break;
    default:    //兜底的else 
        console.log('什么鬼？');
        break;
}

注意：

• 不要忘记break;
• 推荐总是用default兜底
• 只能做 “等值” 比较，没有什么

      case weekday > 1:    //不会报错，但你猜是什么运行效果？

• 也没有什么“逻辑”运算，比如：

      case 6 || 7:   //同样不会报错，但更加的古怪……

  如果你真想6和7都输出为“周末”，可以：

      case 6:
      case 7:
          console.log('周末');
          break;

iterable

ES5和ES6中又推出了其他几种遍历/循环的方式：

for...in

ES5中推出，可以：

• 遍历对象的全部属性

          for (var pn in student) {
              console.log(pn);    //想一想如何取到每个元素的值
          }

• 或者数组的全部元素

  for (var n in numbers) {
      console.log(numbers[n]); 
  }

但是，这一自作聪明的“一心两用”却给我们带来一个意外惊喜：

numbers.name = 'Hello';    //数组仍然是一个对象，对象就可以这样动态添加属性

然后再迭代（循环）numbers，结果是什么？ Hello也被输出来了，^_^

for...of

所以，ES6又引入了 for...of... 循环，用于数组时就只会取到数组元素，而不会获得数组属性。

@想一想@：JavaScript是把数组中的元素当成了属性么？如何证明呢？

        for (var i of students) {
            console.log(i[0]);
        }

复习：for... of（区别于for...in）：只取集合元素，不取属性

forEach()

使用forEach()回调函数：

arr.forEach(function (value, index, array) {
    console.log('value:' + value);
    console.log('index:' + index);
    console.log('array[index] === value:' + (array[index] === value));//注意运算优先级
})

都已经有了for循环了，为什么还要这些玩意呢？因为ES推出了一些没有下标的新的集合：

Map

如何存储某次考试源栈同学们的成绩？要求名字和成绩一一对应。

复习：数组实现

但这样太麻烦了，其实这是一种典型的“键值对”数据结构：

var scores = new Map([['小程', 95], ['老赵', 75], ['两开花', 85]]);  
scores.get('两开花');

或者：

var m = new Map(); // 空Map
m.set('小鱼', 67); // 添加新的key-value

其他操作：

scores.has('小鱼'); // 是否存在key '小鱼': true
scores.get('小鱼'); // 67
scores.delete('小鱼'); // 删除key '小鱼'
scores.size;   //集合元素数量

演示：取出Map中的每一个元素

• for...of
• forEach()
  

@猜一猜@：如果key值出现重复？

var scores = new Map([['小程', 95], ['小程', 75], ['两开花', 85]]);  

@想一想@：这样好不好？

Set

不能重复，重复的值会被自动过滤掉

var s = new Set([1, 2, 3, 3, '3']);

也可以先new一个空的Set

• size
• add()：比较两个引用对象是否相同
• delete()
  
• has()

Set对象同样无法通过下标取值，而且也没有“键值”，所以只能遍历：

演示：

数组解构赋值

        var [name, age, female] = ['飞哥', 38, true];
        if (female) {
            alert(`${age}岁的${name}真汉子`);
        }

数组新方法

var arr = [2, -1, '33', true, '78.5', null, 5, 2, '', 7, -9, undefined];

• find/findIndex：

  arr.findIndex(function (v) {
      return !isNaN(v) && (v + '').indexOf('.') > -1;
  })

• filter：过滤掉不符合条件的元素

  arr.filter(function (v, index) {
      return index % 2 === 0 && v > 0;
  });

• every：检查数组里每个元素是否符合规则

  arr.every(function (v, index, arr) {
      return !isNaN(v);
  })

• map：对数组元素依次进行运算

  arr.map(function (v) {
      return v + 10;
  })

注意：都是将function作为参数传递！

模板字符串

var sname = '刘伟';
var greet = `"源栈"欢迎'您'，${sname}"`;

选择器：selector

• querySelector()：返回第一个Element（null）
• querySelectorAll()：返回所有复合条件的NodeList（empty），注意：not live

常用条件（类CSS）：

• 标签：div，p，a……
  
• Id：#id
• class：.class
• 属性：[attribute=]
  

  a[href]{}

  还可以使用：
  
  1. [attribute=value]用于选取带有指定属性和值的元素。
  2. [attribute~=value]用于选取属性值中包含指定词汇的元素。
  3. [attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
  4. [attribute^=value]匹配属性值以指定值开头的每个元素。
  5. [attribute$=value]匹配属性值以指定值结尾的每个元素。
  6. [attribute*=value]匹配属性值中包含指定值的每个元素。
  
  
• 混合： 类的直接合并，空格（ ）- 后代，逗号（,）或者，大于（>）-子，
• 兄弟：
  
• 加号（+）相邻
• 波浪线（~）所有

加入混淆代码，并演示：

    <div id="ad" class="dazzle">
        加入<a href="">源栈</a>学编程： <strong yz-slogan=""><span>大</span>神<span>小</span>班</strong>
    </div>

源栈学历

在当前系列 ES进阶 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：