JavaScript基础

学习编程语言进行软件开发的基本步骤

1:了解编程语言的基本知识

2: 搭建开发环境

3: 学习第三方的库和框架

4: 进行项目开发环境

JS基础目录

1: JavaScript基础理论

1-1:  JavaScript技术的概述：

1-2:  JavaScript技术的作用：

2: JavaScript的变量/常量

2-1：什么是常量

2-2：什么是变量

2-3:JavaScript变量的命名规则:

2-4: js常量与变量的区别

2-5: const let var 之间的区别

2-6:  2进制/8进制/16进制进行声明变量

3: JavaScript的数据类型

3-1: JavaScript的数据类型分为基本类型与引用类型

3-2: 基本数据类型中的特殊点

3-3: 数据类型（基本数据类型与引用数据类型）的相互转换

3-4: 引用数据类型

4: JavaScript的运算符

4-1：什么叫做表达式

4-2：js运算符的种类

4-3: js运算符的解析

4-4: js运算符的优先级

5: JavaScript的逻辑结构

5-1：js逻辑结构的种类

5-2: 分支结构

5-3: 循环结构

5-4: js逻辑结构中的关键字

6: JavaScript的函数

6-1: 什么是js函数

6-2：js函数种类

6-3:  常用系统函数

6-4: 自定义函数

6-5: js调用函数

6-6: js函数中的匿名函数

6-7: js函数中的关键字

6-8: js函数中的回调函数

7: JS作用域（学习作用域主要用来防治全局污染）

7-1: 作用域分类

7-2: 作用域概念

7-3: 根据不同作用域声明的变量

7-4: 根据不同作用域声明的函数

7-5: 全局污染

7-6: 作用域链

8: 声明提升

8-1: 声明提升的种类

8-2: 什么是声明提升

8-3: 声明提升的解析

 js对象

7: JavaScript的数组

1: JavaScript基础理论

1-1:  JavaScript技术的概述：

1：JavaScript是一门基于对象和事件驱动的弱类型跨平台脚本语言 

2: 什么是基于对象？

基于对象：它不仅可以创建对象,也能使用现有的对象

3: 什么是事件驱动？

事件驱动：在JS中，给HTML网页中的不同元素，添加不同的触发的方式

                                大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能

4: 什么是弱类型？

变量存储的数据类型没有强制要求

5:什么是跨平台？

有浏览器的地方，就可以使用JS语言

6:什么是脚本语言

6-1： 脚本语言不需要编译,由JavaScript引擎解释执行

不需要编译就是写一行代码执行一行

编译性语言(java)就是全部编译之后在执行

6-2：脚本语言只在浏览器中执行

1-2:  JavaScript技术的作用：

1：javascript技术实现浏览器用户和后台服务器进行交互

2:  JavaScript是可以前后端都进行开发

后端开发应用场景（比如调用数据库服务器）

前段运行js文件需要浏览器

后段运行js文件需要安装node.js

2: JavaScript的变量/常量

2-1：什么是常量

1: 常量： 用于存储数据的容器,常量存储的数据存在内存中

2: 声明常量： const a = 1;

2-2：什么是变量

1: 变量: 用于存储数据的容器,变量存储的数据存在内存中

2: 声明变量:  var 变量名 = 变量值;

                      let 变量名 = 变量值;

                      var 变量名1 = 变量值,变量名2 = 变量值,变量名3 = 变量值;(声明多个变量)

3: 声明变量解释

3-1: 等号是赋值的意思,是将右边的变量值赋值给变量

3-2: 声明变量后未赋值,默认值是undefined

3-3: 弱类型语言的同一变量可以存储不同数据类型（包括基本和引用）的数据，

       强类型语言的同一变量只能存储同一类型的数据

2-3:JavaScript变量的命名规则:

1: 组成变量的元素: 字母/数字/下划线/$

2: 变量名不能以数字开头

3: 变量不能使用关键字/汉字/拼音组合(但是汉字不报错)

4: 变量的命名使用小驼峰命名规则

2-4: js常量与变量的区别

JavaScript中声明变量的数据类型是可以变化的，可以多次赋值

声明常量时必须赋值,且赋值以后不允许重新赋值

2-5: const let var 之间的区别

1: var在 ES的所有版本中都可以使用，而 const 和 let 在 ES 6 及以后的版本中使用。

2: 使用let声明的变量只能在块级作用域里访问

3: var声明的变量会进行变量声明提升,const/let则不会

4: let 在全局作用域中声明的变量不会成为 window 对象的属性（var 声明的变量则会）

5: for循环,for in/for of中循环条件中变量需要使用let声明,可以防止变量的全局污染

6: const在声明一个常量时,常量值不允许修改,但使用const引用一个对象,是可以进行对象属性的修改

7: let 声明的变量与函数不是全局作用域（用于防止全局污染）

2-6:  2进制/8进制/16进制进行声明变量

var a = 10; 默认十进制

