JavaScript reference data types

JavaScript reference data types

Object

Objects are separated by curly braces. Inside the brackets, the properties of the object are defined in the form of name and value pairs (name: value), also called json.
The attributes are separated by commas, and spaces and line breaks are not important. The statement can span multiple lines.

Define an object, name: Keafmd, age: 18, address: Beijing, isEdu: false

Sample code:

var Ke = { 'name':'Keafmd', 'age': 18, address:'Beijing', isEdu:false } console.log(Ke) Copy code

Complete code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var Ke = { 'name':'Keafmd', 'age': 18, address:'Beijing', isEdu:false } console.log(Ke) </script> </head> <body> </body> </html> Copy code

Effect screenshot:

Object creation

Create with {}

var person = { name:'Keafmd', sayHi:function(){ console.log('hi, my name is :'+this.name) } }; Copy code

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var person = { name:'Keafmd', sayHi:function(){ console.log('hi, my name is :'+this.name) } }; console.log(person) person.sayHi() </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

Create with Object

var p = new Object(); p.name ='Keafmd'; p.age = 18; console.log(p); Copy code

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var p = new Object(); p.name ='Keafmd'; p.age = 18; console.log(p); </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

Create with Function

function Student(){ this.name =''; this.age = 0; } var stu1 = new Student(); stu1.name = "Keafmd"; stu1.age = 18; stu1.address ='Harbin'; console.log(stu1); var stu2 = new Student(); console.log(stu2); Copy code

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function Student(){ this.name =''; this.age = 0; } var stu1 = new Student(); stu1.name = "Keafmd"; stu1.age = 18; stu1.address ='Harbin'; console.log(stu1); var stu2 = new Student(); console.log(stu2); </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

Use the class keyword

class Human{ constructor(name) { this.name = name; } sayHi(){ console.log('I am:'+this.name); } } var h1 = new Human('Keafmd'); h1.sayHi() Copy code

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> class Human{ constructor(name) { this.name = name; } sayHi(){ console.log('I am:'+this.name); } } var h1 = new Human('Keafmd'); h1.sayHi() </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

Prototype model

You can extend fields (attributes, methods) to objects through objects.
If you want to add attributes to the same type, you need to use the prototype prototype

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function Student(){ this.name =''; this.age = 0; } var s1 = new Student(); Student.prototype.sayHi = function(){ console.log('Hello') } s1.sayHi(); var s2 = new Student(); s2.sayHi(); </script> </head> <body> </body> </html> Copy code

Effect screenshot:

The type used to store multiple data collections

var names = ['Zhang Fei','Liu Bei','Guan Yu']; console.log(names); Copy code

Access to data elements is in the form of subscripts (subscripts start from 0) array name[subscript], names[0];

var names = ['Zhang Fei','Liu Bei','Guan Yu']; console.log(names[1]); Copy code

Array definition

Use [] to create an array

Can be initialized directly, recommended

var arr1 = [10,20,30]; console.log(arr1); Copy code

Use Array to create an array

var arr2 = new Array(); console.log(arr2); Copy code

Array access

The length property represents the length of the number.
Access the array through the element [subscript], assign value, get the content of the element, the array is of variable length.

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var arr1 = [10,20,30]; console.log("arr1.length: "+arr1.length); var arr3 = []; arr3[0] = 100; arr3[1] = 200 arr3[100] = 999; console.log("arr3.length: "+arr3.length); console.log("arr3[2]: "+arr3[2]); </script> </head> <body> </body> </html> Copy code

Effect screenshot:

Array method

push to add elements to the array

Equivalent to stacking

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var arr = []; arr.push(10); arr.push(20); arr.push(30); arr.push('Keafmd'); console.log("arr[0]:"+arr[0]); console.log("arr[1]:"+arr[1]); console.log("arr[2]:"+arr[2]); console.log("arr[3]:"+arr[3]); </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

pop gets the element from the end of the array and deletes the element from the array

Equivalent to popping

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var arr = []; arr.push(10); arr.push(20); arr.push(30); arr.push('Keafmd'); console.log(arr.pop()); console.log(arr.pop()); console.log(arr.pop()); console.log(arr.pop()); console.log(arr) </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

shift gets the element from the first subscript of the array and deletes the element from the array

Similar out

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var arr4 = [10,20,30,40]; console.log(arr4.shift()) console.log(arr4) </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

slice

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var arr5 = [10,20,30,40]; console.log(arr5) console.log("arr5.slice(1): "+arr5.slice(1)) console.log("arr5.slice(1,2): "+arr5.slice(1,2)) </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

join and split

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var arr6 = [10,20,30,40]; console.log("arr6.join(\"-\"): "+ (arr6.join('-'))); var arrStr = '10-20-30-40'; console.log(arrStr.split('-')); </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

A function is a reusable block of code that is event-driven or executed when it is called.

Method declaration

