资讯专栏INFORMATION COLUMN

对象和数组的遍历

neroneroffy / 1724人阅读

摘要:数组遍历普通循环代码如下注有待优化的空间优化循环注将长度缓存起来,避免重复获取,基本是性能最高的一种数组遍历方法。循环的使用范围包括数组,,,类数组对象如对象,对象等,对象,以及字符串等对象的属性遍历关于对象的遍历,主要是指其属性的遍历。

数组遍历 1.普通for循环

代码如下

for(var i=0;i

注:有待优化的空间

2.优化for循环
for(var i=0,len=arr.length;i

注:将长度缓存起来,避免重复获取,基本是性能最高的一种数组遍历方法。(在遍历长度较多的数组时,才会显示优势)

3. forEach循环
arr.forEach(function(el){
    //do something here
})

注:数组自带的方法

4. for in 方法
var arr=[2,3,4]
for(var item in arr){
    console.log(item)// 0,1,2
}

注:效率很低.该方法获取的是键名。应用于array时,为下标index,应用到对象时,为key。下文提到的for of循环获取到的是键值。

5. map方法
arr.map(function(item){
    //do something here
})

注:方式优雅,效率很低,还不如forEach

6. for of 循环(ES6)
for(var item of arr){
 // do something here
}

注:是ES6所支持的方法,凡是具有iterator接口的数据接口,都可以使用for of遍历他的成员。其内部的实现方法是调用数据结构的Symbol.iterator 方法。for of循环的使用范围包括:数组,Set,Map,类数组对象(如arguments对象,DOM Nodelist对象等),Generator对象,以及字符串等

对象的属性遍历

关于对象的遍历,主要是指其属性的遍历。以下总结6种方法来遍历对象的属性

1. for in

for in循环遍历对象自身可继承的 可枚举属性(不包含Symbol属性)

2. Object.keys(obj)

该方法返回一个数组,包含对象自身的(不包含继承的)所有可枚举的属性(不包含Symbol属性)

注:大多数情况下,我们只关心对象自身的属性,引入继承的属性会让问题 复杂化。所以尽量不要用for in循环而使用Object.keys()代替

3. Object.getOwnPropertyNames(obj)

包含对象自身的所有属性(不包含Symbol属性,但是包含不可枚举的属性)

4. Object.getOwnPropertySymbols(obj)

返回一个数组,包含对象自身的所有Sybmol属性。

5. Reflect.ownKeys(obj)

返回一个数组,包含对象自身的所有属性,不管属性名是否是Symbol或字符串,也不管是否是可枚举的

6. Reflect.enumerate(obj)

与for in循环相同

扩展阅读:属性的可枚举性

描述

对象的每个属性都有一个描述对象(Descriptor),用于描述该属性的行为。

获取方法

通过Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象

var a={A:1}
Object.getOwnPropertyDescriptor(a,"A");
//{
//    configurable:true,
//    enumerable:true,可枚举性,true
//    value:1,
//    writable:true
//}

引入目的

当改属性为false时,标示某些操作会忽略这个属性:

for in 循环

Object.keys()

JSON.stringify()

Object.assign()

Reflect.enumerate()

实际上,引入改属性的目的,就是为了让某些属性能够规避掉for in循环
另外,ES6种规定,所有Class原型上的方法都是不可枚举的。

参考文献:
阮一峰:《ES6标准入门》

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88109.html

相关文章

  • JavaScript:遍历

    摘要:中可以实现遍历的数据类型主要是对象,其中包括普通对象与数组。遍历器是一种接口,为各种不同的数据结构提供统一的访问机制。实例五遍历器对象实例五是的遍历过程,通过手动调用其对象的方法实现信息获取。为每个数组元素执行函数。 前言   将依据自身痛点学习,计划对原生JavaScript写一个系统,本文为第一篇,感兴趣的同学可以关注个人公众号:ZeroToOneMe,或者github博客,将持续...

    ThinkSNS 评论0 收藏0
  • Js之浅拷贝深拷贝与对象数组遍历

    摘要:判断是深拷贝对象还是数组如果要拷贝的对象的属性依然是个复合类型,递归运用递归,当要拷贝的对象或者数组的属性依然是个对象或者数组时,递归调用。遍历对象聊完了深拷贝和浅拷贝,接下来说一下遍历。 在js这门语言中,数据存放在堆中,而数据的引用的存放在栈中。 浅拷贝 我们说的浅拷贝,指的是,引用地址的拷贝,栈中两块不同的引用地址都指向了堆中同样一块区域。所以,我们通过一个地址修改了堆中的数据,...

    liangzai_cool 评论0 收藏0
  • jS:关于对象遍历数组遍历那些事

    摘要:如图遍历数组遍历数组元素并以某种方式处理每个元素是一个常见的操作。如图不过,里的功能比较强大,可以遍历而且返回值是的则被省略掉总结遍历对象,遍历出来的是键名,而不是键值,参数必须是对象。 可能是由于职业的关系,下班之后完全不想Open PC,但很多知识点有必要自己做个小小总结。本人之前对原生Array和Object完全没概念。 遍历对象的方法: Object.keys(Object)...

    qingshanli1988 评论0 收藏0
  • Array迭代器

    摘要:如上图所示,本文主要阐述了的四种迭代器,,和的功能和区别动态数组每次遍历开始时都会重新计算一次数组的长度稀疏数组不会跳过无效数组动态数组与一样,会遍历到新增加的元素稀疏数组也不会跳过无效数组特点可以遍历字符串可以遍历类数组对象对象可 showImg(https://segmentfault.com/img/bV4PxL?w=3134&h=932); 如上图所示,本文主要阐述了Array...

    Turbo 评论0 收藏0
  • JavaScript循环遍历你会用哪些?

    摘要:总结中的循环遍历定义一个数组和对象经常用来遍历数组元素遍历值为数组元素索引用来遍历数组元素第一个参数为数组元素,第二个参数为数组元素索引,第三个参数为数组本身可选没有返回值用来遍历数组元素第一个参数为数组元素,第二个参数为数组元素索引,第三 总结JavaScript中的循环遍历 定义一个数组和对象 const arr = [a, b, c, d, e, f]; const obj = ...

    CHENGKANG 评论0 收藏0
  • 数据类型 数组

    摘要:数组的本质数组属于一种特殊的对象。运算符会返回数组的类型是对象的键名一律为字符串,所以,数组的键名其实也是字符串。数组的空位读取遍历无两个逗号之间没有任何值,我们称该数组存在空位。数组的方法可以将类似数组的对象变成真正的数组。 定义数组的本质length 属性in 运算符for...in 循环和数组的遍历数组的空位类似数组的对象参考链接 1.定义 任何类型的数据,都可以放入数组。 va...

    Charlie_Jade 评论0 收藏0

发表评论

0条评论

neroneroffy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<