Home > Web Front-end > JS Tutorial > JS object attributes related (check attributes, enumeration attributes, etc.)_javascript skills

JS object attributes related (check attributes, enumeration attributes, etc.)_javascript skills

WBOY
Release: 2016-05-16 16:05:53
Original
1426 people have browsed it

1. Delete attributes

The delete operator can delete the properties of an object

Copy code The code is as follows:

delete person.age //That is, person no longer has the attribute age
delete person['age'] //or this

Delete only disconnects the attribute from the host object, but does not operate the attributes in the attribute. See that after deleting a.p, b.x is still 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
Copy after login

delete can only delete own properties, not inherited properties (to delete an inherited property, you must delete it from the prototype object that defines this property. Of course, this will affect all objects that inherit from this prototype)

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
Copy after login

Of course, delete can only be used for configurable properties
For example

delete Object.prototype; // 不能删除 不可配置

var x = 1;
delete this.x; //不能删除
this.y = 1;
delete y; //这样可以删除

function f(){ }
delete this.f; //不能删除
Copy after login

2. Detect attributes

Use "in"

The

in operator expects its left operand to be a string or convertible to a string, and its right operand to be an object

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继承了这个方法
Copy after login

Use hasOwnProperty() or propertyIsEnumerable() --- the latter is an enhancement of the former
Gu Mingsi thought

var obj = {x:1};
console.log(obj.hasOwnProperty("x")); //true
console.log(obj.hasOwnProperty("y")); //false
console.log(obj.hasOwnProperty("toString")); //false 因为obj继承了这个方法,但不是它自己的
Copy after login

Only when it is detected that it is a free attribute and an enumerable attribute, the latter will return 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就是不可枚举的
Copy after login

Of course, you can also directly use the "!==" operator to determine

var obj = {x:1};
console.log(obj.x !== undefined);//true
console.log(obj.y !== undefined);//false
console.log(obj.toString !== undefined); //true 
Copy after login

3. Enumeration attributes

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
} 
Copy after login

Expansion 1:

Each object has its associated prototype, class, and extensibility
To detect whether an object is the prototype of another object (or is in a prototype chain), you can use the isPrototypeOf() method

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
Copy after login

Of course, the isPrototypeOf() method is very similar to the instanceof operator
The instanceof operator expects its left operand to be an object and its right operand to identify the class of the object. If the object on the left is an instance of the class on the right, the expression returns true, otherwise it returns 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
Copy after login

Expansion 2:

The class attribute of an object is a string that represents the type information of the object

Generally, after calling the toString() method, it returns a form of [object class]

For example

Copy code The code is as follows:

var obj = {x:1,y:2};
console.log(obj.toString());//[object Object]

So if you want to get the class of the object, you can find the "class" field in the returned string and use slice (8, -1)
For example

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
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template