JavaScript 实战技巧：让你成为前端高手的必备知识2

目录

（四）函数

1、概述

2.函数的定义

（1）函数的定义与使用

（2）变量的作用域：全局变量与局部变量

3、函数的使用

（1）在程序中调用（分为有返回值调用和无返回值调用）

①无返回值调用

②有返回值调用

（五）对象

1、概念

2、对象的定义

（1）手动定义一个对象 ,如下：

（2）使用对象的属性和方法 ，如下：

3、利用JS内置的类创建对象（实例化），并使用对象的属性和方法。 

（1）Array类

①长度属性（length）：返回数组的元素个数（数组长度）

②添加元素方法（push）：

③移除元素方法（ pop）：

④移除元素（shift）：

⑤排列数组元素（ reverse）：

⑥indexOf方法：

 （2）String类

①获取字符串长度（length属性）：

②指定位置的字符（charAt方法）：

​③字符串拼接（concat）:

④查找子串（indexOf方法）：

⑤分割字符串（split方法）：

（3）Math类

①绝对值（abs方法）：

②最大值和最小值（max和min方法）：

③取整（floor和ceil）：

④random：

⑤getRandomInRange：

⑥truncateDecimalPlaces：

（4）Date类

①年份（四位数的年份，比如2024）

②月份

③日期（月份中的哪一天）

④小时（24小时制）

⑤分钟

⑥秒

⑦输出当前未格式化的日期和时间

​编辑⑧输出当前格式化后的日期和时间

---

（四）函数

1、概述

在JavaScript中，函数是执行特定任务或计算值的代码块。函数可以有参数（输入）和返回值（输出）。当一段代码很长，需要实现很多功能时，可以将这段代码划分成几个功能相对独立单一的函数，这样即既可以提高程序的可读性，也有利于脚本的编写，调试和维护。

2.函数的定义

JavaScript 遵循先定义函数，后调用函数的规则。函数的定义通常放在HTML文档头中，也可以放在其他位置，但最好放在文档头，这样可以确保先定义后使用。

function 函数名（参数1，参数2，…）{

语句；

…

return表达式

}

注：①return 语句指明被返回的值

       ②函数名是调用函数时所引用的名称，一般用能够描述函数功能的单词或短语来命名。

（1）函数的定义与使用

 <script>function calculator(a,b){var c=a+b;return c;}var result = calculator(1,1);console.log("result =" +result);</script>

（2）变量的作用域：全局变量与局部变量

①全局变量定义在所有函数之外，作用范围是所有函数；未经var关键字声明的变量，默认都是全局变量。

②局部变量定义在函数之内，只对该函数可见，对其它函数不可见。

③局部变量的优先级高于全局变量，如果在函数中定义了与全局变量同名的局部变量，则在该函数中且位于这个变量定义之后的程序代码使用的只能是局部变量，而不是全局变量。

3、函数的使用

（1）在程序中调用（分为有返回值调用和无返回值调用）

①无返回值调用

函数名（实参1，实参2，....）

②有返回值调用

变量名=函数名（实参1，实参2，....）

（2）在按钮或超链接被点击时调用

<!-- 2. 在按钮或超链接被点击时调用（监听点击事件） --><!-- 2.1 监听按钮点击 --><input type="submit" value="计算a+b的和" onclick="calculator(1,2)" /><br><!-- 2.2 监听超链接点击 --><a href="#" onclick="calculator(3,4)">百度一下，你就知道</a>

（五）对象

1、概念

对象（object）是JavaScript中最重要的数据类型,是一组“键值对”的集合体。类似Python中的字典。其中，键可以为变量名（此时称为对象的属性）和函数名（此时称为对象的方法）。它将很多值（原始值或者其他对象）聚合在一起，可以通过对象的名字访问这些值。例如：

 var car = {type:"Fiat",mode1:500,color:"gray"};

2、对象的定义

