前端js基础知识点总结

JavaScript

1 初识JavaScript

1.1 JavaScript 是什么

 

JavaScript 是一种 弱类型的（返回值 等没有严格的规范） 多范式的（同时具有面向对象和面向过程的思想） 解释性语言（代码写一行，编译一行）

刚开始就是一个 仅仅作为浏览器使用的 一门脚本语言 随着js越来越流行很多大型公司也开始

使用javaScript开始编程

 

• JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）

• 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行

• 现在也可以基于 Node.js 技术进行服务器端编程

1.2 JavaScript的作用

• 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）

• 网页特效

• 服务端开发(Node.js)

• 桌面程序(Electron)

• App(Cordova)

• 控制硬件-物联网(Ruff)

• 游戏开发(cocos2d-js)

1.3 JavaScript和HTML css的关系

1. html 元素容器（网页有什么 相当于的的骨骼）

2. css 元素样式 （外观 相当于人的血肉）

3. JavaScript 交互逻辑 （相当于人的行为）

   js可以控制1 和 2

   

 

1.4 JavaScript的组成

1. ecmasScript 现在用的e6

网景公司开发的 后来交给 一个欧洲的计算机协会 我们一般不叫他EcmasScript 习惯上叫做JavaScript

ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

更多参看MDN: MDN手册

2. DOM——文档对象模型

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

3. BOM——浏览器对象模型

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

2 js的书写位置

JS 有3种书写位置，分别为行内、内嵌和外部。

1. 行内式

   <input type="button" value="点我试试" onclick="alert('Hello World')" />

   • 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick

   • 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

   • 可读性差， 在html中编写JS大量代码时，不方便阅读；

   • 引号易错，引号多层嵌套匹配时，非常容易弄混；

   • 特殊情况下使用

2. 内嵌式

   <script>
       alert('Hello  World~!');
   </script>

   • 可以将多行JS代码写到 script 标签中

   • 内嵌 JS 是学习时常用的方式

3. 外部JS文件

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

   • 有利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用

   • 引用外部 JS文件的 script 标签中间不可以写代码

   • 适合于JS 代码量比较大的情况

 

3 - JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器
confirm(msg)	询问框，(该弹框带有确定和取消按钮)	浏览器

• 注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

4-变量

4.1 什么是变量

什么是变量，从字面意思来讲，变量就是可变的量；

从编程角度来讲，变量是用来存储某种/某些数值的存储器，

举例: 2个盒子，为区分它们，其中一个用box1表示，另外一个用box2，当然你也可以用任意的名称来区分，这个box1就是盒子名字也就是所谓变量的名字。

 

4.3 变量的声明

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

• var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

• age 是程序员定义的变量名 ，我们要通过变量名来访问内存中分配的空间

• 同时声明多个变量

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

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

• 声明变量特殊情况

  情况	说明	结果
  var age ; console.log (age);	只声明 不赋值	undefined
  console.log(age)	不声明 不赋值 直接使用	报错
  age = 10; console.log (age);	不声明 只赋值	10
  该变量不存在，使用了	空对象，不存在	null

 

4.4 变量的赋值

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

• = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思

• 变量值是程序员保存到变量空间里的值

 

4.7变量的命名规范

• ==首字符只能是字母、下划线、$符号、其他字符由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name==

• 严格区分大小写。var app; 和 var App; 是两个变量

• ==不能使用 关键字(如：var if else for) 和保留字(系统现在还没有开始使用 以后可能会用)==

• 最长变量名 不要超过 255个字符

• 建议不要使用aa bb cc等语义等比较模糊的变量名

• ==最好使用小驼峰命名法 xxxYyyZzzz 开始单词首字母小写 第二个单词首字母大写 以后每个首字母都是大写==

4.8 变量的作用域及生命周期

直接在 script标签中定义的变量 叫做全局变量 可以在任何地方使用 持久保存（全局变量网页关闭后销毁）

在函数内部定义的变量 叫做局部变量 只能在当前函数内部使用 在函数执行结束后 局部变量会被浏览器回收

 

 

 

5 - 数据类型

 

5.1 数据类型简介

• 为什么需要数据类型

  在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。 简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

• 变量的数据类型

  变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：

  var age = 10;        // 这是一个数字型
  var areYouOk = '是的';   // 这是一个字符串     

  在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

  var x = 6;           // x 为数字
  var x = "Bill";      // x 为字符串    

• 数据类型的分类

  JS 把数据类型分为两类：

  • 简单数据类型 （Number,String,Boolean,Undefined,Null）

  • 复杂数据类型 （object)

5.2 简单数据类型

简单数据类型（基本数据类型） 存储在栈中

JavaScript 中的简单数据类型及其说明如下：

