前言
对于JavaScript的不断发展,其已经成为主流脚本语言的JavaScript需要我们不断的进行学习
话不多说,开启我们的JavaScript第二篇,各位加油
一. JavaScript操作符
算术运算符有 :+ 、- 、 * 、 / 、 %、++、–
赋值运算符有: = 、+=、-=、 *=、/=、
比较运算符有: >、>=、<、<=、== 、 ===(全等)
逻辑运算符有:&&(与)、||(或)、! (非)
1. 算数运算符
- 算数运算符用于对数字执行算数运算:
运算符 | 描述 |
---|---|
+ | 加法 |
- | 减法 |
* | 乘法 |
/ | 除法 |
% | 系数 |
++ | 递加 |
- - | 递减 |
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<p id="demo8"></p>
<script>
var a = 1;
var b = 5;
var c = a + b;
var d = a - b;
var e = a * b;
var f = a / b;
var g = a % b; // 返回除法的余数
a++; var h = a; // 递增,对数值进行递增
a--; var i = a; // 递减,对数值进行递减 当前的a变量已经为2 减1为1
var j = b ** 2; // 幂运算符(**)将第一个操作数提升到第二个操作数的幂。
document.getElementById("demo1").innerHTML = c;
document.getElementById("demo2").innerHTML = d;
document.getElementById("demo3").innerHTML = e;
document.getElementById("demo4").innerHTML = f;
document.getElementById("demo5").innerHTML = g;
document.getElementById("demo6").innerHTML = h;
document.getElementById("demo7").innerHTML = i;
document.getElementById("demo8").innerHTML = j;
</script>
</body>
</html>
补充解释
- % :返回除法的余数
- ++ :递增,对数值进行递增
- –:递减,对数值进行递减
- ** :幂运算符,将第一个操作数提升到第二个操作数的幂
2. 赋值运算符
- 赋值运算符向 JavaScript 变量赋值:
运算符 | 例子 | 等同于 |
---|---|---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var a = 1; // 赋值,= 赋值运算符向变量赋值。
a += 10; // += 赋值运算符从变量中减去一个值。
a -= 10; // -= 赋值运算符从变量中减去一个值。
a *= 8; // a乘以8后赋值给a
a /= 8; // a乘以8后赋值给a
a %= 8; // %= 赋值运算符把余数赋值给变量。
document.getElementById("demo1").innerHTML = a;
</script>
</body>
</html>
3. 比较运算符
运算符 | 描述 |
---|---|
== | 等于 |
=== | 等值等型 |
!= | 不相等 |
!== | 不等值或不等型 |
> | 大于 |
< | 小于 |
>= | 大于或等于 |
<= | 小于或等于 |
? | 三元运算符 |
代码
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<p id="demo8"></p>
<script>
var a = 10;
document.getElementById("demo1").innerHTML = (a == 10); // 等于
document.getElementById("demo2").innerHTML = (a === 10); // 值相等并且类型相等
document.getElementById("demo3").innerHTML = (a != 8); // 不相等
document.getElementById("demo4").innerHTML = (a !== 8); // 值不相等或类型不相等
document.getElementById("demo5").innerHTML = (a > 8); // 大于
document.getElementById("demo6").innerHTML = (a < 8); // 小于
document.getElementById("demo7").innerHTML = (a >= 8); // 大于或等于
document.getElementById("demo8").innerHTML = (a <= 8); // 小于或等于
</script>
</body>
</html>
</script>
</body>
4. 逻辑运算符
- 逻辑运算符用于判定变量或值之间的逻辑
运算符 | 描述 |
---|---|
&& | 逻辑与 |
|| | 逻辑或 |
! | 逻辑非 |
&&(与)代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var x = 6;
var y = 3;
document.getElementById("demo1").innerHTML =x < 10 && y > 1
document.getElementById("demo2").innerHTML =x < 10 && y < 1
document.getElementById("demo3").innerHTML =(x < 10 && y > 1) +"<br>" + (x < 10 && y < 1);
</script>
</body>
</html>
||(或)代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var x = 6;
var y = 3;
document.getElementById("demo1").innerHTML = x == 5 || y == 5
document.getElementById("demo2").innerHTML = x == 6 || y == 0
document.getElementById("demo3").innerHTML =
(x == 5 || y == 5) + "<br>" +
(x == 6 || y == 0) + "<br>" +
(x == 0 || y == 3) + "<br>" +
(x == 6 || y == 3);
</script>
</body>
</html>
!(非)代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var x = 6;
var y = 3;
document.getElementById("demo1").innerHTML = !(x === y)
document.getElementById("demo2").innerHTML = !(x > y)
document.getElementById("demo3").innerHTML =
!(x === y) + "<br>" + !(x > y);
</script>
</body>
</html>
5. 补充:JS字符串运算符
5.1 + 运算符
- +运算符也可用于对字符串进行相加(concatenate,级联)。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var t1 = "阿德";
var t2 = "很帅";
var t3 = t1 + " " + t2;
document.getElementById("demo1").innerHTML = t3;
</script>
</body>
</html>
5.2 += 赋值运算符
- += 赋值运算符也可用于相加(级联)字符串
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var t1 = "阿德";
var t1 += "很帅";
document.getElementById("demo1").innerHTML = t1;
</script>
</body>
</html>
5.3 字符串和数字的相加
- 相加两个数字,将返回和,但对一个数字和一个字符串相加将返回一个字符串
- 提示:如果您对数字和字符串相加,结果类型将是字符串
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
x = 7 + 8;
y = "7" + 8;
z = "Hello" + 7;
document.getElementById("demo1").innerHTML = x;
document.getElementById("demo2").innerHTML = y;
document.getElementById("demo3").innerHTML = z;
</script>
</body>
</html>
补充解释:
x结果为15
y结果为78(类型为字符串)
z结果为Hello7
二. JavaScript流程控制
-
简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行。
-
流程控制主要有三种结构:分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。
-
顺序结构:顺序执行
-
分支结构:条件判断执行。根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果
-
循环结构:循环判断执行。
1. 顺序流程控制:
- 按照代码的先后顺序,依次执行, 这个是最好理解的,我在这里就不多赘述了
2. 分支流程控制
- 按照代码的先后顺序,依次执行的过程中,根据不同的条件,执行判断条件的代码,从而得到不同的结果
- Javascript中提供了两种分支结构语句:
1.if语句
2.switch语句
2.1 if语句
- 语法:
if (条件表达式) {
// 执行语句1
} else {
// 执行语句2
}
if 案例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var age = prompt('请输入您的年龄:');
if (age >= 18) {
alert('可以进入网吧');
} else {
alert('孩子,成年人的世界你不懂');
}
document.getElementById("demo1").innerHTML = age;
</script>
</body>
</html>
补充解释
prompt() 方法用于显示可提示用户进行输入的对话框。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
if 判断闰年案例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var year = prompt('请您输入年份:');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert('您输入的年份是闰年');
} else {
alert('您输入的年份是平年');
}
document.getElementById("demo1").innerHTML = year;
</script>
</body>
</html>
补充解释
算法:能被4整除且不能整除100的为闰年,或者能够被400整除的就是闰年
2.2 switch语句
- switch 语句用于基于不同条件执行不同动作。
- 语法
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 0;
switch (x) {
case 0:
text = "我是零";
break;
case 1:
text = "我是壹";
break;
default:
text = "未找到";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
补充解释
计算一次 switch 表达式
把表达式的值与每个 case 的值进行对比
如果存在匹配,则执行关联代码
- break 关键词:
如果 JavaScript 遇到 break 关键词,它会跳出 switch 代码块。break 能够节省大量执行时间,因为它会“忽略” switch 代码块中的其他代码的执行。 - 不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。
- default 关键词规定不存在 case 匹配时所运行的代码
- switch规则细节
-
- 如果多种 case 匹配一个 case 值,则选择第一个 case。
-
- 如果未找到匹配的 case,程序将继续使用默认 label。
-
- 如果未找到默认 label,程序将继续 switch 后的语句。
三. JavaScript循环
- 假如您需要运行代码多次,且每次使用不同的值,那么循环相当方便使用。
1. 不同类型的循环
类型 | 解释 |
---|---|
for | 多次遍历代码块 |
for/in | 遍历对象属性 |
while | 当指定条件为 true 时循环一段代码块 |
do/while | 当指定条件为 true 时循环一段代码块 |
2. for 循环
-
语法
for (语句 1; 语句 2; 语句 3) {
要执行的代码块
}
运行顺序原理:
语句 1 在循环(代码块)开始之前执行。
语句 2 定义运行循环(代码块)的条件。
语句 3 会在循环(代码块)每次被执行后执行。 -
语法中的语句一
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var text = "";
for (i = 0; i < 5; i++) {
text += "数字:" + i + "<br>";
}
document.getElementById("demo1").innerHTML = text;
</script>
</body>
</html>
城市名循环案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var a = ["北京", "上海", "广州", "深圳"];
var i , len , b;
for (i = 0,len = a.length,b = ""; i < len; i++) {
b += a[i] + "<br>";
}
document.getElementById("demo1").innerHTML = b;
</script>
</body>
</html>
补充解释
语法中的语句1可以初始化多个值,用逗号隔开即可
案例:
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var a = ["北京", "上海", "广州", "深圳"];
var i = 2;
var len = a.length;
var text = "";
for (; i < len; i++) {
text += a[i] + "<br>";
}
document.getElementById("demo1").innerHTML = text;
</script>
</body>
</html>
补充解释
语法中的语句1可以省略
-
语法中的语句二
通常语句 2 用于计算初始变量的条件。
如果语句 2 返回 true,那么循环会重新开始,如果返回 false,则循环将结束。
如果省略语句 2,那么必须在循环中提供一个 break。否则循环永远不会结束。 -
语法中的语句3:
通常语句 3 会递增初始变量的值。
语句 3 可做任何事情,比如负递增(i–),正递增(i = i + 15),或者任何其他事情。
语句 3 也可被省略(比如当您在循环内递增值时:
只需要去语句3,在循环体里面添加i++即可:
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var a = ["北京", "上海", "广州", "深圳"];
var i = 0;
var len = a.length;
var text = "";
for (; i < len;) {
text += a[i] + "<br>";
i++;
}
document.getElementById("demo1").innerHTML = text;
</script>
</body>
</html>
3. for/in 循环
- for/in 语句遍历对象的属性
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var txt = "";
var user_data = {name:"xxx", age:18, sex:"男"};
var x;
for (x in user_data) {
txt += user_data[x] + " " + "<br>";
}
document.getElementById("demo1").innerHTML = txt;
</script>
</body>
</html>
4. while循环
- 只要条件为 true,循环能够一直执行代码块
- 语法:
while (条件) {
要执行的代码块
}
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>数字是 " + i;
i++;
}
document.getElementById("demo1").innerHTML = text;
</script>
</body>
</html>
注意
如果忘了对条件中使用的变量进行递增,那么循环永不会结束。这会导致浏览器崩溃。
5. do/while循环
- do/while 循环是 while 循环的变体。在检查条件是否为真之前,这种循环会执行一次代码块,然后只要条件为真就会重复循环。
- 语法
do {
要执行的代码块
}
while (条件);
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var text = "";
var i = 0;
do {
text += "<br>数字是 " + i;
i++;
}
while (i < 10);
document.getElementById("demo1").innerHTML = text;
</script>
</body>
</html>
注意
不要忘记对条件中所用变量进行递增,否则循环永不会结束,会导致浏览器崩溃
四. JavaScript字符串方法
1. length长度
- length 属性返回字符串的长度:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo1").innerHTML = txt.length;
</script>
</body>
</html>
2. charAt()下标
- charAt() 方法返回字符串中指定下标(位置)的字符串:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo1").innerHTML = txt.charAt(0);
</script>
</body>
</html>
3. repalce()替换
- replace() 方法用另一个值替换在字符串中指定的值:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<button onclick="onclick_test()">点击</button>
</body>
<script>
function onclick_test() {
var str = document.getElementById("demo1").innerHTML;
var txt = str.replace("ABCD","1234");
document.getElementById("demo1").innerHTML = txt;
}
</script>
</html>
4. split()分割
- split()方法可以将字符串转换为数组,然后查找下标位置:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1">a,b,c,d</p>
<button onclick="onclick_test()">点击</button>
</body>
<script>
function onclick_test() {
var str = 'a,b,c,d'
var txt = str.split(",");
document.getElementById("demo1").innerHTML = txt[0];
}
</script>
</html>
将英文单词拆分成字母:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1"></p>
</body>
<script>
var str = "helloworld";
var arr = str.split("");
alert(arr);
var text = "";
var i;
for (i = 0; i < arr.length; i++) {
text += arr[i] + "<br>"
}
document.getElementById("demo1").innerHTML = text;
</script>
</html>
5. toUpperCase()大写
- 通过 toUpperCase() 把字符串转换为大写:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<button onclick="onclick_test()">试一试</button>
<p id="demo">Hello World!</p>
</body>
<script>
function onclick_test() {
var text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.toUpperCase();
}
</script>
</html>
6. toLowerCase()小写
- 通过 toLowerCase() 把字符串转换为小写:(同五,改个参数即可)
7. indexOf()索引
- indexOf() 方法返回字符串中指定文本首次出现的索引(位置):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo">I am Chinese</p>
</body>
<script>
var str = "I am Chinese";
// 空格算一位索引
var pos = str.indexOf("e");
document.getElementById("demo").innerHTML = pos;
</script>
</html>
注意
空格算一位索引
索引选择为文本中首次出现的字符串
8. Substring()截取
- substring() 类似于 slice()切割。
设置两个参数:起始索引(开始位置),终止索引(结束位置)。
不同之处在于 substring() 无法接受负的索引。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo">I am Chinese</p>
<script>
var str = "I am Chinese";
var res = str.substring(5, 12);
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>
注意
如果省略str.substring(5,12);第二个参数,则该 substring() 将裁剪字符串的剩余部分。
9. slice()切割
- slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
设置两个参数:起始索引(开始位置),终止索引(结束位置)。
可接受负索引
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo">I am Chinese</p>
<script>
var str = "I am Chinese";
var res = str.slice(5,12);
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo">I am Chinese</p>
<script>
var str = "I am Chinese";
var res = str.slice(-7);
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>
注意:
- 如果某个参数为负,则从字符串的结尾开始计数。
如果省略第二个参数,则该方法将裁剪字符串的剩余部分:
五. JavaScript数组方法
常用方法
1.长度:length()
2.下标:[ ]
3.索引:indexOf()
4.追加:push(),加在数组最后面
5.添加:unshift(),加在数组最前面
6.后删:pop(),删除数组里面最后一个
7.前删:shift(),删除数组里面最前面一个
8.切片:slice()
9.替换:splice()
10.拼接:join()
11.排序:sort():是按照字符编码的顺序进行排序
12.反向:reverse()
13.连接:concat()
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id='demo'></p>
</body>
<script type="text/javascript">
var array = ['北京', '上海', '广州', '深圳']
// 通过索引拿数组元素
alert(array[2]);
// 在数组最后添加元素 返回值为当前数组长度
alert(array.push('长沙'));
// 查看当前数组所有元素
alert(array);
// 在数组前添加元素 返回值为当前数组长度
alert(array.unshift('城市'));
// 显示当前数组元素
alert(array);
// 删除数组最后一个 返回当前删除的元素值
alert(array.pop())
// 显示当前数组元素
alert(array);
// 删除数组第一个元素 返回当前删除的元素值
alert(array.shift());
// 显示当前数据元素
alert(array);
// 切片 不包含第二个值本身
document.write(array.slice(1, 3) + '<br>')
//替换
var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 在位置 2,添加 2 个元素,删除 1 个元素:
fruits.splice(2, 1, "Lemon", "Kiwi");
document.getElementById('demo').innerHTML = fruits;
// 拼接
alert(fruits.join('-'));
// 新建数组
var arr1 = ['a', 'b', 'd', 'c']
var arr2 = ['4', '2', '9', '6']
// 排序
alert(arr1.sort());
alert(arr1.reverse());
// 链接
alert(array.concat(arr1, arr2));
// 几位数的排序
var a = [100, 90, 200, 300, 50]
var b = a.sort(function (a, b){
return a - b;
})
// function(a, b){ return a-b }
// sort() 方法比较两个值时,将值发送给比较函数,根据返回的(负、零、正)值对值进行排序。
// 举例:
// 比较 40 和 100 时,sort() 方法调用比较函数(40,100)。
// 该函数计算 40-100,并返回 -60(负值)。
// sort 函数会将 40 排序为小于 100 的值。
</script>
</html>
补充方法
<script>
var num = 3.1415926;// 新建变量赋值备用
console.log(num.toString());// 把数字转换为字符串
console.log(num.toFixed(5));// 把数字转换为字符串,四舍五入指定小数位数的数字
var str = '123.456 px';//新建变量赋值备用
var str1 = '1000';//新建变量赋值备用
console.log(parseInt(str));//解析一个字符串,返回一个整数
console.log(parseFloat(str));//解析一个字符串,返回一个浮点数
console.log(Number(str));//把对象的值转换为数字
console.log(Number(str1));//把对象的值转换为数字
console.log(isNaN(Number(str)));//isNaN() 函数用于检查其参数是否是非数字值。
console.log(isNaN(Number(str1)));//isNaN() 函数用于检查其参数是否是非数字值。
var arr = [1,2,3];//新建数组备用
console.log(typeof arr);// typeof 操作符来检测变量的数据类型。
console.log(Array.isArray(arr));//isArray()判断数组
console.log(Array.isArray(str));//isArray()判断数组
console.log(Array.isArray([1,2]));//isArray()判断数组
</script>