js中数组遍历的几种方法及其区别（js数组遍历的常用的几种方法以及差异和性能优化）

本文目录

• js数组遍历的常用的几种方法以及差异和性能优化
• 原生JS forEach和map遍历的区别以及兼容写法
• 5种js遍历对象属性的方法
• js中数组和对象循环遍历
• JS数组方法some()和every()的区别
• JS常用的几种数组遍历方式以及性能分析对比实例详解
• 如何形象地解释 JavaScript 中 map，foreach，reduce 间的区别
• JS数组方法
• JS数组循环遍历常用的9种方法
• JS中迭代和遍历有什么区别

js数组遍历的常用的几种方法以及差异和性能优化

《script type="text/javascript"》
/*对比:
1、map速度比foreach快
2、map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，foreach返回undefined
3、map因为返回数组所以可以链式操作，foreach不能
4, map里可以用return ,而foreach里用return不起作用，foreach不能用break，会直接报错*/
/*方法一:*/
var arr1 = ;
for(var i = 0, len = arr1.length; i 《 len; i++) { //优化性能处理
c***ole.log(arr1, ’for遍历出来的数据’); //每个item 1,2,3,4,5,6
}
/*方法二:*/
/*forEach方法中的function回调支持3个参数，第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身*/
var arr2 = [{
name: ’bob’,
age: 20
},
{
name: ’tom’,
age: 18
},
{
name: ’sos’,
age: 19
}
]
arr2.forEach((val, i) =》 { //没有返回值的，对原来数组也没有影响
c***ole.log(val, ’遍历出来的每个obj’)
});
/*方法三:*/
var fruits = ;
let arr = fruits.map((item, index) =》 {
c***ole.log(item, ’top’)
c***ole.log(index, ’top’)
return item * 8
})
c***ole.log(arr, ’newarr’) // "newarr"
var a = fruits.indexOf("Apple", 4);
c***ole.log(a)
//for 和 forEach都是普通循环，map 带返回值并且返回一个新数组；
/*
*当前元素的值,当期元素的索引值,当期元素属于的数组对象;
语法:array.map(function(currentValue,index,arr), thisValue)
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
* */
/*方法四:*/
/*兼容写法：
不管是forEach还是map在IE6 - 8 下都不兼容（ 不兼容的情况下在Array.prototype上没有这两个方法）, 那么需要我们自己封装一个都兼容的方法：*/
/**
* forEach遍历数组
* @param callback 回调函数；
* @param context 上下文；
*/
Array.prototype.myForEach = function myForEach(callback, context) {
context = context || window;
if(’forEach’ in Array.prototye) {
this.forEach(callback, context);
return;
}
//IE6-8下自己编写回调函数执行的逻辑
for(var i = 0, len = this.length; i 《 len; i++) {
callback && callback.call(context, this, i, this);
}
}
/**
* map遍历数组
* @param callback 回调函数；
* @param context 上下文；
*/
Array.prototype.myMap = function myMap(callback, context) {
context = context || window;
if(’map’ in Array.prototye) {
return this.map(callback, context);
}
//IE6-8下自己编写回调函数执行的逻辑var newAry = ;
for(var i = 0, len = this.length; i 《 len; i++) {
if(typeof callback === ’function’) {
var val = callback.call(context, this, i, this);
newAry = val;
}
}
return newAry;
}
《/script》

原生JS forEach和map遍历的区别以及兼容写法

JS 的 forEach 和 map 方法都是 ES5 为处理数组而新增的迭代方法，区别在于 map 方法返回一个新数组，而 forEach 方法没有返回值。举个例子：

var arr = ;
// 目标：上述数组里的每一项偶数都+1，使整个数组里都是奇数。
// map 方法
var result = arr.map(function(item) {
    return item % 2 === 0 ? item + 1 : item;
});
c***ole.log(result);  // 
// forEach 方法
var result = ;
arr.forEach(function(item) {
    if (item % 2 === 0) {
        item += 1;
    }
    result.push(item);
});
c***ole.log(result);  // 

从上述例子可以看出，使用 map 方法要方便的多，代码也更优雅。这里需要注意的是这两个方法不支持 IE9 以下的 IE 浏览器，要兼容的话一般用 for 循环来实现：

// for 循环方法
var result = ;
for (var i = 0; i 《 arr.length; i++) {
    if (arr % 2 === 0) {
        arr += 1;
    }
    result.push(arr);
}
c***ole.log(result);  // 

5种js遍历对象属性的方法

ES6 一共有 5 种方法可以遍历对象的属性。

（1）for...in

for...in 循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。

（2）Object.keys(obj) ie9

Object.keys 返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

（3）Object.getOwnPropertyNames(obj) ie9

Object.getOwnPropertyNames 返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols 返回一个数组，包含对象自身的所有 Symbol 属性的键名。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys 返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。

​ 其中兼容性最好的是for... in来进行遍历，因为我们通常只需要遍历对象自身拥有的属性 所以使用 Object.prototype.hasOwnProperty() 兼容到ie5.5 方法来排除继承的属性

注意：即使属性的值是 null 或 undefined ，只要属性存在， hasOwnProperty 依旧会返回 true 。