简易数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21,0.21	0
Boolean	布尔值类型,如：true、false,等价于1和0	false
String	字符串类型,如："张三" 注意js里面，字符串都带引号	""
Undefind	var a; 声明变量a 但是没有赋值，此时a=undefind	undefind
Null	var a=null ; 声明了变量a 为空值	null

 

• 数字型 Number

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

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

  1. 数字型进制

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

       // 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

  2. 数字型范围

     JavaScript中数值的最大和最小值

     • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

     • 最小值：Number.MIN_VALUE，这个值为：5e-32

3. 数字型三个特殊值

   • Infinity ，代表无穷大，大于任何数值

   • -Infinity ，代表无穷小，小于任何数值

   • NaN ，Not a number，代表一个非数值

4. isNaN

   用来判断一个变量是否为非数字的类型，返回 true 或者 false

     var usrAge = 21;
   var isOk = isNaN(userAge);
     console.log(isNum);          // false ，21 不是一个非数字
   var usrName = "andy";
     console.log(isNaN(userName));// true ，"andy"是一个非数字

• 字符串型 String

  字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号''

  var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
  var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
  // 常见错误
  var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

  因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

  1. 字符串引号嵌套

     JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

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

  2. 字符串转义符

     类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

     转义符都是 \ 开头的，常用的转义符及其说明如下：

     转义符	解释说明
     \n	换行符，n 是 newline 的意思
     \ \	斜杠 \
     '	' 单引号
     "	”双引号
     \t	tab 缩进
     \b	空格 ，b 是 blank 的意思

  3. 字符串长度

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

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

  4. 字符串拼接

     • 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

     • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

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

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

  5. 字符串拼接加强

     console.log('pink老师' + 18);        // 只要有字符就会相连 
     var age = 18;
     console.log('pink老师age岁啦');      // 这样不行哦
     console.log('pink老师' + age);         // pink老师18
     console.log('pink老师' + age + '岁啦'); // pink老师18岁啦

     • 经常会将字符串和变量来拼接，变量可以很方便地修改里面的值

     • 变量是不能添加引号的，因为加引号的变量会变成字符串

     • 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

• 布尔型Boolean

  布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

  布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

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

• Undefined和 Null

  一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）

  var variable;
  console.log(variable);           // undefined
  console.log('你好' + variable);  // 你好undefined
  console.log(11 + variable);     // NaN
  console.log(true + variable);   //  NaN

  一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

  var vari = null;
  console.log('你好' + vari);  // 你好null
  console.log(11 + vari);     // 11
  console.log(true + vari);   //  1

引用类型

1. 数组

2. 对象

3. 函数

存储在堆中

5.3 获取变量数据类型 typeof

• 获取检测变量的数据类型

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

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

  不同类型的返回值

  

  类型	例	结果
  String	typeof 'aa'	"String"
  Number	typeof 18	"number"
  Boolean	typeof true	"boolean"
  Undefined	typeof undefined	"undefined"
  Null 数组 对象	typeof null/ typeof [1,2]	"object"
  function	typeof function(){}	"function"

  　Null类型是第二个只有一个值的数据类型，这个特殊的值是null。从逻辑角度来看，null值表示一个空对象指针，而这也正是使用typeof操作符检测null时会返回"object"的原因，

• 字面量

  字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

  • 数字字面量：8, 9, 10

  • 字符串字面量：'黑马程序员', "大前端"

  • 布尔字面量：true，false

 

5.4 数据类型转换

什么是数据类型转换？

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换parselnt成另一种数据类型，通常会实现3种方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

转换为字符串

• toString() 和 String() 使用方式不一样。

• 三种转换方式，更多第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。

转换为数字型（重点）

• 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点

• 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

转换为布尔型

• 代表空、否定的值会被转换为 false ，有六个假值： ==''、0、NaN、null、undefined false==

  console.log(Boolean('')); // false
  console.log(Boolean(0)); // false
  console.log(Boolean(NaN)); // false
  console.log(Boolean(null)); // false
  console.log(Boolean(undefined)); // false
  console.log(Boolean(false)); // false

 

 

7 - 运算符

7.1运算符的分类

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

JavaScript中常用的运算符有：

• 算数运算符

• 递增和递减运算符

• 比较运算符

• 逻辑运算符

• 赋值运算符

7.2 算数运算符

• 算术运算符概述

  概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

  

• 浮点数的精度问题

  浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。

  var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
  console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

  ==所以：不要直接判断两个浮点数是否相等 !==

• 表达式和返回值

  表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

  简单理解：是由数字、运算符、变量等组成的式子

  表达式最终都会有一个结果，返回给开发者，称为返回值

 

7.3 递增和递减运算符

