使用jQuery each方法访问JavaScript数组字符串触发RangeError的原因是什么

报错根本原因 #

你在遍历数组时this本身就指向当前的字符串元素，报错是你后续的$(this).text()调用触发了jQuery内部的死递归：

• jQuery的.text()方法依赖内部Sizzle.getText逻辑，该方法设计用来读取DOM节点的文本内容，会递归遍历目标节点的所有子节点提取文本
• 当你把字符串传入$()构造器时，jQuery会尝试将普通字符串识别为DOM节点/选择器处理，传入getText后方法无法识别终止条件，就会不停递归调用自身，最终撑爆调用栈抛出RangeError: Maximum call stack size exceeded异常。

正确写法 #

你完全不需要把数组元素包装成jQuery对象，两种更简单的实现方式：

方式1：直接读取this #

function test() {
    var arr = ["janusz", "renia"];
    $(arr).each(function () {
        // this本身就是当前遍历到的字符串元素，直接用即可
        var el = this;
        console.log(el);
    });
}

方式2：用$.each遍历（推荐） #

jQuery内置的$.each工具方法专门用来遍历普通数组、对象，不需要额外把数组包装成jQuery对象，性能和可读性都更好：

function test() {
    var arr = ["janusz", "renia"];
    $.each(arr, function (index, item) {
        // 第二个参数就是当前遍历的元素，不需要处理this指向
        console.log(item);
    });
}

内容的提问来源于stack exchange，提问作者rejkid