JavaScript基础知识点参考pink老师ppt

- 日理万妓 2021-05-16 20:36 278阅读 0赞

### JavaScript基础 ###

*  JavaScript 是什么？
 *   *  js的组成
     *  DOM ——文档对象模型
     *  BOM ——浏览器对象模型
     *  js里的注释
     *  JavaScript 输入输出语句
 *  变量
 *   *  var关键字
     *  声明多个变量
     *  js命名规则
     *   *  关键字
         *  保留字
     *  变量的数据类型
     *   *  JS 把数据类型分为两类
         *  数字型 Number
         *   *  数字型进制
             *  数字型范围
             *  数字型三个特殊值
         *  字符串型 String
         *   *  转义字符
             *  字符串长度
         *  字符串拼接
         *  布尔型 Boolean
         *  Undefined 和 Null
         *  typeof 可用来获取检测变量的数据类型
         *   *  转换为字符串
             *  转换为数字型
         *  转换为布尔型
         *  运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
         *   *  递增和递减运算符概述
             *  比较运算符
             *  逻辑运算符
             *  赋值运算符
             *  运算符的优先级
         *  数组
         *   *  利用 new 创建数组
             *  利用数组字面量创建数组
             *  数组中的类型
             *  数组的长度
             *  通过长度新增数组元素
         *  函数
         *   *  参数的作用
             *  return 终止函数
             *  break ,continue ,return 的区别
             *  arguments
             *  自定义函数方式(命名函数)
             *  函数表达式方式(匿名函数）
         *  作用域
         *   *  全局变量
             *  局部变量
             *  预解析
         *  对象
         *   *  创建对象的三种方法
             *  对象字面量
             *  利用字面量创建对象
             *  对象的方法属性的调用
             *  利用new Object创建对象
             *  利用构造函数创建对象
             *  注意
             *  new关键字
             *  对象的遍历
         *  内置对象
         *   *  Math
             *  Date
             *   *  日期格式化
                 *  获取日期的总的毫秒形式
                 *  倒计时
             *  创建数组对象的两种方式
             *  检测是否为数组 instanceof
             *   *  添加删除数组元素的方法
                 *  数组索引方法
             *  数组转换为字符串
             *  字符串的不可变

# JavaScript 是什么？ #

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）
    
    脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
    
    现在也可以基于 Node.js 技术进行服务器端编程
    
    浏览器分成两部分：渲染引擎和 JS 引擎
    渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
     
     JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome  浏览器的 V8
     
    浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。
    
    JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

## js的组成 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 1]

## DOM ——文档对象模型 ##

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。
    通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

## BOM ——浏览器对象模型 ##

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，
    它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等
    
    JS 有3种书写位置，分别为行内、内嵌和外部。

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
    
    注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
    可读性差， 在html中编写JS大量代码时，不方便阅读；
    引号易错，引号多层嵌套匹配时，非常容易弄混；
    特殊情况下使用

可以将多行JS代码写到

利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
    引用外部 JS文件的 script 标签中间不可以写代码
    适合于JS 代码量比较大的情况

## js里的注释 ##

js里的单行注释     //
    
    js里的多行注释    
     /* */

## JavaScript 输入输出语句 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 2]

# 变量 #

变量在使用时分为两步：  
1. 声明变量  
2. 赋值

// 声明变量 
    var age; // 声明一个 名称为age 的变量

## var关键字 ##

var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
    
    age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

age = 10; // 给 age 这个变量赋值为 10

= 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思  
变量值是程序员保存到变量空间里的值

## 声明多个变量 ##

同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。

var age = 10,  name = 'zs', sex = 2;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 3]

## js命名规则 ##

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
    严格区分大小写。var app; 和 var App; 是两个变量
    不能 以数字开头。  
    不能 是关键字、保留字
    变量名必须有意义。
    遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

### 关键字 ###

