在日常工作过程中,我们对于javaScript遍历对象、数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用!

javaScript遍历对象总结



1、使用Object.keys()遍历  

     返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).
var obj = {'0':'a','1':'b','2':'c'};

Object.keys(obj).forEach(function(key){

    console.log(key,obj[key]);

});





2、使用for..in..遍历     

     循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).
var obj = {'0':'a','1':'b','2':'c'};

for(var i in obj) {

    console.log(i,":",obj[i]);

}



3、使用Object.getOwnPropertyNames(obj)遍历

     返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).
var obj = {'0':'a','1':'b','2':'c'};
Object.getOwnPropertyNames(obj).forEach(function(key){ console.log(key,obj[key]); });



4、使用Reflect.ownKeys(obj)遍历

     返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.
var obj = {'0':'a','1':'b','2':'c'};
Reflect.ownKeys(obj).forEach(function(key){ console.log(key,obj[key]); });



javaScript遍历数组总结

1、使用forEach遍历

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

arr.forEach(function(val, index) {

console.log(val, index);
});



2、使用for..in..遍历

var arr=["张三","李四","王五","赵六"];

for (var i in arr){

console.log(i,":",arr[i]);

}



3、使用for-of遍历

 不仅支持数组,还支持大多数类数组对象,例如DOM NodeList对象.

 也支持字符串遍历,它将字符串视为一系列的Unicode字符来进行遍历.
var arr=["张三","李四","王五","赵六"];

for (var value of arr){

   console.log(value);

}





摘自:https://www.cnblogs.com/chenyablog/p/6477866.html

JavaScript 遍历对象、数组总结的更多相关文章

  1. javaScript遍历对象、数组总结(转载)

    javaScript遍历对象.数组总结  转载来源 https://www.cnblogs.com/chenyablog/p/6477866.html 在日常工作过程中,我们对于javaScript遍 ...

  2. 如何利用JavaScript遍历JSON数组

    1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. javascript 克隆对象/数组的方法 clone()

      1 11 javascript 克隆对象/数组的方法 clone() 1 demo: code: 1 var Obj; 2 let clone = (Obj) => { 3 var buf; ...

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

        javaScript遍历对象总结 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性). var obj = {'0':'a ...

  5. JavaScript遍历对象4种方法和遍历数组的3种方式 代码

    //遍历对象 4种方法 //Object.keys(obj).forEach() console.log("keys...遍历</br>") var obj1 = { ...

  6. jquery遍历对象,数组,集合

    1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...

  7. JavaScript遍历对象-总结一

    原生JavaScript 遍历 1.for 循环遍历 let array1 = ['a','b','c']; for (let i = 0;i < array1.length;i++){ con ...

  8. vue - for 遍历对象和遍历对象数组

    1. 遍历对象时,参数: 第一个为值,第二个为键名,第三个为索引 <!DOCTYPE html> <html lang="en"> <head> ...

  9. JavaScript 遍历对象查找指定的值并返回路径

    问:JavaScript 如何查找对象中某个 value 并返回路径上所有的 key? let obj = { key1: 'str1', key2: { key3: 'str3' }, key4: ...

随机推荐

  1. 【SpringMVC从入门到精通】00-SpringMVC 简介

    笔记来源:[尚硅谷]SpringMVC教程丨一套快速上手spring mvc 目录 SpringMVC 简介 1.课程介绍 2.什么是 MVC? 3.什么是 SpringMVC? 4.SpringMV ...

  2. 二进制部署1.23.4版本k8s集群-2-安装DNS服务

    2.安装DNS服务 为什么要安装bind9? K8S中,使用Ingress进行7层流量调度,需要使用域名,进行7层调度. 以前使用绑定host的方法,来进行域名和IP地址的解析. 在K8S里,没有好的 ...

  3. lavarel 框架 搜索后分页

    ................框架控制器 public function list(Request $request){ $word=$request->input('word'); $arr ...

  4. L2Dwidget二次元前端添加人物插件

    如果想要在博客园上添加这个插件,只需要在设置的"页首html代码"中添加下面的js就行 <!-- 右下角live2d效果 --> <script src=&quo ...

  5. CSS样式下划线

    样式之文字下划线 第一 text-decoration: underline; 缺点是不好修改颜色 不要修改下划线的位置,优点就是一行代码解决 可以使用line-height: 20px; 也能调整位 ...

  6. Ajax结合THymeleaf使用

    <script type="text/javascript"> //通过$("标签"),也可以使用id的点击事件 $("a"). ...

  7. 前端性能优化 —— 使用 BMP 图片代替 canvas.toDataURL

    前端开发中有时需要将 canvas 的内容导出成图片文件,例如供 CSS 使用,通常会使用 canvas.toDataURL,兼容性好并且简单. 不过 canvas.toDataURL 显然是非常低效 ...

  8. 2.3 C++STL vector容器详解

    文章目录 2.3.1 引入 2.3.2 代码实例 2.3.3 运行结果 总结 2.3.1 引入 vector 容器 动态数组 可变数组 vector容器 单口容器(尾部操作效率高) vector动态增 ...

  9. [XCTF嘉年华体验赛](web)web2 assert函数

    0x00 题目分析 浏览一遍页面,在about页面,获得如下信息 访问 .git/ ,页面存在. 使用githack扒下来.得到源码,进行代码审计. 分析得到: 1.flag在flag页面,要看源码才 ...

  10. C++设计模式 - 访问器模式(Visitor)

    行为变化模式 在组件的构建过程中,组件行为的变化经常导致组件本身剧烈的变化."行为变化" 模式将组件的行为和组件本身进行解耦,从而支持组件行为的变化,实现两者之间的松耦合. 典型模 ...