javaScript (4): functions and common objects

Article directory

1. Function introduction

A function is a reusable block of code that performs a specific task or calculation and returns a result.

The function consists of the following elements:

函数声明或函数表达式: Functions can be defined through declarations or expressions. Declaration uses the keyword function, followed by the function name and parameter list. Expression mode assigns functions to variables.
参数: Functions can accept input values, which are called parameters. Parameters are declared within parentheses of the function and separated by commas. Functions can have zero or more parameters.
函数体: The function body is the code block for function execution. It contains a series of statements to implement specific functions.
返回值: The function can return a value or no return value. Use the keyword return to return results from a function.

2. The role of functions

Functions have many roles in JavaScript. Here are some common functions:

代码的重用: Functions allow a piece of code logic to be encapsulated so that it can be reused when needed. This avoids writing the same code in multiple places and improves code reusability and maintainability.
模块化编程: Functions allow code to be organized into independent modules, each module responsible for a specific task. This improves code readability, maintainability, and scalability, making large applications easier to understand and develop.
抽象复杂性: Functions can break complex problems into smaller, more understandable parts. By splitting complex logic into multiple functions, the difficulty of programming and the possibility of errors can be reduced.
提高代码的可读性: Function allows you to give a meaningful name to a piece of code logic. By calling a function to execute the logic, you can make the code more understandable and readable.

In short, functions are a very important concept in JavaScript. They have many functions, including code reuse, module encapsulation, abstraction complexity, readability improvement, function implementation, parameter passing and return values, and event handling. Using functions can organize and manage code more efficiently, improving development efficiency and code quality.

3. Function syntax

Named function syntax

Definition: Javascript functions are defined through the function keyword, and the syntax is:

function functionName(参数1,参数二..){
    
    
    //要执行的代码
}

Code demo:

/* 命名函数就是有名字的函数,格式如下:
    function 函数名(参数列表) {
        代码;
        return 返回值;
    }
    */

// 定义一个函数实现加法功能
function add(a,b){
    
    
    return a+b;
}

// 调用函数格式:
let sum = add(10,20);
document.write(sum + "<br/>");

Anonymous function syntax

var functionName = function(参数1，参数2..){
    
    
    //要执行的代码
}

Code demo:

/* 匿名函数格式如下:
        function (参数列表) {
            代码块;
            return 返回值;
        }
     */

// 定义一个匿名函数实现加法功能
let add = function (a,b){
    
    
    return a+b;
}
// 调用函数
let sum = add(20,20);
document.write(sum + "<br/>")

4. Common objects: array

Array

JavaScript array is a set of values arranged in order. These values can be various types of data such as numbers, strings, Boolean values, objects, etc. Each element in the array has a subscript, 下标从零开始, which indicates the position of the element in the array.

definition:

let 变量名 = new Array(元素列表); //方式一
例如 ： let arr = new Array(1,2,3)

let 变量名 = [元素列表]; //方式二
例如 ： let arr = [1,2,3];

access:

arr[索引] = 新的值;
arr[0] = 1;

Notice:

Arrays are similar to Java collections. The length and type can be changed.

Array properties and methods

Code demo:

// JS创建数组方式一: let 变量名 = new Array(元素列表);
let arr01 = new Array(11,22,33);
document.write(arr01 + "<br/>");

// JS创建数组方式二: let 变量名 = [元素列表];
let arr02 =[11,22,33,44];
document.write(arr02 + "<br/>");

// 修改数组数据: 数组名[索引]=新的值;
arr02[2] = 55;

// 获取数组数据: 数组名[索引]
document.write(arr02[2] + "<br/>");
// 特点：JavaScript数组相当于Java中集合。变长,变类型
// 变类型

// 属性：length：数组中元素的个数
document.write(arr01.length + "<br/>");
// push: 添加数据方法
arr02.push("可以添加字符串");
document.write(arr02 + "<br/>");
// splice:删除数据方法    splice(开始位置, 删除的数量)
arr02.splice(1,1);
document.write(arr02 + "<br/>");

5. Commonly used objects: String

String

definition:

let 变量名 = new String(s); //方式一
例如：let str = new String("hello");
let 变量名 = s; //方式二
例如：let str = "hello"

Attributes:

length	//字符串长度

method:

trim()	//移除字符串首尾空白

Code demo:

// 字符串创建方式一: let 变量名 = new String(s);
let str01 = new String("hello");
//字符串创建方式二: let 变量名 = "内容";
let str02 = " hello ";
document.write(str02 + "<br/>");
// 字符串的长度: length属性
let length= str02.length;
document.write(length + "<br/>");

// trim(): 去除字符串前后两端的空白字符
str02.trim()
document.write(str02 + "<br/>");

6. Commonly used objects: custom objects

custom object

Format:

let 对象名称 = {
    
    
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...
    函数名称:function(形参列表){
    
    }
};

Example:

<script>
    // JS自定义对象
    let person = {
    
    
        name:"小林",
        age:18,
        eat:function(){
    
    
            document.write(this.name+ "在吃饭" + "<br/>");
        }
    }
    // 使用对象： 对象.成员变量  或 对象.成员方法()
    //对象.成员变量
    document.write(person.name + "<br/>");
    //对象.成员方法()
    person.eat();
</script>