JavaScript知识点总结（二）

类型转换

JS是弱类型语言，弱在哪里？

类型转换分为两种：

• 强制类型转换：我们自己强制的让某个值进行转换。
• 隐式类型转换：变量配合后面所说的运算符号运算的时候自动发生类型的转换。

强制类型转换

• Boolean()小工具：将指定的值转换为布尔值。true、false

  • 非空字符串都会被转换为true，空字符串会被转换为false。

    var a1 = '';
    var a2 = '  ';
    var a3 = '123';
    var a4 = '哈哈';
    console.log(Boolean(a1));//false
    console.log(Boolean(a2));//true
    console.log(Boolean(a3));//true
    console.log(Boolean(a4));//true
    

  • 非零数字转换为true，0、undefined、null、NaN转换为false。

    var num1 = 1;
    var num2 = 0;
    var num3 = Infinity;
    var num4 = NaN;
    var num5 = -1;
    var b6 = undefined;
    var b7 = null;
    
    console.log(Boolean(num1));//true
    console.log(Boolean(num2));//false
    console.log(Boolean(num3));//true
    console.log(Boolean(num4));//false
    console.log(Boolean(num5));//true
    console.log(Boolean(b6));//false
    console.log(Boolean(b7));//false
    

    NaN（Not a Number）是一种特殊的数值，用来表示一个本来要返回数值的操作但是没有返回数值。

  • undefined转换为false。

  • null转换为flase，其他对象转换为true。

• Number()小工具，将非数值（任何的数据类型）转换为数值

  • true转1，false转0。
  • null转换0。
  • undefined转换为NaN。
  • 如果是字符串

    • 字符串中如果只包含数字，则转换为对应的数字。

    • 空串、空白串转换为0。

    • 除了以上的格式都转换为NaN。

      console.log(Number(null)); //0
      console.log(Number(undefined)); //NaN
      console.log(Number('')); //0
      console.log(Number('  ')); //0
      console.log(Number('string')); //NaN
      console.log(Number('123string')); //NaN
      

• parseInt()小工具，将字符串转换为整数，忽略前面的空格;直到找到第一个非空格，如果第一个非空格的字符不是数字或负号直接返回NaN，如果是则继续解析第二个字符直到解析完成所有字符或遇到了一个非数字字符。

  如果有空格则忽略接续往后查找，一但不是数值型的就停止，并且返回NaN.

  console.log(parseInt('  10px')); //10
  console.log(parseInt('10.1px')); //10
  console.log(parseInt('px10.1')); //NaN
  var bool = true;
  console.log(parseInt('bool')); //NaN
  console.log(Number(bool)); //1
  

• parseFloat()小工具，将字符串转换为小数。

• toString()小工具，返回相应类型的字符串的值。

  布尔值、数值转换为字符串，原样转换。

  //tostring()
      var bool = true;
      console.log(parseInt(bool.toString())); //NaN
      var num = 1235;
      console.log(num.toString()); //字符串类型的1235
  

  但是null和undefined不行不能使用toString()小工具，将会报错。

  var nul = null;
  var unde = undefined;
  console.log(nul.toString());//直接报错error
  console.log(unde.toString());//直接报错error
  

• String()小工具，将变量转换为字符串。

  • 能用toString()就用toString()。

  • 如果null，返回null。

  • 如果是undefined，返回undefined。

    var bool = true;
    console.log(String(bool)); //'true'
    var num = 1234;
    console.log(String(num)); //'1234'
    var nul = null;
    console.log(String(nul)); //'null'
    var undefi = undefined;
    console.log(String(undefi)); //'undefined'
    

学会看报错。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FYhyFIw2-1636722308145)(image-20211110102747633.png)]

上面的报错总共三部分：

1. 错误类型：先不管
2. 对应的错误提示：这个要注意看，如果看不懂就翻译一下。
3. 错误的信息发生：前面是文件名:行号

语法错误容易纠正，逻辑错误不行。

JS中任何东西都区分大小写。

隐式类型转换

隐式类型转换和上面的规则相同，它通常发生在和运算符相关联的地方。

运算符

变量是个容器，容器里面的水是我们的数据，我拿到容器就拿到了数据。

只有杯子不对里面的数据进行处理，是没有意义的。

变量也是一样，声明完成之后不进行运算是没有意义的。所以我们就用到了运算符。

运算符分类

• 表达式：将数据用运算符按照对应规则连接起来的式子叫表达式。（可以被求值的代码）

  1+1

• 运算符分类：

  算数运算符、赋值运算符、复合运算符、比较运算符、相等运算符、逻辑运算符、三元运算符。

算数运算符

