js 中常用的循环

时间:2020-12-22 19:37:53

参考文章:

1.js几种数组遍历方式以及性能分析对比

2.javaScript遍历对象、数组总结

首先是数组中可以使用的

1.for 循环

for (let i = 0; i < xxx.length; i++) {
...
}

  最基本的循环工具,常用于数据循环。据说性能相当不错...

2. 优化版的 for 循环

for(let i = 0,len=arr.length; i < len; i++) {
...
}

  使用变量将数组长度缓存起来,在数组较长的时候优化效果明显。因此,性能最优...

3.forEach

  数组方法。

arr.forEach(function(value[,index,array]){ // index, array 参数可选
...
});

  适用于循环次数未知或者计算次数比较麻烦的情况。性能不如 for 。

  另外,jquery 中还有一个 $.each() 方法,支持 数组 、 json对象 、 dom结构 的遍历。其 api 如下:

$.each(arr, function(index,element){
...
})
$.each(json1,function(key,value){  //遍历键值对
...
})

  这是 jquery each 的另外写法,多用于遍历元素。

$('domElement').each(function(index, val) { //第一个参数表示索引下标,第二个参数表示当前索引元素
...
})

  

  需要注意的是 forEach 和 $.each 回调函数中参数的位置。

4.forEach 变种

Array.prototype.forEach.call(arr,function(el){
...
});

  由于forEach 是数组方法,对于非数组类型数据,通过这种方法可以让类似的数组(如 NodeList )拥有 foreach 功能。

  性能弱于 forEach。

5.for ... in ...

for (var index in arr) {
...
}

  遍历数组的效率最低。且此时参数 i 是 string 型,而不是普通 for 当中的 number 型。

  另外,如果 Array 被扩充(原型上自定义了某些属性或者方法),这些扩充也会被遍历出来,容易出错。详情移步 https://www.cnblogs.com/yang-C-J/p/6284038.html

6.for ... of ... (es 6 标准)

  允许遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。不可遍历普通对象。

for (var val of iterable) {
...
}

  for ... in ... 遍历 index,那么 for ... of ... 遍历 index 位置上的值。

  性能好于 for ... in ... 但是任然比不上 for。

7.map

  意如其字,映射,将原数组元素根据回调函数进行映射,不修改原数组,返回新数组。

var newArr = arr.map(function(Val,index,arr){
return 某一个规则
})

  示例:

var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
return item * item;
}); alert(arrayOfSquares); // 1, 4, 9, 16

  效率比不上 forEach 。

  以上就是常用到的数组遍历的 api ,另外,es 6 还有一些 api:keys(),values(),entries(),它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历,如:

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"

对象中的遍历

1.object.keys()

  返回一个数组,值是对象的 keys ,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

var obj = {a:1,b:2,c:3}
var keys = Object.keys(obj);
console.log(keys)
// ['a', 'b', 'c']

2.for...in...

  同上

3.Object.getOwnPropertyNames(obj)

  返回一个数组,值是对象的 keys ,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).