JavaScript复习笔记（一）变量、数据类型和运算符

你的名字 2022-04-17 05:19 141阅读 0赞

1、JavaScript用来做什么

HTML：专门编写网页内容的语言

CSS：专门美化网页内容样式的语言

JavaScript：专门编写交互程序的语言

JavaScript包含三个方面：ECMAScript标准+DOM标准+BOM

2、常用语句

在控制台中输出一段话    console.log(“Hellow World”);

在当前网页中输出一段话  document.write(“Hellow World”);

在弹出的警告窗中输出一段话 window.alert(“Hellow World”);

在弹出的警告窗中输出“请输入”，并且创建一个输入框获取输入的信息

window.prompt(“请输入”);

3、在网页中编写js脚本程序：3处

①<script>元素中：

直接编写在<script>中的js程序，随网页加载过程解释执行

②单独js文件保存js脚本程序：2步：

1. 创建.js文件，保存js脚本程序

2. <script src="url"></script>引入外部js文件

脚本程序：不需要预编译，边解释边执行的程序

③元素的事件处理程序中编写

不随网页加载过程执行，只有触发事件时，才执行。

4、变量

①使用变量的流程：声明，赋值，取值

②仅声明未赋值的变量，默认值自动是undefined

③为一个未声明过的变量赋值，不会出错！会自动创建同名变量（全局变量），再保存数据，当这个变量在函数中被赋值，那么这个全局变量只有函数被引用后才能在全局函数中使用，否则会显示错误

function a()\{  
b=4;  
\}  
console.log(b);    //出错

function a()\{  
b=4;  
\}  
a();  
console.log(b);  //输出： 4

④尝试从一个未声明过的变量中取值：会出错！ ReferenceError：未找到或未定义

⑤声明提前：在程序正式执行前，都会将所有var声明的变量提前到开始位置（函数内变量提前到函数开始位置），集中创建 ，\*\*\*赋值留在原地\*\*\*（函数也有声明提前，不过有两种情况需要考虑）

console.log(a);  //undefined  声明提前，虽有声明，但是还未赋值

var a=100;

console.log(a);  //100

var a=200;

console.log(a);  //200

5、数据类型

① js中数据类型包括原始类型和引用类型两种，

②原始类型：值保存在变量本地的数据类型

5+1种：Number 专门保存数字的类型

String 专门保存字符串的类型

Boolean 专门保存真/假二选一的类型

undefined 只有一个值undefined

null 表示不指向任何地址

symbol 用来定义对象的唯一属性名（ES6新增）

③引用类型：值不保存在变量本地的数据类型，变量中只是存储地址，当地址中存储的值改变时，引用类型的值也会发生变化

6、Number类型：专门保存数字的类型，不加引号

①所占空间：64位二进制数保存（64Bit=8bytes、1KB=1024byte）

数字所占空间和数值大小无关，所有数字都占8字节

②n.toFixed(m)：将n按m位小数四舍五入  // var n=3.1415;n.toFixed(2)   结果"3.14"      // 注意\* "3.14"是字符串类型  \*

var n=3.1415  
  console.log(typeof (n.toFixed(2)));    // string

③NaN(Not a Number)：不是数字的数字类型的值，NaN与任何数据做运算结果都为NaN，属于Number类型的数据

7、String类型：专门保存一串字符的序列，必须带引号

①所占空间：js的程序内存中的字符都是用unicode标识的

每个字母、标点：1字节     每个汉字：2字节

② +：如果参与+运算的值中包含字符串类型数据，+法运算自动变为字符串拼接！

b1=true,n2=3,s3="3";

console.log(b1  +   n2   +   s3);

true  +   3   +  “3”

4       +   “3”

“43”

8、Boolean类型：只有两个值true/false。

如果表示二选一的值时，就用Boolean类型，用于比较结果或当做判断条件时

9、数据类型：隐式转换

①算数计算时隐式转换

算数计算中，一切类型都隐式转为number类型，再计算

"2"-->2   true/false-->1/0

特例：**+**（只有＋的时候）运算中，只要有一方是字符串，两数据都转为字符串，且+运算变为字符串拼接！

②当做为判断条件时隐式转换

一切类型都隐式转为Boolean类型

“”,undefined,null,NaN,0这五个隐式转换为 false，其余都隐式转换为true

例    if("false")\{console.log("Hellow")\}else\{console.log("Baybay")\}

输出为Hellow，因为"false"是不为空的字符串，隐式转换为true

