[JavaScript知识库]前端学习（JS学习第二天 尚硅谷JS基础视频）

前端学习（JS学习第二天 尚硅谷JS基础视频）

1.运算符

??运算符也叫操作符。通过运算符可以对一个或多个值进行运算，并获取运算结果。例如：typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回。

1.1 算数运算符

??当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算。任何值与NaN做运算都得NaN。

• +可以对两个值进行加法运算，并将结果返回。任何值与字符串做加法运算，都会进行拼串操作。可以利用这一特点，将任意一个数据类型转换为String。只需要为任意的数据类型加上一个""即可将其转换为String。

var result;
result = 456 + 789; //1245
result = true + 1;  //2
result = true + false;  //1
result = 2 + null;  //2
result = 2 + NaN;  //NaN
result = "123" + "456";  //123456
result = 123 + "";
console.log(result);

• -可以对两个值进行减法运算，并将结果返回。

var result;
result = 100 - 1; //99
result = 100 - true;  //99
console.log(result);

• *可以对两个值进行乘法法运算，并将结果返回。

var result;
result = 2 * undefined; //NaN
result = 2 * null;  //0
console.log(result);

• /可以对两个值进行除法运算，并将结果返回。

var result;
result = 3 / 2; //1.5
console.log(result);

• %可以对两个值进行取余数运算，并将结果返回。

var result;
result = 9 / 4; //1
console.log(result);

1.2 一元运算符

只需要一个操作数。

• +正号。可以使用正号将其他类型转换为Number类型，原理与Number()函数一样。
• -负号。
• ++自增。通过自增可以使变量在自身的基础上增加1。
  ??对于一个变量自增之后，原变量的值会立即自增1。自增分为两种，一种是a++，一种是++a。无论是哪一种，都会立即使原变量自增1。不同的是a++和++a的值不同。
  ??a++的值等于原变量的值（自增之前的值）。
  ??++a的值等于原变量的新值（自增之后的值）。

var a = 10;
console.log(a++);//10
a++;
console.log(a++);//11

• –自减。通过自减可以使变量在自身的基础上减少1。
  ??对于一个变量自减之后，原变量的值会立即自减1。自增分为两种，一种是a–，一种是–a。无论是哪一种，都会立即使原变量自减1。不同的是a–和--a的值不同。
  ??a–的值等于原变量的值（自减之前的值）。
  ??--a的值等于原变量的新值（自减之后的值）。

1.3 逻辑运算符

• ！非
  ！可以用来对一个值进行非运算。对一个布尔值进行取反操作。
  ??如果对非布尔值进行操作，则先转换为布尔值再进行运算。可以利用这一特性，对一个任意数据类型取两次反，即做两次非运算，来将其转换为布尔值。
• && 与
  &&可以对符号两侧的值进行与运算，并返回结果。短路与，第一个值为false，则直接返回false，不会判断第二个值。
  ??如果两个值都是true，则返回true。
  ??只要有一个false，则返回false。
• || 或
  ||可以对符号两侧的值进行或运算，并返回结果。短路或，第一个值为true，则直接返回true，不会判断第二个值。
  ??如果两个值都是false，则返回false。
  ??只要有一个true，则返回true。

??对于非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，并且返回原值。
??与运算：如果两个值都是true，返回后边的值；如果两个值中有false，则返回靠前的false。（如果第一个值是true，则直接返回第二个值；如果第一个值为false，则直接返回第一个值。）
??或运算：如果第一个值为true，则直接返回第一个值；若果第一个值为false，则直接返回第二个值。

1.4 赋值运算符

??= 可以将符号右侧的值赋值给符号左侧的变量。
??+= a += 5 等价于 a = a + 5。

1.5 关系运算符

??通过关系运算符可以比较两个值之间的大小关系，如果关系成立，返回true；若关系不成立，返回false。

• ">"大于号
• ">="大于等于
• "<"小于号
• "<="小于等于

??对于非数值进行比较时，会将其转换为数字，再进行比较。任何值和NaN比较，结果都是false。如果符号两侧的值都是字符串时，不会将其转换为数字比较，而会分别比较字符串的Unicode编码。比较字符编码时，是一位一位进行比较的，如果两位一样，则比较下一位。注意：在比较两个字符串型的数字时，一定一定要转型。

