使用jquery each方法访问JavaScript数组字符串

Question

我想通过jquery访问Java Script字符串元素(在数组中(。我已经写了一个简单的方法来模拟我要做的事情。这个方法会导致RangeError异常。

function test() {
var arr = ["janusz", "renia"];
$(arr).each(function () {
var  el = $(this).text();
console.log(el);
});
}

控制台中的错误如下：

jquery.js:1602 Uncaught RangeError: Maximum call stack size exceeded
at Sizzle.getText (jquery.js:1602)
at Sizzle.getText (jquery.js:1610)
at Sizzle.getText (jquery.js:1610)
at Sizzle.getText (jquery.js:1610)
at Sizzle.getText (jquery.js:1610)
at Sizzle.getText (jquery.js:1610)
at Sizzle.getText (jquery.js:1610)
at Sizzle.getText (jquery.js:1610)
at Sizzle.getText (jquery.js:1610)
at Sizzle.getText (jquery.js:1610)
…

为什么我不能通过each方法中的'this'对象访问字符串？

Answer 1

.text()用于从元素中检索文本。这里没有任何DOM元素，只有一个由字符串组成的普通数组。

抛出该错误是因为getText(jQuery在尝试获取元素的文本时调用它(执行

getText = Sizzle.getText = function( elem ) {
var node,
ret = "",
i = 0,
nodeType = elem.nodeType;
if ( !nodeType ) {
// If no nodeType, this is expected to be an array
while ( (node = elem[i++]) ) {
// Do not traverse comment nodes
ret += getText( node );
}
}

导致无限递归。

虽然你可以在严格模式下引用this，让它引用正在迭代的字符串。。。

'use strict';
var arr = ["janusz", "renia"];
$(arr).each(function() {
console.log(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

完全抛弃jQuery并使用纯JavaScript会容易得多。

var arr = ["janusz", "renia"];
for (const item of arr) {
console.log(item);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

或

var arr = ["janusz", "renia"];
arr.forEach((item) => {
console.log(item);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

或

var arr = ["janusz", "renia"];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

如果你是编程新手，我个人建议你只在需要的时候使用jQuery，而不是试图将其用于所有(不幸的是，这是一种常见的范式(。