• 递增和递减运算符概述

  如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。

  在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
  ​
  注意：递增和递减运算符必须和变量配合使用。 

  1. 单独使用 效果一致 x递增;

  2. 在其他表达式或语句中使用 前增量先运算后赋值 后增量先赋值后运算

  // var x=10;
      // var y = x++;
      // console.log(x);
      // console.log(y);
  ​
      var x=20;
      //           20 + 22 + 22 + 20
      var result= x++ + ++x + x-- + --x;

   

7.4 比较运算符

• 比较运算符概述

  概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

  

• 等号比较

  

   

console.log(18 == '18');//true
console.log(18 === '18'); //false

 

7.5 逻辑运算符

逻辑运算符概述

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

• 逻辑与&&

  两边都是 true才返回 true，否则返回 false

   

• 逻辑或 ||

  一边是 true才返回 true，否则返回 false

   

• 逻辑非 ！

  逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

  var isOk = !true;
  console.log(isOk);  // false

• 短路运算（逻辑中断）

  短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

  • 逻辑与

    语法： 表达式1 && 表达式2

    - 如果第一个表达式的值为真，则返回表达式2
    ​
    - 如果第一个表达式的值为假，则返回表达式1

    console.log( 123 && 456 );        // 456
    console.log( 0 && 456 );          // 0
    console.log( 123 && 456&& 789 );  // 789

  • 逻辑或

    语法： 表达式1 || 表达式2

    - 如果第一个表达式的值为真，则返回表达式1
    ​
    - 如果第一个表达式的值为假，则返回表达式2

     console.log( 123 || 456 );         //  123
     console.log( 0 ||  456 );          //  456
     console.log( 123 || 456 || 789 );  //  123

 

7.6 赋值运算符

概念：用来把数据赋值给变量的运算符。

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

 

7.7 运算符优先级

 

• 一元运算符里面的逻辑非优先级很高

• 逻辑与比逻辑或优先级高

 

8 流程控制

8.1 流程控制概念

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：流程控制就是来控制代码按照一定结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。

 

8.2 顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

8.3 分支流程控制

• 分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS 语言提供了两种分支结构语句：if 语句、switch 语句

 

if 语句

• 语法结构

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
    // 条件成立执行的代码语句
}

语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。

• 执行流程

  

 

if else语句（双分支语句）

• 语法结构

  // 条件成立  执行 if 里面代码，否则执行else 里面的代码
  if (条件表达式) {
      // [如果] 条件成立执行的代码
  } else {
      // [否则] 执行的代码
  }
  ​

• 执行流程

  

  if else if 语句(多分支语句)

  • 语法结构

    // 适合于检查多重条件。
    if (条件表达式1) {
        语句1；
    } else if (条件表达式2)  {
        语句2；
    } else if (条件表达式3)  {
       语句3；
     ....
    } else {
        // 上述条件都不成立执行此处代码
    }
    ​

  • 执行逻辑

    

 

8.4 三元表达式

• 语法结构

  表达式1 ? 表达式2 : 表达式3;

• 执行思路

  • 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

  • 简单理解： 就类似于 if else （双分支） 的简写

2.5 switch 分支流程

• 语法结构

  switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

 switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

• switch ：开关 转换 ， case ：小例子 选项

• 关键字 switch 后面括号内可以是表达式或值， 通常是一个变量

• 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号

• switch 表达式的值会与结构中的 case 的值做比较

• 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束

• 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码

  注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

 

• switch 语句和 if else if 语句的区别

  • 一般情况下，它们两个语句可以相互替换

  • switch...case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)

  • switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。

  • 当分支比较少时，if… else语句的执行效率比 switch语句高。

  • 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

 

 

 

9 循环语句

9.1 while循环

while语句的语法结构如下：

while (条件表达式) {
    // 循环体代码 
}

执行思路：

• 1 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码

• 2 执行循环体代码

• 3 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

注意：

• 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环

 

while 循环 往往需要三个步骤

1. 初始值(while循环 的初始值 在循环体外部)

2. 条件表达式 用于判断 循环是否继续执行

3. 循环体 (迭代部分) 迭代完成后 继续 第二步 直到 条件表达式不成立 结束循环

 

 

9.2 do while 循环

do... while 语句的语法结构如下：

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路

• 1 先执行一次循环体代码

• 2 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

  注意：先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码

 

 

9.3 for 循环

1. 语法结构

   for(初始化变量; 条件表达式; 操作表达式 ){
       //循环体
   }

   名称	作用
   初始化变量	通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
   条件表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
   操作表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。

   执行过程：

   1. 初始化变量，初始化操作在整个 for 循环只会执行一次。

2. 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。

3. 执行操作表达式，此时第一轮结束。

4. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。

5. 继续执行操作表达式，第二轮结束。

6. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

第二的判断条件如果有多个，则以紧靠分号的为准

 for(var i=0,j=0;j<10,i<5;i++,j++){
        console.log(i,j);
    }
打印结果 ：1-9

 

断点调试：

    断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。断点调试可以帮助观察程序的运行过程

断点调试的流程：
1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
3、摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

• for 循环重复相同的代码

  比如输出10句“媳妇我错了”

  //  基本写法
  for(var i = 1; i <= 10; i++){
      console.log('媳妇我错了~');
  }
  // 用户输入次数
  var num = prompt('请输入次数:')；
  for ( var i = 1 ; i <= num; i++) {
      console.log('媳妇我错了~');
  } 

• for 循环重复不相同的代码

  例如，求输出1到100岁：

  //  基本写法
  for (var i = 1; i <= 100; i++) {
        console.log('这个人今年' + i + '岁了');
  }

  例如，求输出1到100岁，并提示出生、死亡

  // for 里面是可以添加其他语句的 
  for (var i = 1; i <= 100; i++) {
   if (i == 1) {
      console.log('这个人今年1岁了， 它出生了');
   } else if (i == 100) {
      console.log('这个人今年100岁了，它死了');
    } else {
         console.log('这个人今年' + i + '岁了');
    }
  }

  for循环因为有了计数器的存在，还可以重复的执行某些操作，比如做一些算术运算。

 

9.4 双重for循环

• 双重 for 循环概述

  循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

• 双重 for 循环语法

  for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
      for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
         需执行的代码;
     }
  }

  • 内层循环可以看做外层循环的循环体语句

  • 内层循环执行的顺序也要遵循 for 循环的执行顺序

  • 外层循环执行一次，内层循环要执行全部次数

• 打印五行五列星星

  var star = '';
  for (var j = 1; j <= 3; j++) {
      for (var i = 1; i <= 3; i++) {
        star += '☆'
      }
      // 每次满 5个星星 就 加一次换行
      star += '\n'
  }
  console.log(star);

  核心逻辑：

  1.内层循环负责一行打印五个星星

  2.外层循环负责打印五行

• for 循环小结

  • for 循环可以重复执行某些相同代码

  • for 循环可以重复执行些许不同的代码，因为我们有计数器

  • for 循环可以重复执行某些操作，比如算术运算符加法操作

  • 随着需求增加，双重for循环可以做更多、更好看的效果

  • 双重 for 循环，外层循环一次，内层 for 循环全部执行

  • for 循环是循环条件和数字直接相关的循环

 

while循环和for循环区别

for使用一般是次数比较确定

while 循环用于循环次数不确定

 

for循环的话 初始条件 循环条件 迭代部分 有一个专门的区域 结构比较清晰

while循环 初始条件是在循环外部 没有for循环结构清晰

使用时都要注意死循环

9.5 continue、 break

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：

 for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('这个包子有虫子，扔掉');
         continue; // 跳出本次循环，跳出的是第3次循环 
      }
      console.log('我正在吃第' + i + '个包子呢');
 }

运行结果：

break 关键字用于立即跳出整个循环（循环结束）。

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

  for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         break; // 直接退出整个for 循环，跳到整个for下面的语句
     }
     console.log('我正在吃第' + i + '个包子呢');
   }

运行结果：

 

10 数组

10.1 数组的概念

• 数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。

• 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

10.2 创建数组

JS 中创建数组有两种方式：

• 利用 new 创建数组

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

  注意 Array () ，A 要大写

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

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

  • 数组的字面量是方括号 [ ]

  • 声明数组并赋值称为数组的初始化

  • 这种字面量方式也是我们以后最多使用的方式

• 数组元素的类型

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

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

10.3 获取数组中的元素

数组可以通过索引来访问、设置、修改对应的数组元素，可以通过“数组名[索引]”的形式来获取数组中的元素。

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);    

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。

注意：如果访问时数组没有和索引值对应的元素，则得到的值是undefined

10.4 遍历数组

• 数组遍历

  把数组中的每个元素从头到尾都访问一次（类似学生的点名），可以通过 for 循环索引遍历数组中的每一项

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

• 数组的长度

  数组的长度：默认情况下表示数组中元素的个数

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

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

  注意：

  • 此处数组的长度是数组元素的个数 ，不要和数组的索引号混淆。

• 当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化

  • 数组的length属性可以被修改：

• 如果设置的length属性值大于数组的元素个数，则会在数组末尾出现空白元素；

  • 如果设置的length属性值小于数组的元素个数，则会把超过该值的数组元素删除

 

10.5 数组中新增元素

数组中可以通过以下方式在数组的末尾插入新元素：

  数组[ 数组.length ] = 新数据;

 

