js 中常用的循环
参考文章:
首先是数组中可以使用的
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属性,但是包括不可枚举属性).