xCatalog [1] query [2] settings [3] Delete [4] inherit the preceding words
For an object, property manipulation is a topic that cannot be bypassed. Similar to the basic operation of "Delete and delete", attribute operations are divided into attribute query, property setting, property deletion, and property inheritance. This article is the second article of the object series--Property manipulation
Property Query
Property queries generally have two methods, including the dot operator and the square bracket operator
var o = { ' Hello World ' /' Hello World '// ' Hello World '
[note] There can be Chinese in the variable because Chinese is equivalent to a character and is treated the same as English characters, so it can be written as a person. White or person[' white '
var person = { 1}person. White; // 1person[' White ']; // 1
"Dot operator"
The dot operator is a common notation for many object-oriented statements, and because of its simplicity, it is more commonly used than the square bracket operator.
Because JavaScript is a weakly typed language, you can create any number of attributes in any object. But when you pass the dot operator (.) When you access the properties of an object, the property name is represented by an identifier, and the identifier conforms to the variable naming convention. Identifiers must appear directly in JavaScript programs, which are not data types, so programs cannot modify them
var o = { A:1, 1:2};console.log (O.A); // 1 // because the variable can not start with a number, so o.1 error Console.log (o.1); // uncaught syntaxerror:missing) after argument list
"Square Bracket Operator"
When you access an object's properties by using the square bracket operator ([]), the property name is represented by a string. Strings are JavaScript data types that can be modified and created in a program's run
There are two advantages of using the square bracket operator
"1" can be accessed by variable to access the property
var a = 1; var o = { 1:10}o[a]; // Ten
The "2" property name can be an invalid JavaScript identifier
var myObject = { 123: ' Zero ', class:' foo '};console.log (myobject[ ' 123 '],myobject[' class '); // ' zero ' foo 'console.log (myobject.123); // Error
Values in square brackets if non-string types are implicitly converted to strings using string (), or if they are string types, if the original value is quoted, it will be recognized as a variable, if the variable is undefined, the error
varperson ={};p erson[0];//the number in [] does not error, but is automatically converted to a stringPerson[a];//[] The element that conforms to the variable naming convention is treated as a variable, the variable is not defined, and the errorPerson["];//the empty string in [] does not have an error, is actually present and can be called, but is not displayed in the collection on the right side of the consoleperson[undefined];//not error, but automatically converted to stringperson[NULL];//not error, but automatically converted to stringperson[true];//not error, but automatically converted to stringperson[false];//not error, but automatically converted to string
Computable attribute Name
You can use an expression inside the square bracket operator
var a = 1; var person = { 3: ' abc '+ 2]; ' abc '
However, if you want to use an expression inside the object literal for the property name, you need to use the ES6 's Computable property name
var a = 1; // uncaught syntaxerror:unexpected token + var person = { + 3: ' abc '};
ES6 adds a computable attribute name that can be used to wrap an expression in a literal as a property name
var a = 1; var person = { + 3]: ' abc '};p erson[4]; // ' abc '
Property Query Error
"1" Query a non-existent property does not error, but returns undefined
var person = {};console.log (PERSON.A); // undefined
"2" If the object does not exist, attempting to query the properties of this non-existent object will cause an error
Console.log (PERSON.A); // uncaught Referenceerror:person is not defined
This can be used to check whether a global variable is declared
// Check if a variable is declared if // Error
// All global variables are properties of the Window object. The meaning of WINDOW.A is to read the A property of the Window object, and if the property does not exist, return to undefined without error if// no error
property settings
property settings, also known as property assignments, are the same as property queries, with the dot operator and the square bracket operator.
O.P = ' abc '; o[' p '] = ' abc ';
Before setting properties on an object, it is common to detect whether an object exists
var len = undefined; if (book) { if(book.subtitle) { = book.subtitle.length; }}
The above code can be simplified to
var len = Book && book.subtitle && book.subtitle.length;
[note] about the application of logic and && operators
Null and undefined are not objects, setting properties for them will give an error
null. A = 1; // uncaught Typeerror:cannot Set Property ' A ' of nullUNDEFINED.A = 1; // uncaught Typeerror:cannot Set Property ' A ' of undefined
Because string, number, and Boolean have corresponding wrapper objects, setting properties on them does not give an error
' abc '. A = 1; // 1 (1). A = 1; // 1 true. A = 1; // 1
Property Delete
Use the delete operator to delete object properties (including array elements)
var o = { 1};console.log (O.A); // 1 in O); // trueconsole.log (delete o.a); // trueconsole.log (O.A); // undefined in O); // false
[note] null or undefined the object property, and the property is not deleted
var o = { 1= undefined;console.log (O.A); // undefined in O); // trueconsole.log (delete o.a); // trueconsole.log (O.A); // undefined in O); // false
Array length is not changed when you use Delete to delete an array element
var a = [n/a]; Delete a[2]; in A; // falseA.length; // 3
The delete operator can only delete its own property and cannot delete an inherited property (to delete an inherited property must remove it from the prototype object that defines the property, and this affects all objects that inherit from the prototype)
var o = { A:1}var obj =2; Console.log (OBJ.A); // 2console.log (delete obj.a); // trueconsole.log (OBJ.A); // 1console.log (delete obj.a); // trueconsole.log (OBJ.A); // 1
return value
The return value of the delete operator is a Boolean value of TRUE or False
"1" returns True when the delete operator is used to delete an object property or if an array element is deleted successfully
var o = {a:1}; var arr = [1];console.log (Delete o.a); // trueconsole.log (delete arr[0]); // true
"2" returns True when using the delete operator to delete a nonexistent property or a non-lvalue value
var o = {};console.log (Delete o.a); // trueconsole.log (delete 1); // trueconsole.log (delete {}); // true
"3" returns False when a variable is deleted using the delete operator, referenceerror error is thrown in strict mode
var a = 1; Console.log (Delete a); // falseConsole.log (a); // 1' use strict '; var a = 1; // uncaught Syntaxerror:delete of an unqualified identifier in strict modeConsole.log (Delete a);
"4" returns False when using the delete operator to delete a non-configurable property, TypeError error is thrown in strict mode
var obj = {};object.defineproperty (obj,' a ', {configurable:false}); Console.log ( delete obj.a); // false' use strict '; var obj = {};object.defineproperty (obj,' a ', {configurable:false}); // uncaught typeerror:cannot Delete property ' A ' of #<object>console.log (delete obj.a);
Property inheritance
Each JavaScript object is associated with a different object. "Another object" is a prototype that we know well, and each object inherits properties from the prototype. All objects created by the direct amount of the object have the same prototype object and can obtain a reference to the prototype object through Object.prototype
var obj == = = = = = = Object.prototype); // true
Note Object.prototype the prototype object is NULL, so it does not inherit any properties
null); // true
The property that the object itself has is called its own property (own), and the property inherited from the prototype object is called an inherited property.
var o = {a:1}; var obj == 2; // inherit from the Prototype object O's property aconsole.log (OBJ.A); // 1 // own attribute Bconsole.log (OBJ.B); // 2
Inch
The in operator can determine whether a property is not on the object, but cannot distinguish its own or inherited properties
var o = {a:1}; var obj == 2; Console.log ( in obj); // true in obj); // true in O); // false
For-in
The for-in loop allows you to iterate through all the enumerable properties in the object.
var o = {a:1}; var obj == 2; for (var in obj) { console.log (obj[i]); // 2 1}
hasOwnProperty ()
The hasOwnProperty () method allows you to determine whether the property is a property of its own or an inherited property
var o = {a:1}; var obj == 2; Console.log (Obj.hasownproperty (' a ')); // falseConsole.log (Obj.hasownproperty (' B ')); // true
Object.keys ()
The Object.keys () method returns all enumerable owned properties
var o = {a:1}; var obj = object.create (o,{ c:{value:false= 2; Console.log (Object.keys ( obj)); // [' B ']
Object.getownpropertynames ()
Unlike the Object.keys () method, the Object.getownpropertynames () method returns all its own properties (including non-enumerable properties)
var o = {a:1}; var obj = object.create (o,{ c:{value:false= 2; Console.log ( Object.getownpropertynames (obj)); // [' C ', ' B ']
Resources
"1" W3school-javascript advanced Tutorial--Object Application http://www.w3school.com.cn/js/
"2" Ruan one peak JavaScript standard reference Tutorial--Object http://javascript.ruanyifeng.com/grammar/object.html
"3" JavaScript authoritative Guide (6th edition), Chapter 6th object
"4" JavaScript Advanced Programming (3rd Edition), chapter 6th, Object-oriented programming
5 "javascript Statement Essence" Chapter 3rd Object
6 "JavaScript Object-Oriented Essentials", chapter 3rd Understanding objects
"7", "You don't know the volume of JavaScript," chapter 3rd Object
"8" The extension of the object in the 7th chapter of ECMASCRIPT6
In-depth understanding of JavaScript Object Series Part II-Property manipulation