• +，加法

  • 如果两个操作数都是字符串，那么将第二个和第一个拼接起来。

  • 如果只有一个操作数是字符串，将另外一个操作数转换为字符串（String（））

  • 如果是其他值则调用Number()进行转换。

  • +放在数值前面不会对数值产生影响。如果是非数值则会调用Number()转换为数值。

    console.log(true + false);//Number(true) + Number(false)//1 + 0
    var bool = true;
    console.log(+bool); //1
    

• -，减法

  • 如果有一个或两个操作数是字符串、布尔值、null、undefined先在后台自己调用Number()转换为数值。

  //如何快速将一个字符串'99'转换为数值型的99
  console.log(Number('99'));
  console.log(parseInt('99'));
  console.log(parseFloat('99'));
  console.log('99'-0);
  console.log(+'99');
  
  console.log('1' - '1'); //0
  console.log(1 - null); //1
  
  

• *，乘法在计算机中使用*，不是用x

  • 如果有操作数不是数值后台调用Number()

  • Infinity*0结果是NaN。

  • Infinity参与和非零的值进行运算结果还是Infintify

    console.log('520' * 2); //1040
    console.log(Infinity * 1); //Infinity
    console.log(Infinity * 0); //NaN
    

• /，被除数/除数=商

  • 如果有操作数不是数值后台调用Number()

  • Infinity/Infinity结果是NaN

  • 0/0结果是NaN。

  • 1/0结果是Infinity

  • 被除数为0，结果是0（0除以任何数结果为0）

    
    console.log(Infinity / Infinity); //NaN
    console.log(0 / 0); //NaN
    console.log(0 / 1); //0
    console.log(1 / 0); //Infinity
    

• %，取余、求模

  • 求模的结果正、负由第一个数决定。

  • 第二个数不能为0，如果为0结果是NaN。

    NaN有两个特点：

    • 任何涉及NaN的操作都会返回NaN。

    • NaN和任何值都不相等包括NaN自身。

      console.log(-1 % -2); //-1
      console.log(1 % -2); //1
      console.log(-1 % 2); //-1
      console.log(1 % 2); //1
      console.log(1 % 0); //NaN
      

  取余作用很大：

  1. 判断余数

     判断奇数偶数。

     var x = 99;
     console.log(x % 2);
     

  2. 求得一个范围的值：

     var x = 16;
     console.log(x % 8);
     

     余数的范围只能是从0~7

  3. 求得一个数值上面每位的值是多少：

     parseInt(数/要求的位数%10)

     技巧

     ​ 多少位整除相应10的几次方，然后取余，如下：

     var num = 8921;
     console.log(parseInt(num/1000%10));
     console.log(parseInt(num/100%10));
     console.log(parseInt(num/10%10));
     console.log(parseInt(num/1%10));
     

• 自增、自减

  ++、--在自身的基础上+1或-1

   var a = 1;
  a++;
  console.log(a);
  
   var b = 1;
  b--;
  console.log(b); 
  

  ++、--可以放在操作数的前面也可以放在操作数的后面。

  var a = 1;
  a++;
  console.log(a);
  
  var b = 1;
  ++b;
  console.log(b);
  

  上面的代码放在前面和后面没有区别，有区别的地方在于++或--的那一行。

  • 放在操作数的前面先加后用。
  • 放在操作数的后面先用后加。

  var a = 1;
  console.log(a++);//1
  console.log(a);//2
  
  var b = 1;
  console.log(++b);//2
  console.log(b);//2
  

  上面的规则是在++或--这一行上面才有效果。

  var a = true;//bool
  a++;//number
  console.log(a);//2
  
  

var a = ‘1’;
Number(a);
console.log(typeof a); //string
console.log(typeof Number(a)); //number

var x = ‘1’;
x = x + 1;
console.log(x); //‘11’
console.log(typeof x) //string

**如果操作数不是数值则内部调用`Number()小工具`进行转换，但是会改变原来变量的值以及类型。**

x++不一定等价于`x=x+1`，比如说x为字符串`'1'`的时候。

### 复合运算符

* `+=`，`a += b`完全等价于`a = a + b`
* `-=`
* `*=`
* `/=`
* `%=`



### 赋值运算符

`=`，将等号右边的值或表达式的值赋给变量。

左边肯定是容器，右边肯定是值或可以得到值的内容。

