JavaScript--数据类型和运算符
day04不见了,因为day04的博客放到了我的纸上。前面的html和CSS知识点琐碎,尽管是一边写博客一边学,还是避免不了想睡觉的情况(也有可能是我打字太慢哈哈),按我个人的习惯,这样比较多又不是很复杂的知识点完全可以动手用笔写下来。可能是经过了这么多年的学习,我更喜欢用手写笔记的方法,更容易将知识点记进脑海并且不容易走神。现在我也在努力适应用键盘记笔记,不过我的打字速度真的有待提高= =
js不是跟着pink老师学的,是尚硅谷的超哥,也是在b站就是了。
JavaScript在html中的容身之处
1.直接在< head >中建立< script >标签,在script标签中写上js代码。
<script>
alert("here i am");
</script>
2.在< body >的标签中写上具体的JavaScript代码,直接使用
<body>
<!-- 可以将js代码编写到标签的onclick属性中,结构与行为耦合,但是不方便维护-->
<button onclick="alert('你抓到我了');">点击</button><br>
<!-- 可以将js代码放入链接的href属性中,点击href执行JavaScript代码 -->
<a href="javascript:alert('谢谢 C位出道了');">pick me</a><br>
<!-- 点击链接没反应 -->
<a href="javascript:;">请为我撑腰</a><br>
</body>
3.(最常用)新建.js文件,然后在需要引入这个js文件的html文件中引用他,作为< script >标签的属性引入
<script src="04-JavaScript.js">
//如果在script中已经引用了一个js文件,此script中不能再放入其他JavaScript语言,即使放入了也不会被调用,解决方法:再新建一个script
alert("隐身大法");
</script>
<!-- 再新建一个script标签,写入JavaScript -->
<script>
alert("显身大法");
</script>
数据类型
六大数据类型
1.String字符串
2.Number数值
3.Boolean布尔值
4.Null空值
5.Undefined未定义
6.Object对象
其中12345属于基本数据类型,6是引用数据类型
String
var str = "fifi";
console.log(str);
1.使用引号引起来,双单都可以,但是不要混着用,引号不能嵌套
2.使用\作为转义字符。换行:\n 制表符:\t \ :\
2.Number数值 3.Boolean布尔值 4.Null控制 5.Undefined未定义 6.Object对象
number
/* 在JavaScript中所有数值都是number类型,包括整数和小数,可以使用运算符:tyoeof 检查变量的类型 */
console.log(typeof str);
//表示数字的最大值 1.7976931348623157e+308,超过它就是infinity正无穷,typeof infinity 返回number
console.log(Number.MAX_VALUE)
// 非数字NaN,typeof返回number
var b = "abc"*"abc";
console.log(b);
//零以上最小值5e-324
c = Number.MIN_VALUE;
console.log(c);
// 整数运算基本保证精确,但是进行浮点运算可能得到不精确的结果,原因:二进制不能表示1/10
// 所以千万不要运用JavaScript进行精确度要求比较高的运算
var d = 0.1+0.2;
console.log(d);//0.30000000000000004
1.在JavaScript中所有数值都是number类型,包括整数和小数。
2.可以使用运算符:tyoeof 检查变量的类型
3.表示数字的最大值 1.7976931348623157e+308,超过它就是infinity正无穷,typeof infinity 返回number
4.非数字NaN,typeof返回number
5.零以上最小值5e-324
6.整数运算基本保证精确,但是进行浮点运算可能得到不精确的结果,原因:二进制不能表示1/10
7.千万不要运用JavaScript进行精确度要求比较高的运算
Boolean
1.Boolean:只有两个 true false,主要用来做逻辑判断
2.Null(空值)类型的值只有一个:null,专门表示空对象,typeof检查返回object
3.Undefined(未定义)类型的值只有undefined,声明了一个变量,但是没有赋值,此时这个变量的值就是Undefined,typeof检查返回undefined
强制转换数据类型
转换为String
var e = 123;
/* 将其他的数据类型转换为String*/
/* 方式一:调用被转换数据类型的ToString()方法,该方法不会影响原变量。限制:null和undefined这两个值没有ToString方法*/
//e = e.toString();
/* 方式二:调用String(参数)函数,对于number和Boolean还是调用tostring()方法。适应性更好,对于null和undefined直接转换为“null”和“undefined” */
e = String(e);
console.log("转换为字符串:");
console.log("值:"+e);
console.log("类型:"+typeof e);
转换为Number
var f = "123px";
/* 调用Number()函数来转换
转换情况:
1.纯数字字符串,直接将其转换为数字
2.如果有非数字,则转换为NaN
3.如果字符串是空串或全是空格的字符串,则转换为0
4.Boolean型true转换为1,false转换为0
5.null转换为0
6.undefined转换为NaN,非数字*/
//f = Number(f);
/* 转换方式二:paresInt():将字符串中的有效整数取出来转换为number,专门用来对付字符串,对于非String数据类型先转换为字符串,再转换为数字,所以null,boolean没有用 */
f = parseInt(f);
console.log("转换为数字:");
console.log("值:"+f);
console.log("类型:"+typeof f);
转换为其他进制数
//在JavaScript中表现16进制的数字,需要以0x开头
var g = 0xff;
console.log("十六进制数字输出:"+g);
//在JavaScript中表现8进制的数字,需要以0开头
var h = 071;
console.log("八进制数字输出:"+h);
//在JavaScript中表现2进制的数字,需要以0b开头,但不是所有浏览器都支持
var i = 0b10;
console.log("二进制数字输出:"+i);
//像"070"这种字符串有些会当成八进制解析,有些会当成十进制解析
//可以在parsrInt()中传入第二个人参数,表示进制
var j = "062";
j = parseInt(j,8);
console.log("其他进制数测试:"+j);
转换为Boolean
//使用Boolean()函数,0,NaN,null,undefined,空串:false
//对象也会转换为true
var k = 123;
k = Infinity+1;//true
k = Boolean(k);
console.log("值:"+k);
console.log("类型:"+typeof k);
算数运算符
+
/*算数运算符 +
对非Number类型的值进行运算时,会将这些值转换为数字后进行运算 */
var a;
a = true+false
//字符串相加会 拼串,用于长字符串
a = "123"+"456";//结果为"123456"
//任意值与字符串做加法,都会先转换为字符串再进行拼串
a = "我是"+1;
a = true+"没错";
//利用这一特点,将任意数据类型转换为string
a = 5;//a为数字
a = a+"";//通过加上一个空字符串将a转换为string,隐式转换,由浏览器自动完成
a = 1+2+"3";//33
a = "1"+2+3;//123
console.log("a = "+ a+",类型:"+typeof a);
最重要的一点
var a = 5;//a为数字
a = a+"";//a为字符串
通过加上一个空字符串将a转换为string,隐式转换,由浏览器自动完成。
-
/* 算术运算符 - */
var b;
b = 100-true;//99
b = 100-"1";//99
console.log("b = "+ b+",类型:"+typeof b);
*
/* 算数运算符 * */
var c;
c = 4*"8";//32
c = 4*null;//0
c = 4*NaN;//NaN
c = 4*undefined;//NaN
console.log("c = "+ c+",类型:"+typeof c);
/
/* 算数运算符 / */
/* 任何值做减乘除都会自动转换为number
隐式转换,-0 *1 /1 可以将其他数据类型转换为数字********************************************************/
var d;
d = "123";
d = d-0;
console.log("d = "+ d+",类型:"+typeof d);
利用算数运算符进行转换
+:数字变为字符串
a = a+"";
-,*,/:字符串变为数字
var a = "abc";
a = a-0;
var b = "abc";
b = b*a;
var c = "abc";
c = c/1;
%
取余数
/* 算数运算符 % */
var e;
e = 10;
e = e%3;
console.log("e = "+ e+",类型:"+typeof e);
一元运算符
/* 一元运算符,只需要一个操作数
+ 正号
- 正号对数字不会产生任何影响
-负号
- 负号可以对数字进行负号的取反
- 对于非Number类型的值
先转换为Number,然后再运算
可以对一个其他的数据类型使用 +,将其转换为number
原理和Number()一样 */
var f = true;
f = +f;
console.log("f = "+ f+"类型:"+typeof f);
var g = 1+"2"+3;
g = 1+ +"2"+3;
console.log("g = "+ g+"类型:"+typeof g);
重点:
可以对一个其他的数据类型使用 +,将其转换为number
var f = true;//f为boolean
f = +f;//f为number
自增自减
/* 自增++
- 在自身的基础上+1
- 分成两种:a++与++a,
- 都会使原变量自增1
- a++ 的值是自增以前的值,++a的值是自增以后的值*/
var h = 1;
console.log("h++ :"+ h++);
console.log("h = "+h);
var i = 10;
//i自增1
i = i++ + ++i +i;//10+12+12=34
i = i++;
console.log(i);
/* 自减
- 在自身基础上-1
- 分成两种:a--与--a
- a--是原值(自减前的值)
- --a是变量的新值 */
//练习
var n1 = 10,n2 = 20;
var n = n1++;
console.log('n='+n);//10
console.log('n1='+n1);//11
n = ++n1;
console.log('n='+n);//12
console.log('n1='+n1);//12
n = n2--;
console.log('n='+n);//20
console.log('n2='+n2);//19
n = --n2;
console.log('n='+n);//18
console.log('n2='+n2);//18
逻辑运算符
/* 三种逻辑运算符 */
/* !非
- 对一个值进行非运算,指对一个布尔值进行取反操作
- 对非布尔值取反,将该值变为布尔值,然后取反
- 利用!!(取两次反)将任一个数据类型变成布尔型**********************************************************/
/* &&与 短路的与
- 对符号两侧的值进行与运算并返回结果
- 运算规则:只有两个值都是true时,才返回true
- 如果第一个值为false,不用看第二个,直接返回结果 */
false && alert("我被忽略了");
true && alert("上面确实被忽略了");
/* ||或 短路的或
- 只要有一个true,返回结果就是true*/
/* 非布尔值的情况
- 对于非布尔值进行与或运算,会先将其转换为布尔值,在运算,,并且返回原值
- 与运算:
- 如果第一个值为true,则必然返回第二个
- 如果第一个值为false,则直接返回第一个
- 或运算:
- 如果第一个值为true,则直接返回第一个
- 如果第一个值为false,则必然返回第二个*/
//true && true
//与运算:两个都是true,返回后边的
var a = 5 && 9;
console.log(a);
//false && true
//与运算:两个值中由false,则返回靠前的值
var b = 0 && 9;
console.log(b);
var c = 9 && 0;
console.log(c);
//true||true
//返回第一个
//false||true
//直接返回第二个
关系运算符
//关系运算符
/* 通过关系运算符比较两个值之间的关系,关系成立返回true */
var d = 5>=5;
console.log(d);
/* 比较两个字符串时,比较的是两个字符串的字符编码,
- 比较字符串时是一位一位比较,若相同则比较下一位
- 用它来进行英文字母的排序 */
//注意:比较两个字符串型数字时一定要转型**********************************************************
console.log("11"< "5");//返回true
console.log("11"< +"5");//转换为数值比较
//使用转义字符输入Unicode编码 \u四位编码
console.log("\u2620");
//==比较时 两个值数据类型不同,先转换为相同数据类型再进行比较
console.log("1" == 1);//true
console.log(true == "1");//将两个值同时转换为number
console.log(null == 0);//false
/* undefinded衍生自null,做相等判断时返回true */
console.log(undefined == null);
/* NaN不和任何值相等,包括它本身 */
console.log(NaN == NaN);//false
var e = NaN;
//判断是否为NaN,用isNaN()函数,如果是,返回true
console.log(e == NaN);//返回false,无法判断
console.log(isNaN(e));
/* === 全等
- 用来判断两个值是否全等,和相等类似,但是不会进行自动转换,如果两个值类型不同,直接返回false */
console.log(123 === "123");//false
/* !== 不全等
- 判断两个值是否不全等,和不等类似,但是不会进行自动转换,如果两个值类型不同,直接返回true */
console.log(1 !== "1");
重点
比较两个字符串型数字时一定要转型,因为比较时时一个字符一个字符比较,所以“11”<“5”,因为“1”<“5”
console.log("11"< "5");//返回true
console.log("11"< +"5");//转换为数值比较,返回false
条件运算符(三元运算符)
/* 条件运算符 三元运算符
- 条件表达式?语句1:语句2
-true 执行语句1
-false 执行语句2*/
//获取最大值
var a = 100,b=30,c = 3290;
var max = a > b ?a : b;
max = max > c ? max : c;
console.log(max);
/* ,运算符在声明多个运算符时使用 */
获取最大值的方法
var a = 100,b=30,c = 3290;
var max = a > b ?a : b;
max = max > c ? max : c;
console.log(max);
运算符优先级
1.运算符优先级,可以用括号来改变优先级
2.&&优先级比||高
代码块
在JavaScript中用{}来给语句进行分组,一个{}中的语句也叫代码块,只具有分组作用
Unicode编码
在< body >中
<body>
<!-- Unicode编码
- &#编码;这里的编码需要的是十进制 -->
<h1 style="font-size: 200px;">☠</h1>
</body>
结果:
在< script >中
//使用转义字符输入Unicode编码 \u四位编码
console.log("\u2620");
结果:(控制台中)