In-depth understanding of JavaScript Object Series Part II-Property manipulation

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