（1）手动定义一个对象 ,如下：

 var person ={firstName:"王",lastName:"晓",age:18,sex:"female",eyeColor:"黑色",getName: function(){// 注意this对象的使用（指向自身）// 没有this，直接用属性名控制台会报错allName = this.firstName + this.lastName;return allName;},cal: function(a,b){return a+b;}}

注释：

①this关键字：用于将对象指定为当前对象。

②new关键字：使用new关键字可以创建指定对象的一个实例。其创建对象实例的格式为：

对象实例名=new 对象名（参数表）；

③delete 操作符可以删除一个对象的实例，其格式为：

delete 对象名； 

（2）使用对象的属性和方法 ，如下：

        console.log(person.eyeColor)  //使用对象的属性console.log(person.getName()) //使用对象的方法console.log(person.cal(1,2))  //使用对象的方法

一个对象在被引用前必须已经存在。 

3、利用JS内置的类创建对象（实例化），并使用对象的属性和方法。 

（1）Array类

在JavaScript中，Array 类是一个全局对象，用于构造数组--一种高阶，类列表的对象，用于存储多个值。数组是编程中最常用的数据结构之一，JavaScript中数组特别灵活，可以包含任何类型的元素，比如数字，字符串，对象甚至其他数组。

①长度属性（length）：返回数组的元素个数（数组长度）

 var persons=new Array("张三","李四","王五");console.log(persons.length);  // 返回3

②添加元素方法（push）：

用于在数组末端添加一个或多个元素，并返回添加新元素后的数组长度。（注意：该方法会改变原数组！）

var persons=new Array("张三","李四","王五");
len = persons.push("张梅");
console.log('新数组为:' + persons +'->长度为:' + len);  

返回结果： 

③移除元素方法（ pop）：

用于删除数组最后一个元素，并返回被删除的那个元素。（注意:该方法会改变原数组!）

var persons=new Array("张三","李四","王五");
p = persons.pop("张梅");
console.log('新数组为:' + persons +'->被移除的元素为: ' + p); 

返回结果：

④移除元素（shift）：

移除并返回数组的第一个元素

var persons=new Array("张三","李四","王五");
p = persons.shift("张梅");
console.log('新数组为:' + persons +'->被移除的元素为: ' + p); 

返回结果：

⑤排列数组元素（ reverse）：

用于颠倒排列数组元素，返回改变后的数组。（注意:该方法会改变原数组!）

var persons=new Array("张三","李四","王五");
p = persons.reverse();
console.log(p); 

 返回结果：

⑥indexOf方法：

返回给定元素在数组中第一次出现的位置，若未出现返回-1

var persons = new Array("张三","李四","王五");
console.log(persons.indexOf("张三"));  //返回0
console.log(persons.indexOf("刘涛"));  //返回-1 

 （2）String类

①获取字符串长度（length属性）：

返回字符串的长度

 var s = 'Hello,world';console.log(s.length) // 返回11

②指定位置的字符（charAt方法）：

返回指定位置的字符

        var s = new String('hello'); console.log(s.charAt(1));            console.log(s.charAt(s.length - 1)); console.log(s.charAt(10));          

返回结果： 

③字符串拼接（concat）:

用于顺序连接多个字符串，返回一个新字符串（不改变原字符串）

        var s1 = new String('hello'); var s2 = new String(' world'); console.log(s1.concat(s2));          console.log(s1.concat(s2, ' hi', ' beijing')); 

返回结果： 

④查找子串（indexOf方法）：

用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1表示不匹配。

        var s = new String('hello world'); console.log(s.indexOf("world"));  console.log(s.indexOf("hi"));     

返回结果： 

⑤分割字符串（split方法）：

按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组

var s = new String('hello world hi beijing'); 
console.log(s.split(' ')); // 按照空格分割 

返回结果： 

（3）Math类

Math对象是一个内置对象，它提供了一系列用于执行数学计算的属性和方法。其不同于其他的全局对象，因为它没有构造函数，也就是说，你不能使用new Math(）来创建一个Math实例。

①绝对值（abs方法）：

返回参数值的绝对值

        console.log(Math.abs(1)) // 1console.log(Math.abs(-1)) // 1

②最大值和最小值（max和min方法）：

返回参数值的最大值和最小值

        console.log(Math.max(1,2,3)) // 返回3console.log(Math.min(1,2,3)) // 返回1

③取整（floor和ceil）：

对参数向下取整和向上取整

        console.log(Math.floor(3.3)) //返回 3console.log(Math.floor(-3.3)) // 返回-4console.log(Math.ceil(3.3)) // 返回4console.log(Math.ceil(-3.3)) // 返回-3

④random：

返回[0,1)之间的一个伪随机数

for (var index = 1; index <=5; index++){console.log(Math.random())}

⑤getRandomInRange：

随机输出任意范围的某个数（直接当成固定函数使用）

function getRandomInRange(min, max) {  return Math.random() * (max - min) + min;  }  console.log(getRandomInRange(1, 20)); //随机输出1到20的某个数

⑥truncateDecimalPlaces：

 保留小数点指定位数（直接当成固定函数使用）

 function truncateDecimalPlaces(num, decimalPlaces) {  let factor = Math.pow(10, decimalPlaces);  return Math.floor(num * factor) / factor;  }  console.log(truncateDecimalPlaces(3.14159, 2)); // 输出 3.14

（4）Date类

基于Date类，创建一个对象示例，表示当前日期和时间

const now = new Date();

①年份（四位数的年份，比如2024）

const year = now.getFullYear();

②月份

从0开始，所以0表示1月，11表示12月，需要加1才能得到实际月份

const month = now.getMonth() + 1; 

③日期（月份中的哪一天）

const day = now.getDate(); 

④小时（24小时制）

const hours = now.getHours();  

⑤分钟

const minutes = now.getMinutes();

⑥秒

const seconds = now.getSeconds(); 

⑦输出当前未格式化的日期和时间

        const now = new Date();   const year = now.getFullYear();   const month = now.getMonth() + 1;   const day = now.getDate(); const hours = now.getHours(); const minutes = now.getMinutes(); const seconds = now.getSeconds(); console.log(`当前日期和时间: ${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);

⑧输出当前格式化后的日期和时间

<script> const now = new Date();   const year = now.getFullYear();   const month = now.getMonth() + 1;   const day = now.getDate();  const hours = now.getHours(); const minutes = now.getMinutes();  const seconds = now.getSeconds(); // 格式化日期和时间字符串  // 如果month小于10，它会在month前面插入一个'0'，否则插入一个空字符串''。// 这样做的目的是确保月份始终是两位数（例如，1月变为01）。// 同理，${day < 10 ? '0' : ''}${day}确保日期也是两位数。const formattedDate = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`; const formattedTime = `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;// 输出当前格式化后的日期和时间  console.log(`当前日期和时间: ${formattedDate} ${formattedTime}`);
</script>

快复制代码试试吧！