JS基础 #第三天

目录​​​​

一、算术运算符

二、一元运算符

三、自增和自减运算符

四、逻辑运算符

五、赋值运算符

六、关系运算符

七、其他运算符

八、运算符优先级

九、编码

十、代码块

---

---

一、算术运算符

运算符	类型	例子	值
加法：+	Number + Boolean	1 + true	2
	Boolean + Boolean	true + false	1
	Number + Null	2 + null	2
	Null + Boolean	null + true	1
	NaN + Number	NaN + 1	NaN
减法：-	Number - String	3 - "1"	2
	Number - Boolean	2 - true	1
乘法：*	Number * String	2 * "3"	6
	Boolean * Number	true * 2	2
	Number * Undefined	2 * undefined	NaN
除法：/	Number / Boolean	4 / true	4
	Number / Number	7 / 2	2.5
取余：%	Number % Number	9 % 4	1

当对非number类型的值进行运算时，会将这些值转换为number类型再运算，但是进行加法运算时，字符串不会转换！！任何数与NaN运算都是NaN。

1.字符串数字与字符串数字或与数字之间进行加法运算，此时的加号是拼接符。

例：

    a = "123" + "345";
    console.log(a); // 123345
    a = "12" + 23;
    console.log(a); // 1223

2.任何值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作。

    a = "1" + true;
    console.log(a); // 1true

3.将一个任意的数据类型转换为String：我们只需要为任意的数据类型＋ 一个""(空串)即可将其转换为String类型（隐式转换）,实际也是调用的String()函数。

    a = 123 + "";
    console.log(typeof a); // String
    console.log(a); // 123

4.可以通过一个值-0    *1     /1来将其转换为Number,原来的值不发生改变，只是类型变了（隐式转换）,原理和Number()函数一样。

    a = "123" - 0;
    console.log(typeof a); // number
    a = "123" * 1;
    console.log(typeof a); // number
    a = "123" / 1;
    console.log(typeof a); // number

二、一元运算符

        一元运算符只需要一个操作符。

运算符	运算类型	例子	值
正号：+	String	+"2"	2
负号：-	Boolean	-true	-1

1.对于非Number类型的值，会先转换为Number，然后再运算

    var a = "2";
    a = -a;
    console.log(a); // -2   
    a = 1 + +"2" + 3;
    console.log(a); // 6

2.可以对一个其他的数据类型使用+,来将其转换为number, 它的原理和Number()函数一样

    a = +true;
    console.log(a); // 1
    console.log(typeof a); // number

三、自增和自减运算符

类型	种类	相同点	不同点
自增	i++	原变量的值会立即自增1	先运算在自增1
	++i		先自增1再运算
自减	i--	原变量的值会立即自减1	先运算再自减1
	--i		先自减1再运算

1.自增

    a = 3;
    console.log(a++, a); // 3 4
    console.log(++a, a); // 5 5

2.自减

    a = 5;
    console.log(a--, a); // 5 4
    console.log(--a, a); // 3 3

四、逻辑运算符

常用逻辑运算符

逻辑运算符	例子	值
非：！	!true	false
	!4	false
与：&&	true && false	flase
	0 && 3	0
或：||	false || true	true
	0 || 3	3

对于非布尔值进行 与或非 运算时，会先将其转换为布尔值，再进行运算，并且返回原值。

1. !运算：

    var a = true;
    a = !a;
    console.log(a); // false
    a = 4;
    a = !a;
    console.log(a); // false

可以为一个值取两次反，来将其转换为Boolean值,原理和Boolean()函数一样(隐式转换)

    a = 3;
    a = !!a;
    console.log(a); // true

2.  &&运算

运算规则：两个值都是true就返回true；如果第一个数是true会检查第二个数，如果第一个数是false，则不会检查第二个数。

如果第一个值为true，则返回后面一个

    var a = 2 && 3;
    console.log(a); // 3

第一个值为false，则返回第一个

    a = NaN && 0;
    console.log(a); // NaN

    a = 0 && NaN;
    console.log(a); // 0

3.  ||运算

运算规则：有一个值是true则返回true；如果第一个数是true，不会检查第二个值，如果第一个数是false，会检查第二个数。

如果第一个值为true,则直接返回第一个值

    a = 2 || NaN;
    console.log(a); // 2

如果第一个值为false,则返回第二个值

    a = 0 || 3;
    console.log(a); // 3

五、赋值运算符

赋值运算符	例子	等价于
=	a = 3	-------------
+=	a += 3	a = a + 3
-=	a -= 3	a = a - 3
*=	a *= 3	a = a * 3
/=	a /= 3	a = a / 3
%=	a %= 3	a = a % 3

