This is the 16th day of my participation in the August Text Challenge.More challenges in August

1, Object-oriented, extended-object static method (Understanding)

Object.assign() and object.keys ()/object.values () will be used more often.

01-Object.is()

Function: Strictly matches whether two variables are equal

Note: different from == and ===

The MDN documentation describes the two values as equal if the following conditions are met:

  • Is undefined

  • Is null

  • Either true or false

  • Are strings of the same length and the same characters are arranged in the same order

  • Are the same objects (meaning each object has the same reference)

  • It’s all numbers and

    • Are all+ 0
    • Are all0
    • Is NaN
    • Or are both non-zero and non-nan and have the same value.

Is (value1, value2);

Such as:

Object.is(+0, -0);  // false
Object.is(NaN.NaN); // true
Object.is(0.0); // true
Copy the code

02-Object.assign()

Copy all properties of the source object to the target object

Use: object. assign(Target Object, source Object 1, Source Object 2, Source Object 3…) ;

If there are duplicate attributes, in order, the latter will overwrite the former;

const obj1 = { a: 1.b: 2 };
const obj2 = { b: 3.d: 4 };

const Target = Object.assign(obj1, obj2);

console.log(obj1); // { a: 1, b: 3, c: 4 }

console.log(Target); // { a: 1, b: 3, c: 4 }
Copy the code

03-Object.keys()-values()

1. Object.keys()

Gets all keys of the specified object, returning an array of strings

var obj = { a: 1.b: 2.c: 3 };
var res = Object.keys(obj); 
console.log(res);  // ['a', 'b', 'c']
Copy the code

2. Object.values()

Gets all the values of the specified object, returning an array of enumerable property values found on the object.

var obj = { a: 1.b: 2.c: 3 };
var res = Object.values(obj);
console.log(res);  / / [1, 2, 3]
Copy the code

Does not contain stereotype properties, can get static properties (own), instance object when fetching

04-Object.getOwnPropertyNames()

Gets all keys of the specified object

var arr = ["a"."b"."c"];
console.log(Object.getOwnPropertyNames(arr));  // ["0", "1", "2", "length"]
Copy the code

Does not include stereotype attributes, can get static attributes (built-in + self)

05-Object.getOwnPropertyDescriptor()

Gets a description of an instance property of an object (whether it can be configured, enumerations, values, or overridden).

var obj = {name: 'jack'.age: 18};  // Define an object
var res = Object.getOwnPropertyDescriptor(obj, 'name'); // Gets the specified attribute description of the specified object
console.log(res);  // Specific description
Copy the code

Specific information is as follows:

  • Different :true —– Is configurable, and works without any additional information.
  • Enumerable :true —– is an enumerable (in for.. In a loop can traverse out | keys ())
  • Value: value of the “jack” —– attribute
  • Writable :true —– is rewritable

06-Object.getOwnPropertyDescriptors()

The only difference here is to get all of the property descriptions in an instance, getOwnPropertyDescriptor is to get one of them, so you pass two parameters.

var obj = {name: 'jack'.age:18};
console.log(Object.getOwnPropertyDescriptors(obj));
Copy the code

Return value: key-value pair

  • Key: Property name
  • Value: Attribute description

07-Object.defineProperty()

Used for the description of the set properties (modifying existing properties | new property), and returns the object.

var obj = {
  name: 'jack'.age: 18
};

// Define an object
// Configure the attribute description
Object.defineProperty(obj, 'name', {
  value: 'rose'.// Control the property value
  writable: false.// Controls whether overwriting is allowed false: The value of this property cannot be modified
  enumerable: false.// Whether enumerable, for in traversal, not traversal
  configurable: false If the value is set to false, secondary configuration changes cannot be performed
})

// Set the new value
obj.name = 'Tom'; 

console.log(obj) // {age: 18, name: "rose"} Tom does not take effect because it is not writable
Copy the code

Note the following three points

  • If the defined attribute does not exist, it will be added. If yes, modify it
  • Modify existing attributes. By default, these three values are true
  • Add new attributes, all three of which are false by default