11 函数

11.1 函数的定义

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

11.2 函数的使用

函数的声明：

function 函数名 (){                 
            // 函数体
                   }

函数名的命名规则: 小驼峰命名法

• function 是声明函数的关键字,必须小写

• 由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum

 

调用函数

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

• 调用的时候千万不要忘记添加小括号

• 口诀：函数不调用，自己不执行

  注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

   

函数的封装

• 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

   

• 例子：封装计算1-100累加和

  /* 
     计算1-100之间值的函数
  */
  // 声明函数
  function getSum(){
    var sumNum = 0;// 准备一个变量，保存数字和
    for (var i = 1; i <= 100; i++) {
      sumNum += i;// 把每个数值 都累加 到变量中
    }
    alert(sumNum);
  }
  // 调用函数
  getSum();

函数的作用域

当访问一个变量的时候，先在当前作用域查找 不存在则向上一级 直到全局作用域为止 函数的作用域是在定义函数的函数的时候确定 跟在哪儿调用无关

 

 

11.3 函数的参数

函数的参数语法

• 形参：函数定义时设置接收调用时传入

• 实参：函数调用时传入小括号内的真实数据

• 

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

函数参数的运用：

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

1. 调用的时候实参值是传递给形参的

2. 形参简单理解为：不用声明的变量

3. 实参和形参的多个参数之间用逗号（,）分隔

 

函数形参和实参数量不匹配时

 

注意：在JavaScript中，形参的默认值是undefined。

小结：

• 函数可以带参数也可以不带参数

• 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined

• 调用函数的时候，函数名括号里面的是实参

• 多个参数中间用逗号分隔

• 形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

 

11.4 函数的返回值

return 语句

 

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

• 在使用 return 语句时，函数会停止执行，并返回指定的值

• 如果函数没有 return ，返回的值是 undefined

break ,continue ,return 的区别

• break ：结束当前的循环体（如 for、while）

• continue ：跳出本次循环，继续执行下次循环（如 for、while）

• return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

 

 

 

11.5 arguments对象的使用

在js中有一个专门的对象 用于储存我们的实参 arguments对象

函数参数集合 arguments 可以传任意数量的实参

 

当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。具有length属性

 

 

 function addNum() {
            // arguments[0]  代表的是第一个参数  依次类推 argument[1] 第二个参数
            console.log(arguments[0]);
            //    arguments.length   传递参数的个数 也就是  arguments的长度
            console.log(arguments.length);
            //   document.write(arguments[0]+arguments[1]+arguments[2]+)
            var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            document.write("最后的和是" + sum);
        }
        addNum(5, 6, 44, 4, 4, 6, 7, 7, 6, 45, 45);

 

11.6函数的返回值

我们在调用函数时 最后往往需要知道函数的执行结果

关键字 return 可以结束函数 在关键字后面不要再有语句 即使有语句也不会再被执行

 function addNum(a, b) {
        // 关键字 return 可以结束函数 
        // return;
         return a+b;
        // 在关键字后面不要再有语句    即使有语句也不会再被执行
         console.log("我是在return后面的语句");
    }
​
  addNum();

 

11.7 函数的两种声明方式

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

  利用函数关键字 function 自定义函数方式

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

  • 因为有名字，所以也被称为命名函数

  • 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

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

  利用函数表达式方式的写法如下：

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

  • 因为函数没有名字，所以也被称为匿名函数

  • 这个fn 里面存储的是一个函数

  • 函数表达式方式原理跟声明变量方式是一致的

  • 函数调用的代码必须写到函数体后面

12 作用域

 

1.2 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

1.3 局部作用域

作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。

 

1.4 变量的作用域

 

2.1 全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

• 全局变量在代码的任何位置都可以使用

• 在全局作用域下 var 声明的变量 是全局变量

• 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

2.2 局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

• 局部变量只能在该函数内部使用

• 在函数内部 var 声明的变量是局部变量

• 函数的形参实际上就是局部变量

2.3 全局变量和局部变量的区别

• 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存

• 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

13 变量提升

13.1 预解析的相关概念

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

• 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。

• 代码执行： 从上到下执行JS语句。

  预解析会把变量和函数的声明在代码执行之前执行完成。

13.2 变量预解析

预解析也叫做变量、函数提升。
变量提升（变量预解析）： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

console.log(num);  // 结果是多少？
var num = 10;      // ？

结果：undefined
​
注意：**变量提升只提升声明，不提升赋值**

13.3 函数预解析

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

fn();
function fn() {
    console.log('打印');
}

结果：控制台打印字符串 --- ”打印“ 
​
注意：函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用！

13.4 函数表达式声明函数问题

函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用：

fn();
var  fn = function() {
    console.log('想不到吧');
}

