### #

Know the syntax and classification of deconstruction, and use the concise syntax of deconstruction to quickly assign values to variables.

Destruct assignment is a kind of quick and concise syntax for assigning values to variables. Essentially, it is still assigning values to variables. It is divided into two types: array destruct and object destruct.

3.1 Array Deconstruction

Array destructuring is a concise syntax for quickly batching the unit values of an array to a list of variables, as shown in the following code:

<script>
  // A normal array
  let arr = [1.2.3];
  Declare variables a, b, and c in batches
  // Assign values 1, 2, and 3 to variables a, b, and c
  let [a, b, c] = arr;
  console.log(a); / / 1
  console.log(b); / / 2
  console.log(c); / / 3
</script>
Copy the code

Conclusion:

  1. Assignment operator=On the left side of the[]For batch declaration of variables, the cell value of the array on the right will be assigned to the variable on the left
  2. The order of the variables corresponds to the position of the values in the array
  3. When the number of variables is greater than the number of cell values, the extra variables are assigned toundefined
  4. If the number of variables is less than the number of cell values, it can pass.Gets the remaining cell values, but only in the last position
  5. Default values for variables are allowed to be initialized, and only cell values areundefinedIs used to set the default value

Note: Support multi-dimensional deconstruction and assignment, more complex subsequent application needs to further analysis

3.2 Object Deconstruction

Object destructuring is a concise syntax for quickly batching object properties and methods to a set of variables, as shown in the following code:

<script>
  // Normal objects
  let user = {
    name: 'Ming'.age: 18
  };

  // Batch declare variable name age
  // Assign values 1, 2, and 3 to variables a, b, and c
  let {name, age} = user;

  console.log(name); / / xiao Ming
  console.log(age); / / 18
</script>
Copy the code

Conclusion:

  1. Assignment operator=On the left side of the{}For batch declaration of variables, the property value of the object on the right will be assigned to the variable on the left
  2. The value of an object property is assigned to a variable with the same name as the property
  3. The attribute time variable value consistent with the variable name cannot be found in the objectundefined
  4. Allows initialization of a variable with a default value if the property does not exist or the cell value isundefinedIs used to set the default value

Note: Support multi-dimensional deconstruction and assignment, more complex subsequent application needs to further analysis

Advanced JavaScript – Day 2

Understand the basic concepts of object-oriented programming and the function of constructors, understand the language characteristics of all objects in JavaScript, and master the use of common object properties and methods.

  • Understand general concepts in object-oriented programming
  • Ability to create objects based on constructors
  • Understand the language characteristics of objects in JavaScript
  • Understand the characteristics of reference object type value stores
  • Learn to use common methods for wrapping objects of type

Object oriented

Understands the basic concepts of object orientation and is able to create objects using constructors.

1.1 Constructors

Constructors are functions that are used specifically to create objects. If a function is called with the new keyword, it is a constructor.

<script>
  // Define the function
  function foo() {
    console.log('Functions can also be called from new... ');
  }
  // Call the function
  new foo;
</script>
Copy the code

Conclusion:

  1. usenewThe behavior of a keyword calling a function is called instantiation
  2. The constructor can be omitted when it has no arguments(a)
  3. The return value of the constructor is the newly created object
  4. ConstructorreturnInvalid value returned!

Note: In practice, to visually distinguish constructors from normal functions, it is customary to capitalize the first letter of the constructor.

1.2 Instance Members

Objects created by constructors are called instance objects, and the properties and methods in instance objects are called instance members.

<script>
  // The constructor
  function Person() {
    // This inside the constructor is the instance object

    // Add properties dynamically to an instance object
    this.name = 'Ming';
    // Add an instance object dynamically
    this.sayHi = function () {
      console.log('Hello, everyone.'); }}// instantiate, p1 is the instance object
  // p1 is actually this inside the constructor
  let p1 = new Person();

  console.log(p1);
  console.log(p1.name); // Access the instance properties
  p1.sayHi(); // Call the instance method
</script>
Copy the code

