~ 🚀 ㅤ💪 ㅤ Learning Notes, updated for the third time. Modified contents: closure port 🚀 🚀

type

JS has 7 types of data, including basic data type [number (whole tree or floating point), string, Boolean, NULL, undefine, Symbol] and reference type

Symbol

The statement

let s1 = Symbol(a)// Symbol(s1)
s1
// Add the DES description to the Symbol variable
let s2 = Symbol('des')
// Symbol(s2)
s2
// Get the description
s2.description
let s3 = Symbol(a);let s4 = Symbol('des');
// false
s1 === s3
// false
s2 === s4
Copy the code

Symbol variables are not strings or objects; each Symbol variable is unique.

The prototype
```
// Symbol prototype
Symbol.prototype;
Copy the code
```
1. Symbol {Symbol(symbol.tostringtag): “Symbol”, constructor: ƒ, toString: } *
2. 1. constructor: ƒ Symbol ()
  2. description: [Exception: TypeError: Symbol.prototype.description requires that ‘this’ be a Symbol at Symbol.get description [as description] () at Symbol.o (: 1:8 3)]
  3. toString: ƒ toString ()
  4. valueOf: ƒ the valueOf ()
  5. Symbol(Symbol.toPrimitive): ƒ Symbol.toPrimitive
  6. Symbol(Symbol.toStringTag): “Symbol”
  7. get description: ƒ description ()
  8. proto: Object

conversion

The Symbol variable does not perform any operations, but can be converted to strings and Booles

let s = Symbol('des');
// "Symbol('des')"
String(s)
// "Symbol('des')"
s.toString()
// true
Boolean(s);
Copy the code

role

As the object property name

let obj = {};
let s = Symbol('des');
// Attributes can only be created using the [] method, which is a normal string if used with the dot operator
obj[s] = 1;
// {Symbol(des):1}
obj;
obj.s = 2
// {Symbol(des):1, s:2}
obj;
Copy the code

As a judgment condition variable

const s1 = Symbol('s1')
const s2 = Symbol('s2')
const s3 = Symbol('s3')
switch(s) {
  case s1:
  case s2:
  case s3:
}
Copy the code

Gets the Symbol type attribute name

The Symbol type property can only be obtained by getOwnPropertySymbols and eflect.ownKeys().

let obj = {a: 1};
let s1 = Symbol('s1');
let s2 = symbol('s2');
obj[s1] = 2;
obj[s2] = 3;
// [Symbol(s1),Symbol(s2)]
Object.getOwnPropertySymbols(obj)
// ["a", Symbol(s1),Symbol(s2)]
Reflect.ownKeys(obj)
Copy the code

String

String translation

For special characters such as \, “, backslash (\) translation is required

let a = "\ \"
/ / /
a
a = "\" "
// "
a
Copy the code

Or use Unicode notation:

let a = "\u005c"
/ / /
a
Copy the code

The Unicode notation defaults to only characters between \u0000 and \uFFFF, but {} can be used to change this limitation:

// only 005c will be translated into \, 1 will not be translated
let a = "\u005c1"
/ / \ 1
a
// translate 005C1 as a whole
a = "\u{005c1}"
Copy the code

String traversal

/ / you
let str = String.fromCodePoint(0x2F804);
for(let i = 0; i < str.length; i++) {
  console.log('str:', str[i]);
}
Copy the code

STR: � STR: �

for(let s of str) {
  / / you
  console.log('str:', s)
}
Copy the code

Json format conversion

// Convert the JS object to a JSON-formatted string
JSON.stringify({ x: 1.y: 2 })
// Convert jSON-formatted strings into JS objects
JSON.parse('{"x":5,"y":6}')
Copy the code

String template

