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 options属性集合操作代码
Dec 28 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 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
第八节--访问方式
2006/11/16 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
JSON格式化输出
2014/11/10 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
Javascript 跨域知识详细介绍
2016/10/30 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
Python装饰器用法实例总结
2018/05/26 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
PyQt QMainWindow的使用示例
2021/03/24 Python
教你打造完美的创业计划书
2014/01/06 职场文书
食堂标语大全
2014/06/11 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2014年优秀党员材料
2014/12/18 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
python开发飞机大战游戏
2021/07/15 Python
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
Go语言测试库testify使用学习
2022/07/23 Golang