Home > Article > Web Front-end > Sharing common knowledge examples of javaScript
Object
Objects can be defined in two forms: Declaration form and construction form
Declaration form syntax: var myObj = {key:value}
Construction form syntax: var myObj = new Object(); myObj.key = value;
Type: There are six language types : string number boolean null undefined object
Built-in object: String Number Boolean Object Function Array Date RegExp Error
var myObject = {
a:2
}
myObject.a; //2 Properties Access
myObject["a"] // 2 Key access
ES6 Computable property name
var prefix = "foo";
var myObject = {
[prefix + "bar"] : "hello",
[prefix + "baz"]: "world"
};
myObject["foobar"]; // hello
myObject["foobaz"]; // world
1.writable Determine whether the value of the property can be modified
var myObject = {};
Object.defineProperty(myObject,"a",{
value:2,
writable:false, // Not writable!
configurable: true,
enumerable: true
});
myObject.a = 3;
myObject.a; // 2
2.configurable
As long as the property is configurable, you can use the defineProperty(..) method to modify the description property.
var myObject = {
a : 2
};
myObject.a = 3;
myObject. a; // 3
Object.defineProperty(myObject,"a",{
value: 4,
writable:true,
configurable:false,// Not configurable
enumerable: ture
});
myObject.a; // 4
myObject.a = 5;
myObject.a; // 5
Object.defineProperty(myObject,"a ",{
value: 6,
writable:true,
configurable:true ,
enumerable: ture
}) // TypeError
configurable is modified to flash is one-way , cannot be undone
delete is only used to delete the deletable attributes of the object.
var myObject = {
a:2
};
myObject.a //2
delete myObject.a;
myObject.a // undefined
3.enumerable controls whether the attribute appears in the object's property enumeration.
1.Object constant, combine writable: false and configurable: false to create a real constant Property
(cannot be modified, redefined or deleted).
var myObject = {};
Object.defineProperty(myObject,"FAVORITE_NUMBER",{
value:42 ,
writable: false,
configurable: false
})
2.Prohibit expansion
To prevent an object from adding new properties and retaining existing properties, you can use Object.preventExtensions(...)
var myObject = {
a:2
};
Object.preventExtensions(myObject);
myObject.b = 3;
myObject.a; / / undefined
3.Seal
Object.seal(...) will create a " Preserved object ", this method will actually call
Object.preventExtensions(...) on an existing object and Mark all properties as configurable:false.
4.Freeze
Object.freeze(...) A frozen object will be created. This method will actually call
Object.seal(...) on an existing object. It can also deep freeze an object.
Getter and Setter
var myObject = {
// Givea Define a getter
get a() {
return 2;
}
}
myObject.a = 3;
myObject.a; // 2
Because only a is defined The getter,so when setting the value of a , the set operation will Assignment operations are ignored and no errors are thrown.
Generally speaking, getter and setter appear in pairs
var myObject = {
// Define a getterget a( ) {return this._a_;
},
//
Define a ## for a#setterset a(val) {this._a_ = val * 2;
}};myObject.a = 2;myObject.a; // 2Existence
You can determine whether this attribute exists in the object without accessing the attribute:
var myObject = {
a:2
};
("a" in myObject); // true
("b" in myObject); // false
myObject.hasOWnProper("a"); // true
myObject.hasOwnProperty("b"); // false
in Operation The operator checks whether the property is in the object and [[Prototype]] prototype chain.
hasOwnProperty(...) Only checks whether the property is in the myObject object.
Determine whether the property is enumerable:
var myObject = {};
Object.defineProperty(
myObject,
"a",
// Make a enumerable like a normal property
{enumerable: true,value:2}
);
Object.defineProperty(
myObject,
"b",
// Letb not enumerable
{enumerable: false,value:3}
)
myObject.propertyIsEnumberable("a"); // true
myObject.propertyIsEnumber("b"); // false
Object.keys(myObject); / / ["a"]
Object.getOwnPropertyName(myObject); // ["a","b"]
propertyIsEnumerable(...) will check the given Whether the property name exists directly in the object ( instead of in the prototype chain) and satisfies enumerable:true
Object.keys(...) will return an array , including all enumerable properties
Object.getOwnPropertyNames(...) Returns an array containing all properties, whether enumerable or not
Traversal
for .. in Can be used to traverse the enumerable property list of an object
For numerical values For indexed arrays, you can use the standard for loop
newly added in ES5 forEach(..) every(.. .) some(..)
forEach(...) will iterate through all the values in the array and ignore the return value of the callback function.
every(...) will run until the callback function returns false
some(...) It will run until the callback function returns true
Es6 Add for .. of Loop syntax
var myArray = [1,2,3];
for(var v of myArray){
console.log(v)
}
Ordinary objects do not have an @@iterator, You can customize any object you want to traverse
var myObject = {
a:2,
b:3
};
Object.defineProperty(myObject,Symbol.iterator,{
enumerable: false,
writable: false,
configurable: true,
value: function() {
var o = this;
var idx = 0;
var ks = Object.keys(o);
return {
next: function(){
value: o[ks[idx++]],
done:(idx > ks.length)
}
}
}
})
// 手动遍历myObject
var it = myObject[Symbol.iterator]();
it.next(); // {value:2,done: false}
it.next(); // {value:3,done: false}
it.next(); // {undefined,done: true}
// 用 for..of 遍历myObject
for(var v of myObject){
console.log(v)
} // 2 // 3
The above is the detailed content of Sharing common knowledge examples of javaScript. For more information, please follow other related articles on the PHP Chinese website!