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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
javascript取消文本选定的实现代码
Nov 14 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
JavaScript中的继承之类继承
May 01 Javascript
BootStrap中
Dec 10 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
如何实现iframe父子传参通信
Feb 05 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/10/09 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
python实现随机梯度下降法
2020/03/24 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Django之路由层的实现
2019/09/09 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
keras中的History对象用法
2020/06/19 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
编辑个人求职信范文
2013/09/21 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
大学生暑假实习总结
2015/07/13 职场文书
《失物招领》教学反思
2016/02/20 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Django如何与Ajax交互
2021/04/29 Python
python爬虫之selenium库的安装及使用教程
2021/05/23 Python