结果：报错提示 ”fn is not a function"
​
解释：该段代码执行之前，会做变量声明提升，fn在提升之后的值是undefined；而fn调用是在fn被赋值为函数体之前，此时fn的值是undefined，所以无法正确调用

 

14 对象

14.1 对象的相关概念

• 什么是对象？

  在 JavaScript 中，对象是属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。 对象是由属性和方法组成的。

  • 属性：事物的特征，在对象中用属性来表示（常用名词）

  • 方法：事物的行为，在对象中用方法来表示（常用动词）

• 为什么需要对象？

  保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。

  如果要保存一个人的完整信息呢？
  ​
  例如，将“张三疯”的个人的信息保存在数组中的方式为：

var arr = [‘张三疯’, ‘男', 128,154];

上述例子中用数组保存数据的缺点是：数据只能通过索引值访问，开发者需要清晰的清除所有的数据的排行才能准确地获取数据，而当数据量庞大时，不可能做到记忆所有数据的索引值。

为了让更好地存储一组数据，对象应运而生：对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

使用对象记录上组数据为：

var obj = {
    "name":"张三疯",
    "sex":"男",
    "age":128,
    "height":154
}

JS中的对象表达结构更清晰，更强大。

14.2 创建对象的三种方式

• 利用字面量创建对象

  使用对象字面量创建对象：

      就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示 

  • 键：相当于属性名

  • 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

    代码如下：

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

    上述代码中 star即是创建的对象。

• 对象的使用

  • 对象的属性

    • 对象中存储具体数据的 "键值对"中的 "键"称为对象的属性，即对象中存储具体数据的项

  • 对象的方法

    • 对象中存储函数的 "键值对"中的 "键"称为对象的方法，即对象中存储函数的项

  • 访问对象的属性

    • 对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”

    • 对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号

      示例代码如下：

      console.log(star.name)     // 调用名字属性
      console.log(star['name'])  // 调用名字属性

  • 调用对象的方法

    • 对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

      示例代码如下：

      star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

  • 变量、属性、函数、方法总结

    属性是对象的一部分，而变量不是对象的一部分，变量是单独存储数据的容器

    • 变量：单独声明赋值，单独存在

    • 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征

• 删除对象的属性

  • delete star.name

    方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器

    • 函数：单独存在的，通过“函数名()”的方式就可以调用

    • 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

• 利用 new Object 创建对象

  • 创建空对象

    var andy = new Obect();

    通过内置构造函数Object创建对象，此时andy变量已经保存了创建出来的空对象

  • 给空对象添加属性和方法

    • 通过对象操作属性和方法的方式，来为对象增加属性和方法

      示例代码如下：

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

    注意：

    • Object() ：第一个字母大写

    • new Object() ：需要 new 关键字

    • 使用的格式：对象.属性 = 值;

• 利用构造函数创建对象

  • 构造函数

    • 构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

    • 构造函数的封装格式：

      function 构造函数名(形参1,形参2,形参3) {
           this.属性名1 = 参数1;
           this.属性名2 = 参数2;
           this.属性名3 = 参数3;
           this.方法名 = 函数体;
      }

    • 构造函数的调用格式

      var obj = new 构造函数名(实参1，实参2，实参3)

      以上代码中，obj即接收到构造函数创建出来的对象。

    • 注意事项

      1. 构造函数约定首字母大写。

      2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。

      3. 构造函数中不需要 return 返回结果。

      4. 当我们创建对象的时候，必须用 new 来调用构造函数。

    • 其他

      构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class） 创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

• new关键字的作用

  1. 在构造函数代码开始执行之前，创建一个空对象；

  2. 修改this的指向，把this指向创建出来的空对象；

  3. 执行函数的代码

  4. 在函数完成之后，返回this---即创建出来的对象

14.3 遍历对象

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

其语法如下：

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

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

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

 

15 内置对象

15.1 内置对象

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

JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

 

15.2 Math对象

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

属性、方法名	功能
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs()	绝对值
Math.max()/Math.min()	求最大和最小值
Math.random()	获取范围在[0,1)内的随机值
Math.sin()	正弦
Math.sqrt()	平方根
Math.pow(x,y)	幂 x的y次方

注意：上面的方法使用时必须带括号

注意点

Math.abs('-1'); //隐式转换   会把字符串型-1  转换成数字型

获取指定范围内的随机整数：

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

Math 对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math 对象方法

方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 Ex 的指数。
floor(x)	对 x 进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,...,n)	返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)	返回 x,y,z,...,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	四舍五入。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。

15.3 日期对象

Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间

• 使用Date实例化日期对象

  • 获取当前时间必须实例化：

  var now = new Date();

  • 获取指定时间的日期对象

  var future = new Date('2019/5/1');
  var future = new Date('2019-5-1');
  //使用字符串有两种写法

  注意：如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象