var b = 012; 0是八进制的标志

var c = 0xa; 0x是16进制的标志

16进制的10-15用 a-f 进行标识

计算机在输出数值型数据时，会自动将其他进制类型数据转换成十进制

3: JavaScript的数据类型

3-1: JavaScript的数据类型分为基本类型与引用类型

1: 基本类型: 数值型（number）/字符串（string）/布尔类型（boolearn）/  未定义(undefinded)

                     空(null)

                 数值型(nubmer): 整数型/浮点型/nan

2: 引用类型：对象等，不是基本数据类型就是引用类型

3-2: 基本数据类型中的特殊点

1：number类型数据的特殊值

             1：Infinity ： 正无穷大

             2：-Infinity ： 负无穷大

             3：NaN : Not a Number 非数字， 这个值是转数值失败的结果，

                   NaN和任何数值（包括NAN）执行加减乘除，比较  结果还是NaN

2: 浮点型

            var a = 314.15

            var b = 314.15e+2;

             var c = 314.15e-1;

            e+2代表小数点向右移动两位

            e-1代表小数点向左移动一位;

3: 字符串

3-1: 在浏览器上输入数据，默认的是String数据类型

4:  undefined（未定义）

值只有一个就是undefined。表示变量没有初始化值。

第一种情况： 声明了变量但是没有为变量赋值，该变量的默认值就是undefined。

第二种情况：访问一个对象上不存在的属性时，也是undefined。

第三种情况：访问数组中一个没有的元素的位置时，该位置处的值也是undefined.

5:  null

值也只有一个，就是null。表示空值或者不存在的对象。数据类型是object

6: undefinded与null的区别

未定义: undefined 表示空值,未定义的变量的默认值

空: null  代表空值

但是null与undefined不一样 null的变量类型是Object;

null值出现需要手动给变量赋值

3-3: 数据类型（基本数据类型与引用数据类型）的相互转换

1: 数据类型相互转换种类

           隐式转换与强制转换

2: 隐式转换

2-1:什么是隐式转换：

      当运算符在运算时，如果两边数据类型不统一，CPU就无法计算，这时我们编译器

       会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算

2-3: 数据类型（包括基本与引用）隐式转换方向

          对象 => 字符串   =>  数值

          undefinded /null / boolean  =>  数值

          是否会进行隐式转换，就看表达式双方的数据类型层级是否一致

2-3: 出现隐式转换的情况

1: 表达式中出现算数运算符

   “+，-”有点特殊（+/-还能代表正负,+旁边出现字符串一定表示字符串拼接），+  -  *  /   %   ++   --

2: 表达式中出现比较运算符

2-4: 基本数据类型转换成数值后的数值

       1: 布尔值   布尔值转为数字   true -> 1  false -> 0

       2: null  null转换成0

       3: undefended   undefinded转换成nan

       4:  字符串 若是纯数字转换成数字，若不是纯数字转换成NAN   

3: 强制转换

3-1: 什么是强制转换

      调用函数进行数据类型转换

3-2：常见数据类型转换函数

1：强制转换成数字（调用number函数）

2:  强制转换为整型 parseInt()  用于将字符串和小数强制转换为整型，其它的类型结果为NaN

        将字符串转为整型的时候，如果开头是非数字返回NaN，否则返回开头的整数部分

3:  强制转换为浮点型  parseFloat()  用于将字符串和小数强制转换为浮点型，

        其它的类型结果为NaN

       将字符串转为浮点型的时候，如果开头是非数字返回NaN，否则返回开头的小数部分

3-4: 引用数据类型：
                 函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

4: JavaScript的运算符

4-1：什么叫做表达式

表达式：由数据本身或者由运算符连接的数据组成的格式称作表达式

4-2：js运算符的种类

  运算符分为算术运算符（+  -  *  /   %   ++   --）、

                    比较运算符（  >  <  >=  <=   ==(等于)   !=（不等于）  ===(全等于)   !==(不全等于)

                    逻辑运算符（&  |   !  &&   ||）,

                    赋值运算符（=       +=    -=   *=   /=   %=  ）

                    三目运算符

4-3: js运算符的解析

1: 算术运算符   

        ++/-- 自增/自减，符号在前先变化在赋值,符号在后后变化在赋值

         + ： 在字符串中表示字符串拼接，在运算式中表示两者相加

2: 比较运算符 

         等于/不等于(== / !=)： 比较值是否相同（基本数据类型）

                                              对象与对象之间的比较，比较对象的地址值

         全等于/不全等与(=== / !==)：比较数据类型与值，比较结果是且/或的关系

         字符串之间比较，比较的是首个字符的Unicode码   

         特殊的比较   undefinded == null   true   undefinded === null   false

                              js认为undefinded与null都是空，数值是一样的，但是数据类型不一样

