别再只会用for循环了！试试for in和for of 啊！

作为一个菜鸟程序员，在写 JS 代码的过程中会经常碰到需要循环遍历数组的情况：其中数组的元素是对象，对象中又有许多的属性，就像下面这个小例子：

    books: [
        {
            id: 1,
            name: '《算法导论》',
            date: '2006-9',
            price: 85.00,
            count: 1
        },
        {
            id: 2,
            name: '《UNIX编程艺术》',
            date: '2006-2',
            price: 59.00,
            count: 2
        },
        {
            id: 3,
            name: '《编程珠玑》',
            date: '2008-10',
            price: 39.00,
            count: 3
        },
        {
            id: 4,
            name: '《代码大全》',
            date: '2006-3',
            price: 128.00,
            count: 1
        },
    ],

上面这个books数组，存放着购买书籍的数据，其中包含每本书的书名、价格等，count为购买的数量

现在需要遍历这个数组，并把所购买的书籍的总金额算出来

不知道会不会有新手和我一样，脑子里第一个想到的方法就是用for循环遍历，就像下面这样

注意下面代码中的this是因为这段js代码是写在 vue 实例中的，如果你不懂 vue 没关系，你暂时可以把 this.books 看作一个整体

      let total = 0
      for (let i = 0; i < this.books.length; i++) {
        total += this.books[i].count * this.books[i].price
      } 
      return total

像上面这么写，当然是正确的，但是你不会觉得很麻烦吗？

什么？你觉得不麻烦？想必你肯定是和我一样，用for循环用习惯了。那你不妨看看下面这种for in的遍历方式有没有更简洁！

      let total = 0
      for (i in this.books) {
        total += this.books[i].count * this.books[i].price
      } 
      return total

注意这里的for in遍历的是数组的索引，也就是for (i in this.books)中的i，在循环体中可以直接使用索引i来进行对数组的相关操作

接下来再看看另一种更加简洁的for of写法

      let total = 0
      for (n of this.books) {
        total += n.count * n.price
      } 
      return total

和for in不同的是，for of遍历的是数组中的元素，也就是for (n of this.books)中的n，其代表的是本文案例中books数组的每一个元素，也就是包含书籍信息的对象，所以可以通过n.price来取得书本的价格信息等。

对于for in和for of，除了上述最基本的用法外，在这里还需要提醒一下使用for in的一些缺陷。

关于for in

遍历的索引值是字符串类型的数字，不能进行几何运算
遍历顺序可能不是内部元素的实际排列顺序
for in会遍历数组所有的可枚举属性(可枚举属性是指那些内部可枚举标志设置为true的属性)，包括原型。例如的原型方法method和name属性所以呢，for in用来遍历对象是最好了，那么相应的，for of就适合用于遍历数组

本文仅为个人的学习感悟和笔记，水平有限，如有错误之处，还望及时指正！