Conclusion:

  1. Inside the constructorthisThis is actually an instance object, and the properties and methods that are dynamically added to it are instance members
  2. Pass arguments to the constructor to dynamically create objects with the same structure but different values
  3. Instance objectconstructorProperty points to the constructor
  4. instanceofThe constructor used to detect the instance object

Note: Constructors create instance objects that are independent of each other.

1.3 Static Members

In JavaScript, the underlying function is essentially an object type, so it is allowed to add properties or methods to a function directly and dynamically. The properties and methods of a constructor are called static members.

<script>
  // The constructor
  function Person(name, age) {
    // Omit the instance member
  }

  // Static properties
  Person.eyes = 2;
  Person.arms = 2;
  // Static methods
  Person.walk = function () {
    console.log('^_^ all people walk... ');
    // This points to Person
    console.log(this.eyes);
  }
</script>
Copy the code

Conclusion:

  1. Static members refer to the properties and methods that are added to the constructor itself
  2. Static members of properties or methods with general public characteristics are set to static members
  3. Static member methodsthisPoints to the constructor itself

2. Everything is an object

Understand the language features of all objects in JavaScript, and master the use of attributes and methods of objects of reference types and wrapper types.

There are six main data types in JavaScript: string, value, Boolean, undefined, NULL, and object. Common object types include array and ordinary object data. String, value, Boolean, undefined, null are also called simple or basic types, and objects are also called reference types.

JavaScript has some built-in constructors, most of the data processing is based on these constructors, JavaScript basic phase of learning Date is the built-in constructor.

<script>
  / / instantiate
	let date = new Date(a);// Date is the instance object
  console.log(date);
</script>
Copy the code

Even strings, numbers, Bores, arrays, and plain objects have specialized constructors that create data of the corresponding type.

2.1 Reference Types

Object

Object is the built-in constructor used to create normal objects.

<script>
  // Create a normal object through the constructor
  let user = new Object({name: 'Ming'.age: 15});

  // Variables declared this way are called literals.
  let student = {name: 'Du Ziteng'.age: 21}
  
  // Object syntax shorthand
  let name = 'little red';
  let people = {
    // Equivalent to name: name
    name,
    Walk: function () {}
    walk () {
      console.log('People have to walk... '); }}console.log(student.constructor);
  console.log(user.constructor);
  console.log(student instanceof Object);
</script>
Copy the code

When you assign a value to a normal object, the data value of the other object changes considerably no matter which variable you change.

Conclusion:

  1. It is recommended to declare objects as literals instead ofObjectThe constructor
  2. Object.assignStatic methods create new objects
  3. Object.keysStatic methods get all the properties of an object
  4. Object.valuesThe presentation method gets all the property values in the object

The difference between stack and stack

  1. The heap and stack are data storage Spaces in memory
  2. Simple types of data are stored in the stack space of memory
  3. The reference type data is stored in the heap space of memory, and the stack memory is the address (room number) of the reference type.
Array

Array is the built-in constructor for creating an Array.

<script>
  // The constructor creates the array
  let arr = new Array(5.7.8);

  // Create array literals
  let list = ['html'.'css'.'javascript'];

  console.log(list.constructor);
  console.log(list instanceof Array);
</script>

Copy the code

When the array is assigned, no matter which variable is changed, the data value of the other object will also change considerably.

Conclusion:

  1. It is recommended to declare arrays as literals instead ofArrayThe constructor
  2. Instance methodsforEachFor traversing groups, insteadforcycle
  3. Instance methodsfilterFilters array cell values to generate a new array
  4. Instance methodsmapIterate over the original array to generate a new array
  5. Instance methodsjoinArray elements are concatenated into character strings
  6. Instance methodsconcatMerge the two arrays to generate a new array
  7. Instance methodssortSort the array cell values
  8. Instance methodsspliceRemove or replace the original array element
  9. Instance methodsindexOfRetrieves the array cell value
  10. Instance methodsreverseInversion array
  11. A static methodfromPseudo-array to array
RegExp

RegExp’s built-in constructor for creating regular expressions.

Regular Expression

<script>
  // The constructor creates the regular
  let reg = new RegExp('\d'.'i');

  // Create regular expressions by literals
  // let reg = /(\d)/i;

  reg.exec('123');