3: 逻辑运算符

  & 逻辑与，关联的两个条件都是true，结果是true，否则是false

  | 逻辑或，关联的两个条件有一个是true，结果是true，否则false

  !  逻辑非，取反

  短路逻辑

   &&：当第一个条件为false，就不再执行第二个条件

    ||：当第一个条件为true，就不再执行第二个条件

   var a = 0 && 1; 结果 a = 0

4: 赋值运算符

        先执行运算，再执行赋值

         a += 3 就等于 a = a+3

5: 三目运算符

   条件表达式  ?  表达式1  :  表达式2

   如果条件表达式为true，执行表达式1

   如果条件表达式为false，执行表达式2

4-4: 逻辑运算符的优先级(从上往下优先级依次递减)

5: JavaScript的逻辑结构

5-1：js逻辑结构的种类

    顺序结构，分支结构，循环结构

5-2: 分支结构

1: 分支结构的作用

   某一段代码需要判断是否要执行的时候，使用分支结构

2: 分支结构的种类

2-1: if语句： if(条件表达式){ 语句块 }

            如果语句块之间只有一行代码，大括号可以省略         

2-2: if-else语句(两种判断可以看看与三元运算符那个更合适)

2-3: if-else嵌套（多种判断条件使用这个）

2-4: switch-case语句

      是一种特殊的多项分支语句，只能进行全等于的比较（表达式中的值与case后的值

      进行全等于的比较）

      switch(表达式){

              case 值1:   语句块1；break；

              case 值n:   语句块n；break；

              default:  语句块n+1

        }

        如果表达式的值和case后的值相同，执行语句快n

        break; 跳出switch-case语句，不再执行其它的比较

        default:  表达式和每个case后的值比较都是false,执行语句快n+1

        如果语句块n与语句快n+1相同，则语句块n可以省略

3: 分支结构注意点

3-1: 条件表达式中的数据是以下情况（5钟）隐式转换为布尔型结果是false：

           0 （数值） NaN   空字符串  undefined   null

          (以上情况取反即true，其他情况皆为true)

3-2: 条件表达式中，区间之间的条件比较不能使用这种形式 10<a<100，

       原因是程序执行时，a先于10比较（结果会是true或者false），然后再用boolean类型的结果

       与100比较，与数学上的比较逻辑不同

       解决办法： 使用&&，或者｜｜进行比较

5-3: 循环结构

1: 循环结构的作用

        重复执行相同或者相似的代码使用循环结构

2: 循环的两个要素     

           循环条件：控制循环是否往后执行

           循环体：要重复执行的相同的代码

           循环结构使用的最重要的就是循环条件的合理设置

3: 循环结构的种类

3-1：while循环      while(循环条件){ 循环体 }

3-2:  do-while循环       do { 循环体 } while (循环条件);

3-3：for循环      for(初始值;循环条件;增量){ 循环体 }

3-4:  循环嵌套：在一个循环体的内部又出现的其它的循环结构,  任意两个循环之间都可以相互嵌

4: 循环结构注意点

4-1: 嵌套for循环的特点：外循环执行一次，内循环执行完毕

                                         外循环控制行，内循环控制列

                                         外循环结束，即结束

5-4: js逻辑结构中的关键字

1: break

1-1: 结束循环，不再执行任何循环中的代码,

1-2: 跳出switch case 语句

2: continue

       跳过后续循环体中的代码，还会继续执行下一次循环

     （就是还执行判断是否循环的条件，看是否再次执行循环体）

6:  JavaScript的函数

6-1: 什么是js函数

1:  js函数是一个功能体，用于封装要重复执行的js代码，用来提高开发效率

2: 注意js中没有方法的概念，只有函数概念，java中有方法概念

6-2：js函数种类

     函数分为系统函数和自定义函数

6-3:  常用系统函数

1:  isNaN()  检测一个字符串是否含有非数字，含有非数字是NAN，输出true，否则输出false

     过程： 会先将字符串隐式转换为数值，是number类型，输出false

 2: eval()   执行字符串中的表达式。比如 console.log(eval("1+3") ), 回输出4

     主要使用在处理后端给前段的数据（后端给前端的数据都是字符串）

6-4: 自定义函数

1：js自定义函数的种类

1-1: 无参函数：function a(){ 函数体}

       无参函数有无返回值

1-2: 含参函数：function a(b,c){ 函数体}

       含参函数有无返回值

1-3: 函数有返回值：function a(参数列表) { return   c+b;}

       有返回值的函数的处理方式：定义变量保存或者直接输出

       若是定义变量保存函数，函数中没有写return或者return后不加任何值，

       则变量的默认值是undefined

1-4: 匿名函数：  function () {   }  或者   var fun = function () {   }

2: 创建js自定义函数的方式

2-1: 函数声明方式

       通过function关键字声明函数，并且给函数命名就是函数声明

       函数声明语法：function 函数名称 (参数列表) { 函数体 }

       注意一下这种创建方式中函数声明提升的解释

2-2:函数表达式方式（匿名函数的其中一个作用）

      函数表达式创建函数语法：var  变量名（函数名称） = function(参数列表){ 函数体 }