​

​ 如果不在意兼容性问题，用keys方法，搭配for... of来遍历也不错，、

​ for...of是es6引入的用于遍历可迭代对象的语法，相当于python里的for in。

​ js的for...in别扭的地方在于，遍历数组和对象都是返回的key值，遍历数组是下标值。for...of遍历数组会返回每一个值，跟foreach类似的效果，但是对于对象，只支持实现了迭代器的对象。

js中数组和对象循环遍历

数组：

var arr = ;

for (let i = 0;i《arr.length;i++){

c***ole.log(i,arr)

};

对象：

var person = { name:’tom’,age:’29’,***:’男‘}；

// 对象如果要用for循环来遍历，需要先有Object.key()的方法来拿到可迭代（遍历）的私有属性名的集合（数组）

var keys = Object.keys(person);

for (let i = 0;i《keys.length;i++){

c***ole.log(keys);

};

数组：

for(let key in arr){

// 值得注意的是，key为数组的索引，如若需要获取属性的值，则需要使用数组加索引下标 的形式来获取

c***ole.log(key,arr);

}

对象：

for(let key in obj){

// 值得注意的是，key为对象的键名，键值要以obj的方式来获取

c***ole.log(key，obj);

}

数组：

for(let value of arr){

//值得注意的是，for...of跟for...in是不一样的，for...in遍历的是数组的索引，for...of遍历的是数组的值

c***ole.log(value);

}

对象：

for...in是不能单独来遍历一个对象的，会报错。

如果对象是一个类数组对象，那用array.from方法转成一个数组就可以用for...of来遍历了。

或者结合Object.keys()方法来使用

for(let key of Object.keys(obj)){

// for...of遍历输出的也是键名

c***ole.log(key,obj);

}

数组：

forEach（）方法遍历数组是没有返回值

值得注意的是数组中有几项，那么传递进去的匿名回调函数就需要执行几次；

