JS 数组遍历学习

引子

在做一个案例时，发现的小问题，成功解决！
案例需求如下，将一个数组中的元素一个一个提取出来，并添加分隔符。

代码实现

点击查看代码

var arr = ['red', 'blue', 'pink', 'cyan'];
    var str = '';
    var separater = prompt('自定义您的分隔符!');
    for (i = 0; i <= arr.length; i++) {
        
        str += arr[i] + separater;
    }
    alert(str);

运行结果

运行结果一出来，我就有点疑惑，为什么会多一个undefined。
思考过程如下：
首先，出现undefined的情况，是在一个变量只声明，没赋值才会这样。
但是这个是数组，会有相同之处吗？
我数了下数组中只有4个元素，却输出了5个结果，说明有一个元素被声明出来了。
接着，我仔细过了一遍for循环，发现问题所在。

原来，计数器i要小于数组长度，而非小于等于。因为序号从0开始，遍历0、1、2、3，为4个元素；
就结束了，如果还加等于，那么还会进行判断是否=4的一次循环，而实际上数组中并没有序号为4的元素，
这样一来，是遍历了0、1、2、3、4，为5个元素。
修改代码进行测试，果然对了

修改后运行结果