关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。
    包括：
    break、case、catch、continue、default、delete、do、else、finally、
    for、function、if、in、instanceof、new、return、switch、this、
    throw、try、typeof、var、void、while、with 等。

### 保留字 ###

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
    
    包括：boolean、byte、char、class、const、debugger、double、enum、
    export、extends、fimal、float、goto、implements、import、int、
    interface、long、mative、package、private、protected、public、
    short、static、super、synchronized、throws、transient、volatile等

**注意**：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

## 变量的数据类型 ##

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
    
    JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
    
    在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。
    
    JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

### JS 把数据类型分为两类 ###

简单数据类型 （Number,String,Boolean,Undefined,Null）
     
     复杂数据类型 （object)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 4]

### 数字型 Number ###

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

var age = 21;       // 整数
    var Age = 21.3747;  // 小数

#### 数字型进制 ####

最常见的进制有二进制、八进制、十进制、十六进制。

// 1.八进制数字序列范围：0~7
     var num1 = 07;   // 对应十进制的7
     var num2 = 019;  // 对应十进制的19
     var num3 = 08;   // 对应十进制的8
      // 2.十六进制数字序列范围：0~9以及A~F
     var num = 0xA;

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

#### 数字型范围 ####

JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
    alert(Number.MIN_VALUE); // 5e-324

最大值：Number.MAX\_VALUE，这个值为： 1.7976931348623157e+308

最小值：Number.MIN\_VALUE，这个值为：5e-32

#### 数字型三个特殊值 ####

alert(Infinity);  // Infinity
    alert(-Infinity); // -Infinity
    alert(NaN);       // NaN

Infinity ，代表无穷大，大于任何数值
    
    -Infinity ，代表无穷小，小于任何数值
    
    NaN ，Not a number，代表一个非数值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 5]

### 字符串型 String ###

字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号''
    
    因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号  
    字符串引号嵌套
    
    JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
    var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
    // 常见错误
    var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

#### 转义字符 ####

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。  
转义符都是 \\ 开头的，常用的转义符及其说明如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 6]

#### 字符串长度 ####

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

var strMsg = "我是帅气多金的程序猿！";
    alert(strMsg.length); // 显示 11

### 字符串拼接 ###

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
    
     拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1 字符串 "相加"
    alert('hello' + ' ' + 'world'); // hello world
    //1.2 数值字符串 "相加"
    alert('100' + '100'); // 100100
    //1.3 数值字符串 + 数值
    alert('11' + 12);     // 1112

*  号总结口诀：数值相加 ，字符相连

### 布尔型 Boolean ###

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
    
    布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1);  // 2
    console.log(false + 1); // 1

### Undefined 和 Null ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 7]

### typeof 可用来获取检测变量的数据类型 ###

var num = 18;
    console.log(typeof num) // 结果 number

![在这里插入图片描述][20200711122016912.png]

#### 转换为字符串 ####

![在这里插入图片描述][20200711122101150.png]  
toString() 和 String() 使用方式不一样。  
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。

#### 转换为数字型 ####

![在这里插入图片描述][20200711122247411.png]  
注意 parseInt 和 parseFloat 单词的大小写，这2个是重点  
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

### 转换为布尔型 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 8]

### 运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 9]

#### 递增和递减运算符概述 ####

++和-- 既可以放在变量的后边，也可以放在变量的前边。
    
    单独使用的时候， ++和-- 无论是放在变量的前边还是后边，结果是一样的。 参与操作的时候，如果放在变量的后边，
    
    先拿变量参与操作，后拿变量做++或者--。 参与操作的时候，如果放在变量的前边，先拿变量做++或者--，后拿变量参与操作
    
    ++num 前置递增，就是自加1，类似于 num =  num + 1，但是 ++num 写起来更简单。
    使用口诀：先自加，后返回值

var  num = 10;
    alert(++num + 10);   // 21

