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立即执行函数的三种不同写法
Sep 05 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 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笔记之:php数组相关函数的使用
2013/04/26 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python迭代器常见用法实例分析
2019/11/22 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Python datetime 如何处理时区信息
2020/09/02 Python
python eventlet绿化和patch原理
2020/11/21 Python
给物业的表扬信
2014/01/21 职场文书
前台文员职责范本
2014/03/07 职场文书
财务总监管理职责范文
2014/03/09 职场文书
临床医学专业求职信
2014/08/08 职场文书
法人授权委托书
2014/09/16 职场文书
抗洪救灾标语
2014/10/08 职场文书
apache ftpserver搭建ftp服务器
2022/05/20 Servers
使用CSS实现音波加载效果
2023/05/07 HTML / CSS