• 使用Date实例的方法和属性

  方法名	说明
  new Date()	获取日期对象
  getFullYear()	获取年份
  getMonth()	获取月份 从0开始计算（0-11）
  getDate()	获取当前日期
  getDay()	获取星期几 （周日0 到周六6）
  getHours()	获取小时
  getMinutes()	获取分钟
  getSeconds()	获取秒
  getTime()	时间戳 基于1970年1月1日（世界标准时间）起的毫秒数

   

• 通过Date实例获取总毫米数（时间戳）

  • 总毫秒数的含义

    基于1970年1月1日（世界标准时间）起的毫秒数

  • 获取总毫秒数（时间戳）

    // 实例化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();

• 倒计时效果

  1. 核心算法： 输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，结果有可能会出现负数。

  2. 用时间戳来做。 用户输入的时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。

  3. 把剩余时间总的毫秒数转换成天、时、分、秒（时间戳转换成时分秒）

  转换公式如下：

  d = parseInt(总秒数/60/60/24);     //计算天数
  h = parseInt(总秒数/60/60%24);     //计算小时
  h = parseInt(总秒数/60%60);    // 计算分数
  h = parseInt(总秒数%60);       //  计算当前秒数

  Date 对象属性

  属性	描述
  constructor	返回对创建此对象的 Date 函数的引用。
  prototype	使您有能力向对象添加属性和方法。

  Date 对象方法

  方法	描述
  getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
  getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
  getFullYear()	从 Date 对象以四位数字返回年份。
  getHours()	返回 Date 对象的小时 (0 ~ 23)。
  getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
  getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
  getMonth()	从 Date 对象返回月份 (0 ~ 11)。
  getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
  getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
  getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
  getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
  getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
  getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
  getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
  getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
  getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
  getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
  getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
  getYear()	已废弃。 请使用 getFullYear() 方法代替。
  parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
  setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
  setFullYear()	设置 Date 对象中的年份（四位数字）。
  setHours()	设置 Date 对象中的小时 (0 ~ 23)。
  setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
  setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
  setMonth()	设置 Date 对象中月份 (0 ~ 11)。
  setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
  setTime()	setTime() 方法以毫秒设置 Date 对象。
  setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
  setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
  setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
  setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
  setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
  setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
  setUTCSeconds()	setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
  setYear()	已废弃。请使用 setFullYear() 方法代替。
  toDateString()	把 Date 对象的日期部分转换为字符串。
  toGMTString()	已废弃。请使用 toUTCString() 方法代替。
  toISOString()	使用 ISO 标准返回字符串的日期格式。
  toJSON()	以 JSON 数据格式返回日期字符串。
  toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
  toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
  toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
  toString()	把 Date 对象转换为字符串。
  toTimeString()	把 Date 对象的时间部分转换为字符串。
  toUTCString()	根据世界时，把 Date 对象转换为字符串。实例：var today = new Date(); var UTCstring = today.toUTCString();
  UTC()	根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
  valueOf()	返回 Date 对象的原始值。

15.4 数组对象

创建数组的两种方式

• 字面量方式

  • 示例代码如下：

    var arr = [1,"test",true];

• new Array()

  • 示例代码如下：

    var arr = new Array();

    注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数

    参数传递规则如下：

    • 如果只传入一个参数，则参数规定了数组的长度

    • 如果传入了多个参数，则参数称为数组的元素

检测是否为数组

• instanceof 运算符

  • instanceof 可以判断一个对象是否是某个构造函数的实例

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

• Array.isArray()

  • Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

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

常用数组方法

方法	说明
push()	在数组后面添加元素
unshift()	在数组前面添加元素
pop()	在数组后面删除
shift()	删除数组的第一个元素
splice(x,y,z)	从某个位置删除几位 z(选填)并插入哪些元素（可以多个）
join()	将数组拼接成字符串 括号内：指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
reverse()	颠倒数组
slice()	数组截取 参数1开始截取位置 参数2 结束截取位置(不包括) 无参是全部截取
concat()	合并数组
sort()	数组排序

 

添加删除数组元素的方法

• 数组中有进行增加、删除元素的方法，部分方法如下表

  

  注意：push、unshift为增加元素方法；pop、shift为删除元素的方法

数组排序

• 数组中有对数组本身排序的方法，部分方法如下表

  

  注意：sort方法需要传入参数来设置升序、降序排序

  • 如果传入“function(a,b){ return a-b;}”，则为升序

  • 如果传入“function(a,b){ return b-a;}”，则为降序

数组索引方法

• 数组中有获取数组指定元素索引值的方法，部分方法如下表

  

