1 变量
js变量的声明式为var,语法格式如下:
var 变量名 [ = 默认值];//var也可以不写
1.1 数据类型
- number:数值,包括整数,小数,NAN(非数字)
- string:字符串
- object:对象类型,例如:日期,数组,自定义类型等等
- undefined:未初始化
- function:函数类型
- boolean:布尔类型
注意事项:
- 变量的具体数据类型是由值来决定
- var也可以不写,但是建议写上
- 字符串可以使用单引号,也可以使用双引号
1.2 生命周期
js变量分为:全局变量和局部变量。
全局变量:在整个html文件中有效,所有全局变量都是保存window对象中。
局部变量:在函数体中有效。
注意事项:
定义局部变量的时候,如果没有使用var,那么解析器先从当前函数中查找是否存在该变量,如果没有,那么就会在全局对象中查找。如果全局对象中也没有该变量,那么解析器就会在全局对象中创建该变量。
所以,定义局部变量的时候使用var修饰。
<script>
//全局变量
var a = 10;
function print() {
//alert(window.a);
alert(a);
// 局部变量,只在print函数中有效
// var b = 10;
// 如果变量赋值的时候没有使用var,那么首先在当前函数中查询该变量的声明
// 如果没有找到,就会去全局中查找是否存在变量的声明
// 如果全局中也没有找到,那么就会在全局对象中声明该变量,然后再执行赋值
b = 10;
}
print();
alert(window.b);
</script>
2 流程控制
2.1 条件判断
语法格式:
if (条件表达式) {
} else if (条件表达式) {
} ... {
} else {
}
2.2 选择
语法格式:
switch (变量) {
case 值1:
...
break;
case 值2:
...
break;
case ...
default
}
2.3 循环
(1)while
语法格式:
while (条件表达式) {
循环体...
}
(2)do…while
do {
循环体...
} while (条件表达式);
(3)普通for循环
for (变量声明; 条件表达式; 循环体语句) {
循环体...
}
例如:
var total = 0;
// 计算1~10的总和
for (var i = 1; i <= 10; i++) {
total += i;
}
document.write("结果:" + total);
(4)for-in循环
类似java的foreach循环。
语法格式:
# java
for (数据类型 变量名 : 数组或集合) {
}
# javascript
for (var 下标 in 数组或对象) {
}
例如:
var arr = [10, 20, 30, 40, 55];
for (var i in arr) {
document.write(arr[i] + "<br/>");
}
3 函数
定义格式:
# 定义函数
function 函数名(参数1, 参数2,... ) {
}
# 定义函数变量
var 函数变量名 = function(参数1, 参数2, ...) {
}
注意事项:
- 参数不需要写var;
- 函数不需要声明返回值类型;
- 如果有返回值可以使用return返回结果;
- 在一个js文件中,可定义多个同名的函数,最后定义的函数会覆盖前面定义的函数;
<script>
function sum(a, b) {
var result = a + b;
return result;
}
function sum(a, b, c) {
// 注意:undefined与任何数进行运算,返回结果都是NaN。
var result = a + b + c;
return result;
}
alert(sum(10, 20));
</script>
4 js对象
4.1 Object对象
所有js对象的父对象。Object对象主要提供一些通用属性和方法。例如:prototype 和 valueof
4.2 String对象
创建String对象:
var 变量名 = "字符串";
var 变量名 = new String("字符串");
String对象的常用方法:
函数名 | 作用 |
---|---|
indexOf: | 获取指定内容在字符串中的位置 |
substring(): | 获取指定开始位置和结束位置的子串 |
charAt(): | 获取指定下标的字符 |
lastIndexOf(): | 获取指定下标的字符 |
toUpperCase() | 把字符串转换大写 |
toLowerCase(): | 把字符串转换成小写 |
4.3 Date对象
Date对象代表日期和时间。
创建日期:
var d = new Date();
Date对象常用方法:
方法名 | 作用 |
---|---|
setFullYear | 设置Date对象的年份 |
setMonth | 设置Date对象的月份 |
setDate | 设置Date对象的日 |
setHours | 设置Date对象的小时 |
setMinutes | 设置Date对象的分钟 |
setSeconds | 设置Date对象的秒 |
getFullYear | 获取Date对象的年份 |
getMonth | 获取Date对象的月份,月份从0开始 |
getDate | 获取Date对象的日 |
getHours | 获取Date对象的小时 |
getMinutes | 获取Date对象的分钟 |
getSeconds | 获取Date对象的秒 |
getTime | 获取Date对象距离1970年1月1日相差的毫秒数 |
例如:
<script>
var d = new Date();
d.setFullYear(2020);
d.setMonth(8);
d.setDate(20);
// 2019年07月16日 16:25:00
//document.write(d);
// 获取年
//document.write(d.getFullYear());
// 获取月
//document.write(d.getMonth() + 1);
// 获取日
//document.write(d.getDate());
// 把一个Date对象转换成指定格式日期字符串
/*function getDate(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dd = date.getDate();
return year + "年" + month + "月" + dd + "日";
}*/
document.write(getDate(d));
</script>
4.4 自定义对象
Java可以通过函数创建对象。例如:
<script>
function Person(name, age) {
this.name = name;
this.age = age;
this.code = function() {
alert("搬砖");
}
}
var p = new Person("aa", 18);
document.write("name = " + p.name + ", age = " + p.age +"<br/>");
p.code();
</script>
还可以通过Object对象自定义对象。
var p = new Object();
p.name = "jacky";
p.age = 20;
document.write("name = " + p.name + ", age = " + p.age +"<br/>");
使用json语法创建对象:
{
变量名: 值,
变量名: 值,
...
}
变量名是字符串,值是任意类型对象。
例如:
var p = {
name : "",
age : 18,
setName: function(name) {
this.name = name;
},
getName: function() {
return this.name;
}
}
p.setName("jacky");
document.write("name = " + p.name + ", age = " + p.age +"<br/>");
alert(p.getName());
4.5 Number对象
Number对象代表一个数值。
new Number(值)
Number(值)
例如:
<script>
var a = new Number(3.1415666);
// 把Number转换成字符串,指定保留小数位数
a = a.toFixed(2)
document.write("a = " + a + "<br/>");
var b = Number(10);
// 把Number转换成二进制字符串
b = b.toString(2);
document.write("b = " + b + "<br/>");
</script>
4.6 Array对象
Array代表一个数组对象。
创建数组的方式:
方式一:直接使用方括号。例如:var arr = [10, 20, 30];
方式二:使用new方式创建数组。
new Array();
new Array(值1, 值2, ...);
Array对象属性:
length:返回数组元素个数。
Array对象的常用方法:
方法名 | 作用 |
---|---|
reverse() | 翻转数组 |
shift() | 删除并返回数组的第一个元素 |
pop() | 删除并返回数组的最后一个元素 |
push() | 向数组的末尾添加一个新元素,并返回新数组的长度 |
sort() | 对数组进行排序,默认升序 |
join() | 把数组中所有元素放入到一个字符串中,可以指定分隔符 |
splice() | 删除元素,然后可以在删除位置添加新 |
代码:
<script>
// 定义了一个数组
var arr = new Array("java", "android", "go", "python", "spring");
document.write("数组的长度:" + arr.length + "<br/>");
// 翻转数组
//arr.reverse();
//document.write(arr);
// 删除元素
document.write("删除最后一个元素:" + arr.pop() + "<br/>");
document.write("删除第一个元素:" + arr.shift() + "<br/>");
document.write("添加元素后数组的长度:" + arr.push("php") + "<br/>");
// 把数组转换成字符串
var str = arr.join(" ");
document.write(str + "<br/>");
// var arr2 = new Array("c", "a", "z", "h", "f", "b");
var arr2 = new Array(20, 10, 4, 11, 8);
// arr2.sort();
// 可以在sort函数中传入一个function
// 如果函数返回0,代表a等于b
// 如果函数返回值小于0,代表a小于b
// 如果函数返回值大于0,代表a大于b
arr2.sort(function(a, b) {
//return a - b;
return b - a;
});
document.write(arr2);
</script>
4.7 Math对象
Math对象提供一些简化数学运算的方法。
方法名 | 功能 |
---|---|
abs() | 绝对值 |
ceil() | 向上取整 |
floor() | 向下取整 |
random() | 生成[0, 1)之间的随机数 |
round() | 四舍五入 |
max()和min() | 求最大值 |
代码:
<script>
var pi = Math.PI;
document.write("求绝对值:" + Math.abs(-10) + "<br/>");
document.write("向上取整:" + Math.ceil(pi) + "<br/>");
document.write("向下取整:" + Math.floor(pi) + "<br/>");
document.write("生成随机数:" + Math.random() + "<br/>");
document.write("四舍五入:" + Math.round(pi) + "<br/>");
// 生成 0 ~ 9 之间的任意整数
var num = Math.floor(Math.random() * 10)
document.write("生成0~9之间的任意整数:" + num + "<br/>");
document.write("返回最大值:" + Math.max(10, 5) + "<br/>");
document.write("返回最小值:" + Math.min(10, 5) + "<br/>");
</script>
5 注释
单行注释: //注释内容
多行注释:/* 多行注释 */
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/81675.html