</script>
Copy the code

Conclusion:

  1. It is recommended to use literals to define regular expressions instead ofRegExpThe constructor
  2. RegExpStatic attributes
    1 , 1.     2, $3… Gets a regular grouping unit

When using a constructor to create a regular, there are two ways to write it:

<script>
  // Use // to define the re
  let reg = new RegExp(/\d/);
  
  // Or use '' to define the re
  // If the re is defined in quotes, \d, \s, \wNeed to add an extra \let reg1 = new RegExp('\\d');
</script>
Copy the code

2.2 Packing Type

In JavaScript, strings, values, and bores have the characteristics of objects, such as properties and methods. The following code is an example:

<script>
  // The value is a string
  let str = 'hello world! ';
 	// Count the number of characters
  console.log(str.length);
  
  // Value type
  let price = 12.345;
  // Keep two decimal places
  price.toFixed(2);
</script>
Copy the code

The reason for this is that strings, numbers, and Boolean data are “wrapped” in JavaScript using the Object constructor, and are called wrapped types.

String

String is the built-in constructor used to create a String.

<script>
  // Use the constructor to create a string
  let str = new String('hello world! ');

  // The literal creates the string
  let str2 = 'Hello, world! ';

  // Check whether it belongs to the same constructor
  console.log(str.constructor === str2.constructor); // true
  console.log(str instanceof String); // false
</script>
Copy the code

Conclusion:

  1. It is recommended to declare strings as literals instead ofStringThe constructor
  2. Instance attributeslengthGets the degree length of a string
  3. Instance methodssplitUsed to split strings into arrays
  4. Instance methodstoUpperCaseUsed to convert letters to uppercase
  5. Instance methodstoLowerCaseUse to convert letters to lowercase
  6. Instance methodssliceUsed for string interception
  7. Instance methodsindexOfChecks whether a character is included
  8. Instance methodsstartsWithChecks whether it starts with a character
  9. Instance methodsendsWithDetects whether it ends with a character
  10. Instance methodsreplaceUsed to replace strings. Supports regular match
  11. Instance methodspadStartPatch at the beginning of a fixed – length character
  12. Instance methodspadEndPatch at the end of a fixed length character
  13. Instance methodsmatchUsed to find strings that support regular matching

Note: String can also be used as a normal function, in which case it is used to cast to a String data type.

Number

Number is the built-in constructor used to create a numeric value.

<script>
  // Use the constructor to create the value
  let x = new Number('10');
  let y = new Number(5);

  // Literals create values
  let z = 20;

  // Check whether it belongs to the same constructor
  console.log(x.constructor === z.constructor);
</script>
Copy the code

Conclusion:

  1. It is recommended to declare values as literals instead ofNumberThe constructor
  2. Instance methodstoFixedSet the length of reserved decimal places

Note: Number can also be used as a normal function, in which case it will cast to a numeric data type.

Boolean

Boolean is the built-in constructor used to create Boolean values.

<script>
  // Use the constructor to create a Boolean type
  let locked = new Boolean('10');

  // The literal creates a Boolean type
  let flag = true;

  // Check whether it belongs to the same constructor
  console.log(locked.constructor === flag.constructor);
</script>
Copy the code

Conclusion:

  1. It is recommended to declare booleans in a literal manner rather thanBooleanThe constructor

Note: Boolean can also be used as a normal function, in which case it is used to cast to Boolean data. Converts from other data types to Boolean data are called truly or falsly.

2.3 is at the end

So far, I have a deeper understanding of JavaScript, that everything in JavaScript is an object, as well as the window and Math objects I learned earlier. Finally, I should add that both reference types and wrapper types contain two common methods, toString and valueOf

<script>
  // Object type data
  let user = {name: 'Ming'.age: 18}
  // Value type
  let num = 12.345;
  // The value is a string
  let str = 'hello world! ';
  
  str.valueOf(); / / the original value
  user.toString(); // A string representing the object
</script>
Copy the code

A total of:

  1. valueOfMethod to get the raw value, the basis for internal data operations, is rarely invoked actively
  2. toStringMethod represents an object as a string