3:创建js自定义函数两种方式区别

3-1: 对比函数声明和函数表达式的区别

     调用js函数的逻辑结构：一般是先创建函数在调用函数

   但是：函数声明创建的函数存在函数整体提升，所以可以先写调用再写创建

              函数表达式创建的函数只是存在变量声明的提升，函数体还在原来的位置，

              所以必须先写创建再写调用

3-2:  function 是创建js自定义函数中的第一个词，那么就是一个函数声明方式创建的js函数

        否则就是一个函数表达式例:  (function (){})

6-5: js调用函数

1: js调用函数（系统函数或者自定义函数）的语法

        语法:    函数名称(参数列表);

        形参：创建函数时的参数称为形参

        实参：调用函数时的参数称为实参，实参会赋值给形参

2: js调用函数的注意点

2-1: 实参和形参的数量可以不匹配，如果形参未被赋值，则形参的默认值是undefined。

2-2: 调用函数时，方法名（参数列表），其中参数列表的参数只关心参数个数

        原因是：js是个弱类型的语言，变量（形参）可以保存任意数据类型的数据

        少实参，形参默认值为undefended，多实参？

2-3: 只有调用某个函数，这个函数体中的代码才会执行

3: 特殊的函数调用方法： IIFE 立即执行函数表达式

     (function foo() { var a = 3;  console.log(a); })();

     只要运行JS文件时,这串代码会被自动执行,是为什么?

     第一个 ( ) 将函数声明变成函数表达式，第二个 ( )立即执行了这个函数。

    注意：函数声明的js函数是不能立即调用的，必须要将函数声明变成一个函数表达式

              才可以立即调用

6-6: js函数中的匿名函数

1: 什么是匿名函数

      没有名字的函数就是匿名函数 

2: 匿名函数的作用

2-1：函数表达式方式创建函数

解析：用声明一个变量的方式创建函数，只不过变量保存的值是一个函数，

           此时变量的数据类型是function，function就代表是一个函函数

           因为js变量可以不断的重新赋值，若是函数体中有return关键字，调用函数以后，

           变量就保存函数的返回值

2-2：匿名函数的自调用

         语法：(function(参数列表（形参）){})(参数列表（实参）);  参数可有可无

                    (function(){})()

         匿名函数自调用的作用： 防止全局污染

2-3: 匿名函数作为回调函数

        匿名函数作为回调函数语法： 函数名称a（function（）{}）；

        在a函数函数体中调用匿名回调函数需需要使用a函数的形参名 进行回调函数的调用

6-7: js函数中的关键字

