javascript技术总结

javascript 简介:

java: 类似 java 计算机编程语言

script: 类似 java 计算机编程语言的脚本语言，缩写为 js

java 和 javascript 的区别:

- 静态编译： 将 java 的程序编译生成为一个.class 文件

- 编译型语言（java、c）和解释型语言（js）

- java 静态编译，js 作为脚本动态编译

- java 是强类型语言，js 是弱类型语言

javascript 的作用

提供了一个和 html 进行动态交互的功能

js语法简介

js语法名称为：ECMA Script

Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）

ECMA Script 缩写为 ES

常见说法ES5、ES6，后面的数字，代表的是语法版本号

js的三种使用方式

- 在浏览器控制台上直接运行js语言片段！

    - 在html文件中的标签中直接书写js代码 script标签

script标签应该写在html文档常见的位置

常见的位置三个地方:

1.head标签中

2.body标签的末尾处

3.html标签中，与body标签同级！ 推荐使用这种！

变量

什么是变量?

变量就是存放数据的一个容器 (盒子)

变量所保存的数据本质是存储在计算机的内存中的! 内存是通过硬件内存条所产生一块虚拟空间!通常称为内存空间!

内存中数据存储的特点:1.读写速度快 2.临时数据的存储 3.内存的存储空间是比较小的

申明变量

var声明变量语法:

var a

变量的初始化

var num = 100 

同时声明多个变量

var a, b, c, d

注意： var 关键字可以重复声明相同的变量

js在ES6之前,变量的声明只能通过 var关键字进行声明

js在ES6之后可以采用 let 或者 const 关键字进行变量的声明

let 语法规则:

      let a a  = 200  let A = 200   let b, c, d   

 注意：let关键字不能在同一作用域重复声明相同的变量
    const 语法规则 :

const关键字是用于声明 常量的!     

常量:就表示该变量中保存的数据不允许更改! 

  const num = 200  利用赋值运算符 重新修改num的值   

const声明的常量变量,是不允许修改的!   

注意： const不能在同一作用域下声明相同的变量

变量标识符命令规则

js中的标识符命名规范:

1.标识符只能由字母 数字 下划线 以及$符号组成

2.标识符不能以数字进行开头

3.标识符严格区分大小写

4.不能采用关键字或者保留字进行标识符的定义

-- 关键字:js语法规范中,提前规定好了一些单词!并且js也赋予其特殊的含有!

-- 保留字:js语法规范中,以前收录了一些单词!但目前这些单词未真正的投入使用,测试阶段!并没有任何的含义!

注意:以上4条就是js标识符命名规范的硬性准则!

5.标识符如果由多个单词构成!应遵循 '小驼峰命名法' : blackcolor ==> blackColor

6.标识符的命名应该遵循 '见名知义' : name ,age ,sex

数据类型

7 种原始类型

- undefined 未定义（有且仅有一个值）

- Boolean

- Number

- String

- BigInt

- Symbol

- null 空引用（特殊的引用类型、null类型通常用于指向一个不存在的对象空间！有且仅有一个值）

- 注意：在 ES6 之前只有 undefined、Boolean 、 Number 、 String、null

- ES6 后新增加了两种数据类型， BigInt 、 Symbol(符号)

最后一种类型：

- Object （对象类型，在 js 中使用构造函数所创建的对象！都属于 Object 对象类型）、（对象类型中不允许存在两个同名属性！后一个会覆盖前面的属性值！）

数据按照参数的传递方式，可以分为 `值传递类型` 和 `引用传递类型`

值类型

- Boolean 布尔型

- Number 数字型

- String 字符串

- BigInt 长整数

引用类型

- Object 对象类型（语法规则： ①对象.属性 可以把.理解为语文上'的'；②对象[属性名]）

例：获取person对象的name值：

console.log(person.name)

console.log(person['name'])

读取对象中不存在的属性时其返回数据为 undefined

- Symbol 符号类型（Symbol符号类型的出现是为了解决花括号对象中，属性同名的问题！ 因为symbol所表示的值是唯一的！不可能出现相同的情况）

值类型和引用类型数据的区别：

值类型：变量中直接存贮值本身（栈）

引用类型：变量中存储的是引用地址，而值是存在引用地址所指向的内存中的某个对应位置（栈、堆）

总结：

js中的数据类型有8种

原始数据类型（7） 和 对象类型（1）

口诀： 四基两空双一

四基： Number、String、 Boolean 、 BigInt

两空: undefined 、 null

双一： 一个符号 Symbol 一个对象 Object

检测数据类型

语法： typeof 数据