num++ 后置递增，就是自加1，类似于 num =  num + 1 ，但是 num++ 写起来更简单。
    
    使用口诀：先返回原值，后自加

var  num = 10;
    alert(10 + num++);  // 20

#### 比较运算符 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 11]

#### 逻辑运算符 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 12]

&    不管前面是不是false都会执行后面
     &&   如果前面是false就不会再执行后面的
    逻辑与&，无论左边真假，右边都要执行。 
    短路与&&，如果左边为真，右边执行；如果左边为假，右边不执行。 
    逻辑或|，无论左边真假，右边都要执行。 
    短路或||，如果左边为假，右边执行；如果左边为真，右边不执行

#### 赋值运算符 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 13]

#### 运算符的优先级 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 14]  
一元运算符里面的逻辑非优先级很高  
逻辑与比逻辑或优先级高

### 数组 ###

#### 利用 new 创建数组 ####

var 数组名 = new Array() ；
    var arr = new Array();   // 创建一个新的空数组

#### 利用数组字面量创建数组 ####

//1. 使用数组字面量方式创建空的数组
    var  数组名 = []；
    //2. 使用数组字面量方式创建带初始值的数组
    var  数组名 = ['小白','小黑','大黄','瑞奇'];

#### 数组中的类型 ####

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等

var arrStus = ['小白',12,true,28.9];

#### 数组的长度 ####

使用“数组名.length”可以访问数组元素的数量（数组长度）

var arrStus = [1,2,3];
    alert(arrStus.length);  // 3

此处数组的长度是数组元素的个数 ，不要和数组的索引号混淆。  
当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化

#### 通过长度新增数组元素 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 15]  
**注意**：  
可以通过修改数组索引的方式追加数组元素  
不能直接给数组名赋值，否则会覆盖掉以前的数据

### 函数 ###

**函数**：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。  
函数在使用时分为两步：声明函数和调用函数。

// 声明函数
    function 函数名() { 
        //函数体代码
    }

function 是声明函数的关键字,必须小写  
由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum

![在这里插入图片描述][20200711213017803.png]

#### 参数的作用 ####

在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

// 带参数的函数声明
    function 函数名(形参1, 形参2 , 形参3...) {  // 可以定义任意多的参数，用逗号分隔
      // 函数体
    }
    // 带参数的函数调用
    函数名(实参1, 实参2, 实参3...);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 16]

在JavaScript中，形参的默认值是undefined。
    
    函数可以带参数也可以不带参数
     声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
     调用函数的时候，函数名括号里面的是实参
     
     多个参数中间用逗号分隔
     
     形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配
    没有java里面的方法的重载，一样的方法名后面会覆盖前面的方法

// 声明函数
    function 函数名（）{ 
        ...
        return  需要返回的值；
    }
    // 调用函数
    函数名();    // 此时调用函数就可以得到函数体内return 后面的值

在使用 return 语句时，函数会停止执行，并返回指定的值  
如果函数没有 return ，返回的值是 undefined

#### return 终止函数 ####

function add(num1，num2){ 
        //函数体
        return num1 + num2; // 注意：return 后的代码不执行
        alert('我不会被执行，因为前面有 return');
    }
    var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
    alert(resNum);

return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准

function add(num1，num2){ 
        //函数体
        return num1，num2;
    }
    var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
    alert(resNum);          // 6

函数都是有返回值的
    如果有return 则返回 return 后面的值
    如果没有return 则返回 undefined

#### break ,continue ,return 的区别 ####

break ：结束当前的循环体（如 for、while）
    
    continue ：跳出本次循环，继续执行下次循环（如 for、while）
    
    return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
    
    当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

#### arguments ####

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
    
    具有 length 属性
    按索引方式储存数据
    不具有数组的 push , pop 等方法

#### 自定义函数方式(命名函数) ####

// 声明定义方式
    function fn() { ...}
    // 调用 
    fn();

因为有名字，所以也被称为命名函数  
调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