function name (parameter list...) { //Statement block } //transfer Method name() Copy code

Examples

function sayHi(){ console.log('hello JavaScript') } sayHi(); Copy code

Everything in js is an object, and the method can be executed as long as you add parentheses

function sayHi(){ console.log('hello JavaScript') } var myfun = sayHi; myfun() Copy code

No-argument function

A function like this that does not pass parameters is a parameterless function

function sayHi(){ console.log('hello JavaScript') } sayHi(); Copy code

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function sayHi(){ console.log('hello JavaScript') } sayHi(); </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

Parameter function

We need to define parameters when defining functions with parameters, and we also need to pass in parameters when calling them.

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function sum(numa,numb){ console.log(numa+numb) } sum(10,20); </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

Functions can be passed as parameters

The first way of writing

function say (value) { alrt(value); } function execute (someFunction, value) { someFunction(value);//Callback function } execute(say,'hi js.'); Copy code

The above code is to pass the say method as a parameter to the execute method.

The second way of writing

var say = function(value) { alrt(value); } function execute (someFunction, value) { someFunction(value);//Callback function } execute(say,'hi js.'); Copy code

The third way of writing

function execute (someFunction, value) { someFunction(value);//Callback function } execute(function(value) { alrt(value); },'hi js.'); Copy code

The first parameter of the execute method in the above code is an anonymous function (a function without a function name). The function has a name for the convenience of next use. An anonymous function can be defined as an anonymous function if it is usually not used again (that is, only used once).

The function say above is called a callback function.

Callback

The callback function is that you call someone else (execute), and then someone else calls you (say). In short: you write a function (say), but it is not called by you, but called by a function (execute) called by you.

Function as return value

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function fn2(a){ return function (b){ console.log(a+b); }; } fn2(20)(10); </script> <title></title> </head> <body> </body> </html> Copy code

Effect screenshot:

arguments

When calling the function, the browser also passes another implicit parameter, and there is another parameter called arguments. Arguments is an array-like object, in which the actual parameters of the function are stored. All the actual parameters of the function are stored in arguments, and parameters can be used even without defining formal parameters through arguments.

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function fun(a,b,c){ console.log(arguments.length); console.log(arguments[2]); } fun("hello",123,true); </script> </head> <body> </body> </html> Copy code

Effect screenshot:

Variable scope

**Scope Scope
simply refers to the scope of a variable
. Scope is divided into two types in JS:

  1. Global scope
  2. Function scope**

**Global scope:

  1. All code written directly in the script tag is in the global scope.
  2. The global scope is created when the web page is opened and destroyed when the web page is closed.
  3. There is a global object window in the global scope, and window represents the browser window.

Variables created in the global scope will be saved as attributes of the window object.
Functions created in the global scope will be saved as methods of the window object.
4. Variables created in the global scope are all global variables and can be placed anywhere on the page. Location access. **

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var a = 123; b = 456; function fun(){ console.log(b); console.log(window.a); console.log(window.b); console.log("I am the function fun in the global"); } fun(); window.fun(); </script> </head> <body> </body> </html> Copy code

Effect screenshot:

Function scope

**Function scope:

  1. Function scope can be understood as a small scope in the whole world.
  2. The function scope is created when the function is called and destroyed at the end of the call.

Each time a function is called, a new function scope is created.
3. Global variables can be accessed in the scope of the function, but variables in the scope of the function cannot be accessed in the global.
If the variable created in the function does not write var, it will become a global variable.
4. When we use a variable in a function, it will first look for it in its own scope, if there is one, use it directly, if not, go to the upper scope to look for it, use it if it finds it, and continue to look for it if it doesn t. Until the global scope is found.
If there is still not in the global scope, a ReferenceError will be reported.
5. In the function scope, the declaration of variables and functions is also applied in advance. **

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var a = "a in the global"; function fun() { var b = "b in function scope"; console.log(b); } fun(); var c = "Global c"; console.log(window.c); function fun3() { function fun4() { console.log(c); } fun4(); } fun3(); </script> </head> <body> </body> </html> Copy code

Effect screenshot:

Advance declaration of variables and functions

Declare variables in advance: Variables declared
with the var keyword will be declared before all the code is executed, but will not be assigned.
The assignment will not be executed until the assigned code is executed.
If the var keyword is not used to declare variables, there will be no early declaration feature.

Function declaration in advance:
The function created using the function declaration will be created before all the code is executed,
so we can call the function before the function declaration.
Functions created using function expressions do not have this feature, so they cannot be called before it is created.

Sample code:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> console.log("a = "+a); var a = 10; fun(); function fun(){ console.log("I am a fun function"); }; var fun2 = function(){ console.log("I am the fun2 function"); }; fun(); fun2(); </script> </head> <body> </body> </html> Copy code

Effect screenshot:

If the comment of fun2() above is opened, an error will be reported, because fun2 has not been declared there and cannot be called.

Writing is not easy, if it is helpful to you after reading, thank you for your support!
If you are a computer terminal, do you see the "one key triple connection" in the lower right corner, right click it [haha]

Come on!

Work together!

Keafmd