[鼠年全马铁人挑战] Week09 - JavaScript基础学习心得 part3

开始之前, 我想分享一个鼠年全马的文章搜寻器
里面有所有参赛者的所有文章, 想看什么可以直接搜寻, 也能加入收藏
做的非常的棒呢~
不过我是用来看我每个礼拜的文章是不是有成功上传xD

接着开始正题, 本週来解决上次讲到非常没效率的方式来撰写重複性高的程式码

for迴圈

像这种重複性高的程式码可以直接使用迴圈的方式来撰写
而迴圈写法与多数程式语言都大同小异, 使用for做为迴圈起点, 并宣告一个变数来控制迴圈次数, 写法如:

/* * 起始值通常为0 * 终止值大多为阵列的长度 * i++ 为"跑完一次迴圈就将i做++的动作" */for(var i = 起始值; i < 终止值; i++) {    // 迴圈内容...}

这时候把上次的饭粒拿出来改写

/* 原本的写法goToTrashCan(myBag[0]); // '稀有-暴风神弓 不符合条件'goToTrashCan(myBag[1]); // '史诗-敏捷手套 不符合条件'goToTrashCan(myBag[2]); // '成功将 一般-精灵之木 丢到垃圾桶'*/for(var i = 0; i < myBag.length; i++) {    goToTrashCan(myBag[i]); }// '稀有-暴风神弓 不符合条件'// '史诗-敏捷手套 不符合条件'// '成功将 一般-精灵之木 丢到垃圾桶'

结果是一样的
乍看之下程式码并没有减少, 但假设今天包包如果有100项道具, 用原本的写法就要写100次, 使用for迴圈就一样只要短短几行
真是便宜又大碗~

forEach

这里另外提到迴圈的另一种方法 - forEach
老实说, 在学会使用forEach之后, 除了一些特殊状况外, 基本上都不再用for迴圈了
因为forEach必须搭配阵列来撰写, 所以在不是阵列的用法时, 还是需要使用for
但这种状况很少, 因为会用到迴圈基本上就跟阵列脱不了太大关係吧xD

而forEach写法也是很直觉易懂的写法, forEach带入匿名函式, 匿名函式再带入参数:

/* * item: 阵列内每一个内容 * index: 阵列的索引(可省略) * array: 阵列本身(可省略) */阵列本身.forEach(function(item, index, array){    console.log(item, index, array); // 输出阵列每个内容});

如果使用forEach来改写刚才那段

myBag.forEach(function(item){    goToTrashCan(item); });

结果也会是一样的, 但程式码少使用了一个变数且阵列只要一开始叫用, 后面就没它的事, 在日后维护也方便许多

以上都是上到想睡觉的 JavaScript 基础观念
这週较忙碌所以篇幅就相对少很多QQ
下週会来写比较不会想睡的东西 - DOM, 以及怎么使用选择器(Selector)来取得并修改DOM