JavaScript基础知识

• js组成 ：BOM    DOM   EVENT
• BOM：bower Object Model(浏览器对象模型 - 核心是window对象=>window是浏览器内置对象，里面有操作浏览的方法)        
• DOM：document Object Model(文档对象模型  - 核心是document对象=>document是浏览器内置的对象，里面有一些存储着专门用来操作元素的各种方法)   
• EVENT ：事件处理函数 事件对象：浏览器提供 ,一些描述这些事件的信息

一、js的引用方式

1、内联  行内  (直接在标签内写  )

 <div οnclick="alert(2222)">我是div</div>

  <a href="javascript:alert(3333);">链接</a>

2、内嵌式 (script标签里写js代码 一般会把script标签放在底部或者是头部)

<script>    </script>

3、外链式 (外联和内嵌不能同时使用,外联会把内嵌的代码覆盖) 外链的代码在最上面 

<script src="index.js"></script>

二、注释   单行注释  ctrl + /    多行注释 alt + shift + a

三、变量的命名规则

1、只能用数字，字母下划线，$符号。

2、字母区分大小写。

3、数字不能作为开头，不能纯数字。

4、命名中间不能有空格。

5、命名不能使用关键字(保留字),推荐使用小驼峰命名。

6、不能使用中文(后期很难优化)。

四、变量的赋值

var  a  ；  ① 定义(声明)一个a变量

a = 10   ； ②给a赋一个值 为10

1、值声明 不赋值的话就报错 // undefined。

2、如果两个变量名相同的话就会后面覆盖前面。

3、 如果需要2个变量互换，那么可以用临时值存储一个变量；

        var c = a;  //c的值就是 10； c 就是一个临时的值 来存储a变量的值；

        a = b;

        b = c;

        console.log("a:",a,"b:",b);

五、变量的类型

1、基本数据类型（简单数据）

① 数字 Number   :一切数字 都是数字类型；定义的时候不需要加引号

②字符串 String   :引号包裹的字符就是字符串；

③布尔值  Boolean    :真：true 假：false

④未定义 undefined   :没有值

⑤空   null   :空的意思

⑥独一无二 symbol  :独一无二的值

*  “\”转义字符：把有功能的字符转成没有功能的字符；

* 基本数据类型可以通过 typeof 判断   

* isNaN: 判断一个变量  不是一个数字 返回 false 和 true

2、复杂数据类型（引用数据）

①对象 Object

②数组 Array

③正则  RegExp

④函数 Function

数据类型之间存储的区别（重点）

- 既然我们区分了基本数据类型和复杂数据类型

- 那么他们之间就一定会存在一些区别

- 他们最大的区别就是在存储上的区别

- 我们的存储空间分成两种 **栈** 和 **堆**

- 栈： 主要存储基本数据类型的内容

- 堆： 主要存储复杂数据类型的内容

六、其他类型转数字

1、Number:装换 ,只能转纯数字   var str = "123"    var num = Number(str); //123

2、paseInt：可以把字符串转成整数的数字；  

 ①.只能转整数  ②.可以转换非纯数字 （必须以数字开头）;

 var str = "456.78"     var num = parseInt(str); // 456

3、pareFloat：可以把字符串小数转成 数字类型；

①.只能转一个小数点

 var str = "456.78"     var num = parseInt(str); // 456.78

4、 非“+”号的运算

七、其他类型转化为字符串

1、.toString();函数   var 结果（字符串） =  变量.toString();

2、String:  var 结果（字符串） = String(变量);

 3、 通过"+"号转成字符串 ；

 加号的两边都是数字的时候会做加法运算 其他情况 都会做字符串拼接 ；

八 、其他转布尔值

1、Boolean 会把非0的数字都会转成true 

2、会把非空的所有字符串转成true

3、0 “” undefined null NaN 都是false

九、数学运算符

 加减乘除 取余   + - * /  %

十、赋值运算符

1、 = 赋值

2、+= 加等于  先加再求值

3、-= 减等于   先减再求值

4、*= 乘等于   先乘再求值

5、/= 除等于   先除再求值

十一、比较运算符

1、 ==  值是否相等   只比较值

2、 === 全等于   会比较值是否相同且类型是否相同  值和类型都相同 返还true 否则就是false

3、不等于 !:非  !=  :只会比较值 不会比较类型  

4、全不等于 !== :会比较值 且会比较类型

6、>= <=;

十二、逻辑运算符

1、&& (and、且)   两个变量都是 true 那么结果就是true  

2、|| （or 、或） 有一个真 那么结果就是真  

3、! (非、否、取反)

十三、自增和自减

1、自增  

①++a  // 先把a的值加一赋值 ，然后再输出加过后的a值。

②a++  // 先输出a的值，然后再自增赋值。

1、自减  

①--a  // 先把a的值减一赋值 ，然后再输出加过后的a值。

②a--  // 先输出a的值，然后再自减赋值。

十三、分支结构和条件分支

1、分支结构

- 我们的 js 代码都是顺序执行的（从上到下）

- 逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码

2、if 语句

- 通过一个 if 语句来决定代码执行与否

- 语法： `if (条件) { 要执行的代码 }`

- 通过 `()` 里面的条件是否成立来决定 `{}` 里面的代码是否执行

3、if  else语句

- 通过 if 条件来决定，执行哪一个 `{}` 里面的代码

- 语法： `if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }`

