jQuery 遍历 - map() 方法
jQuery 遍历 - map() 方法
构建表单中所有值的列表：
$(&p&).append( $(&input&).map(function(){
return $(this).val();
}).get().join(&, &) );
定义和用法
map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
.map(callback(index,domElement))
callback(index,domElement)
对当前集合中的每个元素调用的函数对象。
由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单：
&form method=&post& action=&&&
&fieldset&
&label for=&two&&2&/label&
&input type=&checkbox& value=&2& id=&two& name=&number[]&&
&label for=&four&&4&/label&
&input type=&checkbox& value=&4& id=&four& name=&number[]&&
&label for=&six&&6&/label&
&input type=&checkbox& value=&6& id=&six& name=&number[]&&
&label for=&eight&&8&/label&
&input type=&checkbox& value=&8& id=&eight& name=&number[]&&
&/fieldset&
我们能够获得复选框 ID 组成的逗号分隔的列表：
$(':checkbox').map(function() {
return this.
}).get().join(',');
本次调用的结果是字符串：&two,four,six,eight&。
在 callback 函数内部，this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项，或者是要被插入结果集中的数据项的数组。如果返回的是数组，数组内的元素会被插入集合中。如果函数返回 null 或 undefined，则不会插入任何元素。JavaScript 各种遍历方式详解，有你不知道的黑科技
为了方便例子讲解，现有数组和json对象如下
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
var demoObj = {
aaa: 'Javascript',
bbb: 'Gulp',
ccc: 'CSS3',
ddd: 'Grunt',
eee: 'jQuery',
fff: 'angular'
可以直接看示例，用得太多了，很简单.(function() {
for(var i=0, len=demoArr. i& i++) {
if (i == 2) {
// 函数执行被终止
// 循环被终止
// 循环被跳过
console.log('demo1Arr['+ i +']:' + demo1Arr[i]);
关于for循环，有一下几点需要注意
for循环中的i在循环结束之后任然存在与作用域中，为了避免影响作用域中的其他变量，使用函数自执行的方式将其隔离起来()();
避免使用for(var i=0; i 的方式，这样的数组长度每次都被计算，效率低于上面的方式。也可以将变量声明放在for的前面来执行，提高阅读性.
var i = 0, len = demo1Arr.
for(; i& i++) {};
跳出循环的方式有如下几种
1)return 函数执行被终止
2)break 循环被终止
3)continue 循环被跳过
for(var item in arr|obj){} 可以用于遍历数组和对象 1. 遍历数组时，item表示索引值， arr表示当前索引值对应的元素 arr[item]
2. 遍历对象时，item表示key值，arr表示key值对应的value值 obj[item]
(function() {
for(var i in demoArr) {
if (i == 2) {
// 函数执行被终止
// 循环被终止
// 循环被跳过
console.log('demoArr['+ i +']:' + demoArr[i]);
console.log('-------------');
关于for in，有以下几点需要注意：
1. 在for循环与for in循环中，i值都会在循环结束之后保留下来。因此使用函数自执行的方式避免。
2. 使用return，break，continue跳出循环都与for循环一致，不过关于return需要注意，在函数体中，return表示函数执行终止，就算是循环外面的代码，也不再继续往下执行。而break仅仅只是终止循环，后面的代码会继续执行。
function res() {
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
for(var item in demoArr) {
if (item == 2) {
console.log(item, demoArr[item]);
console.log('desc', 'function res'); //不会执行
demoArr.forEach(function(arg) {})
参数arg表示数组每一项的元素，实例如下：
demoArr.forEach(function(val, index) {
if (e == 'CSS3') {
// 循环被跳过
console.log(val, index);
})具体有以下需要注意的地方
1. 回调函数中有2个参数，分别表示值和索引，这一点与jQuery中的$.each相反
2. forEach无法遍历对象
3. forEach无法在IE中使用，firefox和chrome实现了该方法
4. forEach无法使用break，continue跳出循环，使用return时，效果和在for循环中使用continue一致
5. 最重要的一点，可以添加第二参数，为一个数组，而且回调函数中的this会指向这个数组。而如果没有第二参数，则this会指向window。
var newArr = [];
demoArr.forEach(function(val, index) {
this.push(val); // 这里的this指向newArr
}, newArr)虽然在原生中forEach循环的局限性很多，但是了解他的必要性在于，很多第三方库会扩展他的方法，使其能够应用在很多地方，比如angular的工具方法中，也有forEach方法，其使用与原生的基本没有差别，只是没有了局限性，可以在IE下使用，也可以遍历对象var result = [];
angular.forEach(demoArr, function(val, index) {
this.push(val);
}, result);
函数具体的实现方式如下，不过有一点值得注意的是，当使用continue时，如果你将i++放在了后面，那么i++的值将一直不会改变，最后陷入死循环。因此使用do/while一定要小心谨慎一点。
不建议使用do/while的方式来遍历数组
// 直接使用while
(function() {
var i = 0,
len = demoArr.
while(i & len) {
if (i == 2) {
// // 函数执行被终止
// 循环被终止
// 循环将被跳过，因为后边的代码无法执行，i的值没有改变，因此循环会一直卡在这里，慎用！！
console.log('demoArr['+ i +']:' + demoArr[i]);
console.log('------------------------');
// do while
(function() {
var i = 0,
len = demo3Arr.
if (i == 2) {
// 循环被终止
console.log('demo2Arr['+ i +']:' + demo3Arr[i]);
} while(i&len);
})();$.each
$.each(demoArr|demoObj, function(e, ele))
可以用来遍历数组和对象，其中e表示索引值或者key值，ele表示value值$.each(demoArr, function(e, ele) {
console.log(e, ele);
})输出为0 "Javascript"
4 "jQuery"
5 "angular"
这里有很多需要注意的地方
1. 使用return 或者return true为跳过一次循环，继续执行后面的循环
2. 使用return false为终止循环的执行，但是并不终止函数执行
3. 无法使用break与continue来跳过循环
4. 循环中this值输出类似如下
console.log(this);
//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}
console.log(this == ele);
关于上面的this值，遍历一下
$.each(this, function(e, ele) {
console.log(e, ele);
// 4 3为什么length 和 [[PrimitiveValue]]没有遍历出来？突然灵光一动，在《javascript高级编程》中找到了答案，大概意思就是javascript的内部属性中，将对象数据属性中的Enumerable设置为了false
// 查看length的内部属性
console.log(Object.getOwnPropertyDescriptor(this, 'length'));
// Object {value: 4, writable: false, enumerable: false, configurable: false}.each中的(this)
与this有所不同，不过遍历结果却是一样，你可以在测试代码中打印出来看看$(selecter).each
专门用来遍历DOMList
$('.list li').each(function(i, ele) {
console.log(i, ele);
// console.log(this == ele); // true
$(this).html(i);
if ($(this).attr('data-item') == 'do') {
$(this).html('data-item: do');
1. i: 序列值 ele: 只当前被遍历的DOM元素
2. this 当前被遍历的DOM元素，不能调用jQuery方法
3. $(this) == $(ele) 当前被遍历元素的jquery对象，可以调用jquery的方法进行dom操作
使用for in 遍历DOMList
因为domList并非数组，而是一个对象，只是因为其key值为0，1，2… 而感觉与数组类似，但是直接遍历的结果如下var domList = document.getElementsByClassName('its');
for(var item in domList) {
console.log(item, ':' + domList[item]);
// length: 5
// item: function item() {}
// namedItem: function namedItem() {}因此我们在使用for in 遍历domList时，需要将domList转换为数组var res = [].slice.call(domList);
for(var item in res) {}类似这样的对象还有函数的属性arguments对象，当然字符串也是可以遍历的，但是因为字符串其他属性的enumerable被设置成了false，因此遍历出来的结果跟数组是一样的，也就不用担心这个问题了.
如果你发现有些人写函数这样搞，不要惊慌，也不要觉得他高大上鸟不起
+function(ROOT, Struct, undefined) {
}(window, function() {
function Person() {}
})()(), !function() {}() +function() {}() 三种函数自执行的方式^_^转载:
扫码向博主提问
非学，无以致疑；非问，无以广识
擅长领域：
js中的三种遍历方式
jquery each()的用法--遍历键值对
没有更多推荐了，（16）有你，（17）继续。。。
1-DOM中-类数组对象遍历(转换)为数组
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
lang="en"&
http-equiv="Content-Type" content="text/charset=UTF-8"&
&DOM-BODY-类数组对象遍历(转换)为数组&
id="header"&这个是头部&
id="content"&
id="left"&左侧&
id="right"&右侧&
type="text/javascript"&
var content = document.getElementById("content");
console.log(content.childNodes);
var nodes = content.childN
nodes = Array.prototype.slice.call(nodes,0);
console.log(nodes);
var els = nodes.filter(function(item){
return item.nodeType ==1;
console.log(els);
ES6中用数组方法遍历DOM
对象转化成数组格式
字符串、数组、JSON字符串、JSON对象、DOMList转换方法总结
Array.from() 将类数组转成数组
对象和数组的遍历方法
用数组存储三个学生对象，并遍历数组
你可能不知道的JavaScript 遍历DOM的几种方法
用js实现类数组转换为数组
PHP 用DOMdocument把XML转换成数组
xxx.forEach is not a function（DOM集合--类数组对象转化为数组）
没有更多推荐了，jstl中foreach的items值可以用jquery或者dom更改吗
[问题点数：40分，结帖人cai_jim_xiaoniu]
本版专家分：0
结帖率 85.71%
CSDN今日推荐
本版专家分：6953
本版专家分：0
匿名用户不能发表回复！|
其他相关推荐迎接黎明的曙光前行！
xxx.forEach is not a function（DOM集合--类数组对象转化为数组）
1，错误：Uncaught TypeError: hdList.forEach is not a function
2，错误的原因
原生js获取的DOM集合是一个类数组对象，所以不能直接利用数组的方法（例如：forEach，map等），需要进行转换为数组后，才能用数组的方法！
3，6种解决办法(假如hdList是一个DOM集合)
（1），Array.from()方法
//将hdList用Array.from（）方法转换为数组，并用list变量接收
let list = Array.from(hdList);
（2），用Array.prototype.slice.call（elems）方法转化为数组
//hdList转化为数组并用list变量接收
let list = Array.prototype.slice.call(hdList);
//添加点击事件
list.forEach((current,index) =& {
current.addEventListener('click',() =& {
animationFn(index);
（3），用[ ...elems ]方法转化为数组
let list = [...hdList];//用[ ...elems ]方法转化为数组并用list接收
//添加点击事件
list.forEach((current,index) =& {
current.addEventListener('click',() =& {
animationFn(index);
（4），用Array.prototype.forEach.call(elem,callback)方法
//直接对hdList集合进行循环或者map等
Array.prototype.forEach.call（hdList,function(){
Array.prototype.map.call（hdList,function(){
（5），用Array.prototype.forEach.apply(elem,[callback])方法
//添加点击事件
Array.prototype.forEach.apply(hdList,[(current,index) =& {
current.addEventListener('click',() =& {
animationFn(index);
（6），用bind方法
//添加点击事件
Array.prototype.forEach.bind(hdList)((current,index) =& {
current.addEventListener('click',() =& {
animationFn(index);
JavaScript中的apply()方法和call()方法使用介绍
1-DOM中-类数组对象遍历(转换)为数组
[我的博客，欢迎交流！](http://rattenking.gitee.io/stone/index.html)
[我的CSDN博客，欢迎交流！](https://blog.csdn.net/m0_)
[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)
[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)
[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_44082)
[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_96944)
[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)
[微信小程序实例列表](http://blog.csdn.net/m0_/article/details/)
[前端笔记列表](http://blog.csdn.net/m0_/article/details/)
[游戏列表](http://blog.csdn.net/m0_/article/details/)
.forEach is not a function 。 Vue2.0 推荐开发环境 brew
【JavaScript学习笔记】8：for-in遍历,ES6的for-of遍历,可迭代对象的forEach()方法
没有更多推荐了，