console.log(1 > true);//false
console.log("a" < "b");//true
console.log("abc" < "b");//true 

1. == 相等运算符
   当时用==来比较两个值时，如果值类型不同，会自动进行类型转换，将其转换为相同的类型，然后进行比较。

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

??undefined衍生自null，所以这两个值做相等时返回true。
??NaN不喝任何值相等，包括它本身。可以通过isNaN()函数来判断一个值是否是NaN。

var b = NaN；
console.log(NaN == NaN);//false
console.log(undefined == null);//true
console.log(isNaN(b));//true

2. != 不相等
   != 也会对变量进行自动类型转换，如果转换后相等，返回false。

3. === 全等
   用来判断两个值是否全等，和==类似，不同的是它不会进行自动类型转换，如果两个值类型不同，则直接返回false。

4. !== 不全等
   用来判断两个值是否不全等，和不等类似，不同的是不会进行类型转换，如果两个值类型不同，则直接返回true。

1.6 条件运算符

??条件运算符也叫三元运算符。
??语法：条件表达式？语句1：语句2；
??如果该值为true，则执行语句1，并返回运算结果；否则，运行语句2，并返回运算结果。

var a = 20;
var b = 30;
var c = 50;
var value = a > b? a ：b;
var max = a > b? (a > c? a : c) : (b > c? b : c);
console.log(value);//30

1.7 运算符的优先级

??，运算符，使用，可以分割多个语句，一般可以在声明多个变量时使用。

2. 代码块

JS中的代码块，只具有分组的作用，没有其他的用途。

3. 流程控制语句

3.1 条件判断语句

??使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行。

3.1.1 if语句

1. 语法一：
   if(条件表达式)
   ??{语句…}
2. 语法二：
   if(条件表达式){
   ????语句…
   ??} else {
   ????语句…
   ??}
3. 语法三：
   if(条件表达式){
   ????语句…
   ??} else if(条件表达式){
   ????语句…
   ??}else if(条件表达式){
   ????语句…
   ??} else {
   ????语句…
   ??}
   练习：

/**
     *
     *prompt()可以弹出一个提示框，该提示框中会带有一个文本框。
     *用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字。
     *用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容。
     */

    var score = prompt("请输入成绩：");
    if (score == 100) {
      console.log("奖励一台BMW！！");
    } else if (score >= 80) {
      console.log("奖励一台手机！！");
    } else if (score >= 60) {
      console.log("奖励一本书！！");
    } else {
      console.log("什么奖励也没有");
    }

3.1.2 switch语句

语法：switch(条件表达式) {
case 表达式：
语句…
break;
case 表达式：
语句…
break;
…
defaukt:
语句…
break；
}
例子：

switch(num) {
	case:1
		console.log("一")
		break；
}

执行流程：
??switch…case…语句，在执行时会依次将case后的表达式的值，和switch后的表达式的值进行全等（===）比较。如果比较结果为true，则从当前case处执行代码，当前case后的所有代码都会执行；若为false，则继续向下比较。如果所有比较都为false，则只执行default后的语句。

3.2 循环断语句

通过循环语句可以反复的执行一段代码多次。

3.2.1 while

语法：
while（条件表达式） {
语句…
}

3.2.1 do…while

语法：
do{
语句；
}while（条件表达式）

do…while可以至少执行循环体一次。

3.2.1 for循环

语法：
for(初始化表达式；条件表达式;更新表达式) {
语句;
}

4.break和continue

??break关键字可以用来退出switch或循环语句。if语句中不能使用break。break关键字会立即终止与它最近的那个循环语句。
??可以为循环语句创建一个label，来标识当前的循环。使用break语句时，可以直接使用break，结束label标签标记的循环。
语法：
label：循环语句
??continue语句，结束当前循环，继续后面的循环。continue也是默认结束，距离最近的循环。同continue也可以结束标签标记的循环。

4.1 String字符串

注意：
1.在JS中字符串需要使用引号引起来
2.使用双引号或单引号都可以，但不要混着用
3.引号不能嵌套，双引号中不能放双引号，单引号中不能放引号。在字符串中可以使用\作为转义字符，当表示一些特殊符号时可以使用\进行转义。
一些特殊的使用：
\" 表示"
\’ 表示’
\n 表示换行
\t 表示制表符

