作为一个菜鸟程序员,在写 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
就适合用于遍历数组
本文仅为个人的学习感悟和笔记,水平有限,如有错误之处,还望及时指正!