JavaScript语法基础（函数，对象，常用类Array，String，Math和Date）【超详细！！！新手入！！！】

一、函数

1、函数的定义

函数指的是一段可被重复调用的代码块。函数与变量不同，需要先定义再调用。

定义函数的语法格式为：

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

{

语句； // return指的是返回值

...

return 表达式； // {}中的语句是函数的执行语句，在函数被调用时会被执行；

}

2、函数的调用

1）在JS程序中被调用

<script>var result=calculator(10,2);function calculator(a, b){c = a+b;return c;        }// 1. 在JS程序中被调用 （包括有返回值和无返回值的调用）document.write(result);</script>

效果显示：

2）在超链接标记中调用函数

<script>// var result=calculator(10,2);function calculator(a, b){c = a+b;alert("a+b=" + c);     // alert();显示浏览器跳出一个警告牌return c;        }</script>
<!-- 超链接点击中调用函数 --><!-- 使用<a>标记的onclick属性 --><a href="#" onclick="calculator(3,4)">百度一下，你就知道</a>

效果显示：

3）在加载网页中调用函数

<script>function calculator(a, b){c = a+b;alert("a+b=" + c); return c;        }</script><!-- 按钮点击 --><input type="submit" value="计算a+b的和" onclick="calculator(1,2)" />

效果显示：

二、对象

1、对象的概念

        对象是JavaScript的一个基本数据类型，是一种复合值,它将很多值(原始值或者其他
对象)聚合在一起,可以通过对象的名字访问这些值。例如:
                var car = {type:"Fiat", model:500, color:"gray"};

        对象包含多种类型，可以将对象看作是变量的容器。

JavaScript对象是一种数据结构，用于存储和组织键值对。对象可以包含多个键值对，其中每个键都是唯一的，并且与一个值相关联。

2、对象的定义

在JavaScript中，对象可以通过大括号 {} 来定义一个对象，里面包含键值对，格式通常是 key: value。

<script>
// 1.直接手动定义一个对象（而不是通过类实例化）var person = {firstName:"毛",lastName:"主席",age:83,eyeColor:"黑色",}};// 2.使用定义好的对象的属性console.log(person.eyeColor)  //使用对象的属性
</script>

控制台显示：

3、对象的使用

要使用一个对象，可以引用JavaScript的内置对象。

 <script>// 1.直接手动定义一个对象（而不是通过类实例化）var person = {firstName:"毛",lastName:"主席",age:83,eyeColor:"黑色",getName: function(){// 注意this对象的使用（this用于将对象指向自身）// 没有this，直接用属性名控制台会报错allName = this.firstName + this.lastName;return allName;},cal: function(a,b){return a+b;}};// 2.使用定义好的对象的方法console.log(person.getName()) //使用对象的方法console.log(person.cal(1,2))  //使用对象的方法</script>

三、类

在JavaScript中，有一些常用的内置类。

常用类	用处
Array	用于创建和操作数组
String	用于处理字符串
Math	用于数学计算
Date	用于处理日期和时间，可以创建日期对象，并提供格式化和日期计算的功能

1、Array

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

<script>
var persons=new Array("毛泽东","邓小平","江泽民");console.log(persons.length);    // 3
</script>

push方法用于在数组末端添加一个或多个元素，并返回

<script> 
//   添加新元素后的数组长度。注意：该方法会改变原数组！var persons=new Array("毛泽东","邓小平","江泽民");len = persons.push("胡锦涛");console.log('新数组为:' + persons +'->长度为:' + len);  // 新数组为:毛泽东,邓小平,江泽民,胡锦涛->长度为:4
</script>

pop方法用于删除数组最后一个元素，并返回被删除的那个元素

<script>
//   注意:该方法会改变原数组!var persons=new Array("毛泽东","邓小平","江泽民");p = persons.pop("江泽民");console.log('新数组为:' + persons +'->被移除的元素为: ' + p); // 新数组为:毛泽东,邓小平->被移除的元素为:江泽民
</script>

reverse方法用于颠倒排列数组元素，返回改变后的数组

<script>
//   注意:该方法会改变原数组!var persons=new Array("毛泽东","邓小平","江泽民");p = persons.reverse();console.log(p); 
</script>

控制台显示：

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

 <script>
var persons = new Array("毛泽东","邓小平","江泽民");console.log(persons.indexOf("邓小平"));  //1console.log(persons.indexOf("胡锦涛"));  //-1          </script>

2、String

length属性返回字符串的长度

<script>var s = 'hello';console.log(s.length) // 5
</script>

charAt方法返回指定位置的字符

<script>
var s = new String('hello'); console.log(s.charAt(1));            // "e"console.log(s.charAt(s.length - 1)); // "o"console.log(s.charAt(10));           // ""  索引超出返回空字符串</script>

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

<script>
var s1 = new String('hello'); var s2 = new String(' world'); console.log(s1.concat(s2));          // "hello world"console.log(s1.concat(s2, ' hi', ' beijing')); // "hello world hi beijing"
</script>

indexOf 方法用于确定一个字符串在另一个字符串中第一次出现的位置

<script>
// 返回结果是匹配开始的位置。如果返回-1表示不匹配。var s = new String('hello world'); console.log(s.indexOf("world"));  //6console.log(s.indexOf("hi"));     //-1
</script>

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

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

3、Math

abs方法返回参数值的绝对值

     <script>console.log(Math.abs(1)) // 1console.log(Math.abs(-1)) // 1
</script>

max和min方法返回参数值的最大值和最小值

<script>console.log(Math.max(1,2,3)) // 3console.log(Math.min(1,2,3)) // 1
</script>

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

     <script>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
</script>

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

<script>
for (var index = 1; index <=5; index++){console.log(Math.random())}// 随机输出任意范围的某个数（直接当成固定函数使用）function getRandomInRange(min, max) {  return Math.random() * (max - min) + min;  }  console.log(getRandomInRange(1, 20)); //随机输出1到20的某个数
</script>

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

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

4、Date

获取当前时间

<script>
// const 只读不写// 基于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();  // 输出当前未格式化的日期和时间 console.log(`当前日期和时间:${year}-${month}-${day}${hours}:${minutes}:${seconds}`);</script>

控制台显示：

输出当前格式化后的时间

 <script>// 基于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();  // 格式化日期和时间字符串  // 如果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>

控制台显示：