一、函数
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("邓小平")); //1
console.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")); //6
console.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)) // 1
console.log(Math.abs(-1)) // 1
</script>
-
max和min方法返回参数值的最大值和最小值
<script>
console.log(Math.max(1,2,3)) // 3
console.log(Math.min(1,2,3)) // 1
</script>
-
floor和ceil对参数向下取整和向上取整
<script>
console.log(Math.floor(3.3)) // 3
console.log(Math.floor(-3.3)) // -4
console.log(Math.ceil(3.3)) // 4
console.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>
控制台显示: