JavaScript basics learn from me-day5

---

foreword

This article mainly explains the use of arguments, the encapsulation of functions, objects, etc.;

---

提示：以下是本篇文章正文内容，下面案例可供参考

First, the use of arguments

1. Only functions have arguments objects, and each function has built-in arguments objects;
2. Arguments stores all passed arguments;
3. Arguments are called pseudo-arrays;

1. The difference between arguments and arrays

1. It has the length property of array elements;
2. It is stored in the same way as an array according to the index;
3. It does not have some methods of a real array; such as pop(), push(), etc.;

   // arguments 的使用  只有函数才有 arguments对象  而且是每个函数都内置好了这个arguments
        // 作用: 里面存储了所有传递过来的实参
        function fn() {
    
    
            // console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]
            // console.log(arguments.length);
            // console.log(arguments[2]);
            // 我们可以按照数组的方式遍历arguments
            for (var i = 0; i < arguments.length; i++) {
    
    
                console.log(arguments[i]);
            }
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);
        // 伪数组 并不是真正意义上的数组
        // 1. 具有数组的 length 属性
        // 2. 按照索引的方式进行存储的
        // 3. 它没有真正数组的一些方法 pop()  push() 等等

2. Use arguments to reverse the elements of the array;

Note: For the following input array elements, for arguments, the number of received elements is 1. To operate on the internal data of the received array elements, arguments[0] is required, first obtain the array elements, and then perform the next operation on the array elements. ;

  function reverse () {
    
    
            var newArr = [];
            for(var i = arguments[0].length - 1 ; i >= 0; i--){
    
    
                newArr[newArr.length] = arguments[0][i];
            }
            return newArr;
        }
        console.log(reverse([1,2,3,4,5]));

2. Encapsulation of functions

In order to facilitate the use of the functions implemented by the code, you can encapsulate the code fragment that implements a certain function into the function using return, and each time you use it, you can directly pass in the formal parameters to call the function.

2.1 Packed Array Flip

Implement flipping an array element; the
code is as follows (example):

function reverse (arr){
    
    
            var newArr = [];
            for(var i = arr.length - 1; i >= 0; i--){
    
    
                newArr[newArr.length] = arr[i];
            }
            return newArr;            
        }
        console.log(reverse([1,2,3,4,5]));

2.2 Encapsulating bubble sort

Arrange the internal elements of the input array elements from small to large or from large to small;

The code is as follows (example):

 function sort(arr){
    
    
            for(var i = 0 ;i < arr.length - 1; i++){
    
    
                for(var j = 0 ;j < arr.length - i -1; j++){
    
    
                    if(arr[j] > arr[j+1]){
    
    
                        var temp = 0;
                        temp = arr[j];
                        arr[j] = arr[j+1];
                        arr[j+1] = temp;
                    }
                }
            }
            return arr;
        }
        console.log(sort([1,4,6,2,8,0]));

2.3 Encapsulation to judge leap year program

Leap year: divisible by 4 and not divisible by 100, or divisible by 400

The code is as follows (example):

//闰年：能被4整除且不能被100整除，或能被400整除
 function  isRunYear(year){
    
    
            return year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
        }
        console.log(isRunYear(2000));

3. A function calls another function

Inside a function can call another defined function;

The code is as follows (example):

 //在函数内部是可以调用另一个函数
        function fn1() {
    
    
            console.log(11);
            fn2(); // 在fn1 函数里面调用了 fn2 函数
        }
        fn1();

Four, two ways of function declaration

4.1 The function keyword declares a function

The code is as follows (example):

// 1. 利用函数关键字自定义函数(命名函数)
        function fn() {
    
    
        }

4.2 Function Expressions

Declare a variable to pass an anonymous function into the variable; function expressions are declared in the same way as variables, except that variables store values ​​and function expressions store functions;

The code is as follows (example):

// 2. 函数表达式(匿名函数) 
        // var 变量名 = function() {};
        var fun = function(aru) {
    
    
            console.log('我是函数表达式');
            console.log(aru);

        }
        fun('老师');
        // (1) fun是变量名 不是函数名  
        // (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
        // (3) 函数表达式也可以进行传递参数

5. JavaScript scope (before ES6)

5.1 The role of scope

The scope limits the scope of the variables in the code, so as to ensure the reliability of the code, the same variable name will not have naming conflicts in different scopes;
Note: ES6 only has block-level scope;

5.1 Types of scopes

5.1.1 Global scope

The entire script tag and individual js files are in the global scope
. The variables in the local scope cannot be accessed in the global scope;

5.1.2 Local scope

Inside the function is the local scope;

The code is as follows (example):
num1 inside the following function and num1 outside will not have a naming conflict;

var num1 = 10;
        function fun(aru) {
    
    
            var num1 = 10; // num1就是局部变量 只能在函数内部使用
            num2 = 20;
        }
        fun();

6. Types of variables

6.1 Global variables

Variables in the global scope;
Note: 1. Variables not declared inside a function are also global variables;
2. Variables in the outer scope cannot be accessed in the inner scope;

6.2 Local variables

The variables in the local scope are called local variables;
Note: 1. The formal parameters of the function are also called local variables;
2. The inner function can access the variables of the outer function

7. JavaScript scope chain

Scope chain: When the inner function accesses the variables of the outer function, it adopts the principle of proximity, and selects the value of the variable closest to the inner function;