六、关系运算符

关系运算符	例子	值
大于：>	3 > "2"	true
	"123222222" > +"5"	true
	"bbc" > "b"	true
小于：<	"a" < "b"	true
相等：==	true == "1"	true
	null == 0	false
	undefined == null	true
	NaN == NaN	false
不等：!=	1 != "1"	false
全等：===	3 === "3"	false
不全等：!==	3 !== "3"	true

1.关系运算符  >  <  >=  <=  ,对于非数值进行比较时，会将其转换为数字然后在比较

    console.log(1 > "0"); // true
    console.log(10 > null); // true

任何值和NaN做比较都是NaN

console.log(10 > "hello"); // false

比较两个字符串时，不会将其转换为数字进行比较,而会分别比较字符串中字符的Unicode编码

    console.log("6" < "2"); // false
    console.log("11" < "5"); // true
    console.log("a" < "b"); // true

比较字符编码时是一位一位的进行比较,如果两位一样，则比较下一位

console.log("bbc" > "b"); // true 

如果比较两个字符串型的数字，一定要先转型再比较

 console.log("123222222" > +"5"); // true

2.当使用==  != 来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型然后在比较。

(1) 相等: == 只比较两个数的值

    console.log(1 == "1"); // true
    console.log(true == "1"); // true
    console.log(true == "hello"); // false
    console.log(null == 0); // false

undefined衍生自null,所以这两个值做相等判断时，会返回true

console.log(undefined == null);  // true

NaN不和任何值相等，包括他本身

console.log(NaN == NaN); // false
console.log(NaN == "1"); // false

通过isNaN()函数来判断一个值是否是NaN

    console.log(isNaN(NaN)); // true
    console.log(isNaN(123)); // false

(2)不相等 !=  只比较两个数的值

    console.log(10 != 3); // true
    console.log(1 != "1");  // false

(3)全等 === 比较两个数的值和类型, 都相等才会返回true

console.log(3 === "3"); // false

(4)不全等!== 比较两个数的值和类型, 有一样不相等都会返回true

console.log(3 !== "3"); // true

七、其他运算符

运算符	用法
in	判断一个对象里面是否有某个属性
instance0f	判断一个对象是否是某个构造函数的实例化
，	返回最后一个值
eval	在里面写执行语句

例1. in运算符：

    var obj = {
      a:1
    };
    console.log(obj); // {a: 1}
    console.log('a' in obj); // true
    // 原型链上存在属性toString
    console.log('toString' in obj); // true
    // hasOwnProperty 自身定义的属性
    console.log(obj.hasOwnProperty('a')); // true
    console.log(obj.hasOwnProperty('b')); // false
    console.log(obj.hasOwnProperty('toString')); // false 

例2：instanceof运算符

  var a = new Object();
  console.log(a instanceof Object); // true

例3：eval运算符

eval('var r = 10*20-46; console.log(r)'); // 154

例4：逗号运算符，一组由逗号分隔的数据，最后返回最后一个数

  var i = (1, 2, 3, 4);
  console.log(i); // 4

八、运算符优先级

下面表中 越上面优先级越高，同一级优先级一样，优先级一样时，语句从左往右依次执行。

.	[ ]	new
( )
++	--
!	~	+(正号)	-(负号)	typeof	void	delete
%	*	/
+(加号)	-(减号)
<<	>>	>>>
<	<=	>	>=
==	!==	===
&
^
|
&&
||
?:
=	+=	-=	*=	/=	%=	<<=	>>=	>>>=	&=	^=	|=
,

九、编码

1.在字符串中使用转义字符输入Unicode编码: \u四位编码

console.log("\u2620");

2.在页面中输出Unicode编码: &#编码;  这里编码需要十进制

<h1 style="font-size: 100px;">&#9760;</h1>

十、代码块

1.在JS中可以使用{}来为语句进行分组

• 同一个{}中的语句我们称为是一组语句，它们要么都执行，要么都不执行，
• 一个{}中的语句我们也称为叫一个代码块

// 两个代码块
{
  var a = 5;
  alert("hello");
  console.log("你好");
  document.write("大美女"); 
}

{
  var a = 5;
  alert("hello");
  console.log("你好");
  document.write("大美女"); 
}

2.jS中的代码块，只具有分组的的作用，没有其他的用途

3.大括号末尾不需要分号 ;

4.代码块里面的内容，在外部是完全可见的

{
  var a = 5;
  alert("hello");
  console.log("你好");
  document.write("大美女"); 
}
  console.log(5); // 5