Using ` ` ` wrapped string, can pass the variables in the string wrote ‘to obtain the value of the variable as part of the string,’ {} to obtain the value of a variable in the ` as part of the string, ` ‘to obtain the value of the variable as part of the string,’ {} ` inside not only support any expression, also support the calling function in it
```
let a = 'a';
function f() {
  return 'f'
}
let r = 'I'm a string${a} ${f()}Template `;
// I am a string f template"
r
Copy the code
```
The output string reads not only the value of variable A, but also the value returned by function F, with Spaces reserved
The label template

A tag template is not a template, but a way of calling a function. A tag is a function followed by a string template, which is used as an argument to call the function
```
// error
alert 'How are you? '
// success
alert 'How are you? `
Copy the code
```
If the following string template has variables, it splits the string into: function (string,… In the form of the value)
```
let a = 'I'm fine. '
let b = 'I'm not well. '
f 'How are you?${a}How about you?${b} `
/ / is equivalent to
function f('How are you? '.'what about you? ', a, b);
Copy the code
```

variable

Scope of a variable

// All variables are global, except those declared local
var a;
if(true) {
  var b = 1;
}
/ / 1
b
// if a is declared in block, it can only be used in block
let a;
if(true) {
  let b = 1;
}
// error
b
Copy the code

Using let to define variables has the following advantages over var:

Avoid internal variables overwriting external variables of the same name

Avoid leaking loop counters in block-level scopes

for(var i = 0; i < 10; i++) {}
/ / 10
i
for(let j = 0; j < 10; j++) {}
// error
j
Copy the code

Promotion of variables

// undefine
console.log(a);
// var defines the a variable to prompt to the beginning of the code
var a = 1;
// error
console.log(b);
// Let defined variables do not have promotion properties
let b = 2;
Copy the code

Temporary dead zone
```
var a = 1;
function f() {
  // error
  console.log(a);
  let a = 2;
}
Copy the code
```
If let is used to declare a in function f, it will bind a to the region, so that global variable A cannot be used. Therefore, an error will be reported if local variable A is used before declaration.

Declare variables in block-level scopes

{
  // error indicates that a has no scope promotion
  a;
  a = 1;
}
/ / 1
a
{
  // undefine
  b;
  var b = 1;
}
/ / 1
b
{
  // error
  c;
  let c = 1
}
// error
c;
Copy the code

constant

Declare an immutable constant using const.

Note:

Since constants are immutable once declared, declaring a constant without assigning any value is an error
Like the variables declared by let, there is no scope promotion and a temporary dead zone.
For some compound types of data, such as objects with attributes, it is possible to change their attribute values:
```
const obj = {a: 1}
// success
obj.a = 2
// error
obj = {a: 2}
Copy the code
```
A constant is immutable, meaning that the pointer to a constant memory address is immutable, but changing the attributes of the memory address object is not affected, but when obj points to another object, an error is reported.

object

In javascript, an object can be a single entity with attributes and types

Object creation

Create objects by object direct quantity
```
  // Create an object with the name attribute n
  let person = {"name": "n"}
Copy the code
```
Where name is the key name and n is the key value

The key name can be left unquoted, otherwise it is automatically converted to a string, but an error will result if it does not conform to the basic naming conventions of variables:
```
	// error
  let person = {1name: "n"}
  // success
  let person = {"1name": "n"}
Copy the code
```

Create objects with new

  // Create an empty object with new
  let person = new Object(a)let animal = new Object
  // Use the constructor
  function bird(name) {
    this.name = name;
    this.fly = function() {
      console.log("fly"); }}let myBird = new bird("n");
  myBird.fly();
Copy the code

Create creates an Object with object.create

// error
let bird = Object.create()
// Create a plain empty Object, equivalent to new Object, {}
let bird = Object.create(Object.prototype);
// Create an object with the name attribute n
let bird = Object.create({name:"n"});
// Create an object that does not inherit from any object, that is, it has no prototype
let bird = Object.create(null);
// error
console.log("bird:", bird.toString());  
Copy the code

Object reference

let o1 = {p: 1};
// o2 points to o1's memory address
let o2 = o1;
// Change o2's p attribute, in fact, change o1's p attribute value, i.e. O1
o2.p = 2;
// o1 does not change the value of o2, o2 is still: {p:1}
o1 = {p: 2};
Copy the code

This refers to a reference to the current region object:

let o = {p: 1}
o.f = function() {
  / / 1
  this.p;
}
Copy the code

Object properties

Get property values

Object.property

  let persion = {
  	name: "n".1: "1"
  }
  persion.name
  // error, the numeric key name can only be obtained as an array
  persion1.
Copy the code

Object[property]
```
  persion["name"]