arr.forEach((item,index,arr)=》{

c***ole.log(item,index,arr)

)

// 其中item是数组中的当前项，index是数组中的当前下标，arr是原始数组

对象：

原则上forEach是用来遍历数组的，不能遍历对象，但是可以用Object.getOnwPropertyNames()方法来使得对象能被forEach遍历出来。

Object.getOnwPropertyNames()返回一个数组，成员是参数对象自身全部属性的属性名，不管该属性是否能被遍历。

Object.getOnwPropertyNames(obj).forEach((item,index,arr)=》{

c***ole.log(item,index,obj)

})

JS数组方法some()和every()的区别

共同点：

1.遍历数组；

2. 三个参数分别是item,index,arr(数组具体项，位置，数字本身)；

3.返回的都是布尔值；

区别：

1.some()方法，遍历数组的每一项，若其中一项为 true，则返回true；
2.every()方法，遍历数组每一项，若全部为true，则返回true；

JS常用的几种数组遍历方式以及性能分析对比实例详解

concat()连接两个或更多的数组，并返回结果。
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()颠倒数组中元素的顺序。
shift()删除并返回数组的第一个元素。
slice()从某个已有的数组返回选定的元素等等。

如何形象地解释 JavaScript 中 map，foreach，reduce 间的区别

map,forEach，reduce是html5的javascript数组中提供的新的API接口。
其中
1.map是遍历数组，通过回调函数中的计算返回一个和原数组项对应的结果，回调函数中需要return 如果不写则return undefined，新的数组无原数组的引用。
2. forEach是单纯的对数组进行遍历，和for类似，回调函数中对每一项的处理根据自己的意愿处理，没有返回值。即使回调中写return 结果也是undefined。
3. reduce 是对数组进行遍历，它第一个参数为回调函数a,回调函数a接受两个参数，第一个参数为当前结果(source)，第二个参数为当前遍历的执行数据(item)。第二个参数为初始化值。一般用于递归操作。需要有返回值。

JS数组方法

数组的创建方式
1.字面量的形式： var arr=;
1.构造函数： var arr1=new Array();//不常用

Array构造函数有一个很大的**，就是不同的参数，会导致它的行为不一致。
1.单个数值作为参数，参数表示数组的元素个数

可以看到，Array作为构造函数，行为很不一致。因此，不建议使用它生成新数组，直接使用数组字面量是更好的做法。

push/pop/unshift/shift//增加、删除元素 （数组的方法，所以使用时应调用
数组名.方法名（））

arr. slice/splice//截取元素
arr.slice(); 原数组不发生改变
无参数时，返回原数组，相当于数组的复制。
一个参数时，从参数作为下标的元素截取，至数组结束。
二个参数时，从第一个参数作为下标（索引）的元素开始截取，到第二个参数作为下标的元素结束，但不包括第二个参数作为下标的函数。 （起始元素包含，结尾元素不包含）
多个参数时，前两个参数起效，后边的参数无效。
arr.splice(); 原数组改变
无参数时，返回空数组。
一个参数时，从参数作为下标的元素截取，至数组结束。
二个参数时，从第一个参数作为下标（索引）的元素开始截取，即表示截取的起始位置，第二个参数表示截取的元素个数。
多个参数时，前两个参数起效，后边的参数从原数组的截取起始位置开始填充，填充到原数组。
reverse/sort//改变元素位置
arr.reverse(); //数组翻转(元素位置颠倒)
arr.sort(); 从小到大排序，但遵循的是字符串的按位比较规则，所以排序结果容易出现异常。

join();//不改变原数组
join() 以指定参数作为连接符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。

concat();//拼接数组 不改变原数组

ES5新增数组操作方法
indexOf (item) 返回元素在数组中对应的索引值，找不到的话，返回-1，用以测试元素是否存在于数组中
forEach(function(item,index)) 遍历数组,没有返回值
map(function(item,index)) 遍历数组,存在返回值
filter(function(item)) {return item》2} 返回大于2的元素
some 返回布尔值，条件部分成立|| arr.some(function(item){return item》2} )
every 返回布尔值，条件全部成立&& arr.every(function(item){return item》2} )
reduce (对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。)arr.reduce(function(a,b){return a+b;});

toString()和toLocaleString()
功能：将数组的每个元素转化为字符串，并且输出用逗号分隔的字符串列表。功能类似join()；
参数：无
输出：字符串

indexOf()和lastIndexOf()
功能：搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引或者如果没有找到就返回-1；lastIndexOf为反向搜索。
参数：元素的值，起点索引（可选）
输出：索引值或-1

Array.from()
功能：将两类对象转为真正的数组：类似数组的对象和可遍历的对象
参数：待转换的对象，第二个参数可选，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
输出：数组

Array.of()
功能：将一组值，转换为数组。
参数：数组元素
输出：数组

copyWithin()
功能：在当前数组内部，将指定位置的成员复制到其他位置，返回变化后的数组。
参数：索引（从该位置开始替换数据）；索引（从该位置开始读取数据，默认为0，负值表示倒数）；索引（到该位置前停止读取，默认为最大索引）
输出：返回当前替换后的数组。
注意：改变了当前数组

find()和findIndex()
功能：找到第一个符合条件的数组成员。
参数：回调函数，所有数组成员依次执行该函数，直到找到第一个返回值为true的成员。回调函数可以接受三个参数，依次为值，位置，原数组。
输出：find()返回找到的成员；findIndex()返回成员的位置。

fill()
功能：使用给定的值，填充一个数组。
参数：第一个参数为待填充的值，第二和第三参数可选，分别表示填充的起始和结束位置(不包括)。
输出：填充后的数组

entries()、keys()、values()
功能：用于遍历数组，可以用for…of循环进行遍历。区别是keys()是对键名的遍历、values是对键值的遍历、entries()是对键值对的遍历。
参数：无
输出：遍历器对象

includes()
功能：表示某个数组是否包含给定的值
参数：第一个参数必选（待检查的给定值），第二个参数可选，表示搜索的起始位置，默认为0，负数表示倒数的位置。
输出：一个布尔值。
注意：和indexOf的区别，indexOf进行了运算符的强比对，会导致对NaN误判。

JS数组循环遍历常用的9种方法

首先定义一个数组

c***t arr = ;

第一种：for循环

for (let i = 0;i《arr.length;i++){

   c***ole.log(arr);

}

for(j=0,len=arr.length;j《len;j++){}//这种方法基本上是所有循环遍历方法中性能最高的一种

第二种 for of (需要ES6支持) 性能要好于forin，但仍然比不上普通for循环

for (let value of arr){

       c***ole.log(value);

}

第三种 for in 它的效率是最低的

for (let i in arr){

      c***ole.log(arr);

 }

第四种 foreach() 实际上性能比普通for循环弱

    1、箭头函数写法

    arr.forEach(value =》{

        c***ole.log(value);

    })

    2、普通函数写法

    arr.forEach(function(value){

       c***ole.log(value);

     })

第五种 entries()

for (let  of arr.entries()) {

     c***ole.log(value);

 }

第六种 keys()

for (let inx of arr.keys()){

c***ole.log(arr);

}

第七种 reduce()

1、箭头函数

arr.reduce((pre,cur)=》{

       c***ole.log(cur);

 })

2、普通函数

arr.reduce(function(pre,cur){

     c***ole.log(cur);

})

第八种 map() 但实际效率还比不上foreach

1、箭头函数

 arr.map(value=》{

       c***ole.log(value);

 })

2、普通函数

arr.map(function(value){

      c***ole.log(value);

})

第九种 values()

for (let value of arr.values()){

       c***ole.log(value);

 }

JS中迭代和遍历有什么区别

迭代：
1、自己调用自己的方法，或者称递归。这个应该不用多说。
2、还有一种解释：很多程序有迭代器。这是一种用于“遍历”数组的工具对象。一般遍历一个数组都是使用循环变量从0到最后一个，或者使用链表遍历量表中内容。使用迭代器可以不关注数组的具体实现方式，遍历数组中所有成员。
遍历：
对数据结构中每一个成员都进行一次访问的操作就是遍历。比如遍历列表。最为常见得问题是遍历树，遍历树的常见方法有：先序/中序/后序，或者按照另一个纬度划分有，广度遍历和深度遍历。相关具体算法可以查找其他资料。