The code is as follows (example):

        var num = 10;

        function fn() {
    
     // 外部函数
            var num = 20;

            function fun() {
    
     // 内部函数
                console.log(num);

            }
            fun();
        }
        fn();

8. JavaScript pre-parsing

The js engine has two steps to execute js code: 1. Pre-parse 2. Execute js code;

8.1 Steps of Preparsing

8.1.1 Variable promotion

Variable promotion is to promote all variable declarations to the front of the current scope; Note: assignment operations are not promoted! ! !

8.1.2 Function hoisting

Function hoisting is to hoist all function declarations to the front of the current scope; Note: function calls are not hoisted! ! !

The code is as follows (example):

 fun(); // 报错  坑2 
        var fun = function() {
    
    
                console.log(22);

            }
            // 函数表达式 调用必须写在函数表达式的下面
            // 相当于执行了以下代码
            // var fun;
            // fun();
            // fun = function() {
    
    
            //         console.log(22);

        //     }

9. Objects

An object is an unordered collection of properties and methods;

9.1 How objects are created

9.1.1 Object literals create objects

The code is as follows (example):

// 1.利用对象字面量创建对象 {}
        // var obj = {};  // 创建了一个空的对象 
        var obj = {
    
    
                uname: '张三疯',
                age: 18,
                sex: '男',
                sayHi: function() {
    
    
                    console.log('hi~');

                }
            }
            // (1) 里面的属性或者方法我们采取键值对的形式  键 属性名 ： 值  属性值 
            // (2) 多个属性或者方法中间用逗号隔开的
            // (3) 方法冒号后面跟的是一个匿名函数

9.1.2 The new keyword creates an object

Objects created with the new keyword directly use the assignment method when adding properties and methods to the object;

The code is as follows (example):

 // 利用 new Object 创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
    
    
                console.log('hi~');

            }
            // (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
            // (2) 每个属性和方法之间用 分号结束
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
        var obj1 = new Object();
        obj1.uname = 'mingren'
        obj1.age = '18';
        obj1.fn1 = function(){
    
    
            console.log('我是名人');
        }
        obj1.fn1();

9.1.3 Constructors create objects

The constructor is to encapsulate the object into a function; the properties and methods of the object in the constructor need to be added with the this keyword, and when the constructor is called, the new keyword needs to be added;

The code is as follows (example):

// function 构造函数名() {
    
    
        //     this.属性 = 值;
        //     this.方法 = function() {}
        // }
        // new 构造函数名();

Note: The constructor automatically returns the object, no need to return;

9.2 How to use objects

9.2.1 Calling Object Properties

method one:

The code is as follows (example):

 // (1). 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的
        console.log(obj.uname);

Method Two:

The code is as follows (example):

 // (2). 调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);

9.2.2 Calling methods inside an object

The code is as follows (example):

(3) 调用对象的方法 sayHi   对象名.方法名()
 obj.sayHi();

Note: Don't forget to add () when calling the method inside the object! ! !

9.3 The difference between the internal properties and methods of objects and variables and functions

9.3.1 Differences between properties and variables

Variable: 1. The variable is declared and assigned separately; 2. It exists alone, and the variable name is directly referenced when using it;

Attributes: 1. Attributes do not need to be declared, and depend on the object to exist; 2. When used, they must be: object.attribute name;

9.3.2 The difference between methods and functions

Similarities : they all run a certain piece of code to achieve a certain function;
similarities and differences: the function is declared and called separately, the method is inside the function, and depends on the object to exist, and the new keyword must be added when calling;

The code is as follows (example):

// 变量、属性、函数、方法的区别
        // 1.变量和属性的相同点 他们都是用来存储数据的 
        var num = 10;
        var obj = {
    
    
            age: 18,
            fn: function() {
    
    

            }
        }

        function fn() {
    
    

        }
        console.log(obj.age);
        // console.log(age);

        // 变量 单独声明并赋值  使用的时候直接写变量名 单独存在
        // 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
        // 2. 函数和方法的相同点 都是实现某种功能  做某件事
        // 函数是单独声明 并且调用的 函数名() 单独存在的
        // 方法 在对象里面 调用的时候 对象.方法()

9.4 The execution process of the object new keyword

The code is as follows (example):

// new关键字执行过程
        // 1. new 构造函数可以在内存中创建了一个空的对象 
        // 2. this 就会指向刚才创建的空对象
        // 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
        // 4. 返回这个对象
        function Star(uname, age, sex) {
    
    
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
    
    
                console.log(sang);

            }
        }
        var ldh = new Star('刘德华', 18, '男');

9.5 Traversing objects

Traversing an object is similar to iterating over properties and methods in an object;

The code is as follows (example):

// 遍历对象 
        var obj = {
    
    
                name: 'pink老师',
                age: 18,
                sex: '男',
                fn: function() {
    
    }
            }
            // console.log(obj.name);
            // console.log(obj.age);
            // console.log(obj.sex);
            // for in 遍历我们的对象
            // for (变量 in 对象) {
    
    

        // }
        for (var k in obj) {
    
    
            console.log(k); // k 变量 输出  得到的是 属性名
            console.log(obj[k]); // obj[k] 得到是 属性值

        }
        // 我们使用 for in 里面的变量 我们喜欢写 k  或者  key