JS对象的创建,访问以及遍历删除新增修改以及属性的检测_js遍历对象并移除属性-程序员宅基地

技术标签: HTML+CSS+JS  javascript  开发语言  ecmascript  

目录

JS对象的创建

JS对象的访问

 遍历删除新增修改

 检测对象的属性是否是自有或者继承属性  in

检测对象的属性是否是自有属性,区分继承属性   hasOwnProperty

 检测对象的属性是否是可枚举属性        propertyIsEnumerable


JS对象的创建

对象的初始化有两种方式,构造函数模式和字面量模式。

字面量模式

对象使用"{}"作为对象的边界,对象是由多个属性组成,属性与属性之间通过","隔开,属性名与属性值通过":"隔开;属性名一般不添加引号(当属性名中出现特殊字符的时候需要添加引号),属性值如果是字符串的一定添加引号。

构造函数模式

使用Object或者使用自定义构造函数来初始化对象

// {}
var obj1 = {};
// 直接使用字面量
var obj2 = {
    name:'lisi',
    age:18
};
// 使用构造函数
var obj3 = new Object();

JS对象的访问

属性访问方式也有两种,点访问、中括号访问。

点后面直接跟的是对象的属性,如果属性存在可以访问到,如果属性不存在,得到undefined。 中括号 中 放的是变量,中括号可以将该变量进行解析。

var obj = {
    name:'zhangsan',
    age:12,
    sayName:function(){
        console.log('我被访问了');
        return 1;
    }
}

// 访问属性 点访问法
console.log(obj.name);
// 中括号访问法 可以解析变量
console.log(obj['age']);
console.log(obj['sayName']());  // 没返回值 undefined

 遍历删除新增修改

普通版的for循环可以遍历数组,但无法遍历对象。

增强版的for循环:

for..in用于遍历数组或者对象的属性。

obj对象:依次从obj中获取到属性名 “自定义变量名key”用来指定是数组的元素索引,也可以是对象的属性。

for(自定义变量名 in 数组/对象){
	执行代码
}
for(var key in obj){
	var value=obj[key];
}
// 遍历对象 key属性名 obj[key]访问该属性名对应的属性值
for(let key in obj){
    console.log(key,obj[key]);
}

// 删除一个属性  delete
delete obj['name'];
console.log(obj);

// 新增
obj['name'] = 'zhangsan';
console.log(obj);

 检测对象的属性是否是自有或者继承属性  in

检测对象的属性是否是自有或者继承属性 in obj,是自有或继承返回true,反之false

// 自有属性或继承属性
var obj = {
    name:'zhangsan',
    age:20,
};
console.log('name' in obj);
console.log('age' in obj);
// 继承来的 
console.log('gender' in obj);
console.log('toString' in obj);

检测对象的属性是否是自有属性,区分继承属性   hasOwnProperty

// 是否是自有属性,对继承属性返回false
console.log(obj.hasOwnProperty('name'));
console.log(obj.hasOwnProperty('age'));
console.log(obj.hasOwnProperty('gender'));
console.log(obj.hasOwnProperty('toString'));

 

 检测对象的属性是否是可枚举属性        propertyIsEnumerable

// 是否是可枚举属性 propertyIsEnumerable
console.log(obj.propertyIsEnumerable('name'));
console.log(obj.propertyIsEnumerable('age'));
console.log(obj.propertyIsEnumerable('gender'));
console.log(obj.propertyIsEnumerable('toString'));

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_53866767/article/details/131283983

智能推荐

Qt5通信 QByteArray中文字符 出现乱码 解决方法_qbytearray中文乱码-程序员宅基地

文章浏览阅读2.4k次,点赞3次,收藏9次。在写qt网口通信的过程中,遇到中文就乱码。解决方法如下:1.接收端处理中文乱码代码如下 QByteArray-> QString 中文乱码解决: #include <QTextCodec>QByteArray data= tcpSocket->readAll(); QTextCodec *tc = QTextCodec::codecForName("GBK"); QString str = tc->toUnicode(data);//str如果是中文则是中文字符_qbytearray中文乱码

JavaScript之DOM操作获取元素、事件、操作元素、节点操作_元素事件-程序员宅基地

文章浏览阅读2.5k次,点赞2次,收藏15次。什么是 DOM?文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式DOM 树文档:一个页面就是一个文档,DOM 中使用 document 表示元素:页面中的所有标签都是元素,DOM 中使用 element 表示节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中使用 node._元素事件

安卓基础知识(一) 服务(Service)_安卓服务-程序员宅基地

文章浏览阅读1.4k次,点赞3次,收藏7次。关于服务的一些基本知识,包括活动对接口的方法调用,接口实现,服务生命周期等知识。_安卓服务

