基本运算符
*对非Number类型进行运算时,会将这些值转换为Number,然后在进行运算
* 任何值和NaN做运算都得NaN
* 任何的值与字符串做加法运算,都会先转换为字符串,然后在和字符串做拼接的操作
* 任何值做 - * / 运算时都会自动转换为Number
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 运算符也就操作符
* 通过运算符可以对一个或多个值进行运算
* 比如:typeof 就是一个运算符,可以来获得一个值的类型
* 他会将该值的的类型以字符串的形式返回
* number string boolean undefind object
*
* 算数运算符 : + - * / %
*
* 对非Number类型进行运算时,会将这些值转换为Number,然后在进行运算
* 任何值和NaN做运算都得NaN
* 任何的值与字符串做加法运算,都会先转换为字符串,然后在和字符串做拼接的操作
* 我们可以利用这一点,来将一个任意的数据类型转换为String
* 我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String
* 这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String函数
*/
var a = 123;
var result = typeof a;
result = true + false; //1
result = true + NaN; //NaN
result = 2 + null; //2
result = "123" + "345"; //123345
result = 123 + "12"; //12312
result = true + "12"; //true12
result = NaN + "12";
console.log(result);
console.log(typeof result);
var c = 21;
c = c + "";
console.log(typeof c);
/*
* 任何值做 - * / 运算时都会自动转换为Number
* 我们可以利用这一点做隐式的类型转换
* 可以通过一个值 -0 *1 /1 来将其转换为Number
* 原理和Number()函数一样,使用起来更加简单
*/
var b = 2 - true; //1
b = 2 * "2"; //4
b = 3 /"3";
console.log(typeof b);
console.log(b);
</script>
</head>
<body>
</body>
</html>
一元运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 一元运算符, 只需要一个操作符
* + 正号
* 正号不会对数字产生任何影响
* - 负号
* 负号对原有的数字进行取反
*
* 对于非Number类型的值
* 它会先将转换为Number,然后再运算
* 可以对一个其他的数据类型使用 + ,来将其转换为Number,原理和Number()函数一样
*
*
*
*/
var a = 123;
a = +a; //123
a = -a; //-123
a = -true; //-1
a = "18";
a = -a; //-18
/*console.log(typeof a);
console.log("a = " + a);*/
var result = 1 + "2" +3; //123
result = 1 + +"2" +3; //6
console.log(result);
</script>
</head>
<body>
</body>
</html>
自增自减
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 自增 ++:通过自增使变量在自身的基础上增加1
* 自增分两种:后++(a++)和 前++(++a)
* 相同:的是都自加1
* 不同:a++的值等于原变量的值(自增前的值) ++a的值等于原变量的新值(自增后的值)
*
* 自减 --:通过自减使变量在自身的基础上减少1
* 自减分两种: 后--(a-- )和 前--(--a)
* 相同:的是都自减1
* 不同:a--的值等于原变量的值(自减前的值) --a的值等于原变量的新值(自减后的值)
*/
var a = 1;
a++;
++a;
/*console.log(a);*/
var c = 10;
c++; //11
console.log(c++);
var d = 20;
var result = d++ + ++d + d; //64
console.log(result);
</script>
</head>
<body>
</body>
</html>
自增自减练习
var n1 = 10 ,n2 = 20;
var n = n1++;
console.log('n = '+ n);
console.log('n1 = ' + n1);
n = ++n1;
console.log('n = '+ n);
console.log('n1 = ' + n1);
n = n2--;
console.log('n = '+ n);
console.log('n2 = ' + n2);
n = --n2;
console.log('n = '+ n);
console.log('n2 = ' + n2);
/*
*
[Web浏览器] "n = 10" /NewDay02/js/02自增自减.html (36)
[Web浏览器] "n1 = 11" /NewDay02/js/02自增自减.html (37)
[Web浏览器] "n = 12" /NewDay02/js/02自增自减.html (40)
[Web浏览器] "n1 = 12" /NewDay02/js/02自增自减.html (41)
[Web浏览器] "n = 20" /NewDay02/js/02自增自减.html (44)
[Web浏览器] "n2 = 19" /NewDay02/js/02自增自减.html (45)
[Web浏览器] "n = 18" /NewDay02/js/02自增自减.html (48)
[Web浏览器] "n2 = 18" /NewDay02/js/02自增自减.html (49)
*/
逻辑运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* js中有三种逻辑运算符
* !非
* !可以用来对一个值进行非运算
* 非运算就是对一个布尔值进行取反操作
* 对一个值进行两次取反,它不会发生变化
* 如果对非布尔值进行取反,则会先转换为布尔值,在取反
* 我们可以利用该特点,将一个其他数据类型转换为布尔值
* 可以为一个任意数据类型取两次反,并将其转换为布尔值
* 原理和Boolean一样
*
* && 与
* 运算规则:只要有一个false,就返回false,两个值都为true时,才返回true
* 在js中的 与 属于短路与,如果第一个值为false,则不会看第二个值
*
* || 或
* 运算规则:两个值都是false ,才返回false ,其他都是true。
*/
var result = true && false;
//result = true && alert("hello");
result = false && alert("helloa");
console.log(result);
var a = true;
a = !!a;
/*console.log(a);*/
var b = 10;
b = !b;
console.log(b);
console.log(typeof b);
</script>
</head>
<body>
</body>
</html>
非布尔类型的逻辑运算符
&& 运算:如果两个值都为true,则返回后面的
&& 运算: 如果两个值中有false,则返回靠前的false
与运算:
* 如果第一个值为true,则必然返回第二个值。
* 如果第一个值为false,则直接返回第一个值。
或运算
* 如果第一个值为true,则直接返回第一个值。
* 如果第一个值为false,则返回第二个值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* && || 非布尔值的情况
* 对于非布尔值进行与或运算时,会将其转换成布尔值,在运算,并返回原值
* 与运算:
* 如果第一个值为true,则必然返回第二个值。
* 如果第一个值为false,则直接返回第一个值。
* 或运算
* 如果第一个值为true,则直接返回第一个值。
* 如果第一个值为false,则返回第二个值。
*/
//true && true
//&& 运算,如果两个值都为true,则返回后面的
//&& 运算: 如果两个值中有false,则返回靠前的false
var result = 1 && 2;
result = 0 && 3;
result = 0 && NaN;
result = NaN && 2;
//true || true
//如果第一个值为true,则直接返回第一个值
result = 1 || 2;
//如果第一个值为false ,则返回第二个值。
result = NaN || 2;
console.log("result= " + result);
</script>
</head>
<body>
</body>
</html>
编码问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 在字符串中使用转义字符输入Unicode编码
* \u四位编码 这是十六进制的
*/
console.log("\u2620");
alert("\u2620")
</script>
</head>
<body>
<!--
在网页中使用Unicode编码
格式:&#编码;这里的编码是十进制
-->
<h1 style="font-size: 100px;">☠</h1>
<h1 style="font-size: 100px;">☲</h1>
</body>
</html>
关系运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 通过关系运算非符可以比较两个值之间的大小
* 如果关系成立会返回true,不成立返回false
* < > <= >=
*
*
* 对于非数值类型,现将其转换成数值,在运算
* 如果符号两边都是字符串
*/
//console.log(1 > true); //false
//console.log(1 >= true); //true
//console.log(1 > "0"); //true
//console.log(12 > null); //true
//任何值和NaN做任何比较都是false
console.log(10 <= "hello"); //false
console.log(true > false); //true
console.log("1" < "5"); //true
console.log("11" < "5"); //true
//比较两个字符串时,比较的是字符串的字符编码
console.log("a" < "b"); //true
//比较字符编码时是一位一位进行比较的
//如果两位一样,比较下一位(相对的)
console.log("abc" < "a") //false
</script>
</head>
<body>
</body>
</html>
相等运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 相等运算符用来比较两个值是否相等,相等分会true,否则返回false。
*
* 使用 == 来做相等运算
* 当使用 == 来比较两个值时,如果值类型不同,
* 则会自动进行类型转换,将其转换为相同的类型
* 然后在比较
*
* 不相等:与相等相反
*
* ===
* 全等
* 用来判断两个值是否全等,他和相等类似,不同的是他不会自己做类型转换
* 如果两个值的类型不同,直接返回false
*
* !==
* 不全等
* 用来判断两个值是否不全等,和不等类似,不同的是他不会自己做类型转换
* 如果;两个值类型不同,返回true
*/
var a = 10;
console.log(a == 3); //false
console.log("1" == 1); //true
console.log("1" == true); //true
console.log(null == 0); //false
//undefind 衍生自 null
//所以这两个值做相等判断时,返回true
console.log(undefined == null); //true
//NaN 不和任何值相等,包括它本身。
console.log(NaN == NaN ); //false
//要判断是不是NaN 可以通过isNaN()函数来判断
var b = NaN;
console.log(isNaN(b)); //true
</script>
</head>
<body>
</body>
</html>
条件运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 条件运算符也叫三元运算符
* 语法:
* 条件表达式?语句1:语句2;
* 执行流程:
* 条件运算符执行,首先对条件表达式进行求值,
* 如果该值为true,则执行语句1,并返回执行结果
* 如果该值为false,则执行语句2,并返回结果。
* false?alert("hello"):alert("qwe");
*/
var a = 10;
var b =64;
var c = 43;
var max = a> b ? a : b;
max = max > c ? max : c;
max = a > b ? (a> c ? a : c) :(b > c ? b :c);
console.log(max);
</script>
</head>
<body>
</body>
</html>