Copy the code
```
Object[property] is an associative array, also known as a hash, map, or dictionary. Each Object is an associative array, and the index in parentheses must be quoted, otherwise it will be treated as a variable. Objects map strings to values, whereas arrays map numbers to values

Note:

let p = 1
let persion = {
	p: 2.1:"1"}/ / 2
persion["p"]
// point to the variable p, the result is 1
persion[p]
// 1, without quotation marks, the number is automatically converted to a string
persion[1]
Copy the code

Action attribute

The new attribute

In addition to defining properties at object creation time, you can also add properties dynamically
```
// Dynamically add the name attribute
dog.name = "dog"
Copy the code
```

Delete the properties

  let dog = {name: "dog"};
  // If the name attribute is deleted, true is returned on success, or if it does not exist
  delete dog.name
Copy the code

Delete cannot delete an attribute in an attribute, which can cause memory leaks, such as:

let dog = {name: {first:"".second:""}}
let cat.name.first = dog.name.first;
delete dog.name;
// fist
console.log(cat.name.first);
Copy the code

Check the properties

If the object attribute does not exist, undefine is returned

Determine whether an object attribute exists by in

// Return true if dog has the name attribute
"name" in dog
Copy the code

HasProperty is used to determine whether an object has its own properties, that is, non-inherited properties

// Returns true if the dog object has a name attribute
dog.hasProperty("name")
// toString is not the object's own property, so return false
dog.hasProperty("toString")
Copy the code

Enumerated attribute

  // Cannot determine whether the attribute belongs to the object itself
  for(p in dog) {
    console.log("p:", p);
  }
Copy the code

Modify the properties

  let o1 = {p1: 1.p2: 2};
  o1.p1 = 3;
  o1.p2 = 4
Copy the code

You can use the following statement instead:

let o1 = {p1: 1.p2: 2};
with(o1) {
  p1 = 3;
  p2 = 4;	
}
Copy the code

Getter and setter

  let cat = {
    age: 0.get name() {
    	this.age = 10;
    	console.log("get name");
    },
    set name(value) {
    	this.age = 12;
    	console.log("set", value); }};// get name
  cat.name
  / / 10
  cat.age
  // set name
  cat.name = "name";
  / / 12
  cat.age
Copy the code

Characteristics of attributes

Value/value
Writable, whether the property can be modified
It can be configured without any additional control system
Enumerable [enumerable], whether a property is enumerable

// {value: 1, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor({ x: 1 }, "x");
Copy the code

Set attribute characteristics:

Do not modify the

let o = {};
Object.defineProperty(o, "x", {
  value: 1.writable: false.enumerable: true.configurable: true
});
o.x = 2;
// Writability is false, so the value is still 1
console.log(o.x);
Object.defineProperty(o, "x", {
  value: 1.writable: true.enumerable: false.configurable: true
});
Copy the code

An enumeration

Object.defineProperty(o, "x", {
  value: 1.writable: true.enumerable: false.configurable: true
});
o.y = 2;
// Since x is set to non-enumerable, only y attributes are output
for (let p in o) {
  console.log(p);
}
Copy the code

configurable

Object.defineProperty(o, "x", {
  value: 1.writable: true.enumerable: true.configurable: false
});
// error
Object.defineProperty(o, "x", {
  value: 1.writable: true.enumerable: false.configurable: false
});
Copy the code

Object prototype

JS is a programming language based on prototype. Every object has a prototype object, and the prototype object has its own prototype object. This relationship is called prototype chain.

inheritance
```
function Person() {};
Person.p1 = 'walk';
Person.prototype.p2 = 'walk';
Person.prototype;
Copy the code
```
1. {p: “walk”, constructor: * ƒ} *
2. 1. p2: “walk”
  2. Constructor: ƒ person ()
  3. 1. p1: “walk”
    2. arguments: null
    3. caller: null
    4. length: 0
    5. name: “person”
    6. prototype: {p: “walk”, constructor: ƒ}
    7. proto: ƒ ()
    8. [[FunctionLocation]]: VM2863:1
    9. [[Scopes]]: Scopes[1]
  4. proto: Object
```
let student = new Person();
student.p = 'study';
student;

