JS基础知识(上)

01 初识JS

JS应用场景：

• 网页特效
• 服务端开发（Node.js）
• 命令行工具（Node.js）
• 桌面程序（Electorn）
• App（Cordova）
• 控制硬件-物联网（Ruff）
• 游戏开发（coco2d-js）

页面引入JavaScript

• 行内（内联）

直接把JS代码写到开始标签里

• 内部

把JS代码写在script标签里

<script type="text/javascript"></script>

给script指定一个属性，type的属性的值就是text/javascript 即纯文本的javascript

在HTML文件中可以有多个代码块（代码段）即script标签。

• 外部

在外面新建一个.js文件

不能把js文件放在浏览器中运行，需要把js文件放到HTML文件中，浏览器才可以解析与执行。

通过script标签中的src引入外部的js文件，必须是双标签，这个标签中只能放一个js;script标签可以放html页面的任何地方，但通常放在最后面。

• JavaScript协议

注：

<button onclick="alert('注册成功')">注册</button>

On是前缀，click 表示点击；onclick表示你点击button时干什么；button叫事件源，click叫事件，alert叫监听器，alert表示弹出一个警告框。

 

02 变量

变量？

变量=变量名+变量值

内存地址操作比较麻烦，比较难一点，一般情况下会给这块内存地址起一个别名，叫变量名；也就是说变量名就是内存空间的别名。

变量是用于存储信息的"容器"。

JS中如何定义变量的？

通过几个关键字来定义变量：var  let  const

数据存在什么地方？

内存或者硬盘上，平常我们写的代码中的数据，当代码运行起来后，数据保存在内存中

内存分两块区域？

栈区      堆区

在C语言或C++中可以通过指针来操作内存地址。通常所有的编程语言中都有一个叫变量的东西。

全局变量和局部变量？

在函数中声明的变量叫局部变量，在函数外声明的变量叫全局变量。

在函数外面是不能访问函数里面的变量，在函数外面的变量是可以访问外面的变量。

结论：全局变量在函数内外都可以访问，局部变量只能在函数内访问，函数外不能访问

重复声明和声明变量？

声明变量，如果仅仅是声明了，没有赋值，它的值是 undefined

重复声明，后面的值会把前面的值覆盖掉

定义和声明的区别：定义表示使用了var声明了一个变量并赋值，声明仅仅表示定义了变量，但没有赋值。

不使用var声明，不推荐；const来声明变量，变量的值不能再修改了，也就是所谓的常量；使用var 或者let声明的变量后面的值可以修改。

03 初识js中的函数

语法？

在js中使用function来声明一个函数，类比在js中使用var来声明变量

Function是关键字 是用来声明一个函数的

Func 是函数名（类比变量名）（）函数特有标识，里面装有形参

{}函数体 函数体是放业务代码

函数名中保存的一个地址 是堆区的一个地址

定义一个函数？

在堆区开辟一块空间，存放函数体中的所有代码，在栈区存储的堆区这块空间的地址，函数名就是栈区保存堆区的地址的这块空间的别名

调用函数？

只定义没有调用相当于没有写，调用这个函数时才能让这个函数执行，执行函数中的代码，在哪个地方调用就返回到哪个地方。

04 JS数据类型

为什么需要数据类型？

基本上所有的编程语言中都提供了数据类型的概念。因为计算机资源（内存）有限的，但是数据是有不同种类，为了更加合理使用内存空间，需要把数据进行分类，不同的数据，分配不同大小的空间。

JS中的数据类型？

基本数据类型：

Number   数值类型      对应无数个值 1, 2, 3...

应用场景：商品价格，年龄，年份…

String     字符串       对应无数个值  “hello”, “h1”....

Boolean    布尔类型    对应两个值true false

undefined       未定义   undefined

null

symbol   

引用数据类型：

Object ：arr  function

如何查看一个数据的数据类型？

  Typeof  查看基本数据的类型

  Typeof   仅仅是一个运算符，不是函数

注意细节：（number）

1. 不分整数和小数，都是number类型
2. 有最大值和最小值
3. 整型有多种进制表示，十进制 十六进制 八进制
4. 浮动数有多种表示
5. 在JS中，对浮点数进行计算，不靠谱，面试题：在JS中为什么0.1+0.2不等于0.3？

答：javaScript存储数值采用的是双精度浮点数，但是js采用的浮点数标准会裁剪我们的数字，这就出现了精度丢失的问题。

如何解决：parseFloat(0.1+0.2).toFixed(10)===0.3

1. Not a Number(NaN) 不是一个数字
2. number 数据类型对应了无数个数据

05 运算符

1 什么是运算符？

表示某种功能的符号

2 算术运算符

• +
• -
• *
• /
• %  取余
• ++  自增，有前++ 和后++  前加表新值，后加表旧值（++在前，整体表达式的值是一个新值，++在后，整体表达式的值是一个旧值）
• --  自减，前--后--  同比自增

 

3 赋值运算符

• =  表示赋值运算符，右结合性
• += 可以用于数字或字符串，视情况而定
• -=
• *=
• /=
• %=