typeof 运算后的数据属性是字符串类型

json对象的序列化和反序列化

序列化：将一个合法的json对象，转换为一段标准的json格式的数据！

反序列化：将一段标准的json格式的数据，字符串转化为一个合法的json对象！

总结： json 对象主要用于存储数据，有着简洁的数据结构，json 对象常用于网络信息传输中，传递数据

---

数据类型的转换

将某个数据的类型通过某种方式转换为另一种数据类型 例： number ==》 string

强制转换：人为的通过手段去改变一个数据的类型

隐式转换：没有人为的参与，是程序解析自动进行转换

js中的运算符分类

- 算术运算符： + 、 - 、 * 、 / 、%（模运算，取余）、**(幂运算)

算数运算符主要用于两个number数据的计算！

如果算术运算符一侧数据类型不为number则js将进行隐式转换！

注意：如果+号的一侧数据类型为字符串类型，则+号就自动变成字符的拼接运算

- 赋值运算符：=（将赋值运算符的右侧表达式的结果，赋值给左边的变量）

+= 、 -= 、 /= 、 %= 、 **= 、*=

注意：复合赋值运算符也具备赋值运算的功能

- 比较运算符：> 、< 、 >= 、<=、 ==、 ===、 != 、!==（其比较结果为布尔值!true 或 false）

==（等于，双等于） ：进行比较时如果两侧的数据类型不一致！首先进行隐式转换！（！=一样）

===（ 全等于，三等）：只会比较数据的值，如果数据的类型都不同！直接返回false！

!== （不全等 特点）：不会进行隐式转换，只要!==的两边数据类型不同直接返回！ true

建议：以后如果遇到需要比较两个值是否相等的情况下，采用三等

- 逻辑运算符：&&(与) ||(或) !(非，取反) 两侧数据类型不一样会进行隐式转换

短路与：全真为真，一假即假

特点在运算时，从左往右计算，如果碰到其中一个表达式的值为，false，那么后续的表达式将不再进行计算！并且返回当 前表达式的原始值作为整个与运算的结果！

如果从左往右计算，都没有遇到false，那么将最后一个表达式的原始值作为整个与运算的结果！

短路或：全假为假，一真即真

特点在运算时，从左往右计算，如果碰到其中一个表达式的值为，true，那么后续的表达式将不再进行计算！并且返回当前 表达式的原始值作为整个或运算的结果！

如果从左往右计算，都没有遇到true，那么将最后一个表达式的原始值作为整个或运算的结果！

非运算 ：真变假，假变真

-自增运算：++ 、 --

前自增，是先将数据进行+1，然后再参与其他的运算

后自增，是先利用原始数据参与其他的运算，然后再进行+1操作

注意：表达式一旦计算完毕！值已经确定！则表达式的结果不能更改!

- 三元运算符：

语法规则： 表达式?结果1:结果2

运算流程： 计算表达式结果，如果表达式为真，则将结果1的数据进行返回，否则返回结果2的数据

- 单目运算符： ！ 、 typeof

- 逗号运算：始终将最后一个,号表达式的值最后整个逗号表达式的运算结果

控制流程语句

js中的三大流程控制结构:

顺序结构: 整体代码的解析执行是按照从上往下!的规律进行执行!也是最基础的控制结构

选择结构: 为代码的执行提供可能的路径!影响代码的走向!

循环结构: 重复的执行某一段代码!

js中的选择结构控制语句:

if 单分支

if...else 双分支

if...else...if 多分支

switch 条件多分支

练习： 随机输入一个年份，判断平润年（ 能被4整除但不能被100整除或者能被400整除）

类型转换

---

多分支语句

练习2：随机从键盘上输入一个学生的成绩判断其等级！ 单分支来完成！

// >=90 优秀 >=80 良好 >=70 一般 >=60 及格 60以下 不及格

总结： if...else的嵌套配对原则：

1.else不允许单独存在！

2.else必须和if进行配对

3.else与if配对的原则是，找距离else最近的未配对的if进行配对！

条件分支

switch语句

语法：

switch (表达式) {

case '值':

语句块

case '值':

语句块

case '值':

语句块

case '值':

语句块

case '值':

语句块

case '值':

语句块

....

default:

不满足其他case分支时，进行default!

}

switch执行流程：

计算表达式的值，然后与{}中case进行匹配！匹配一旦成功则从对应的case段落开始执行，一直到{}的末尾！

switch在执行的过程中如果没有被break语句进行打断则一直执行到语句末尾结束！如果遇到break打断则马上退出switch语句，执行主路径的内容！

注意ÿ