let teacher = new Person();
teacher.p = 'teach';
Copy the code
```
1. Person {p: “study”}
2. 1. p: “study”
  2. proto:
  3. 1. p2: “walk”
    2. Constructor: ƒ Person ()
    3. p1: “walk”
      
      arguments: null
      
      caller: null
      
      length: 0
      
      name: “Person”
      
      prototype: {p2: “walk”, constructor: ƒ}
      
      proto: ƒ ()
      
      [[FunctionLocation]]: VM3025:1
      
      [[Scopes]]: Scopes[2]
    4. proto: Object
extension
```
function Person() {};
Person.p1 = 'walk';
Person.prototype.p2 = 'walk';
let student = new Person();
student.p = 'study';
Person.prototype.cry = function(){console.log('cry')}
// cry
student.cry();
student;
Copy the code
```
1. Person {p: “study”}
2. 1. p: “study”
  2. proto:
  3. 1. cry: ƒ ()
    2. p2: “walk”
    3. Constructor: ƒ Person ()
    4. p1: “walk”
      
      arguments: null
      
      caller: null
      
      length: 0
      
      name: “Person”
      
      prototype: {p2: “walk”, cry: ƒ, constructor: ƒ}
      
      proto: ƒ ()
      
      [[FunctionLocation]]: VM2965:1
      
      [[Scopes]]: Scopes[2]
    5. proto: Object

function

When a function is a property of an object, it is called a method.

Declaration of functions

Declarative statements
```
function f() {}
Copy the code
```

Functional expression

let f = function(p){
  console.log(p);
};
// f
f("f");
Copy the code

The constructor

let f = new function(r) {
  return r
}
// Equivalent to:
function f(r) {
  return r;
}
Copy the code

Declare functions in a block-level scope

In ES5, it is allowed to declare a function in a block-level scope, which can be called outside the scope due to function promotion:
```
function f() {
  console.log('outside')}; (function() {
  if(true) {
		function f() {
     console.log('inside'); }}// insidef(); }) ()Copy the code
```

Function declaration statement promotion

f();
// the f function declaration is promoted before the call
function f() {};
Copy the code

But function expressions cannot be promoted:

// error
f();
let f = function() {};
Copy the code

Get the number of parameters

function f(a, b) {}
/ / 2
f.length
Copy the code

Get function name

function f() {}
// f
f.name
let f1 = function f2() {}
// f2
f1.name
Copy the code

The eval command

The function of this command is to execute a string as a statement. Variables declared by eval in strict mode have no external impact.
```
eval('let a = 1');
// error
a;
Copy the code
```

Function call

A function expression that executes immediately

Function expressions that execute immediately with () are called function expressions that execute immediately (IIFE)
```
// Call f immediately
(function f(() {}) ()
Copy the code
```
The above f function is wrapped with (), because js interprets function as a statement by default. If () is not added, the following error is reported:

VM3801:1 Uncaught SyntaxError: Unexpected token ‘)’
```
/ / statements
function f1() {};
/ / expression
let f = f2() {};
Copy the code
```
Functions: 1. Avoid polluting global variables; 2. Create private variables that cannot be accessed externally
```
// Avoid polluting global variables
var a = 1;
(function() {
  var a = 2;
  / / 2a; }) ()/ / 1
a;

// After some logical operations, the result is assigned to r
let r = (function() {
  let a = 1;
  let b = 2;
  return a + b;
})
/ / 3
r;
Copy the code
```

Note:

Function definitions are invalid in conditional statements, but still do not return an error:

if (true) {
  function f1(){}}// F1 can be called outside the if statement because the function goes up
f1()
Copy the code

Parameters of a function

Parameters are omitted

The arguments in the function have no relation to the arguments actually passed in

function f(a, b){}
f(1.2.3.4);
/ / 2
f.length
Copy the code

The arguments object, however, gets the values of the arguments passed in:

function f(a, b){
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}
/ / 1 2 3
f(1.2.3.4);
Copy the code

In normal mode, you can modify the following parameters:

function f(a, b){
  arguments[0] = 2;
  arguments[1] = 3;
  return a + b;
}
// Return 5 instead of 3
f(1.2.3.4);
Copy the code

However, in strict mode, modifying parameters has no effect.

Parameters of the same name

If there is an argument with the same name, take whatever the value of the last argument is
```
function f(a, a) {
  return a;
}
// undefine
f(1, undefine);
Copy the code
```

The default parameters

function f(a, b = 1) { 
  return a + b
}
/ / 2
f(1);
Copy the code

The remaining parameters

function f(a, ... b) {
  return b;
}
/ / [2, 3, 4]
f3(1.2.3.4);
Copy the code

Method of function

closure

The concept of closures

Closures are functions that can access variables outside the scope.

When unable to access a function scope, can often be created within the function to access another function, based on the characteristics of the scope chain is the function can access to the upper variables, now just need to create internal function as the return value is returned, can let the external scope access to functions within the scope of variables.

function f1() {
    let a = 1;
    function f2() {
        console.log('a:', a);
    }
    return f2;
}
let f3 = f1();       / / 1
Copy the code

The inner function (f2) created in function scope is a closure.

The role of closures

Gets the variables of the inner function

function f1() {
  // Visible to F2
  let p1 = "p1";
  function f2() {
    // Not visible to F1, visible to F3
    let p2 = "p2";
    console.log(p1)
    function f3() {
      // p2
      console.log(p2); }}return f2;
}
let f4 = f1();
// p1
f4();
Copy the code

Although p1 does not operate outside of function f1, function F4 still returns the value of p1 in function F1 via function f2.

Save the variables of the inner function
```
let add;
function f1() {
  let n = 0
  add = function () {
    n = n + 1;
  }
  function f2() {
    console.log(n)
  }
  return f2;
}
let f3 = f1();
/ / 0
f3();
add();
/ / 1
f3();
Copy the code
```
It can be seen from the above results that the value of n variable is not destroyed and recycled after f3 function call, but is saved, because F2 is assigned to the global variable F3, that is, F3 holds F2, and F2 carries f1 reference, so it is not recycled.
Avoid global contamination

Variables in a function scope cannot be accessed elsewhere to avoid string modification.

Modular programming

const obj = (function () {
  let name = 'xiaoli';
  return {
    getName: function () {
      return name;
    },
    setName: function (value) { name = value; }}; } ()); obj.name; obj.getName(); obj.setName('xiaohuang');
Copy the code

The above code will get and set the name variable into a separate module, just need to access the obJ object method to operate on the name variable is simple and clear.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

JavaScript Learning Notes

type

Symbol

String

variable

constant

object

Object creation

Object reference

Object properties

Get property values

Action attribute

Characteristics of attributes

Object prototype

function

Declaration of functions

Function call

Parameters of a function

Method of function

closure

The concept of closures

The role of closures

JavaScript Learning Notes

type

Symbol

String

variable

constant

object

Object creation

Object reference

Object properties

Get property values

Action attribute

Characteristics of attributes

Object prototype

function

Declaration of functions

Function call

Parameters of a function

Method of function

closure

The concept of closures

The role of closures

Related Posts

Getting Started Series 2 – Adding logic to browser plugins

Vue3 study notes

Linux directory structure and description of common commands