一、JS的数据类型
js六大数据类型
number——数字 在js里面的小数和整数统一都是数字 -2^53 -- 2^53 超出范围之后精度就会不准确
string——字符串
boolean——布尔值 true false
function——函数
undefined——未定义 一个变量声明之后没有赋值就是undefined
object——对象
在js里面null属于对象类型,但是它不具有很多对象的共性,所以很多资料将它归为单独一类数据类型null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
background: yellow;
100px;
height: 50px;
line-height: 50px;
margin: 10px auto;
text-align: center;
}
</style>
</head>
<body>
<div id = "test1">test1</div>
<div id = "test2">test2</div>
<div id = "test3">test3</div>
<div id = "test4">test4</div>
<div id = "test5">test5</div>
<div id = "test6">test6</div>
<div id = "test7">test7</div>
<div id = "test8">test8</div>
<div id = "test9">test9</div>
<script>
var a = 128;
var b = "hello world";
var c = true;
var d = function () {
alert(1);
};
var e;
var f = document.getElementById("text6");
var g = [1,2,3];
var h = {};
var i = null;
var oDiv1 = document.getElementById("test1");
var oDiv2 = document.getElementById("test2");
var oDiv3 = document.getElementById("test3");
var oDiv4 = document.getElementById("test4");
var oDiv5 = document.getElementById("test5");
var oDiv6 = document.getElementById("test6");
var oDiv7 = document.getElementById("test7");
var oDiv8 = document.getElementById("test8");
var oDiv9 = document.getElementById("test9");
oDiv1.innerHTML = typeof a;
oDiv2.innerHTML = typeof b;
oDiv3.innerHTML = typeof c;
oDiv4.innerHTML = typeof d;
oDiv5.innerHTML = typeof e;
oDiv6.innerHTML = typeof f;
oDiv7.innerHTML = typeof g;
oDiv8.innerHTML = typeof h;
oDiv9.innerHTML = typeof i;
</script>
</body>
</html>
var a = 128;
var b = "hello world";
var c = true;
var d = function () {
alert(1);
};
var e;
var f = document.getElementById("text6");
var g = [1,2,3];
var h = {};
var i = null;
这9个变量的类型打印出来分别为:
二、JS的运算符
1.算数运算符
算数运算符(基础数字运算)+ - * / %(求余数)
当不是数字之间的运算的时候,“+”
号两边一旦有字符串(引号引起来的一坨),那么“+”号就不再是数学运算了,而是拼接,最终结果是字符串。
- * / % 尽量将字符串转换成数字(隐式类型转换)
2.赋值运算符
+= -= *= /= %=
++ -- 两个都存在隐式类型转换,会全部转换为数字
3.逻辑运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ background: yellow; 100px; height: 50px; line-height: 50px; margin: 10px auto; text-align: center; } </style> </head> <body> <div id = "test1">test1</div> <div id = "test2">test2</div> <div id = "test3">test3</div> <div id = "test4">test4</div> <div id = "test5">test5</div> <div id = "test6">test6</div> <script> var a = true && true; var b = false || false; var c = !false; var d = 5 && 0 && 3; var e = false || 0 || 0 || 2; var f = !"5"; var oDiv1 = document.getElementById("test1"); var oDiv2 = document.getElementById("test2"); var oDiv3 = document.getElementById("test3"); var oDiv4 = document.getElementById("test4"); var oDiv5 = document.getElementById("test5"); var oDiv6 = document.getElementById("test6"); oDiv1.innerHTML = "a = " + a; oDiv2.innerHTML = "b = " + b; oDiv3.innerHTML = "c = " + c; oDiv4.innerHTML = "d = " + d; oDiv5.innerHTML = "e = " + e; oDiv6.innerHTML = "f = " + f; </script> </body> </html>
var a = true && true;
var b = false || false;
var c = !false;
var d = 5 && 0 && 3;
var e = false || 0 || 0 || 2;
var f = !"5";
几个参数的打印结果
三、条件语句:if
if ==> 布尔值
判断符
> < >= <= == != !== ===
== 只判断值是否一样
=== 不仅仅判断值,还判断类型是否一样
当if的条件 运算完后不是布尔值的时候 会被强制性的转换为布尔值
哪些值,在转换为布尔值的时候为false
0 number
false boolean
"" string 注:只有""转换布尔值时候为false," "双引号里有空格或者其他字符串,则为true;
null object/null
undefined undefined
NaN number
NaN :Not a Number number类型
一般在非法运算的时候才会 出现NaN
isNaN(参数) 非常讨厌数字,首先尽量把参数转换成数字,然后当参数是数字,返回 false;当参数不是数字,返回 true。
在if里面,能用布尔值做条件判断的时候,不要用其他的来代替,因为强制数据类型的转换需要耗费时间,在两个值比较的时候,能用三等判断的时候,就用三等判断
三目运算:条件?条件为真则执行:条件为假则执行。例子:a>b?x=5:x=2; a大于b则x=5,否则x=2;
四、switch语句
请使用 switch 语句来选择要执行的多个代码块之一。
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: //n 与 case 1 和 case 2 不同时执行的代码,使用 default 关键词来规定匹配不存在时做的事情 }
五、循环语句
1.for循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ min- 700px; } span{ background: yellow; 60px; height: 30px; font-size: 12px; display: inline-block; padding-left: 10px; line-height: 30px; margin: 5px; border: 1px solid skyblue; } </style> </head> <body> <div id="box"> </div> <script> var oBox = document.getElementById("box"); for(var i = 1; i < 10; i++){ for(var j = 1; j <= i; j++){ oBox.innerHTML += "<span>" + j + "×" + i + " = " + j*i + "</span>"; } oBox.innerHTML += "<br/>"; } </script> </body> </html>
for循环制作99乘法表:
2.while;do while
只要指定条件为 true,循环就可以一直执行代码,当条件为false,跳出循环。
console.log(i);