​```js
console.log(a);//未定义，执行不下去  报错了。
var b = null;
console.log(typeof b);
//假如第一行语句执行下去了 typeof b 的返回类型就是object

比较运算符

比较后的结果应该是布尔值，true或false。

• >，大于
• <，小于
• >=，大于或等于
• <=，小于或等于

比较规则：

• 如果两个操作数都是数值，执行数值比较。

• 如果两个操作数都是字符串，则比较字符串对应的字符编码

  从第一个字符的编码开始比较，如果第一个字符的编码能够比较出大小则后面的不比较。如果不能比较出大小则依次向下比较，一直到最后都没有比较出来则位数多的比较大。

• 数值和其他类型比较调用Number()进行转换。

• 任何数和NaN比较最后结果都为false。

相等操作符

• 相等和不相等

  • ==，等于，如果两个操作数相等返回true。
  • !=，不等于，如果两个操作数不相等则返回true。

  比较规则：

  • 类型相同直接比较值是否相等。

  • number和string比较时，string转number。

  • 一个值为布尔值的时候，布尔值转number。

  • undefined和null是相等的都可以被认为是不可用的值。

  • NaN和NaN不相等。

  • 补充null==0：null在做相等判断的时候不进行转型，不进行转换类型类型都不相同就没有办法比较，所以直接返回false。

    console.log('abc' == 'abc'); //true
    console.log(1 == true); //true
    console.log(undefined == null); //true
    console.log(NaN == NaN); //false
    console.log(null == 0); //false
    console.log(null >= 0); //true
    console.log(1 == '1'); //true
    

• 全等和不全等

  • ===，全等于，两个操作数没有经过类型转换的时候完全相等那么返回true。

    console.log(1 === ‘1’); //false；这里为假是因为全等于不进行类型转换。

  • !==，不全等，两个操作数没有经过转换的时候不相等返回true。

一个等号是赋值、两个等号是判断是否相等（包含了转换类型）、三个等号判断是否全等（不包含转换类型，原值）。

逻辑运算符

找女朋友 年龄 30~35 性别 女

age >= 30

age <= 35

sex === ‘女’

比较、相等运算符只能比较两个值，但是有的时候需要多个条件，这个时候就需要使用逻辑运算符将他们连接起来。

• &&，逻辑与，并且。

  两个操作数第一个操作数和第二个操作数都为true的时候返回true否则返回false。

  console.log(true && true);//true
  console.log(true && false);//false
  console.log(false && true);//false
  console.log(false && false);//false
  
  console.log(1 && false); //false
  console.log(null && true); //null
  console.log('a' && 'b'); //'b'
  
  var a = false;
  var b;
  console.log(a && (b = 100)); //false  因为第一个是操作数为假，所以直接短路操作，返回值就是a
  console.log(b); //undefined  短路操作以后第二个操作数未执行，所以b就是未定义。
  

  • 逻辑与运算符可以与任何类型的操作数进行配合，而不仅仅是布尔值。如果第一个操作数经过Boolean转换后是false，返回第一个操作数，如果第一个操作数经过Boolean()转换之后为true，则返回第二个操作数。
  • 短路操作：如果第一个操作数能够决定结果，就不对第二个操作数进行求值。
  • 假如两个操作数进行比较时，第一个为假则为假，并且返回值是第一个操作数。

  女生找老公： 帅 并且 钱

• ||，逻辑或，或者。第一个操作数和第二个操作数任意一个true时就返回true否则就返回false。

  女生找老公： 帅 或者 有钱

  • 逻辑或可以用任何类型的操作数，不仅仅是布尔值。第一个操作数经过Boolean转换后为true就返回第一个操作数，第一个操作数经过Boolean转换后为false就返回第二个操作数。

  • 逻辑或操作符也属于短路操作，第一个操作数求值为true，不会对第二个操作数进行求值了。

    console.log(1 || null);//1
    console.log(null || 1);//1
    

• !，逻辑非，取得指定的布尔值相反的结果。

  如何操作数字不是布尔值那么将会调用Boolean()函数进行转换。

三元运算符

格式：运算元1 ? 运算元2 : 运算元3

运算元1是条件，运算元2是表达式，运算元3是表达式，运算元2和运算元3只能是一条语句。

运算元

1 + 2，1和2分别表示运算元（操作数），+表示运算符。

判断三个数当中的最大值：

var res;
res = (a > b && a > c) ? a : ((b > c) ? b : c);

var a = false ? '1' : '2';
console.log(a);//2

可以分为：

• 一元运算符，一个操作数!、++、--
• 二元运算符，两个操作数+、-、*、/、&&、||
• 三元运算符，三个操作数

运算过程如果运算元1为true返回运算元2，为false返回运算元3。

• 求闰年计算方式

  //什么是闰年。 四年一闰，百年不闰 四百年一闰。
  //将这些话转换为 逻辑。
  // 能被4整除并且不能被一百整除 或者 能够被四百整除的。
  
  var year = 2003;
  console.log(((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) ? '润年' : '平年');
  
  //另一种混合的写法；着重注意返回值的写法
  var year = 2003;
  document.write(((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) ? "<h1 style='color:red;'>润年</h1>" : "<h1 style='color:yellow;'> 平年 </h1 > ");
  
  

  var year = 2205;
  var res = (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
  var col = res ? "yellow" : "red";
  var res2 = res ? "润年" : "平年";
  //着重注意变量和文字、标签的拼接
  document.write("<h1 style='color:" + col + "'>今年是" + res2 + "</h1>");