1: return的作用

                 return用于返回函数调用的结果

                 return执行就会结束函数的执行(函数体中return后的代码不会在执行）

                 return关键字结束递归（return是递归的结束条件的关键字）

                 return是否会应用在匿名函数自调用？

2: function的作用

2-1: 声明js函数的关键字

2-2: function是创建js自定义函数中的第一个词，那么js会认为这是一个函数声明方式

       创建的js函数

       否则就是一个函数表达式例:  (function (){})

6-8: js函数中的回调函数

回调函数概念: 将一个函数作为参数传递到另一个函数中,这个作为参数的函数就是回调函数

回调函数可以是任意的自定义函数(函数声明的函数/匿名函数)

回调函数语法： 函数名称a（回调函数名）；

                          函数名称a（function（）{}）

在a函数函数体中调用回调函数需需要使用a函数的形参名 进行回调函数的调用

7: JS作用域（学习作用域主要用来防治全局污染）

7-1: 作用域分类

        Js作用域分为全局作用域,函数作用域,ES6新增的块级作用域

7-2: 作用域概念

1: 全局作用域: 一个js文件中，函数以外的作用域

2: 函数作用域: 一个js文件中，函数{}中的部分就是函数作用域

3: 块级作用域: 块作用域由 { } 包括，除了函数{}以外的{}包括的区域都是块级作用域。

                        块级作用域针对let声明的变量定义的

4: 全局作用域与函数作用域的特点

4-1: 全局作用域比较浪费资源，只有在浏览器关闭，全局变量/全局函数等才会释放资源。

4-2: 局部作用域是在函数执行完后，局部变量就会释放资源。

7-3: 根据不同作用域声明的变量

1: 全局变量：在全局作用域下声明的变量就是全局变量，可以在这个js文件的任意作用域访问到

2: 局部变量：在函数作用域下声明的变量就是局部变量，只能在当前的函数作用域下访问到

3: 特殊的局部变量：

        函数参数被认为是当前函数作用域的（var声明的 ）局部变量

4: 特殊的全局变量（了解）

     function test() {
          message = "hi"; // 全局变量
     }
     test();
     console.log(message); // "hi"

打印出“hi”的原因： 全局作用域中没有定义message变量且函数作用域中去掉message之前的 var

                               这样：message 就变成了全局变量。

                               所以：只要调用一次函数 test()，就会定义 这个变量，

                                          并且可以在函数外部访问到。

但是在严格模式下，如果像这样给未声明的变量赋值，则会导致抛出 ReferenceError。

这种写法在TypeScript中是不被允许的

7-4: 根据不同作用域声明的函数

1: 全局函数：在全局作用域下创建的函数，可以在任意作用域下访问到

2: 局部函数：在函数作用域下创建的函数，只能在当前函数作用域下访问到

7-5: 全局污染

1:什么是全局污染

    全局污染是全局变量带来的影响

    比如全局变量同名，更改这个变量的值，会影响其他功能的展现

    产生全局污染的原因是全局变量可以在任意作用域都可以访问到

2: 怎么解决全局污染

    1：匿名函数自调用（将产生全局污染的全局变量改成局部变量）

7-6: 作用域链

1: 什么是作用域链

     多个作用域发生相互嵌套就形成作用域链 

2: 作用域链针对是变量（解释）

    解释： 在作用域链的作用域结构中,JS引擎寻找变量首先到当前的作用域下寻找，

                如果当前没有，会不断往上一级作用域寻找,直到找到该变量,或抵达全局作用域）为止。

    注意：1: 不会往下级作用域中寻找变量的

               2: 作用域链,针对的是变量,var/let/const声明的变量效果一样

8: 声明提升

8-1: 声明提升的种类

声明提升包括变量声明提升（只有var声明的变量）和函数声明提升

注意： 声明提升都是在当前作用域中进行声明提升的

8-2: 什么是声明提升

Js的声明提升就是将变量和函数的声明提升到函数或者变量所在作用域的顶部

所在所用域：可能是全局作用域，可能是函数作用域

注意： 变量的声明虽然提升，但是赋值操作仍然保留在原来的位置，等待顺序执行

js代码执行的基础逻辑结构：先进行声明提升，然后顺序执行

8-3: 声明提升的解析

1: 同一作用域下,函数声明提升在前,变量声明提升在后

    注意： 函数声明提升是将整个函数(包括函数体的内容)在当前作用域进行提升,

2: JavaScript 会将var a = 2;看成两个阶段：var a; 和 a = 2;。

     第一个声明是在编译阶段进行的。第二个赋值会被留在原地等待执行阶段。

3: 函数表达式不会进行函数声明提升，但是保存函数的变量如果是var声明的，

    该变量会进行声明提升

4: 函数声明中，函数名称本质上就是一个变量名，这个变量保存的是一个函数，而且这个变量

    是一个全局变量，所以函数声明提升以后，可以将函数声明的函数转换成函数表达式的函数

    其中若是变量重新赋值，再次输出时变量时，变量保存的就不再是函数了

    第四点需要再次认证

递归概念: 在函数的内部调用自身这个函数，本身是一个死循环（使用局限性大），

递归只能解决循环相关的问题

会造成内存泄漏

内存泄漏：内存中的空间被占满，无法保存新的数据。

正常调用函数的内存中执行栈的变化情况

调用函数以后，执行函数体的代码，执行的结果会存在内存中，这块内存中存储函数体

执行结果的区域叫做执行栈（执行上下文），函数调用完成后，产生的执行栈会消失

递归方式调用的函数的内存变化情况

不断的自己调用函数，不断的产生执行栈，而之前的执行栈不消失（因为新产生的执行栈与

之前的执行栈有关系），导致存储执行栈的内存存满了，最后程序崩溃，函数自动停止调用

发生内存泄漏的现象

循环中的死循环不会产生内存泄漏，原因是不会占用很多的内存

 如何使用递归：

   1: 必须要有边界条件（即结束循环的条件），使用return关键字结束递归

   2: 找自身调用函数的规律

递归案例： 计算 5 的阶乘

function getjC(params) {

if (params == 1) {

return 1;

}.  //这是边界条件

return params * getjC(params - 1);   //这是阶乘规律

}

console.log(getjC(5));

递归代码案例： 

function say() {

console.log("nihao");

say();

}

say();

RangeError: Maximum call stack size exceeded

RangeError:超过了最大调用堆栈大小

意思就是内存泄漏

9: Js 对象

3:  Js的自定义对象解析

        1: Js自定义对象的两种方式语法

            方式一: 先声明对象,在创建对象

                   第一步：声明对象：function Person(){} ： 类似于Java中声明类的作用

                   第二步：创建对象：var p1 = new Person();创建对象的语法

                   注意：若声明对象时，有参数列表，创建对象时的参数列表必须一模一样
                       1：JavaScript中自定义对象方式一设置属性的语法： 

                                 例： p1.name = "张飞"; 

                               解析：JS中使用该语法，会设置对象的属性，并给属性赋值

                                          输出对象时（console.log（）），会显示对象的属性名和属性值

                          完成后对象就有属性与属性值，这就是直译性语言的特点
                      2：JavaScript中设置自定义对象方式一的函数的语法：

                               p1.run = function(){ alert(this.name+" : "+this.age); }

                      3：JavaScript中调用自定义对象的函数的语法：

                              JS自定义对象.函数名（）；

              自定义对象的方式二:

                        1：语法格式：

                                var 对象名 = {

                                            "属性名1" ："属性值" ，

                                            "属性名等" ："属性值"，

                                             "函数名"：function（）{

                                                                    函数体

                                                             }

                                              }

                              2：查看对象的语法：console.log(对象名) 例，console.log(p)

                              3：调用对象方法的语法：对象名.方法名()；例，p.get()；

                              4：JavaScript自定义对象的方式二的注意点：

                                          1：属性名必须加双引号，属性值若是数字可不加，

                                                其他属性值也要加双引号

                                          2：不同属性之间用逗号隔开

                                          3：属性值与属性名之间用冒号连接（:）而不是等号

                                          4：函数名与函数声明之间用冒号连接（:）而不是等号

4: JavaScript语言的自定义对象与Java使用对象的区别：

       JavaScript是直译性语言，是一遍编译，一边对象的，

       而Java语言是强类型语言，使用对象之前，必须有此对象

4.对象: (引用类型数据)

1:  Js对象的种类

        1：内置对象    2：自定义对象

2:  Js的内置对象解析

        1:   常见Js内置对象的种类: String/Array/Number/Math/JSON/window

        2:   内置对象window对象解析 

              1：window.onload()             在浏览器加载完整个html后立即执行!
              2：window.alert("text")                 提示信息会话框
              3：window.confirm("text")             确认会话框
              4：window.prompt("text")             键盘输入会话框
              5：window.event                        事件对象
              6：window.document                    文档对象（重点）

        3:   JavaScript语言的内置对象：文档对象

              1：document 对象的作用：Document对象–代表整个HTML文档，

                                                          可用来访问页面中的所有元素          

              2：document 对象的常用方法：

                      1：document.write() ：动态向页面写入内容，内容包括HTML表达式或JavaScript代                                                            码，在开发者模式的console控制台显示

                     2：document.getElementById(id) ：获得指定id值的元素，因为id值是一个，所以返                                                                                 回一个元素

                     3：document.getElementsByName(name) ：获得指定Name值的元素，因为同一个                             name属性值可以有多个元素，所以即便返回一个元素，也用数组存储，操作该                               数组的元素必须使用下标

                     4：document.getElementsByClassName("元素的class属性的值")：获得指定class                                属性值的元素，因为同一个class属性值可以有多个元素，所以即便返回一个元                                素，也用数组存储，操作该数组的元素必须使用下标

                     5：document. getElementsByTagName("元素的标签名的值")：获得指定标签名的元                              素，因为同一个标签名下可以多个元素，所以即便返回一个元素，也用数组存                                 储，操作该数组的元素必须使用下标

概念: 对象是一组属性和方法的集合,对象是具体到某一个的

 (1)JS的对象

  自定义对象：自己创建的对象

  内置对象：JS提供的对象

  宿主对象：根据不同的执行环境划分.浏览器环境的对象(dom),Node.J环境下的对象

 (2)自定义对象语法(花括号就是JS对象的标志)

 对象字面量方式: var a =  { 属性名: 属性值, 属性名: 属性值 }

        属性名的引号可加可不加，如果含有特殊字符必须添加

使用内置构造函数创建对象

new Object()   返回一个空对象，需要单独添加每一个属性

 var a =  new Object() a.属性名 = " ";

  构造函数：使用new来调用，返回对象

自定义构造函数创建对象

对象的数据类型是Object  typeof a

(3)对象调用属性(可以进行修改属性,展示属性)

  对象.属性名     //       对象['属性名']

   如果属性名不存在返回的结果是undefined

属性名存在默认值是什么

 (2)遍历属性

  通过循环的方式，依次访问对象中的每个属性

for(var k  in  对象){    k 代表每一个属性名    对象[k]   代表属性名对应的属性值 }

(4)检测对象中属性是否存在

  对象.属性名===undefined     true -> 不存在    false -> 存在

  对象.hasOwnProperty('属性名')    true ->存在   false->不存在

  '属性名'  in  对象     true ->存在   false->不存在

 (3)方法

  对应的是一个函数，需要调用

var person={   play: function(){      this  //指向调用方法的对象   } } person.play(); //调用方法

 

2.数据的存储

 原始类型：将数据执行保存到了栈内存

 引用类型：包括对象、函数、数组等都是引用类型数据，将数据保存在了堆内存中，同时会生成一个地址，然后将地址保存到了栈内存的变量中

基本类型的数据使用过以后会自动销毁

基本类型数据存储在栈内存

引用类型的数据存在堆内存中,若引用类型数据产生的地址值没有变量进行保存,则堆内存中的

引用类型数据会自动销毁

 引用类型数据的销毁：数据不被任何的地址所指向就会自动销毁；

null也是引用类型 ,数据类型是Object

 null 表示空地址，不指向任何的引用类型数据，只需要赋值为null即可销毁引用类型数据

3.数组 数组也是一个对象

JS数组解析目录

             1:  与Java数组相比,JS数组的特点

             2:  声明JS数组的语法

             3:  JS数组的遍历方式

1:  与Java数组相比,JS数组的特点

      1: JS数组可以存不同类型的数据, Java数组通常是用来存相同数据类型的数据

      2: JS数组数组的长度可变, java中数组一旦建立,长度不可变

      3: JS数组中的元素有下标, JS数组有好多方法

2:  声明JS数组的语法

        1:  声明JavaScript数组的两种方式

               1：var a = new Array(直接在小括号里添加数组数据);

               2：var  b = [直接在中括号里添加数组数据];

       2:   声明JS数组时添加数据, 数据类型可以是JS数据类型的基本数据类型与JS复杂数据类型

              数据个数任意

3:  JS数组的遍历方式

        1: JS数据遍历数据的两种方式: for循环 与 for in 循环

        2: JS数据for循环语法 :  与Java的for循环语法一致,使用下标进行遍历数组

        3: JS数组 for in 循环语法

                 for( var JS数组下标名称(自己定义)   in   JS数组名称   ){  JS的 for循环的方法体   }

                 例:    for (var i in b ) {
                                    console.log(b[i]);
                          }

                 注意:   console.log(b[i])：展示数组中的每个数据时, 必须是 数组名[下标] 的形式

 数组是一组数据的集合，每个数据称为元素

创建数组

(1)数组字面量

  [ 元素1, 元素2... ]

内置构造函数创建数组

  new Array(元素1, 元素2...)

  new Array(3)    创建一个数组，初始化长度，可以添加更多个元素

 (2)访问数组元素

  数组[下标]

  下标：自动为每个元素添加的编号，是0开始的整数

 (5)数组的分类

  数组分为索引数组和关联数组

  索引数组：以>=0的整数作为下标

  关联数组：以字符串作为下标，需要手动添加元素，是为了强调某一个元素。

 (3)数组的长度

  数组.length   获取数组元素的个数

  在数组的末尾添加新的元素    数组[ 数组.length ]=值

 (6)遍历数组

  依次访问对象中的每个元素

for in 遍历数组是从头到尾都遍历一次

for-in for(var k  in  数组){   k 代表下标   数组[k]  下标对应的元素 }

循环（推荐方法） for(var i=0;i<数组.length;i++){   i 代表下标   数组[i]  下标对应的元素 }

什么是冒泡排序?

数组中的数据从第一个与第二比较,数据大的排在第二位,第二位于第三位进行比较,大的排在第三位

依次进行比较,比较出最大的数据排在最后,此时最大的数据不参与第二轮的比较

每一轮比较出的最大数都不参与下一轮的比较

进行N轮的比较以后,数组中的数据会依次从小到大排序好

比较的轮数是数组长度 -1;

每一轮的比较都会比较出最大数

冒泡排序实质上就是循环嵌套,重点在循环条件

循环嵌套: 外循环控制内循环次数,内循环控制每一次循环次数

冒泡排序类似于倒九九乘法表的形状

1.数组API

 API：JS中预定义好的一些函数或者方法

 toString()   将数组转为字符串，元素之间用逗号隔开

 join()   将数组转为字符串，可以指定元素之间的分隔符

 concat(arr2,arr3...)   依次拼接多个数组，arr2,arr3表示要拼接的数组

如何学习API：作用、有哪些参数、返回结果 针对于数组：查看原数组是否会发生变化

 slice(start, end)   截取数组元素，start开始的下标，end结束的下标，不包括end本身，end为空截取到最后，下标为负数表示倒数，返回截取到的元素。

 splice(start, count, v1,v2)   删除数组元素，start开始的下标，count删除的长度，count为空删除到最后，下标为负数表示倒数，v1，v2表示删除后补充的元素，返回删除的元素，原数组会发生变化。

 reverse()   将原数组的元素中的顺序翻转

 sort()   对数组进行排序，默认是按照首个字符的Unicode码排列

sort( function(a,b){   return a-b; //按照数字从小到大   //return b-a; //按照数字从大到小 } )

 push()   在数据的末尾添加元素，返回数组的长度

 pop()   删除数组末尾的一个元素，返回删除的元素

 unshift()   在数据的开头添加元素，返回数组的长度

 shift()   删除数组开头的一个元素，返回删除的元素

 indexOf()   查看数组中是否含有某个元素，返回下标，如果找不到返回-1

API查询地址

权威MDN网址: JavaScript | MDN

或者W3Cschool

2.二维数组

 [ [ 元素1, 元素2 ], [元素3, 元素4]  ]

数组中的元素是数组

 访问二维数组

   数组[下标][下标]

3.字符串对象

 包装对象：为了让原始类型的数据像引用类型的数据一样，具有属性和方法。

 JS中提供了3种包装对象：字符串对象、数值对象、布尔对象

基本数据类型的字符串调用属性方法时,基本数据类型会进行自动转化为字符串对象,

然后调用属性和方法

创建字符串对象

 new String(' 数据 ')   将任意的数据转为字符串，返回对象

 String(' 数据 ')   将任意的数据转为字符串，返回字符串

 (1)转义字符  —— \

  \'    将具有特殊意义的引号转为普通的引号

  \t    将字符t转义为制表符(多个连续的空格，tab键)

  \n    将字符n转义为换行符

  \\    只会显示一个:使用在磁盘路径

  练习：打印出以下字符串  

      'C:\Users\web'

 (2)API

  length   获取字符串的长度

  charAt(下标)    获取下标对应的字符，也可以使用数组的写法   字符串[下标]

  indexOf()   查找字符串中是否含有某个字符串，返回满足条件的第一个的下标，找不到返回-1

  lastIndexOf()   查找字符串中是否含有某个字符串，返回满足条件的最后一个的下标，找不到返回-1

  toUpperCase()  英文字母转大写

  toLowerCase()  英文字母转小写

所有的字符串对象下的API都不会对原来的字符串产生任何影响，会生成一个新的字符串

  slice(start, end)   截取字符串，start开始的下标，end结束的下标，不包括end本身，end为空截取到最后，如果下标为负数表示倒数

  substr(start,count)  截取字符串，start开始的下标，count截取的长度，count为空截取到最后，下标为负数表示倒数

  split()    将字符串转为数组

     

1.Math对象:  不需要创建可以直接使用API

 PI   圆周率

 abs()   获取绝对值

 ceil()  向上取整

 floor()  向下取整

 round()  四舍五入取整

 pow(x,y)   次方/次幂

 max()  获取一组数字最大值

 min()  获取一组数字最小值

 random()   获取随机   >=0   <1

2.Date对象

 用于日期时间的存储和计算

 (1)创建

  new Date('2021/8/17 11:44:30')

存储时间就是指定时间,但是打印的时间是格林威治(0时区)的时间

  new Date(2021,7,17,11,44,30)   //月份范围0~11代表1~12月

  new Date()    存储的是当前操作系统的时间

  new Date(1683036000000)   存储的是距离计算机元年(1970-1-1 0:0:0 0)的毫秒数

 (2)获取

  getFullYear()/getMonth()/getDate()

      月份的范围是0~11，代表1~12月

  getHours()/getMinutes()/getSeconds()/getMilliseconds()  获取毫秒

  getDay()    获取星期  0~6  对应 星期日~星期六

  getTime()   获取距离计算机元年的毫秒数

 (3)转为本地字符串(以下方法)

  存在兼容性问题，只能用于调试,不能用于实际项目开发

  toLocaleString()    //'2021-8-17  15:28:30'

  toLocaleDateString()    //'2021-8-17'

  toLocaleTimeString()    //'15:28:30'

 (4)设置

  setFullYear()/setMonth()/setDate()

  setHours()/setMinutes()/setSeconds()/setMilliseconds()

  setTime()  设置距离计算机元年毫秒数，会产生一个具体的日期时间

3.Number对象

  包装对象

  new Number()   将数据转为数值，返回对象  

  Number()   将数据转为数值，返回是数值

   toFixed(n)   保留小数点后n位

   toString()   将数值转为字符串

4.Boolean对象

 new Boolean()  将数据转为布尔型，返回对象

 Boolean()  将数据转为布尔型，返回布尔型

 !!数据    将数据隐式转换为布尔型

5.错误处理

 (1)常见的错误

  语法错误(SyntaxError)：不符合语法规范，例如出现中文字符，缺少一半括号

  引用错误(ReferenceError)：使用了未声明的变量

  类型错误(TypeError)：要调用的函数不是一个函数类型

  范围错误(RangeError)：超出了范围，例如递归无法结束..

  自定义错误：程序员自己指定的错误    

                  throw   错误内容

 (2)错误处理

  出现错误后，不再影响后续代码的执行

try{   尝试执行，可能产生错误，即使出现错误，也不影响后续代码执行 }catch(err){   一旦try出现错误才会执行，将错误保存在err中   执行错误处理的代码 }

JavaScript技术中常见事件

         1：单击事件 onclick = alert(n)，

                 alert：是指弹框的意思

                 n：是指单击指定标签 标记的数据后 弹出的数据，数据类型可以为 number

         2：双击事件 ondblclick =  prompt（）；

                 prompt：是指浏览器输入框的意思

                 触发该事件，会在浏览器上弹出   数据输入框

                  例：var a = prompt("请输入年份");小括号里内容是数据输入框的提示信息

         3：鼠标划入事件  onmouseenter =  confirm（）

                 confirm：在浏览器中弹出确认框

                 confirm（）确认框

                 触发该事件，会在浏览器上弹出   确认框

         4：鼠标划出事件 onmouseleave =  alert(n)