JDBC使用数据库连接池连接数据库(DBCP,C3P0,Druid)_采用连接池方式连接数据库-程序员宅基地

文章浏览阅读7.9k次,点赞5次,收藏8次。小白式数据库连接池使用,看完拿捏数据库连接池。_采用连接池方式连接数据库

C++多线程同步_c++线程同步-程序员宅基地

文章浏览阅读4.9k次,点赞5次,收藏36次。摘要:本文介绍了C++11中如何开启新线程,并详细讲解了线程的基础同步原语:mutex, lock_guard, unique_lock, condition variable和semaphore等。如何采用async, packaged_task和promise实现future同步机制?怎样处理spurious wakeup?本文以质数判定服务为例为大家分享C++多线程同步措施!1. C++线程和基础同步原语Thread mutex, lock_guard, unique_lock con._c++线程同步

STM32 GPIOx通用输入输出I/O端口的BSRR寄存器与BRR功能简述_gpiob->brr-程序员宅基地

文章浏览阅读3.3k次,点赞4次,收藏9次。STM32 GPIOx通用输入输出I/O端口的BSRR寄存器与BRR功能简述_gpiob->brr

随便推点

(转)30 IMP-00019: row rejected due to ORACLE error 12899-程序员宅基地

文章浏览阅读590次。IMP-00019: row rejected due to ORACLE error 12899IMP-00003: ORACLE error 12899 encounteredORA-12899: value too large for column "CRM"."BK_ECS_ORDER_INFO_00413"."POSTSCRIPT" (actual: 895, maximum..._row rejected due to oracle

降低Nginx代理服务器的磁盘IO使用率,提高转发性能_nginx tcp转发 硬盘io-程序员宅基地

文章浏览阅读918次。目前很多Web的项目在部署的时候会采用Nginx做为前端的反向代理服务器,后端会部署很多业务处理服务器,通常情况下Nginx代理服务器部署的还是比较少,而且其以高效性能著称,几万的并发连接处理速度都不在话下。然而去年的时候,我们的线上系统也采用类似的部署结构,同时由于我们的业务需求,Nginx的部署环境在虚拟机上面,复用了其他虚拟机的整体磁盘,在高IO消耗的场景中,我们发现Nginx的磁盘_nginx tcp转发 硬盘io

Activiti 开发环境搭建_antdev activity-程序员宅基地

文章浏览阅读645次。Activiti 开发环境的搭建非常简单,主要分为 Activiti runtime 的安装以及 Eclipse 开发环境的配置。本文以 Windows 平台为例介绍 Activiti 5.8 版的开发环境的搭建配置过程。Activiti 的运行时程序可以从http://www.activiti.org/download.html 下载,目前最新版本为 5.8。为了配置使用 Activ_antdev activity

Vuex: 实现同级组件的简单通信_vuex的组件同级通信-程序员宅基地

文章浏览阅读2.3k次。1. Vuex 是什么?Vuex 是专门为Vue 组件化思想带来的组件间通信问题提供的解决方案,主要解决以下两个问题:多个视图依赖于同一状态 来自不同视图的行为需要变更同一状态2. 核心概念State: 可以简单理解为Vue 维持的全局变量(状态)。 Getter: 获取State 中的状态的方法,可以在取出前对数据进行二次处理。 Mutation: 是改变State 中的状态..._vuex的组件同级通信

逆向中常见的Hash算法和对称加密算法的分析_findcrypt3 支持哪些算法-程序员宅基地

文章浏览阅读8.4k次,点赞31次,收藏33次。逆向中常常出现一些加密算法,如果我们能对这些加密算法进行快速识别则会大大减少我们逆向的难度,虽然IDA已有密码分析神器Findcrypt,但掌握手动分析方法能帮助我们应对更多的情况。这篇文章将介绍逆向中常见的单项散列算法和对称加密算法的识别方法。0xFF. 前言在很长一段时间里我经常发现自己面对复杂的加密算法无从下手,可能是因为还没有系统学过密码学吧orz,总之这个问题困扰了我很久。于是最近我花了一些时间来解决自己在密码学这块的薄弱点,写下这篇文章的目的之一也是为了巩固所学知识。加密算法的部分没有_findcrypt3 支持哪些算法

smplayer_Windows上的SMPlayer入门(更好地播放电影)-程序员宅基地

文章浏览阅读5.3k次。smplayerThere are lots of video players out there, but one that we think gets overlooked is SMPlayer. It can do anything other video players can do and even more – like remembering where you left off ..._sm69影视

推荐文章

热门文章

相关标签