数组转换为字符串

• 数组中有把数组转化为字符串的方法，部分方法如下表

  

  注意：join方法如果不传入参数，则按照 “ , ”拼接元素

其他方法

• 数组中还有其他操作方法，同学们可以在课下自行查阅学习

  

   

属性	描述
constructor	返回创建数组对象的原型函数。
length	设置或返回数组元素的个数。
prototype	允许你向数组对象添加属性或方法。

---

Array 对象方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()	返回数组的可迭代对象。
every()	检测数值元素的每个元素是否都符合条件。
fill()	使用一个固定值来填充数组。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
from()	通过给定的对象中创建一个数组。
includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	将数组元素计算为一个值（从左到右）。
reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

15.5 字符串对象

基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

 

 

 

字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。 ​ 由于字符串的不可变，在大量拼接字符串的时候会有效率问题

常用字符串对象

方法	描述
length	字符串长度
charAt()	索引 访问单个字符
slice(x,y)	截取字符串片段 从索引为x的位置开始截到索引为y的位置，不包括y位置的字符
substr(x,y)	从索引x的位置开始截取y位字符
split()	以指定字符切割字符串 结果为数组
replace(被替换的字符串， 要替换为的字符串)	替换字符串片段
indexOf()	检测字符首次在字符串中出现的位置 找不到返回-1
lastIndexOf()	检测字符末次在字符串中出现的位置 找不到返回-1
toUpperCase()	字母转大写
toLowerCase()	字母转小写

 

根据字符返回位置

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：

案例：查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数

1. 先查找第一个o出现的位置

2. 然后 只要indexOf 返回的结果不是 -1 就继续往后查找

3. 因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找

根据位置返回字符

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：

在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码，ASCII码对照表如下：

案例：判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数

1. 核心算法：利用 charAt(） 遍历这个字符串

2. 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1

3. 遍历对象，得到最大值和该字符

   注意：在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象总，对应的属性值是该字符出现的次数

字符串操作方法

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：

replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：

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

split()方法

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

其使用格式如下：

字符串.split("分割字符")

String 对象属性

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

String 对象方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
repeat()	复制字符串指定次数，并将它们连接在一起返回。
replace()	在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
startsWith()	查看字符串是否以指定的子字符串开头。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白
toLocaleLowerCase()	根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase()	根据本地主机的语言环境把字符串转换为大写。
valueOf()	返回某个字符串对象的原始值。
toString()	返回一个字符串。

Number 对象方法

方法	描述
isFinite	检测指定参数是否为无穷大。
toExponential(x)	把对象的值转换为指数计数法。
toFixed(x)	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision(x)	把数字格式化为指定的长度。
toString()	把数字转换为字符串，使用指定的基数。
valueOf()	返回一个 Number 对象的基本数字值。

 

值类型和引用类型

2.1 简单数据类型

简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null

2.2 复杂数据类型

复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

2.3 堆栈

• 堆栈空间分配区别：

　　1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

　　2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

• 简单数据类型的存储方式

  值类型变量的数据直接存放在变量（栈空间）中

• 复杂数据类型的存储方式

  引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

  

2.4 简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

function fn(a) {
    a++;
    console.log(a); 
}
var x = 10;
fn(x);
console.log(x)；

运行结果如下：

2.5 复杂数据类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

function Person(name) {
    this.name = name;
}
function f1(x) { // x = p
    console.log(x.name); // 2. 这个输出什么 ?    
    x.name = "张学友";
    console.log(x.name); // 3. 这个输出什么 ?    
}
var p = new Person("刘德华");
console.log(p.name);    // 1. 这个输出什么 ?   
f1(p);
console.log(p.name);    // 4. 这个输出什么 ?  

运行结果如下：

深拷贝

通用深拷贝方法1：使用JSON对象，现将引用类型转换成JSON字符串赋值后再转换为JSON对象

var list=[{a:[1,2,3]}];
    var list2=JSON.parse(JSON.stringify(list));
     console.log(list2)

深拷贝方法2（== 只能深拷贝单层属性 如果对象属性指向引用类型 则仍然存在引用关系）

Object.assign()合并对象 往第一个参数对象中合并 并返回合并后的结果

var obj1={name:"veb"};
var obj2={age:20};
var obj3={sex:"男"};
var res=Object.assign({},obj1,obj2,obj3);
console.log(res,obj1)

深拷贝和浅拷贝的区别

浅拷贝：只是增加了一个指针指向已存在的内存地址，

深拷贝：是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，

 

使用深拷贝的情况下，释放内存的时候不会因为出现浅拷贝时释放同一个内存的错误。

 

浅复制：仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。

深复制：在计算机中开辟一块新的内存地址用于存放复制的对象。