#### 函数表达式方式(匿名函数） ####

// 这是函数表达式写法，匿名函数后面跟分号结束
    var fn = function(){ ...}；
    // 调用的方式，函数调用必须写到函数体下面
    fn();

因为函数没有名字，所以也被称为匿名函数
     这个fn 里面存储的是一个函数  
     函数表达式方式原理跟声明变量方式是一致的
     函数调用的代码必须写到函数体后面

### 作用域 ###

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突
    
    JavaScript（es6前）中的作用域有两种：
    全局作用域
    局部作用域（函数作用域）
    
    在JavaScript中，根据作用域的不同，变量可以分为两种：
    全局变量
    局部变量

#### 全局变量 ####

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。
    
    全局变量在代码的任何位置都可以使用
    
    在全局作用域下 var 声明的变量 是全局变量
    
    特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用

#### 局部变量 ####

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
    
    局部变量只能在该函数内部使用
    
    在函数内部 var 声明的变量是局部变量
    
    函数的形参实际上就是局部变量

全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
    
    局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间
    
     只要是代码，就至少有一个作用域
     
    写在函数内部的局部作用域
    
     如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
     根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

#### 预解析 ####

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。
    
    预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
    
    代码执行： 从上到下执行JS语句。
    预解析只会发生在通过 var 定义的变量和 function 上。
    
    预解析也叫做变量、函数提升。
    变量提升： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

console.log(num);  // 结果是 undefined
         var num = 10;      // 
    ------------------------------
    //相当于
     var num;
     console.log(num); //定义了没赋值所以是undefined
     num=10；

函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

fn();
    function fn() { 
        console.log('打印');
    }
    ----------------------------
    //相当于
    function fn() { 
        console.log('打印');
    }
    fn();

// 案例1
          var num = 10;
          fun();
          function fun() { 
            console.log(num);
            var num = 20;
          }
          --------------------------
          //相当于
          var num;//全局变量
          function fun() { 
            var num;//局部变量
            console.log(num);//定义了没赋值所以是undefined
             num = 20;
          }
          num = 10;
          fun();

// 案例2
          var num = 10;
          function fn() { 
            console.log(num);
            var num = 20;
            console.log(num);
          }
          fn();
          ------------------------------
          //相当于
          var num;//全局变量
          function fn() { 
            var num ;//局部变量
            console.log(num); //定义了没赋值所以结果是undefined
             num = 20;
            console.log(num);//结果是20
          }

// 案例3
    var a = 18;
    f1();
    function f1() { 
      var b = 9;
      console.log(a);
      console.log(b);
      var a = '123';
    }
    ----------------------------
      //相当于
      var a;//全局变量
      function f1() { 
      var b ;
      var a ;//局部变量
      b = 9;
      console.log(a);//定义了没赋值所以结果是undefined
      console.log(b);//输出9
       a = '123';
    }
      f1();

// 案例4
    f1();
    console.log(c);
    console.log(b);
    console.log(a);
    function f1() { 
      var a = b = c = 9;
      console.log(a);
      console.log(b);
      console.log(c);
    }
    //相当于
    function f1() { 
      var a = b = c = 9;
      //var a = b = c = 9等价于 var a=9,b=9,c=9;
      //b和c只赋值没声明所以两个是全局变量
      console.log(a);//结果为9
      console.log(b);//结果为9
      console.log(c);//结果为9
    }
    f1();
    console.log(c);//结果为9
    console.log(b);//结果为9
    console.log(a);//报错，没有这个变量

### 对象 ###

对象是由属性和方法组成的。
    
    属性：事物的特征，在对象中用属性来表示（常用名词）
    方法：事物的行为，在对象中用方法来表示（常用动词）

#### 创建对象的三种方法 ####

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：
    利用字面量创建对象 
    
    利用 new Object 创建对象 
    
    利用构造函数创建对象

#### 对象字面量 ####

