JS 对象属性相关(检查属性、枚举属性等)


Posted in Javascript onApril 05, 2015

1.删除属性

delete运算符可以删除对象的属性

delete person.age //即person不再有属性age

delete person['age'] //或者这样

delete只是断开属性和宿主对象的联系,而不会去操作属性中的属性 看到delete a.p之后b.x仍然为1

var a = {p:{x:1}};
var b = a.p;
console.log(a.p.x); //1
delete a.p;
console.log(a.p.x); //TypeError a.p is undefined
console.log(a.p); //undefined
console.log(b.x); //1

delete只能删除自有属性,不能删除继承属性(要删除继承属性必须从定义这个属性的原型对象上删除它,当然,这会影响到所有继承来自这个原型的对象)

function inherit(p){ 
  if(p == null){  // 不能从null中继承
    throw TypeError();
  }
  if(Object.create){  //如果有这个方法就直接使用
    return Object.create(p);
  }
  var t = typeof p;
  if(t !== "object" || t !== "function"){  //要继承的对象 类型要符合
    throw TypeError();
  }
  function f(){ }; //定义一个空的构造函数
  f.prototype = p; //原型指向要继承的对象p
  return new f();  //创建f对象,此对象继承自p
}

var obj = {x:1};
var obj1 = inherit(obj);
obj1.y = 2;
console.log("x = "+obj1.x+" y = "+obj1.y); //x = 1 y = 2
delete obj1.x;
delete obj1.y;
console.log("x = "+obj1.x+" y = "+obj1.y); //x = 1 y = undefined

当然了,可配置的属性才能用到delete
比如

delete Object.prototype; // 不能删除 不可配置

var x = 1;
delete this.x; //不能删除
this.y = 1;
delete y; //这样可以删除

function f(){ }
delete this.f; //不能删除

2.检测属性

使用 “in"

in 运算符希望它的左操作数是一个字符串或者可以转换为字符串,希望它的右操作数是一个对象

var data = [5,6,7];
console.log("0" in data); //有下标0
console.log(1 in data);  //1可以转换成"1"
console.log("4" in data); //下标只有 1 2 3
 
var obj = {x:1};
console.log("x" in obj); //true
console.log("y" in obj); //false
console.log("toString" in obj); //true 因为obj继承了这个方法

使用hasOwnProperty()或者propertyIsEnumerable() --- 后者是前者的增强
顾明思议

var obj = {x:1};
console.log(obj.hasOwnProperty("x")); //true
console.log(obj.hasOwnProperty("y")); //false
console.log(obj.hasOwnProperty("toString")); //false 因为obj继承了这个方法,但不是它自己的

只有检测到是自由属性并是可枚举的属性时,后者才返回true

var obj = {x:1};
console.log(obj.propertyIsEnumerable("x")); //true
console.log(obj.propertyIsEnumerable("y")); //false
console.log(obj.propertyIsEnumerable("toString")); //false 因为obj继承了这个方法,但不是它自己的
console.log(Object.prototype.propertyIsEnumerable("toString")); //false 因为最原始的的 toString就是不可枚举的

当然,也可以直接用 ”!=="运算符判断

var obj = {x:1};
console.log(obj.x !== undefined);//true
console.log(obj.y !== undefined);//false
console.log(obj.toString !== undefined); //true

3.枚举属性

var obj = {x:1,y:2};
for(p in obj){
 console.log(p);//x y
 console.log(obj.p);// undefined undefined
 console.log(obj[p]);//1 2
}

拓展1:

每个对象都有与之相关的原型(prototype)、类(class)、可扩展性(extensible)
要检测一个对象是否是另一个对象的原型(或处于原型链中),可以使用isPrototypeOf()方法

var p = {x:1}; //p原型对象继承自Object.prototype
var o = Object.create(p); //o对象继承自p

console.log(p.isPrototypeOf(o));//true
console.log(Object.prototype.isPrototypeOf(o));//true
console.log(Object.prototype.isPrototypeOf(p));//true

当然,isPrototypeOf()方法和instanceof运算符非常类似
instanceof运算符希望它的左操作数是一个对象,右操作数标识对象的类。如果左侧的对象是右侧类的实例,则表达式返回true,否则返回false

var p = {x:1}; 
console.log(p instanceof Object);//true

var d = new Date();
console.log(d instanceof Date);//true
console.log(d instanceof Object);//true
console.log(d instanceof Number);//false

拓展2:

对象的类属性是一个字符串,用以表示对象的类型信息

一般调用toString()方法后返回形如 [object class]的形式

比如

var obj = {x:1,y:2};

console.log(obj.toString());//[object Object]

所以要想获取对象的类,就可以通过返回的字符串中找出 “class"字段  使用 slice(8,-1)
比如

function classOf(obj){ // 找出类名
 if(obj === null){
  return "Null";
 }
 if(obj === undefined){
  return "Undefined";
 }
 return Object.prototype.toString.call(obj).slice(8,-1);
}

console.log(classOf(1)); //Number
//注意,实际上是这些类型的变量调用toString()方法,而不是通过他们自身直接调用
//console.log(1.toString()); //会报错
var a = 1;
console.log(Number(1).toString()); //1
console.log(a.toString()); //1
console.log({x:1}.toString()); //[object Object]

console.log(classOf(1)); //Number
console.log(classOf("")); //String
console.log(classOf("str")); //String
console.log(classOf(null)); //Null
console.log(classOf(false)); //Boolean
console.log(classOf({})); //Object
console.log(classOf([])); //Array
console.log(classOf(new Date())); //Date
function f(){}
console.log(classOf(new f())); //Object
Javascript 相关文章推荐
javascript面向对象之二 命名空间
Feb 08 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
javascript Array 数组常用方法
Apr 05 #Javascript
javascript数据结构与算法之检索算法
Apr 04 #Javascript
使用jquery制作弹出框效果
Apr 03 #Javascript
javascript 实现map集合
Apr 03 #Javascript
jQuery制作简洁的图片轮播效果
Apr 03 #Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 #Javascript
jQuery实现左右切换焦点图
Apr 03 #Javascript
You might like
PHP删除HTMl标签的实现代码
2013/06/30 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
python实现同一局域网下传输图片
2020/03/20 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
NULL是什么,它是怎么定义的
2015/05/09 面试题
经济贸易系求职信
2014/08/04 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
邀请书模板
2015/02/02 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书