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写的操作系统
Apr 23 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
node实现的爬虫功能示例
May 04 Javascript
vue实现微信分享功能
Nov 28 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python实现简单银行管理系统
2019/10/25 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
企业面试题试卷附带答案
2015/12/20 面试题
Java程序员面试题
2016/09/27 面试题
银行办理业务介绍信
2014/01/18 职场文书
团日活动策划书
2014/02/01 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
目标管理责任书
2014/04/15 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
自荐信格式模板
2015/03/27 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书