对象字面量：就是花括号 {  } 里面包含了表达这个具体事物（对象）的属性和方法。
    
    {  } 里面采取键值对的形式表示 
    
     键：相当于属性名
     值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

#### 利用字面量创建对象 ####

var star = { 
        name : 'dyk',
        age : 18,
        sex : '男',
        sayHi : function(){ 
            alert('大家好啊~');
        }
    };

#### 对象的方法属性的调用 ####

对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ” 
     
    对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
          
    对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

console.log(star.name)     // 调用名字属性
    console.log(star['name'])  // 调用名字属性
    star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

#### 利用new Object创建对象 ####

var andy = new Obect();
    andy.name = 'dyk';
    andy.age = 18;
    andy.sex = '男';
    andy.sayHi = function(){ 
        alert('大家好啊~');
    }

**注意**：  
Object() ：第一个字母大写  
new Object() ：需要 new 关键字  
使用的格式：对象.属性 = 值;

#### 利用构造函数创建对象 ####

构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
    
    在 js 中，使用构造函数要时要注意以下两点：
    
    构造函数用于创建某一类对象，其首字母要大写
    
    构造函数要和 new 一起使用才有意义

function Person(name, age, sex) { 
         this.name = name;
         this.age = age;
         this.sex = sex;
         this.sayHi = function() { 
          alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
        }
    }
    
    var bigbai = new Person('大白', 100, '男');
    var smallbai = new Person('小白', 21, '男');
    console.log(bigbai.name);
    console.log(smallbai.name);

#### 注意 ####

1.   构造函数约定首字母大写。
    2.   函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
    3.   构造函数中不需要 return 返回结果。
    4.   当我们创建对象的时候，必须用 new 来调用构造函数。

#### new关键字 ####

new 在执行时会做四件事情：
      
    在内存中创建一个新的空对象。
    让 this 指向这个新的对象。
    执行构造函数里面的代码，给这个新对象添加属性和方法。
     返回这个新对象（所以构造函数里面不需要return）

#### 对象的遍历 ####

for…in 语句用于对数组或者对象的属性进行循环操作

for (变量 in 对象名字) { 
        // 在此执行代码
    }

for (var k in obj) { 
        console.log(k);      // 这里的 k 是属性名
        console.log(obj[k]); // 这里的 obj[k] 是属性值
    }

### 内置对象 ###

JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
    前面两种对象是JS 基础 内容，属于 ECMAScript；  第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解
    
     内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
    内置对象最大的优点就是帮助我们快速开发
    
     JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

#### Math ####

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员
    Math.PI		 // 圆周率
    Math.floor() 	 // 向下取整
    Math.ceil()            // 向上取整
    Math.round()           // 四舍五入版 就近取整 注意 -3.5 结果是 -3 如果是.5会向大的取
    Math.abs()		 // 绝对值
    Math.max()/Math.min()	 // 求最大和最小值 
    
    随机数方法 random()
    random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1 
    
    得到一个两数之间的随机整数，包括两个数在内

function getRandom(min, max) { 
      return Math.floor(Math.random() * (max - min + 1)) + min; 
    }

#### Date ####

Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
    Date 实例用来处理日期和时间
     
      获取当前时间必须实例化
    var now = new Date();
    console.log(now);
    
     Date() 构造函数的参数
    如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date('2019-5-1')  或者 new Date('2019/5/1')
    如果Date()不写参数，就返回当前时间
    如果Date()里面写参数，就返回括号里面输入的时间

##### 日期格式化 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 17]

##### 获取日期的总的毫秒形式 #####

Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数  
为什么计算机起始时间从1970年开始?  
我们经常利用总的毫秒数来计算时间，因为它更精确

// 实例化Date对象
    var now = new Date();
    // 1. 用于获取对象的原始值
    console.log(date.valueOf())	
    console.log(date.getTime())	
    // 2. 简单写可以这么做
    var now = + new Date();			
    // 3. HTML5中提供的方法，有兼容性问题
    var now = Date.now();

