老师能解释下这段代码吗，为什么会这样打印

function setTime(time) {
            return new Promise((resolve) => {
                resolve(time)
            })
        }
        (async function test() {
            const arr = [setTime(1000), 2, 3, setTime(2000), 6];
            arr[Symbol.iterator] = function*() {
                yield '同步迭代器逻辑'
                yield '同步迭代器逻辑'
                yield '同步迭代器逻辑'
                yield '同步迭代器逻辑'
                yield '同步迭代器逻辑'
            }
            for await (let i of arr) {
                console.log(i, "i");
                console.log("after");
            }
            console.log(arr[Symbol.asyncIterator])
        })();
        // 打印结果
        同步迭代器逻辑 i
index.html:28 after
index.html:27 同步迭代器逻辑 i
index.html:28 after
index.html:27 同步迭代器逻辑 i
index.html:28 after
index.html:27 同步迭代器逻辑 i
index.html:28 after
index.html:27 同步迭代器逻辑 i
index.html:28 after
index.html:30 undefined

arr中不仅仅有异步也会有同步代码，我覆盖了arr的同步迭代器。可是arr中的Promise对象不应该调用异步迭代器对象返回吗。
我的理解是for await of循环中如果当前项是异步就会用Symbol.asyncIterator处理，同步代码使用Symbol.iterator处理，可是这里同步异步都用了Symbol.iterator处理请问这是为什么？
是因为我在html文件中打开并没有babel转译浏览器不识别awaitof 还是我理解错了吗
可是打印的全是同步迭代器逻辑，请问老师这是为什么？