4.2 Number

??在JS中所有的数值都是Number类型，包括整数和浮点数（小数）。

//数字123
var a = 123;
//字符串123
var b = "123";
console.log(a);  //123
console.log(b);  //123

??可以使用typeof来检查一个变量的类型。语法：typeof 变量名

console.log(typeof a)

??JS中可以表示的数字最大值Number.MAX_VALUE,JS中可以表示的最小的正值Number.MIN_VALUE,如果使用Number表示的数字超过了最大值，则会返回一个Infinity，表示正无穷。-Infinity表示负无穷。使用typeof检查Infinity也会返回Number。

var a = Number.MAX_VALUE;
var b = Infinity;
console.log(typeof b) //NUmber

??NaN是一个特殊的数字，表示Not A Number。使用typeof检查NAN也会返回Number。

var a = NAN;
console.log(typeof a) //NUmber

??在JS中整数的运算基本可以保持精确。如果使用JS进行浮点运算，可能得到一个不准确的结果。

4.3 Boolean

??布尔值只有两个值：true和false。用typeof检查一个布尔值时，会返回boolean。

var a = false;
console.log(typeof a) //boolean

4.4 Null

??Null（空值）类型的值只有一个，就是null。null这个值专门用来表示一个为空的对象。
??使用typeof检查一个null值时，会返回一个object。

var a = null;
console.log(typeof a) //object

4.5 Undefined

??Undefined（未定义）类型的值只有一个，就是undefined，当声明一个变量，但是不给变量赋值时，它的值就是undefined。
??使用typeof检查一个undefined值时，会返回一个undefined。

var a = undefined;
console.log(typeof a) //undefined

5 强制类型转化

??指将一个数据类型强制转换为其他的数据类型。类型转换主要指，将其他的数据类型转换为String、Number、Boolean。

5.1 将其他数据类型转换为String

1. 方式一：调用toString()方法
   语法：变量.toString()
   注意：该方法不会影响到原变量，会将转换结果返回。并且该方法具有局限性，对于null和undefined来说，没有该方法。

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

• 方式二：调用String()函数
  语法：String(变量名)
  注意：该方法不会影响到原变量，会将转换结果返回。对于null和undefined适用，将null直接转换为**“null”，将undefined直接转换为"undefined"。对于Number和Boolean实际上就是调用toString()**方法。

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

5.2 将其他数据类型转换为Number

• 方式一：使用**Number()**函数
  语法：Number(变量名)
  转换情况：
  ?? – 字符串–>数字
  ????（1）如果是纯数字字符串，则直接将其转换为数字；
  ????（2）如果字符串中有非数字的内容，则转换为NAN；
  ????（3）如果字符串是空串或者是一个全是空格的字符串，则将其转换为0。
  ?? – 布尔–>数字
  ????（1）true转换为1；
  ????（2）false转换为0。
  ?? – Null–>数字 0
  ?? – Undefined–>数字 NAN

var a = "123";
var b = "abc";
a = Number(a);
console.log(typeof a); //Number
console.log(a); //123
console.log(b); //NAN

• 方式二：parseInt()
  该方法主要用于字符串的转换。parseInt()把一个字符串转换为一个整数。parseFloat()把一个字符串转换为一个浮点数。
  parseFloat()可以将一个字符串中的有效的整数内容取出来，然后转换为Number。parseFloat()与parseFloat()类似，不同的是它可以获取有效的小数。
  如果对非String使用parseInt()或parseFloat()，会将其先转换为String，然后再操作。

var a = "123px";  //若 a = b123px，直接转换为NAN
var b = "123.133px"; //若 b = 123.133.123px  直接转化为123.133
a = parseInt(a);
b = parseInt(b);
console.log(typeof a); //Number
console.log(a); //123
console.log(b); //123.133

5.2 将其他数据类型转换为Boolean

方式：使用**Boolean()**函数
转换情况：
?? – 数字–>布尔
????除了0和NAN，其余都是true
?? – String–>布尔
????除了空串，其余都是true
?? – Null、Undefined–>布尔 false
?? – 对象–>布尔 true