③隐式转换，仅影响表达式的运算结果，不影响变量中存储的实际值

10、数据类型：显式转换

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70][]

例:parseInt(true);输出结果 NaN

首先parseInt(str)是用来将字符串转为数字的，true将先被进行隐式转换，执行String(true)方法将Boolean型true变为String型”true”，再执行parseInt(”true”)，最终得NaN

11、运算符

① % 取余       5%2==1         5/2==2余1

② ++将当前变量中的值递加1

难点:n++与++n的区别

例1、

var a=10;

var b=a++;

console.log("a:"+a,"b:"+b);// a:11 b:10

var a=10;

var b=++a;

console.log("a:"+a,"b:"+b);// a:11 b:11

无论是a++还是++a，最终的a值都是加了1，所以a都为11，但是b=a++时是先将a值赋给了b,再自加一，b=++a时是先自加一，此时a=11,再将a值赋给了b，b也为11

例2、

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 1][]

③+=：a+=b等于a=a+b

12、关系运算：将两个值作比较 > < >= <= == !=

/\*我还写过一篇《JavaScript中判断两个值是否相等（各种情况）》，里面介绍关系运算各种情况的更仔细\*/

只能返回两个值之一：如果成立，返回true；否则返回false

隐式转换：将所有类型都转为number类型，再比较！

3种特殊情况

①两字符串做比较：依次PK每一位字符的unicode编号

只要有一位字符，分出大小，就不再比较

比如："3">"10" -->true      "Smith">"Scott" -->true

② NaN: NaN和任何数据做大小或等于比较永远返回false

NaN和任何数据做\*不等于\*比较，永远返回true

isNaN(num):专门判断num是否是NaN           isNaN(f);//f先隐式转换为number类型 true

如果是NaN返回true，否则返回false    isNaN(1);//false

判断一个数值是否是数字或能否被转为数字，都用isNaN。如果是数字,返回false！否则返回true

③ undefined 与 null

undefined == null //true         undefined === null//false

==:相等，值相等即可，可以有隐式转换

===: 全等：数据类型要相同，再比较值是否相等

undefined和null与任何有意义的值比较返回的都是false，null与undefined在与其他数相等运算时不进行类型转换

13、逻辑运算与位运算

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 2][]

①隐式类型转换：自动将每个条件转为Boolean类型，用来比较，如果要输出，输出的还是最初的数据， &&：必须都为真才为真，||：一个为真就为真，  ^:异或，不同为1，相同为0

②

console.log(4&&false); false

console.log(false&&4);false

console.log(false&&0); false

console.log(5&&4);   4

console.log(4||false); 4

console.log(0||false);false

console.log(5||4);   5

\*当逻辑运算符执行了一个条件后，如果已经完成了自己的使命，那么就停止下来，输出\*

console.log(4&&false); false//4条件为真，未完成&&使命，继续判断false条件，无论真假，都能完成使命，输出最后判断条件的值

console.log(false&&4);false//false条件为假，可以完成&&使命，输出最后判断条件的值

console.log(0||false);false//0条件为假，不能完成||使命，继续判断false条件，无论真假，都能完成使命，输出最后判断条件的值

console.log(4||false); 4//4条件为真，可以完成||使命，输出最后判断条件的值

③短路逻辑：如果前一个条件已经可以得出结论，则后续条件不再执行！

例：消费满100就打8折    totle>=100&&(total\*=0.8);  //前面条件满足，再执行后边的操作，如果前边不满足，那么就不执行后面                                                                                              操作

14、三目运算（最简单的三目运算 var max=a>b?a:b;结构为：条件1？值1：默认值;）

三目运算结构

条件1？值1：

条件2？值2：

… ？ … ：

默认值;

score>90?”A”:

score>80?”B”:

score>=60?”C”:

“D”;

15、typeof

用typeof可以检测出变量的基本数据类型，但是有个特例，就是null的typeof返回的是object，这是个javascript的历史bug。。。

typeof Symbol()    //"symbol"                      typeof Number()    //"number"

typeof String()    //"string"                          typeof Function()    //"function"

typeof Object()    //"object"                        typeof Boolean()    //"boolean"

typeof null    //"object"                            typeof undefined    //"undefined"

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70]: /images/20220417/cfee8beaa1014814a7e891061d87deb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 1]: /images/20220417/be32c6a5c4c2426888e58d025afbd4a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 2]: /images/20220417/2c3a475641a74da2b16af1bba5962ec3.png