08-Object.defineProperties()

Effect: Set attribute description in batches

var obj = {name: 'jack'.age: 18};
Object.defineProperties(obj, {
        'name': {
            writable: false  // Controls whether overwriting is allowed
        },
        'age': {
            enumerable: false  // Whether it can be enumerated}});Copy the code

09-Object.create()

Create a new object, newObj, and set the prototype object of newObj to sourceObj, which can be used for primitive inheritance

const person = {
  isHuman: false.printIntroduction: function() {
    console.log(`My name is The ${this.name}. Am I human? The ${this.isHuman}`); }};const me = Object.create(person);

me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"
Copy the code

Compatible with the code

function obj(sourceObj) {
    function F(){};
    F.prototype = sourceObj;
    var o = new F();
    return o;
}
Copy the code

10-Object.getPrototypeOf()

Getting the prototype object of an object is equivalent to P. __proto__, except that it is a nonstandard property and is used only for debugging purposes.

const prototype1 = {};
const object1 = Object.create(prototype1);

console.log(Object.getPrototypeOf(object1) === prototype1); // true
Copy the code

11-Object.setPrototypeOf()

Sets the Prototype of a specified object (that is, the internal [[Prototype]] property) to another object or null.

MDN: Object.setprototypeof ()

var dict = Object.setPrototypeOf({}, null);
Copy the code

2, object-oriented – extension -Object. Prototype

01-hasOwnProperty()

Detects the presence of an instance property in an object. This can be used when you only want properties on the object and not on the prototype chain.

const object1 = {};
object1.property1 = 42;

console.log(object1.hasOwnProperty('property1'));  // true

console.log(object1.hasOwnProperty('toString'));  // false

console.log(object1.hasOwnProperty('hasOwnProperty'));  // false
Copy the code

02-isPrototypeOf()

Tests if an object exists on the prototype chain of another object (the whole prototype chain is determined). Return true if it exists, false otherwise.

function Cat(){
	this.name = "Flower";
	this.sex = "girl";

	this.sayHello = function(){
            console.log("My name is" + this.name);
	};
}

var c =  new Cat();
console.log( Cat.prototype.isPrototypeOf(c) ); // true

var obj = {
    weight: "2kg".sayHi: function(){
        console.log("Hello, I am." + this.sex); }};// Override the prototype property of Cat itself with the object obj
Cat.prototype = obj;

var c2 =  new Cat();
console.log( obj.isPrototypeOf(c2) ); // true
Copy the code

03-propertyIsEnumerable()

Check whether the property is enumerable. If it is enumerable, use for.. I can print it out when I loop in

// Set the properties
Object.defineProperty(obj,"age", {enumerable:false});Copy the code

04-toString()

Returns a string description of the current object, not necessarily the string form of the object

  • [obejCT object]
  • (2) the other object types, such as function | array, returns the corresponding string
  • ③ The Number type can pass parameters (base) without passing parameters: the default is decimal
var obj = { name: 'jack' };
obj.toString(); // "[object Object]"

var arr = ['1'.'2'.'3']
arr.toString(); / / "1, 2, 3"

var fun = function () {}
fun.toString(); // "function () {}"
Copy the code

usetoString()Detection Object Type

You can get the type of each object by toString(). To every Object through the Object. The prototype. The toString () to test, need to Function. The prototype. The call () or the Function. The prototype, the apply () in the form of a call, Pass the object to be checked as the first argument, called thisArg.

var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]

/ / Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]
Copy the code

05-valueOf()

JavaScript calls the valueOf method to convert the object to its original value. You rarely need to call the valueOf method yourself; JavaScript automatically calls it when it encounters an object with a raw value to expect.

The return valueOf the valueOf() method for different types of objects

object The return value
Array Returns the array object itself.
Boolean Boolean value.
Date The stored time is millisecond UTC from midnight on January 1, 1970.
Function The function itself.
Number A numeric value.
Object The object itself. This is the default.
String String value.
  Math and Error objects do not have valueOf methods. 
// Array: Returns the Array object itself
var array = ["ABC".true.12, -5];
console.log(array.valueOf() === array);   // true

// Date: the number of milliseconds to midnight on January 1, 1970
var date = new Date(2021.8.13.14.00.23.200);
console.log(date.valueOf());   / / 1631512823200

// Number: Returns a numeric value
var num =  15.26540;
console.log(num.valueOf());   / / 15.2654

// Boolean: returns the Boolean value true or false
var bool = true;
console.log(bool.valueOf() === bool);   // true

// new a Boolean object
var newBool = new Boolean(true);
// valueOf() returns true, and both values are equal
console.log(newBool.valueOf() == newBool);   // true
The former is a Boolean type, while the latter is an object type
console.log(newBool.valueOf() === newBool);   // false

// Function: returns the Function itself
function foo(){}
console.log( foo.valueOf() === foo );   // true
var foo2 =  new Function("x"."y"."return x + y;");
console.log( foo2.valueOf() );


// Object: Returns the Object itself
var obj = {name: "Zhang".age: 18};
console.log( obj.valueOf() === obj );   // true

// String: Returns a String value
var str = "testString";
console.log( str.valueOf() === str );   // true

// New a string object
var str2 = new String("testString");
// Both values are equal, but not identical, because they are of different types. The former is of type string, while the latter is of type object
console.log( str2.valueOf() === str2 );   // false
Copy the code

Three, object-oriented – extension – basic wrapper type

Q: What are the basic packaging types?

A: Wrap basic data types as object types

There are three types: Boolean, Number, and String

true|false
        new Boolean(true)
        new Boolean(false)
Awesome!
        new Number(Awesome!);
'jack'
        new String('jack');
Copy the code

Boolean Specifies the type of a Boolean object

Create a Boolean object

Boolean objects are used to convert a value that is not of Boolean type to a Boolean value (true or false).

var Boolean = new Boolean(a);Copy the code

Instance methods

1. Boolean.prototype.toString()

The toString() method returns the string form of the specified Boolean object.

const flag = new Boolean(true);

console.log(flag.toString()); // true
Copy the code

2. Boolean.prototype.valueOf()

The valueOf() method returns the original valueOf a Boolean object.

const x = new Boolean(a);console.log(x.valueOf()); // false
Copy the code

2, number Number object type

Create Number object

var num = new Number(value);
Copy the code

The Number object is mainly used for:

  • Returns if the argument cannot be converted to a numberNaN
  • In a non-constructor context (e.g., nonenewOperator),NumberCan be used to perform type conversions.

attribute

One of them is listed here, and you can refer to MDN for details.

Number.MAX_VALUE

The number. MAX_VALUE property represents the maximum Number that can be represented in JavaScript.

Because MAX_VALUE is a static attribute of the Number object, you should use number.max_value directly, rather than as an attribute of the created Number instance.

The following code takes the product of two values. If this is less than or equal toMAX_VALUEThe callfunc1Functions; Otherwise, callfunc2Function.

if (num1 * num2 <= Number.MAX_VALUE) {
   func1();
} else {
   func2();
}
Copy the code

String Indicates the type of a string object

create

var str = new String(value);
Copy the code

The difference between basic strings and string objects

Here is a detailed introduction from MDN:

String literals (defined by single or double quotes) and strings that call the String method directly (without generating an instance of a String object through new) are basic strings. JavaScript automatically converts the base string to a string object, and you can only use the string object methods once you have converted the base string to a string object. When the base string needs to call a string object’s method or query value (which the base string doesn’t have), JavaScript automatically converts the base string to a string object and calls the corresponding method or executes a query.

var str1 = "foo";
var str2 = new String(str1);

console.log(typeof str1); // string
console.log(typeof str2);  // object
Copy the code

Four, conclusion

Code word is not easy, if you feel helpful, feel good, welcome to like collection ~

Of course, as it is a personal arrangement, inevitably there will be mistakes, welcome to leave a comment feedback.