##### 倒计时 #####

核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
    用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
    把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
    
    转换公式如下： 
     d = parseInt(总秒数/ 60/60 /24);    // 计算天数
     h = parseInt(总秒数/ 60/60 %24)   // 计算小时
     m = parseInt(总秒数 /60 %60 );     // 计算分数
     s = parseInt(总秒数%60);               // 计算当前秒数

#### 创建数组对象的两种方式 ####

字面量方式  
new Array()

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
          <script>
              //创建数组的两种方式
              //1.字面量创建数组
              var arr1=[1,2,3];
              //2.用new Array
              var arr2=new Array();//创建一个空的数组
              var arr3=new Array(2);//创建一个长度为2的数组，里面有两个空的数组元素
              var arr4=new Array(3,4); //等价于[3,4] ,有两个数组元素3,4
          </script>
          
    </body>
    </html>

#### 检测是否为数组 instanceof ####

instanceof 运算符，可以判断一个对象是否属于某种类型  
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];//数组
    var obj = { };//对象
    console.log(arr instanceof Array); // true
    console.log(obj instanceof Array); // false
    console.log(Array.isArray(arr));   // true
    console.log(Array.isArray(obj));   // false

##### 添加删除数组元素的方法 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 18]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
      </head>
      <body>
        <script>
          // 添加删除数组元素方法
          // 1. push() 在我们数组的末尾 添加一个或者多个数组元素
          var arr = [1, 2, 3];
          arr.push(4, 5);
          console.log(arr); //1,2,3,4,5
          console.log(arr.push(6, 7));//7
          // (1) push 是可以给数组追加新的元素
            // (2) push() 参数直接写数组元素就可以了
            // (3) push完毕之后，返回的结果是 新数组的长度 
            // (4) 原数组也会发生变化
    
        // 2. unshift 在我们数组的开头 添加一个或者多个数组元素
        arr.unshift(1,2);
        console.log(arr);//1,2,1,2,3,4,5,6,7
         // (1) unshift是可以给数组前面追加新的元素
            // (2) unshift() 参数直接写数组元素就可以了
            // (3) unshift完毕之后，返回的结果是 新数组的长度 
            // (4) 原数组也会发生变化
    
    
          // 3. pop() 它可以删除数组的最后一个元素 
          arr.pop();
          console.log(arr);//1,2,1,2,3,4,5,6
          console.log(arr.pop());//6
           // (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
            // (2) pop() 没有参数
            // (3) pop完毕之后，返回的结果是 删除的那个元素 
            // (4) 原数组也会发生变化
    
             // 4. shift() 它可以删除数组的第一个元素 
    
           arr.shift();
           console.log(arr);//2,1,2,3,4,5
           console.log(arr.shift());//2
         // (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
            // (2) shift() 没有参数
            // (3) shift完毕之后，返回的结果是 删除的那个元素 
            // (4) 原数组也会发生变化
    
    
            // 总结删除返回的是删除的元素，添加返回的是数组的长度
        </script>
      </body>
    </html>

![在这里插入图片描述][20200725172714416.png]  
（注意光写sort不会像java或c++那样排序）

var array=new Array(1,13,7,77,5);
          array.sort();
     console.log(array);
     //结果为[1, 13, 5, 7, 77]，他会把第一个数字相同的排在一起
     ------------------------
      var array = new Array(1, 13, 7, 77, 5);
          array.sort(function (a, b) { 
            return a - b;//a-b是从小到大排，b-a是从大到小排
          });
          console.log(array);

##### 数组索引方法 #####

