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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
js 调整select 位置的函数
Feb 21 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
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
PHP5常用函数列表(分享)
2013/06/07 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP session 会话处理函数
2016/06/06 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
python实现类之间的方法互相调用
2018/04/29 Python
python版飞机大战代码分享
2018/11/20 Python
python绘制直方图和密度图的实例
2019/07/08 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
国王的演讲观后感
2015/06/03 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技
HttpClient实现表单提交上传文件
2022/08/14 Java/Android