4 关系运算符

作用：用来进行比较的。比较的结果通常是布尔值。

 

• ==    表示相等运算符，只判断两个变量的值是否相等
• ===   表示全等运算符，不只判断两个变量的值是否相等，还判断两个变量的数据类型是否相等
• !=   不等
• !==
• >
• >=
• <
• <=

注意细节：

1.在使用==运算符时，是不需要考虑类型的，只要两个变量的值是相等的，就返回true:

2．如果我们想判断两个变量的值相等，数据类型也相等，这个时候，我们就可以使用全等：===

 

2 逻辑运算符

逻辑运算符？

&& 逻辑与

||  逻辑或

！  逻辑非

&& 逻辑与  且  AND  当&&两侧的操作数都是真时，整体才是真

var a = true;

 var b = true;

var r = a && b; // a是true b也是true

console.log(r)  //true

 

 || 逻辑或  或  OR  当||两侧的操作数有一个为真，整体就为真

 var m = true;

 var n = false;

console.log(m || n)  //true

 

! 逻辑非  取反  对真取反就是假   对假取反就是真

var k = true;

console.log(!k)  //false

总结：

1，逻辑运算符两侧的操作数主要是布尔类型，如果不是，会隐式转化成布尔类型

2，对于&&来说，只有两侧的操作数都为真时，整体结果才是true

3，对于||来说，只要有一侧的操作数为真，整体结果就为真

4，对于!来说，就是取反操作，之前为真，取反为假，之前假，取反后为真

 

注意细节：

1. 对于逻辑运算符来说，最终的结果可能并不是布尔类型
2. 对于&&来说，如果说操作数都是布尔类型，结果肯定是布尔类型，当两个操作数都是true，结果才为true
3. 对于&&来说，如果操作数不是布尔类型，&&在运算时，需要保证运算两侧的数据类型要一样，如果不一样，会发生隐式地类型转换
4. 对于&&来说，如果操作数不是布尔类型，并且两侧的数据类型一样，会发生隐式类型转换，转换完后再进行&&运算，运算的结果并不只限于true或false
5. 基于第4点，先计算左操作数的值，如果左操作的值是一个假值，则整个表达式结果是一个假值，同时停止对右操作数的计算，整体的值就是左操作数的值。如果左值是一个真值，整体这个值还不确定，要看右操作数的值，整体这个结果就是右操作数的值，这个值是转换之前的值。

注：逻辑或同比逻辑与

undefined, null, 0, -0, NaN, "" ---> false

其它的都转化成true

6 位运算符（了解）

7 其它运算符

• 字符串连接运算符 +

注：只要有一个操作数是字符串，那么就表示进行的就是字符串的链接操作。

• 三元运算符 ?=

格式：表达式1 ？ 表达式2 ：表达式3

运算规则：如果表达式1的值为真，那么结果就是表达式2，否则结果为表达式3.

• 逗号运算符 ，
• 获取类型 typeof
• 删除属性 delte
• 检测对象类 instance of
• 测试属性是否存在 in
• 返回空 void

8 类型转换

强制类型转换

• 使用Boolean()、Number()、String()或Object函数
• 在转换数值的时候，parseInt()和parseFloat()函数更加灵活。

注：parseInt:转化成整数， 10进制；    parseFloat:转成小数

• 在使用Boolean(), Number(),String()函数时，函数的首字母必须大写。

隐式类型转换

让变量参与运算就可以实现隐式转换。

• 如果 + 运算符的一个操作数是字符串，它将会把另外一个操作数转换成字符串
• ！运算符将其操作数转换为布尔值并取反，故可以使用！！来转换
• 对于数值，如果转换结果无意义，则返回NaN，如var n = 1 - 'x'
• == 相等运算符，也会进行一个类型转换

实际上，undefined和null是不同的数据类型，我们在==比较时，需要进行类型转换，undefined和null不能互换，这个时候，两者都转换为一个中间值----false

注意：不管是强制还是隐式类型转换，它们都不会改变原来的数据类型。

 

06 表达式

1 什么是表达式？

任何有值的内容都是表达式。

1+1也是表达式，因为+会把两个操作数进行相加运算结果是2

常见的表达式：

• 原始表达式
• 运算符构成的表达式
• 对象和数组初始化的表达式
• 函数定义表达式
• 调用表达式
• 对象创建的表达式

1） 原始表达式

它是表达式的最小单位，它们不再包含其他表达式。

• 常见的原始表达式有：
• 直接量 (如 1.23 "hello")
• 关键字 (如true false null this)
• 变量 (如a，sum，undefined)

2） 运算符构成的表达式

• 算术表达
• 关系表达式
• 逻辑表达式
• 赋值表达式

3） 对象和数组初始化的表达式

例：

对象初始化表达式

Var a={

“name”:”javascript”};

数组初始化的表达式

Var arr=[1,2,3];

4） 函数定义表达式

如：function f1(){

}//函数定义

Var f=function(){

}函数表达式

5） 调用表达式

由于调用函数，它会返回一个值，所以它是一个表达式

6） 对象创建的表达式

如：Var a=new Date();