![在这里插入图片描述][20200725173502183.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            // indexOf(数组元素) 返回该数组元素索引号 从前面开始查找
    		var arr = ['red',  'blue', 'green', 'blue','red'];
    		console.log(arr.indexOf('blue'));//1
           
            console.log(arr.indexOf('black'));//-1
            //indexOf(数组元素)总结：
            // 它只返回第一个满足条件的索引号 
            // 它如果在该数组里面找不到元素，则返回的是 -1 
    
            // lastIndexOf(数组元素) 返回该数组元素的索引号 从后面开始查找
            console.log(arr.lastIndexOf('red'));//4
            console.log(arr.indexOf('black'));//-1
        </script>
    </body>
    </html>

#### 数组转换为字符串 ####

![在这里插入图片描述][2020072517354531.png]  
![在这里插入图片描述][20200725173723397.png]

#### 字符串的不可变 ####

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
    
    当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
    
    重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
    由于字符串的不可变，在大量拼接字符串的时候会有效率问题

![在这里插入图片描述][20200725174036891.png]  
![在这里插入图片描述][20200725174102946.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 19]  
replace(被替换的字符串， 要替换为的字符串)；

replace(被替换的字符串， 要替换为的字符串)；

split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组

var str = 'a,b,c,d';
    console.log(str.split(','));   // 返回的是一个数组 [a, b, c, d]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70]: /images/20210516/cb41d80567934bb68921e1bb4861989b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 1]: /images/20210516/187ebf8d60da47a2ad69edea844dd0ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 2]: /images/20210516/707a38046d2949ed9b8758cfdc2c2e66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 3]: /images/20210516/36ab3281ce1a4731b886a73149fe4479.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 4]: /images/20210516/fa4344f4357f449ca522dcd95a4efc6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 5]: /images/20210516/6b3d595ee6584efbb76ffca5f6b812cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 6]: /images/20210516/7c2c56235dd4405b8dca249e7fc4f921.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 7]: /images/20210516/c2ea05344bed4c2b9c8ed7b5562481dd.png
[20200711122016912.png]: /images/20210516/f5473f3a0632463c870f21ef87041ec2.png
[20200711122101150.png]: /images/20210516/9bfe766eb44244128f2ce8c7b7bb1418.png
[20200711122247411.png]: /images/20210516/fe893299feef4e10951ba85eddd72c2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 8]: /images/20210516/e35d84b9a3de408ebd60bb6431e3e0cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 9]: /images/20210516/e1a66b1accf94f4c9cd261a51600b085.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 10]: /images/20210516/6703be132d6341f681e4568b1b918e78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 11]: /images/20210516/fbfefc1898194527828f1b7a1e849846.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 12]: /images/20210516/fbd64cf2f9e94a19b12eba130be8dfaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 13]: /images/20210516/afb4e057920d432bb249dfcd41173f67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 14]: /images/20210516/823dd48b5a9648df9428595a69e5f3a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 15]: /images/20210516/8407a52a3ac64fcf82cca93c69f78143.png
[20200711213017803.png]: /images/20210516/f7c0b219c0cc4fed965e28a748c5d3d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 16]: /images/20210516/d82f615717374c21aa89632ce49135e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 17]: /images/20210516/30d850d8bfd64ff6a627d6e924d75920.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 18]: /images/20210516/991e13ebcb9c49098e14f9ce7ab74b17.png
[20200725172714416.png]: /images/20210516/e550a121d91d4db6b61e37a8115422bb.png
[20200725173502183.png]: /images/20210516/418742b74a94475983755fbc45a63104.png
[2020072517354531.png]: /images/20210516/d57530ba1bf34851b03fc4dfab60da0a.png
[20200725173723397.png]: /images/20210516/f80308a44e184bc2ae0796bc08de880b.png
[20200725174036891.png]: /images/20210516/bc870f240c6744239f61e47613b92463.png
[20200725174102946.png]: /images/20210516/472e91a70df1449b90b6bdcb8da4a782.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODY2MTUz_size_16_color_FFFFFF_t_70 19]: /images/20210516/e32b95843b634775bcbb4ee278b171e8.png