- 两个 `{}` 内的代码一定有一个会执行

3、if  else if ...语句

- 可以通过 if 和 else if 来设置多个条件进行判断

- 语法：`if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }`

- 会从头开始依次判断条件

  - 如果第一个条件为 true 了，那么就会执行后面的 `{}` 里面的内容

  - 如果第一个条件为 false，那么就会判断第二个条件，依次类推

- 多个 `{}` ，只会有一个被执行，一旦有一个条件为 true 了，后面的就不在判断了

4、SWITCH 条件分支结构

- 也是条件判断语句的一种

- 是对于某一个变量的判断

- 语法：

  switch (要判断的变量) {

    case 情况1:

      情况1要执行的代码

      break

    case 情况2:

      情况2要执行的代码

      break

    case 情况3:

      情况3要执行的代码

      break

    default:

      上述情况都不满足的时候执行的代码

  }

5、三元运算

- 三元运算，就是用 **两个符号** 组成一个语句

- 三元运算只是对 **if else** 语句的一个简写形式

- 语法： `条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行`

var age = 18;

  age >= 18 ? alert('已经成年') : alert('没有成年')

十四、循环结构和循环条件

1、循环结构 ：就是根据某些给出的条件，重复的执行同一段代码

- 循环必须要有某些固定的内容组成

  ①. 初始化

  ②. 条件判断

  ③. 要执行的代码

  ④. 自身改变

2、WHILE 循环

- `while`，中文叫 当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了

- 语法 `while (条件) { 满足条件就执行 }`

- 因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了

3、DO WHILE 循环

- 是一个和 `while` 循环类似的循环

- `while` 会先进行条件判断，满足就执行，不满足直接就不执行了

- 但是 `do while` 循环是，先不管条件，先执行一回，然后在开始进行条件判断

- 语法： `do { 要执行的代码 } while (条件)`

4、FOR 循环

- 和 `while` 和 `do while` 循环都不太一样的一种循环结构

- 道理是和其他两种一样的，都是循环执行代码的

- 语法： `for (var i = 0; i < 10; i++) { 要执行的代码 }`

5、BREAK 终止循环

- 在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环

- 比如：我要吃五个包子，吃到三个的时候，不能在吃了，我就停止吃包子这个事情

- 要终止循环，就可以直接使用 `break` 关键字

6、CONTINUE 结束本次循环

- 在循环中，把循环的本次跳过去，继续执行后续的循环

- 比如：吃五个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个

- 跳过本次循环，就可以使用 `continue` 关键字

二十、字符串        ES5/String

1、严格模式

- 我们都知道 js 是一个相对不很严谨的语言

- 而且开发的时候，一些代码也不是很严格要求

- 而严格模式就是对开发的时候写的一些内容做了要求

2、开启严格模式

- 想开启严格模式，直接在代码最开始的位置写上字符串 `use strict`

<script>

    'use strtic'

    // 下面代码书写就要按照严格模式来书写

  </script>

①.声明变量必须有 `var` 关键字

②.函数的行参不可以重复

③. 声明式函数调用的时候函数内部没有 this   =>undefined

3、创建字符串的方法

①字面量  var str = 'hello'

②构造函数    var str = new String('hello')

4、字符串的常见方法

①、 - `charAt(索引)`  是找到字符串中指定索引位置的内容返回   如果没有对应的索引，那么就会返回 空字符串

②、 `charCodeAt(索引)` 就是返回对应索引位置的 unicode 编码  

③、`indexOf` 就是按照字符找到对应的索引  

④、  `substring` 是用来截取字符串使用的

- 语法： `substring(从哪个索引开始，到哪个索引截止)`，包含开始索引，不包含结束索引

⑤、 `substr` 也是用来截取字符串的

- 语法：`substr(从哪个索引开始，截取多少个)`

⑥、 `toLowerCase` 转换成大写

⑦、 `toLowerCase `  转换成小写

###深拷贝

1.把数组或者对象转成json格式字符串；JSON.stringify

2.可以把 json格式的字符串 转成对象或者数组；JSON.parse

function deepCopy(arg) {

            return JSON.parse(JSON.stringify(arg));

        }

        var obj = {

            name: "张三",

            obj2: {

                age: 20,

                height: "178cm"

            }

        }

        var obj2 = deepCopy(obj);

        obj2.obj2.age = 111;

        console.log(obj);

        console.log(obj2)

###倒计时定时器

- 倒计时多少时间以后执行函数

- 语法： `setTimeout(要执行的函数，多长时间以后执行)`

- 会在你设定的时间以后，执行函数

  ```javascript

  var timerId = setTimeout(function () {

    console.log('我执行了')

  }, 1000)

  console.log(timerId) // 1

  ```

  - 时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟

  - 所以会在页面打开 1 秒钟以后执行函数

  - 只执行一次，就不在执行了

  - 返回值是，当前这个定时器是页面中的第几个定时器

 

#### 间隔定时器

- 每间隔多少时间就执行一次函数

- 语法： `setInterval(要执行的函数，间隔多少时间)`

  ```javascript

  var timerId = setInterval(function () {

    console.log('我执行了')

  }, 1000)

  ```

  - 时间和刚才一样，是按照毫秒进行计算的

  - 每间隔 1 秒钟执行一次函数

  - 只要不关闭，会一直执行

  - 返回值是，当前这个定时器是页面中的第几个定时器

 `clearTimeout` 和 `clearInterval`