前端JavaScript基础

目录

JavaScript基础

1：JS概述

1.1：历史：

1.2：现状：

1.3：特点：

1.4：应用场景

 

2.搭建开发环境

2.1：浏览器：

2.2:服务器端

2.3：运行JS

3.语法规范

4.变量

4.1：声明变量

4.2变量的命名规范

4.3变量赋值

5.常量

6.数据类型

6.1数值型：

6.2字符串型

6.3布尔型

6.4未定义型

6.5空

7.数据类型的转换

7.1隐式转换

7.2强制转换

8.运算符

9.浏览器函数

10.流程控制：（选择执行）

1.if语句

11.循环执行

1.while循环

2.break

3.do-while 循环

4.for 循环

12.函数

1.创建一个普通函数

2.创建带有参数的函数

3.创建带有返回值的函数

4.变量的作用域

1.变量提升

2.函数的作用域

3.函数提升

13.递归

14.匿名函数

1.创建函数

2.匿名函数自调用

3.回调函数

15.系统函数(全局函数)

16.对象：（万物皆对象）

1.JS中的对象：

2.自定义对象的创建

3.使用对象字面量来创建对象

4.访问属性

5.使用内置构造函数来创建对象：

6.遍历对象：

7.检测属性是否存在

8.对象中的方法

17.数据的存储

18.数组

1.字面量创建数组

2.元素的访问

3.数组的长度

4.使用内置构造函数创建数组

5.数组的分类

6.数组的遍历

7.API

8.二维数组

19.字符串对象

1.转义字符 \

2.API

3.匹配模式（了解）

20.Math 对象

21.Data对象

1.创建对象

2获取

3.转为本地字符串格式

4.修改

22.Number对象

23.Boolean对象

5.错误处理

---

JavaScript基础

1：JS概述

1.1：历史：

1995年出现在网景公司的浏览器中

1996年，IE3中，也出现了JS，叫做JScript

1997年，出现了国际标准规范 ECMAScript

2009年，出现了CommonJS规范，JS开始往服务器端发展，出现了Node.js

1.2：现状：

JS即可以运行在浏览器中，也可以运行在服务器端

1.3：特点：

• 解释型语言，编译一行执行一行

• 弱类型语言，

• 基于对象

• 跨平台，可以运行在不同的操作系统

1.4：应用场景

开发浏览器端的交互效果，进行服务器端的开发。

 

2.搭建开发环境

2.1：浏览器：

浏览器自带的JS解释器，推荐使用谷歌浏览器

火狐 谷歌 欧朋 IE Safari

2.2:服务器端

1. 安装Nodejs
2. www.nodejs.org 官网
3. 打开命令行窗口
4. node -v 回车 查看版本号

 

2.3：运行JS

浏览器端：创建01.js和01.html两个文件，把js嵌入到html文件中

代码如下：

/*在01.html中引入js文件，打开html文件即可运行01.js文件*/
    

后端：NodeJs：

1.打开命令行

2.输入:  node 拖拽js文件  回车

3.语法规范

• 区分大小写

• 每行代码结束的分号可以省略

• 分为单行注释（//）和多行注释（/* */）

4.变量

什么是变量？

变量是用于保存程序中的数据

4.1：声明变量

     声明一个变量：

var x = 1;  //使用关键字var声明变量，x是变量名称，在内存中开辟了一块空间，把数据保存进去
var id = 1;
var name = '小明';
var sex = '男';
var birthday = '1999-02-15';
var salary = '5000';
console.log(id, name, sex, birthday, salary);        //在控制台输出变量保存的数据

输出结果如下：

         一次声明多个变量：

                

var a=1,b=2,c;


var danjia=10,shuliang=5,zongjia=danjia*shuliang;
console.log(zongjia);    //打印输出结果

注意：多个变量之间用逗号隔开

4.2变量的命名规范

变量的名称可以由字母，数字，下划线，美元符号组成，不能以数字开头。不能使用关键字和保留字，不推荐使用汉字。

4.3变量赋值

变量声明未赋值则为undefined（未定义，） 变量可以多次赋值，赋不同类型的值，这是弱类型语言的特点练习

var english = 50;
var math = 49;
var sum = english + math;
console.log(sum);     //打印值

输出结果如下：

5.常量

声明后必须赋值，不允许重新赋值

例如：const: userName='root';

示例代码如下：

const pi = 3.14;
var r = 5;
var L = 2 * pi * r;
var S = pi * r * r;
console.log('面积：' + S, '周长' + L);    //打印输出结果

6.数据类型

分为原始类型和引用类型

1. 原始类型：数值型、字符串型、布尔型、未定义型、空
2. 引用类型：对象

6.1数值型：

整数：

1 2 3 4 5 6 7 8 9 10（十进制）

1 2 3 4 5 6 7 10 11 12（八进制） 以0开头的数字

1 2 3 4 5 6 7 8 9 a b c d e f 10(十六进制) 以0X开头的数字，a~f代表10~15，不区分大小写

示例代码如下：

var n1 = 10;    //十进制
var n2 = 010; //八进制
var n3 = 0xa;//十六进制

浮点型：

3141.5e-1

314.15

23.415e1

var n4 = 314.15;
var n5 = 3.1415E+2;
var n6 = 3141.5E-1;
console.log(n4, n5, n6);        

输出结果如下：

 

6.2字符串型

1. 被引号所包含的数据，不区分单双引号
2. 查看任意一个字符的unicode码
3. 'a'.charCodeAt() 查看a字符的unicode码

6.3布尔型

只有两个值，分别是true，false，表示真和假，

条件的结果会是布尔型的值，还可以用于保存状态，例如是否登录，是否注册

var b1 = true;
console.log(b1, typeof b1);

输出结果如下：

6.4未定义型

1. 只有一个值为undefined
2. 声明了变量未赋值则为undefined

6.5空

只有一个值为null，，常和引用类型一起使用

7.数据类型的转换

7.1隐式转换

程序运行过程中自动产生的转换。

1. 数值加字符串

   var n1 = 2 + '3';
   console.log(n1, typeof n1);    //结果数值转为字符串

    

2.数值+布尔型

var n2 = 2 + true;
console.log(n2, typeof n2);		//结果布尔型转为数值型1     true-->1   false-->0

 

3.字符串+布尔型

var n3 = '2' + true;
console.log(n3, typeof n3);		//结果布尔型转为字符串型

总结：JS中+号的作用

1. 加法运算

2. 字符串之间的拼接

注意：NaN：not a number（不是一个数字） 再将数据转为数值型的时候，没有成功返回的结果。NaN和任何数字执行加减乘除等运算，结果还算NaN

结论
隐式转换为数值，会自动调用Number函数，

7.2强制转换

1.  强制转为数值型

   Number（‘5’） //5

   Number（‘5a’） //NaN

   Number（‘true’） //1

   Number（false） //0

   Number（undefined） //NaN

   Number（null） //0

2. 强制转为整型

   parseInt（）

   用于将字符串和一个小数转为整型，其他转换都是NaN

   parseInt(1.9) //1

   parseInt('3.14') //3

   parseInt('3.14a') //3

   parseInt('a3.14') //NaN

3. 强制转为浮点型

   parseFloat()

   用于将字符串转为浮点型

4. 强制将数值型和布尔型转为字符串

   toString

   var num =5;

   var a=num.toString() //'5'

   8.运算符

1算术运算符

+  -  *  /  %  ++   --

%：取余

++：自增：在原来的基础之上+1

--：自减：在原来的基础之上-1

2.比较运算符

< > > = < = == === != ! ==

==：等于，比较值是否相同

===：全等于，先比较类型，再比较值（推荐用法）

总结：NaN和任何值比较（< > > = < = == === ）都是false

面试题
+ - ，隐式转换 console.log(5 + +'3'); //8
自增和自减，隐式转换 var a = '2'; a++;       console.log(a); //3

3.逻辑运算符

&&：(并且):关联的两个条件都是true，结果是true

示例代码如下：

var salary = 7000;
console.log(salary >= 6000 && salary <= 10000);		//true

||：(或者)：关联的两个条件至少有一个为true，结果是true，否则false
 

！非（取反）：

示例代码如下：

console.log(!true);		//取反    //false

短路逻辑：

特点：
&& 当地一个条件为false，就不在执行第二个条件

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

短路逻辑：
不用关心整体上是true还是false，重点是看第二部分是否执行；

4.运算符

模拟计算机底层的运算过程，先将值转为二进制然后在运算，运算完成在把结果转回成十进制

1. &：按位与，上下两位都是1，结果是1，否则是0
2. |：按位或，上下两位含有1，结果是1，否则是0
3. ^：按位异或，上下两位不同是1，否则是0
4. >>按位右移，去掉最后的若干位
5. << 按位左移，在最后补若干个0

5.赋值运算符

计算赋值：先执行计算，在执行赋值

=   +=   -=   *=   /=   %=   &=   |=

6.三目运算符

一目运算符：由一个运算符连接了一个操作数据或者表达式 a++，a-- !(取反)

二目运算符：由一个运算符连接了两个操作数据或者表达式 1+1，

三目运算符：由两个运算符连接了三个操作数据或者表达式 ？：

三目运算符：条件表达式 ? 表达式1: 表达式2;

    如果条件表达式为true，执行表达式1，否则执行表达式2。

9.浏览器函数

alert() 弹出提示框，

prompt() 弹出提示（输入）框，需要使用变量保存用户输入的值，类型是字符串型；如果点击取消返回null

10.流程控制：（选择执行）

1.if语句

案例：满30减20

if（条件表达式）{

语句块;

}

如果if后的语句块中只有一行语句，那可以省略大括号，

作为条件表达式出现隐式转为false：0 空字符 NaN undefined null

 var total = 32;
 if (total >= 30) {
     //原来基础之上减20
     total -= 20;
 }
  console.log(total);      //12

案例：判断一个人是否满18岁，如果满18岁打印成年人

 var age = 26;
 if (age >= 18) {
     console.log('成年人');     //成年人
 }

if(条件表达式){

语句块1;

}else{

语句块2;

}

 //是否为成年人
 var age = 21;
 if (age >= 18) {
     console.log('成年人');
 } else {
     console.log('未成年人')
 }

案例：假设从数据库中获取到了用户的性别（1/0），打印出对应的男或者女，使用if else 和三目运算符两种写法

if—else嵌套

 // if else
 var sex = 1;
 if (sex === 1) {
     console.log('男');
 } else {
     console.log('女');
 }
 //三目
 var r = sex === 1 ? '男' : '女';
 console.log(r);

if(条件表达式1){

语句块1;

}else if(条件表达式2){

语句块2;

}else{

语句块n;

}

 var n = 5;
 if (n === 1) {
     console.log('去非洲找女朋友')
 } else if (n === 2) {
     console.log('去印度找女朋友')
 } else if (n === 3) {
     console.log('去日本找女朋友')
 } else {
     console.log('回八宝山')//以上所有的条件都为false才会执行
 }

案例：声明一个变量，保存从数据库中读取的订单状态码，根据订单的状态码打印对应的汉字状态1-等待付款 2-等待发货 3-运输中 4-已签收 5-已取消 其他-无法追踪

 var statu = 1;
 if (statu === 1) {
     console.log('等待付款')
 } else if (statu === 2) {
     console.log('等待发货')
 } else if (statu === 3) {
     console.log('运输中')
 } else if (statu === 4) {
     console.log('已签收')
 } else if (statu === 5) {
     console.log('已取消')
 } else {
     console.log('无法追踪')
 }

案例：声明变量保存一个人的成绩，根据成绩来打印对应的状态90以上优秀， 80-90良好，70-80中等，60-70及格，60以下不及格

 var a = 100;
 if (a >= 0 && a <= 100) {
     if (a >= 90) {
         console.log('优秀');
     } else if (a >= 80) {
         console.log('良好');
     } else if (a >= 70) {
         console.log('中等');
     } else if (a >= 60) {
         console.log('及格');
     } else if (a < 60) {
         console.log('不及格');
     }
 } else {
     console.log('非法')
 }

案例   “根据存款的额度，显示对应的状态

0以下：非法的值 0~50000以下 普通客户 50000~500000以下 优质客户 500000~1000000以下金牌客户 10000000钻石客户

 var money = 0;
 if (money < 0) {
     console.log('非法');
 } else if (money <= 50000) {
     console.log('普通客户')
 } else if (money <= 500000) {
     console.log('优质客户')
 } else if (money <= 1000000) {
     console.log('金牌客户')
 } else if (money <= 10000000) {
     console.log('钻石客户')
 }

switch-case语句

根据一个表达式的值，选择执行对应的语句块，属于是一种特殊的多想分支语句

switch后的表达式在和case后的值比较的时候只能进行全等于（===），要求值和类型都相同

switch(表达式){

case 值1: //会将表达式和值1比较

语句块1;

break; //结束，跳出switch-case语句

case 值2;

语句块2；

break;

default:

语句块n;

}

案例：1-非洲 2-印度 3-日本

 var n = 5;
 switch (n) {
     case 1:
         console.log('非洲');
         break;
     case 2:
         console.log('印度')
         break;
     case 3:
         console.log('日本')
     default:
         console.log('八宝山')
 }

案例：声明变量保存任意一个城市名称，根据城市的名称打印对应的美食

 var city = '北京';
 switch (city) {
     case '保定':
         console.log('驴肉火烧')
         break;
     case '石家庄':
         console.log('火哥烤冷面')
         break;
     case '北京':
         console.log('北京烤鸭')
         break;
     case '安徽':
         console.log('安徽牛肉板面')
         break;
     default:
         console.log('面条')
 }

11.循环执行

循环是一遍又一遍执行相同或者相似的内容

循环的两个要素：

1. 循环条件：可以控制循环的次数
2. 循环体 ：要重复执行的相同或者相似内容

1.while循环

while(循环条件){

循环体；

}

 案例：打印十次煎饼，范围1~10

 var i = 1;
 while (i <= 10) {
     console.log('然哥第' + i + '次买煎饼');
     i++;
 }
练习：使用循环打印20~11之间的所有整数

 var i = 20;
 while (i > 10) {
     console.log(i);
     i--;
 }

案例：使用循环打印出80、75、70、65、60

 var i = 80;
 while (i >= 60) {
     console.log(i);
     i -= 5;
 }
 console.log(i);  //跳出循环之后查询i的值

案例：使用循环，结合if判断，打印出1~100之间所有的偶数

 var i = 1;
 while (i <= 100) {
     if (i % 2 == 0) {
         console.log(i);
     }
     i++;
 }

案例：使用循环计算1~100之间所有整数的和

 var i = 1;
 var total = 0;
 while (i <= 100) {
     total += i;
     i++;
 }
 console.log(total);

案例：计算1~100之间所有奇数的和

 var i = 1;
 var total = 0
 while (i <= 100) {
     if (i % 2 == 1) {
         total += i;
     }
     i++;
 }
 console.log(total)      //2500

2.break

在循环体执行后，就会跳出循环

案例：循环产生1~10的所有整数

 var i = 1;
 while (true) {
     console.log(i);
     if (i === 10) {
         break;
     }
     i++;
 }

案例：当循环条件为true的情况下，计算11~20之间所有整数的乘积，

 var i = 11;
 var chengji = 1;
 while (true) {
     if (i > 20) {
         break;
     }
     chengji *= i;
     i++;
 }
 console.log(chengji)

3.do-while 循环

do{

循环体;

}while(循环条件);

案例：循环打印1~10之间所有的整数

var i = 1;
do {
    console.log(i);
    i++;
} while (i <= 10);
练习：打印10~1之间所有的整数

var i = 10;
do {
    console.log(i);
    i--;
} while (i >= 1);

案例：使用循环打印50,55,60,65,70

var i = 50;
do {
    console.log(i);
    i += 5;
} while (i <= 70);

案例：打印出1~100之间所有能被三整除的数字

var i = 1;
do {
    if (i % 3 === 0) {
        console.log(i);
    }
    i++;
} while (i <= 100);

案例：计算出1~100之间所有能被7整除的数字的和

var i = 1;
var sum = 0;
do {
    if (i % 7 === 0) {
        sum += i;
    }
    i++
} while (i <= 100);
console.log(sum);			//735

练习：声明变量保存用户输入的值，如果输入正确强制结束循环，警示框弹出登录成功，如果输入的次数超过三次，强制结束循环，警示框弹出‘超出限制’

var i = 0;
do {
    var r = prompt('请输入密码');
    i++;
    if (r !== '123456' && i === 3) {
        alert('次数过多，强制下线');
        break;
    } else if (r === '123456') {
        alert('登录成功')
        break;
    }

} while (true);

案例：要求死循环，弹出提示框，使用变量保存用户输入的值，在循环条件的位置判断是否正确

do {
    var r = prompt('请输入密码');
} while (r !== '123456')

4.for 循环

1.for(初始值;循环条件;增量){

循环体;

}

2.关键字：break和continue

break 跳出循环 结束，不在执行任何循环中的内容

continue 跳过某一次循环，不执行某一次中跳过的循环体部分，还会执行下一次循环

3.循环嵌套

在一个循环体的内部，还有其他的循环；任意两个循环之间都可以相互嵌套

案例：打印1~100之间所有能被4整除的数字

for (var i = 1; i <= 100; i++) {
    if (i % 4 === 0) { console.log(i); }

}

案例：计算1~100之间所有能被5整除的数字的和

for (var i = 1, sum = 0; i <= 100; i++) {
    if (i % 5 === 0) {
        sum += i;
    }
}
console.log(sum)			//1050

案例：打印出1900~2000年所有的闰年

for (var year = 1900; year <= 2000; year++) {
    if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
        console.log(year + '是闰年');
    }
}

案例：假设有本金一万元，利率是3%（0.03），计算五年后的本金和利息共有多少

for (var a = 10000, i = 1; i <= 5; i++) {
    a = a + a * 0.03;
    // console.log(a)
}
console.log(a)

案例：打印1~10之间所有整数，不包含5

for (var i = 1; i <= 10; i++) {
    if (i === 5) {
        continue;
    }
    console.log(i)
}

案例：打印1~100之间所有的奇数，

for (var i = 1; i <= 100; i++) {
    if (i % 2 === 0) {
        continue;
    } else if (i % 2 === 1) {
        console.log(i)
    }
}

案例：使用循环打印* * * * *

for (var i = 1, a = ''; i <= 5; i++) {
    a += '*';
}
console.log(a);

练习：打印直角三角形

for (var j = 1; j <= 9; j++) {			//外层循环：控制循环的行数————j
    for (var i = 1, a = ''; i <= j; i++) {	//内层循环：控制循环的列数————i
        a += '*';
    }
    console.log(a);		//每循环一行结束后，打印这一行
}

12.函数

Number()/parseInt()/parseFloat()/alert()/prompt().....

函数：是一个功能体，需要提供若干个数据，返回处理的结果;

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

函数的作用：为了封装重复执行的代码

调用函数：函数名称（）,可以多次调用同一个函数，每调用一次就执行一次函数体中的代码

1.创建一个普通函数

function 函数名称(){
     函数体;   //封装的要重复执行的代码
 }
创建函数：

     //创建函数
 function laba(){
     //函数体
     console.log('买煎饼喽，好大又好吃。')
     console.log('快来买吧！！')
 }
     //调用
     laba();

案例：创建一个函数getSum，在函数体中封装计算1~100之间所有整数的和，并打印出来

 function getSum() {
     for (var i = 1, sum = 0; i <= 100; i++) {
         sum += i;
     }
     console.log(sum);
 }
 getSum();       //100
 getSum();       //100
 getSum();       //100

2.创建带有参数的函数

 function 函数名称(参数列表){    //用于接收传递的数据
     函数体
 }

调用：函数名称(参数列表) ——实际传递的数据

案例：计算任意两个数字相加的和

 function add(a, b) {    //用于接收数据（形参）
     console.log(a + b);
 }
 //调用  
 add(3, 5);      //实参：实际传递数据

参数：创建函数时的参数称为形参，调用函数时的参数称为实参，实参会赋值给形参；多个参数之间用逗号隔开，实参的数量可以多于或者少于形参的数量，如果形参未赋值则为undefined

案例：创建函数，getSum，在函数体中计算1~任意直接所有整数的和

 function getSum(a) {
     for (var i = 1, sum = 0; i <= a; i++) {
         sum += i;
     }
     console.log(sum)
 };
 getSum(2)

案例：创建函数gerRun，计算出任意两个年份之间所有的闰年个数并打印出来，调用多次

 function getRun(a, b) {
     for (var count = 0; a <= b; a++) {
         if (a % 4 === 0 && a % 100 !== 0 || a % 400 === 0) {
             count++;
         }
 ​
     }
     console.log(count);
 }
 getRun(2000, 2100);     //25

3.创建带有返回值的函数

 function 函数名称(参数列表){
     函数体;
     return 值;  //返回值，函数调用后得到的结果
 }

调用：函数名称（参数列表）

return：返回，用于将函数调用的结果返回出去；return后不加值或者在函数中不写return，则返回undefined；return一旦执行，跳出函数，结束函数的调用；

案例：创建一个函数getMax1，传递任意两个数字，返回最大值

function getMax1(a, b) {
    if (a - b > 0) {
        return a;
    } else {
        return b;
    }
}
var result = getMax1(150, 150)
console.log(result)

//三目运算符
function getMax1(a, b) {
    return a > b ? a : b
}
var result = getMax1(10, 150)
console.log(result)

案例：创建函数getMax2，传递任意是哪个数字，返回最大值

function getMax2(a, b, c) {
    if (a > b && a > c) {
        return a;
    } else if (b > c) {
        return b;
    } else {
        return c;
    }
}
var result = getMax2(30, 55, 20);
console.log(result);

//三目运算符
function getMax2(a, b, c) {
    var max = a > b ? a : b;
    return max > c ? max : c;
}
var result = getMax2(30, 55, 20);
console.log(result);

案例：创建一个函数getStatus，传递订单的状态码，返回对应的中文状态 1-等待付款 2-等待发货 3-运输中 4- 已签收 5-已取消

function getStatus(a) {
    switch (a) {
        case 1:
            return '等待付款';
        case 2:
            return '等待发货';
        case 3:
            return '运输中';
        case 4:
            return '已签收';
        case 5:
            return '已取消';
    }
}
var result = getStatus(4);
console.log(result);

对比return和break
return 用于函数中，一旦执行就会跳出函数，结束函数的调用
break 用于switch-case语句和循环，一旦执行就会跳出循环，结束相应的语句

案例：创建一个函数isRun，传递任意一个年份查看是否为闰年，返回一个布尔类型的值

function isRun(year) {
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
        return true;
    }
    return false;
}
var result = isRun(2000);
console.log(result);

//三目运算符
function isRun(year) {
   
    return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
}
var result = isRun(2000);
console.log(result);

4.变量的作用域

作用域：分为全局作用域和函数作用域，具体指变量和函数的可访问范围

全局变量：在函数外声明的变量，叫全局变量，在任何作用域下都可以访问到

局部变量：在函数内使用var声明的变量，叫局部变量，只能在当前的作用域下访问到

//全局作用域
var a='北京市城管';  //全局变量

function shi(){
    var b='石景山城管';    //局部变量
    //函数作用域
    //函数内访问全局变量
    console.log(a);
}
function hai(){
    var c='海淀城管';    //局部变量
    //函数作用域
}
shi();
//在全局作用域访问局部变量
console.log(b)

注意：在函数中，不加var声明的变量是全局变量，严格模式下会报错（不推荐）

案例：

function fun(){
    var m1=m2=m3=4;
    //赋值是从后往前
}
fun()
console.log(m3);
console.log(m2);
console.log(m1);

1.变量提升

//变量提升：JS程序执行前，会将var声明的变量提升到所在作用域的最前边，只是提升声明，赋值不提升
console.log(a);
var a = 1;
function fn(){
    //var b  提升
    console.log(b);		//undefined
    var b = 2;
    //提升后 b=2
}
查看以下程序的输出结果

var c = 5;
function fun(){
    	// var c;
    console.log(c);		//undefined	
    var c =7;
    	//c=7;
}
fun();

2.函数的作用域

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

局部函数：在函数作用域下创建的函数，只能在所在的作用域下访问

3.函数提升

JS程序执行前，会将整个函数提升到所在作用域的最前边；可以先写调用，在写创建

13.递归

特点：在函数内调用自身，本身属于死循环；

使用递归：递归要有跳出条件，结合者return

示例：使用递归计算斐波那契数列的第n项

 //使用递归计算斐波那契数列的第n项
 //第n项的值 = 第n-1项的值+第n-2项的值
 //第一项 和第二项都是1
 function fib(n) {
     //计算第n项的值，只需要返回第n-1项和第n-2项相加的和
     if (n === 1 || n === 2) {
         return 1;
     };
     return fib(n - 1) + fib(n - 2)
 }
 fib(5)
 console.log(fib(5))

斐波那契数列使用递归的时候涉及到太多的函数嵌套，属于CPU密集型算法，JS属于单线程运行（只利用其中一个内核），JS使用递归会比较慢

14.匿名函数

1.创建函数

function fn(){ } （函数声明创建）
var fun = function () { } //变量名称就是函数名称 （函数表达式创建）

对比函数名称和函数名称()的区别

函数名称本质上就是一个变量，保存了一个函数

函数名称()，调用函数，执行函数体中的代码，最终返回结果

对比函数声明和函数表达式两种创建函数的区别

函数声明创建的函数存在函数提升，可以先调用在创建；

函数表达式创建的函数使用了变量，只存在变量的提升，必须先创建在调用

案例：使用函数表达式创建函数，计算任意两个数字所有整数相加的和，并返回结果

 var fn = function (a, b) {
     for (var i = a, sum = 0; i <= b; i++) {
         sum += i;
     }
     return sum;
 }
 console.log(fn(1, 100));        //5050

2.匿名函数自调用

全局污染：全局变量的出现，可以在任何的作用域下访问到，对其他的变量造成了污染

解决方案：把变量都转为局部变量。

 (function(){
 //函数体封装的代码，都是在函数作用域下，变量都是局部变量
     //局部变量
     var n =1;
 })
 ()

示例：

 //轮播图1
 //用于记录播放到了第几张
 (function () {
     var n = 1;
     console.log(n)
 })
     ();
 //轮播图2
 (function () {
     var n = 5;
     console.log(n)
 })
     ();
 ​
 //轮播图3
 (function () {
     var n = 6;
     console.log(n);
 })
     ();
 console.log(n)      //n is not defined

3.回调函数

什么是回调函数：将一个函数以实参形式传递，需要有形参来接收并调用

示例：

 function ran(madai) {
     console.log('第一棒开始');
     console.log('到达第一棒终点');
     //第二棒从这开始
     //实参会赋值给形参
     // madai=dong
     // madai()=dong()
     // 调用传递进来的函数
     madai();
 }
 ​
 function dong() {
     console.log('第二棒开始');
     console.log('到达第二棒终点');
 }
 ​
 //调用ran，传递的实参是一个函数，叫做回调函数
 ran(dong);      //回调函数
 ran(function () {       //回调函数
     console.log('陌生人跑了')
 })

15.系统函数(全局函数)

例如：Number() / parseInt() / parseFloat()

补充:

isNaN()检测一个值是否为NaN，会自动调用Number转为数值，然后检测。常用于检测用户输入的值是否为数值，如果不是数值则为NaN 是NaN返回true 不是NaN返回false

isFinite() 检测一个值是否为有限值，如果是有限值返回true，不是有限值返回false 只有0做除数得到的结果是无限值infinity

eval():执行字符串中的表达式

16.对象：（万物皆对象）

对象是由一组属性和方法的集合

我的电脑包含的属性：品牌、颜色、尺寸、…… 方法（功能）：玩游戏、敲代码、做设计

然哥的第一辆车：属性：轮子、颜色、型号 …… 方法：代步、拉货、

1.JS中的对象：

• 自定义对象，用户创建的对象

• 内置对象，JS官方提供的对象

• 宿主对象，根据不同的环境来划分，浏览器、NodeJS两种宿主对象

2.自定义对象的创建

对象字面量：

内置构造函数：

自定义构造函数：

3.使用对象字面量来创建对象

使用{}大括号创建新对象

属性名和属性值之间用冒号隔开，多组属性之间用逗号隔开

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

案例：创建一个汽车对象，包含有汽车的品牌型号，颜色，长度，宽度

 var car = {
     品牌: '大众',
     颜色: 'red',
     宽: '1.5米',
     高: '1.5米'
 };
 console.log(car)

4.访问属性

对象.属性名

对象['属性名']

如果属性不存在返回undefined，如果属性名含有特殊符号只能使用第二种方式

案例：创建一个图书的对象，包含有图书的编号，名称，价格，作者；修改图书的价格，添加图书的出版社属性，打印整个对象

 var book = {
     eid: 01,
     name: '高级开发',
     price: 123,
     autor: '老何'
 }
 book.name = '好书';
 book.price = 100;
 book.chuban = '河北高考';
 console.log(book);

5.使用内置构造函数来创建对象：

练习：创建一个轮播图对象，包含有编号，图片名称，图片大小，来源，

new Object（）

创建一个空对象，需要单独添加每个属性

 var bannor = new Object();
 bannor.eid = 1;
 bannor.name = '笑';
 bannor['big'] = '120';
 bannor.lao = '保定'
 console.log(bannor)

6.遍历对象：

使用循环，依次访问对象中的属性

for (var key in bannor) {   //key代表对象中的每个属性名
    console.log(key, bannor[key])
}

7.检测属性是否存在

 //检测属性是否存在
 console.log(student.sex === undefined);
 //
 console.log(student.hasOwnProperty('sex'));
 //
 console.log('sex' in student);

1. 对象.属性名=undefined true表示不存在，false表示存在

2. 对象.hasOwnProperty（‘属性名’） true表示存在，false表示不存在

3. ‘属性名’ in 对象 true表示存在，false表示不存在

案例：创建一个商品对象，包含有商品的编号，名称，价格，如果价格存在打九折，如果产地属性不存在，添加该属性

 var shop = {
     eid: 1,
     name: '高洋洋',
     price: 120
 }
 if (shop.hasOwnProperty('price')) {         //('price' in shop) 也可以判断
     shop.price *= 0.9
 }
 if (shop.chandi === undefined) {
     shop.chandi = '保定'
 }
 console.log(shop)

8.对象中的方法

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

var ran = {
     ename: '然哥',
     sex: '女',
     //方法
     play1: function () {
         console.log('然哥正在玩单杠');
     },
     play2: function () {
         //方法内部访问属性名
         // console.log(ran.ename + '正在玩泥巴')        //然哥正在玩泥巴
         console.log(this.ename + '正在玩泥巴')       //this指代当前所在的对象
     }
 };
 //调用对象中的方法
 ran.play1();
 ran.play2();
 console.log(ran)

案例：创建一个圆对象，包含属性有半径和圆周率，添加两个方法，分别是计算圆的周长和面积，最后调用

 var yuan = {
     r: 4,
     pi: 3.14,
     zhouchang: function () {
         return 2 * this.pi * this.r;
     },
     mianji: function () {
         return this.pi * this.r * this.r;
     }
 }
 var S = yuan.mianji();
 var l = yuan.zhouchang();
 console.log(S, l)

案例：创建一个计算器对象，添加两个方法，传递任意两个数字，分别计算相加和相减，并返回结果

 var jisuan = {
     jia: function (a, b) {
         return a + b;
     },
     jian: function (a, b) {
         return a - b;
     }
 }
 var a = jisuan.jia(5, 6);   //11
 var b = jisuan.jian(6, 5);      //1
 console.log(a, b)

17.数据的存储

原始类型：直接将数据存储在栈内存中

引用类型：在堆内存中保存数据，会生成一个地址，把地址保存在栈内存（变量）中

null'：空地址，用于销毁对象，一旦一个引用类型不被任何地址所指向，就会自动销毁。

18.数组

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

1.字面量创建数组

[ 元素1，元素2]

var name = [];
 console.log(name)   //[]
 var name = ['然哥', '小东东', '小亮亮', '小华华'];
 console.log(name)  //[ '然哥', '小东东', '小亮亮', '小华华' ]
 var name = ['然哥', '小东东', true, 20];
 console.log(name)   //[ '然哥', '小东东', true, 20 ]

案例：创建数组，包含有一组商品的名称；创建数组，包含有一组员工的工资；

//创建数组，包含有一组商品的名称；
var shop = ['羽毛球', '足球', '篮球', '乒乓球']
console.log(shop)	//[ '羽毛球', '足球', '篮球', '乒乓球' ]
//创建数组，包含有一组员工的工资
var salary = [200, 800, 622, 505, 759]
console.log(salary)	//[ 200, 800, 622, 505, 759 ]

2.元素的访问

数组[ 下标 ]

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

案例：创建数组，包含有一组城市的名字，修改下标为2的元素，在数组最后添加若干个新的元素，最后打印数组

var city = ['保定', '石家庄', '北京', '天津'];
city[2] = '刘家窑';
city[4] = '安新县';
city[5] = '雄安';
console.log(city)  	//[ '保定', '石家庄', '刘家窑', '天津', '安新县', '雄安' ]

3.数组的长度

数组.length

查看当前数组中元素的数量有多少，可以在末尾添加新的元素 数组[ 数组.length]

案例：创建一个空数组，使用数组的长度添加若干个国家

var city = []
city[city.length] = '中国';
city[city.length] = '日本';
city[city.length] = '挪威';
console.log(city)

4.使用内置构造函数创建数组

new Array(元素1，元素2，元素3)

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

案例：使用两种方式创建数组；1.创建一个数组，包含有一组汽车名称;2.创建数组，初始化篮球上上的5个位置，分别添加具体内容

//包含有一组汽车名称;
var car = new Array('长城', '大众', '宝马');
console.log(car)
//初始化篮球上上的5个位置，分别添加具体内容
var bk = new Array(5);
bk[0] = '第一个人';
bk[1] = '第二个人';
bk[2] = '第三个人';
bk[3] = '第四个人';
bk[4] = '第五个人';
console.log(bk)

5.数组的分类

索引数组：以0及以上的整数作为下标

关联数组：以字符串作为下标，需要单独添加元素

对象和数组的区别
相同点：两者都可以保存有多个数据
不同点：对包保存一条数据，有多个属性，例如一个员工有编号，有姓名，有性别；数组保存了一组数据，有多个元素，例如一组商品，有小米，戴尔，联想

案例：创建一个数组，数组里边包含有一组商品，每一个商品包含的属性有标题、价格

var shop = [{ title: '小米Air', price: 1250 },
            { title: '联想', price: 3560 }, 
            { title: '戴尔', price: 6550 }]
console.log(shop);

6.数组的遍历

依次访问数组中的每个元素

//for -in
for(var key in 数组){
key 代表每个元素的下标
数组[key]  每个元素
}

//for 循环
for(var i=0;i<数组.length;i++){
i 代表每个元素的下标
数组[i]   每个元素
}

 

案例：使用for循环遍历数组，遍历得到每一个元素，并求和

var salary = [5000, 13000, 8500, 9000];
for (var i = 0, sum = 0; i < salary.length; i++) {
    console.log(salary[i]);
    sum += salary[i];
}
console.log(sum);	//35500

案例：创建数组包含有一组员工的姓名，将姓名为’然哥‘的数据修改为’ran‘；

var arr = ['然哥', '亮亮', '东东', '然哥'];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] === '然哥') {
        arr[i] = 'ran'
    }
}
console.log(arr);

案例：创建一个数组，包含有一组成绩，统计成绩在70~80之间的数量

var arr = [75, 76, 78, 71, 26, 52];
for (var i = 0, count = 0; i < arr.length; i++) {
    if (arr[i] >= 70 && arr[i] <= 80) {
        count++;
    }
}
console.log(count)		//4

案例：创建数组：包含一组数字，遍历数组查找最大值

var arr = [-75, -76, -78, -71, -26, -52, -100];
//声明变量，用于保存最大值，吃实话第一个数作为最大值
var max = arr[0]
for (var i = 0; i < arr.length; i++) {
    if (max < arr[i]) {
        max = arr[i]
    }
}
console.log(max)

7.API

API：应用程序编程接口，JS提供的一些函数或者对象中的方法

1. toString():将数组转为字符串，元素之间按照逗号分隔
2. join('-'):将数组转为字符串，元素之间默认按照逗号分隔，可以按照指定字符分隔
3. concat(数组1，数组2)：拼接多个数组，数组1，数组2....等要拼接的数组
4. reverse(): 翻转数组中的元素，返回翻转后的数组
5. sort():对数组进行排序，默认是按照unicode编码从小到大排列 返回排序后的数组
6. slice():截取数组中的元素，start开始的下标，end结束的小标，不包含end本身，如果end为空截取到最后；返回截取的元素
7. splice(start,count,v1,v2):删除数组中的元素，start：开始的下标 ，count： 删除的数量 如果count为空则删除到最后，如果下标为负数，表示倒数，v1、v2表示要添加的元素，返回删除的元素

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

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

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

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

如何学习一个API

1.作用

2.需要哪些参数

3.函数的返回值

reverse(): 翻转数组中的元素，返回翻转后的数组

 var arr = ['a', 'b', 'c', 'd'];
 //翻转
 arr.reverse();
 console.log(arr)    //[ 'd', 'c', 'b', 'a' ]

sort():对数组进行排序，默认是按照unicode编码从小到大排列 返回排序后的数组

 var arr = [23, 9, 78, 6, 45];
     // arr.sort();         //默认按照unicode编码从小到大   [ 23, 45, 6, 78, 9 ]
 arr.sort(function (a, b) {
     // return a - b;       //从小到大   [ 6, 9, 23, 45, 78 ]
     return b - a;         //从大到小    [ 78, 45, 23, 9, 6 ]
 })
 console.log(arr);       //[ 78, 45, 23, 9, 6 ]

slice():截取数组中的元素，start开始的下标，end结束的小标，不包含end本身，如果end为空截取到最后；返回截取的元素

 var arr = ['高洋洋', '尹泽飞', '赵友鹏', '赵伟杰', '褚浩楠', '江彪'];
 //var a = arr.slice(2);         //[ '赵友鹏', '赵伟杰', '褚浩楠', '江彪' ]
 //var a = arr.slice(2, 5);      //[ '赵友鹏', '赵伟杰', '褚浩楠' ]
 //var a = arr.slice(-3);        //[ '赵伟杰', '褚浩楠', '江彪' ]
 //var a = slice(-3, -1);        //[ '赵伟杰', '褚浩楠' ]
 console.log(a);     

案例：创建数组包含a~h，每个字母是一个元素，分别截取b~d，f；把两部分拼接起来

var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
 var a = arr.slice(1, 4);    //截取b~d     [ 'b', 'c', 'd' ]
 var b = arr.slice(-3，-2);   //截取f       [ 'f' ]
 var c = a.concat(b);        //拼接 a~d 和f
 console.log(c);             //[ 'b', 'c', 'd', 'f' ]

splice(start,count,v1,v2):删除数组中的元素，start：开始的下标 ，count： 删除的数量 如果count为空则删除到最后，如果下标为负数，表示倒数，v1、v2表示要添加的元素，返回删除的元素

案例：创建包含数组a~h删除de，替换f为m，在下标1的位置插入z。

 var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
 arr.splice(3, 2);       //删除de
 arr.splice(3, 1, 'm');  //将f替换为m
 arr.splice(1, 0, 'z');  //在b前边插入z
 console.log(arr);       //[ 'a', 'z', 'b', 'c', 'm', 'g', 'h' ]

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

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

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

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

8.二维数组

数组中的元素还是数组，用于对一组数据进行二次分类

[ [ ] , [ ] , [ ] ]

案例：创建一个数组，包含有多个城市，对这组城市进行分类，同一个省份下的城市放到一起

 var arr1 = ['广东', '江苏', '湖南'];      //省份
 var arr2 = [['广州', '深圳', '珠海'], ['南京', '苏州', '无锡'], ['长沙', '张家界', '湘潭']];   //城市
 //珠海   张家界
 console.log(arr2[0][2]);
 console.log(arr2[2][1]);

19.字符串对象

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

JS有三种包装对象：

Number()对象，String()对象、Boolean对象()

1. new String(): 将数据转为字符串，返回对象类型
2. String(): 将数据转为字符串，返回字符串类型

案例：创建数组，包含一组数据，分别使用数组下的API和String函数转为字符串

 var str1 = '2';//字面量
 var str2 = new String(2);   //内置构造函数
 var str3 = String(2);//普通函数，将数据强制转为字符串
 console.log(str2, typeof str2);
 console.log(str1 + 1, str2 + 1);    //21 21

 

1.转义字符 \

转换字符本身的意义

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

案例：打印出路径：C:\Users\web

 console.log('C:\\Users\\web');      //C:\Users\web

2.API

1. length 获取字符串的长度
2. charAt():获取字符串中下标对应的字符，也可以使用数组的写法 字符串[下标]
3. indexOf():查找某一个字符或字符串第一次出现的下标，找不到返回-1
4. lastIndexOf():查找字符或者字符串最后一次出现的下标，找不到返回-1
5. toUpperCase():将英文字符转为大写
6. toLowerCase():将英文字符转为小写
7. slice(start,end):用于截取字符串，start：开始的下标 end：结束的下标，（不包含end本身）， end为空截取到最后，如果为负数表示倒数
8. substr(start,count):截取字符串，start：是开始的下标， count：截取的长度，如果count为空，表示截取到最后，如果下标为负数表示倒数
9. split( ):将字符串按照指定的字符切割为数组

案例：声明变量保存字符串javascript，遍历字符串，统计a字符出现的次数

var str = 'javascript';
for (var i = 0, count = 0; i < str.length; i++) {
    if (str.charAt(i) === 'a') {
        count++
    }
}
console.log(count);  //2

1. indexOf():查找某一个字符或字符串第一次出现的下标，找不到返回-1
2. lastIndexOf():查找字符或者字符串最后一次出现的下标，找不到返回-1

案例：声明变量保存用户输入的邮箱，如果不含有@打印‘邮箱格式不正确’，否则打印格式正确

var str = '[email protected]';
if (str.indexOf('@') === -1) {
    console.log('邮箱格式不正确')
} else { console.log('邮箱格式正确') };

 

1. oUpperCase():将英文字符转为大写
2. toLowerCase():将英文字符转为小写

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

案例：截取[email protected],分别截取出用户名和域名

var email = '[email protected]';
var a = email.indexOf('@');
var user = email.slice(0, a);
var yum = email.slice(a + 1);
console.log(user, yum)

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

案例：声明变量保存一个人的身份证号码，分别截取出出生的年月日和性别

var card = '130632199905140638';
var year = card.substr(6, 4);		//年
var mouth = card.substr(10, 2);		//月
var day = card.substr(12, 2);		//日
var sex = card.substr(-2, 1);		//性别	
if (sex % 2 === 0) {		//三目：var sex= sex%2===0?'女':'男';
    sex = '女';
} else {
    sex = '男';
}
console.log(year + '年' + mouth + '月' + day + '日' + '性别' + sex);	//1999年05月14日性别男

split( ):将字符串按照指定的字符切割为数组

案例：截取web.2009.js.jpg，截取后缀名

var str = 'web.2009.js.jpg';
var arr = str.split('.');
console.log(arr[arr.length - 1])	//jpg

3.匹配模式（了解）

用于字符串的查找和替换

1. search(/ran/i) 查找满足条件的第一个，返回下标，找不到返回-1
2. match(/ran/ig) 查找满足条件的所有，格式为数组
3. replace(/ran/ig,'xxxx') 查找并替换

/ / :用于写规则

i :ignore 忽略大小写

g :global 全局查找

20.Math 对象

不需要创建，可以直接使用

1. PI 圆周率

 //圆周率
 console.log(Math.PI);               //3.141592653589793

2. abs() 绝对值

 //绝对值
 console.log(Math.abs(20 - 52))      //32

3. ceil() 向上取整

 //向上取整
 console.log(Math.ceil(15.1))        //16

4. floor() 向下取整

 //向下取整
 console.log(Math.floor(4.9))        //4

5. round() 四舍五入取整

 //四舍五入
 console.log(Math.round(4.49))       //4

6. pow() 计算X的Y次方

 //次方
 console.log(Math.pow(4, 2))        //16

7. 获取一组数字的最大值

 //求最大值
 console.log(Math.max(10, 15, 20, 1, 9, 8));       //20

8. 获取一组数字的最小值

 //求最小值
 console.log(Math.min(10, 15, 20, 1, 9, 8));       //1

9. 获取随机数 范围 >=0 <1

 //随机
 console.log(Math.random())      //0.6799482811279387
 console.log(Math.random())      //0.9096023001148013
 console.log(Math.random())      //0.39052541748913394

案例：产生0-9之间的随机整数

 //产生一个0-9之间的随机整数
 //0~1  * 10    0~9.x     向下取整   0~9   Math.floor()
 var n = Math.floor(Math.random() * 10);
 console.log(n);

案例：随机抽人名

 var arr = ['陈聪', '胡福文', '大号正', '刘璐', '高利贷', '王骄傲', '郭悠', '小叮当', '郭晶晶', '阿强', '王宝强']
 var n = Math.floor(Math.random() * arr.length);
 console.log(n, arr[n]);

案例：声明变量，保存数组（a~h），随机取4个字母，把取到的随机放入到一个新数组

 // 练习：声明变量，保存数组（a~h），随机取4个字母，把取到的随机放入到一个新数组
 var zimu = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
 var xin = [];   //创建新数组用于保存取到的数据
 for (var i = 0; i < 4; i++) {
     var n = Math.floor(Math.random() * zimu.length);    //取1~25随机数
     xin.push(zimu[n])       //把随机取到的放入到新数组
 }
 console.log(xin)    //[ 'h', 'h', 'f', 'h' ]

案例：双色球，红球：1~33之间随机取六个，按照从小到大的排序

蓝球：1~16之间随机取一个，可以和红球代表的数字重复

 var red = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33];
 var blue = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
 var end = [];
 for (var i = 0; i < 6; i++) {
     var n1 = Math.floor((Math.random() * red.length))
     end.push(red[n1]);
     end.sort(function (a, b) {
         return a - b;
     })
     red.splice(n1, 1);
 }
 var n2 = Math.floor((Math.random() * blue.length))
 end.push(blue[n2]);
 console.log(end);

21.Data对象

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

1.创建对象

四种格式：如下

//创建Date对象
var time1 = new Date('2020/10/22 11:20:30');//不写具体几点，默认0时0分0秒
var time2 = new Date(2020, 9, 22, 11, 20, 30); //月份0~11  → 1~12
var time3 = new Date(); //存储当前电脑操作系统的时间
var time4 = new Date(100);//距离计算机元年的毫秒数所对应的时间
console.log(time1)
console.log(time2)
console.log(time3)
console.log(time4)

2获取

getFullYear/Month/Date/Hours/Minutes/Seconds/Milliseconds

案例：创建Date时间，保存当前操作系统的时间，打印出来格式如下：'XXXX 年XX月XX日 XX时 XX分 XX秒 星期四'

var time = new Date();			//获取当前电脑操作系统的时间
var year = time.getFullYear();		//获取年
var month = time.getMonth() + 1;	//获取月
var date = time.getDate();			//获取日
var hour = time.getHours();			//获取时
var minute = time.getMinutes();		//获取分
var second = time.getSeconds();		//获取秒
//如果秒数小于10，在前边拼接0
if (second < 10) {
    second = '0' + second
};
var day = time.getDay();			//获取星期
var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
day = week[day];					//if day ===2  那么day重新定义为星期二
console.log(year + '年' + month + '月' + date + '日' + ' ' + hour + '时' + minute + '分' + second + '秒' + ' ' + day);

案例：计算距离2021年元旦还有 X天 X小时 X分

var a = new Date('2021/1/1')
var b = new Date()
var A = a.getTime();
var B = b.getTime();
var c = A - B;          //计算两者相差的毫秒数
// console.log(a - b)      //Date对象相减就能得到相差的毫秒数
//把单位由毫秒转为秒
var c = parseInt(c / 1000)
// console.log(c);  //6081866
//计算相差的天数=总的相差的秒数/一天的秒数
var day = parseInt(c / (24 * 60 * 60));
// console.log(day)        //70
//总的相差秒数%一天的秒数，结果是不满一天
var hour = c % (24 * 60 * 60);      //不满一天的秒
//转为小时
hour = parseInt(hour / (60 * 60))
// console.log(hour)
var minute = c % (60 * 60);
minute = parseInt(minute / 60)
// console.log(minute);
var second = c % 60;
// console.log(second)
console.log(day + '天' + hour + '时' + minute + '分' + second + '秒')

3.转为本地字符串格式

用于调试，有兼容性问题，不同的解释器显示可能不同

1. toLocaleString()
2. toLocaleDateString()
3. toLocaleTimeString()

var time = new Date();
console.log(time);
//转为本地字符串格式
console.log(time.toLocaleString());     //2020-10-22 15:26:00
console.log(time.toLocaleDateString()); //2020-10-22
console.log(time.toLocaleTimeString()); //15:29:22

4.修改

setFullYear()/Month/Date/Hours/Minutes/Seconds/Milliseconds

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

修改不能设置星期

案例：一个员工入职、2020/10/22 三年后合同到期，计算出到期时间

var time1 = new Date('2020/10/20');
//复制一份入职时间，作为到期时间
var time2 = new Date(time1);		//复制一个对象
//三年后合同到期，计算出到期时间
time2.setFullYear(time2.getFullYear() + 3)
//分别打印出两个日期时间的本地字符串
console.log(time1.toLocaleString());	//2020-10-20 00:00:00
console.log(time2.toLocaleString());	//2023-10-20 00:00:00

案例：

var time1 = new Date('2020/10/23');
//复制一份入职时间，作为到期时间
var time2 = new Date(time1);//复制一个对象
//三年后合同到期，计算出到期时间
time2.setFullYear(time2.getFullYear() + 3)
//复制一份到期时间，作为续签时间
var time3 = new Date(time2);
//合同到期前一个月续签
time3.setMonth(time3.getMonth() - 1);
//如果是周末提前到周五
console.log(time3.getDay());
if (time3.getDay() === 6) {
    time3.setDate(time3.getDate() - 1)
} else if (time3.getDay() === 0) {
    time3.setDate(time3.getDate() - 2)
}
console.log(time3.getDate())
console.log(time3.toLocaleDateString())

 

22.Number对象

1. new Number() : 将数据转为数值，返回对象
2. Number() : 将数据转为数值，返回数值
3. toFixed(n) : 保留小数点后n为

23.Boolean对象

1. new Boolean(): 返回对象 强制将数据转为布尔型
2. Boolean(): 返回布尔型 强制将数据转为布尔型

5.错误处理

1.语法错误：SyntaxError 不符合语法规范，例如出现中文的符号，缺少括号，出现后不执行任何代码。

console.log('开头');
var a = 1；			//中文分号
console.log('结束');
//SyntaxError

2.引用错误： ReferenceError 出现了未声明的变量，影响后续的代码

console.log('开头');
var b = 2;
console.log(a);				//变量使用错误
console.log('结束');
//ReferenceError: a is not defined

3.类型错误：TypeError 使用了不存在的对象中的方法或者函数 ，影响后续代码

console.log('开头');
var arr = ['a', 'b', 'c']
console.log(arr.revers());		//reverse 拼错
console.log('结束');
//TypeError: arr.revers is not a function

4.范围错误： RangeError 超出了JS规定的范围，影响后续代码的执行

console.log('开头');
var laptop = new Array(-3);		//数组初始化长度设置了负数
console.log('结束');
//RangeError: Invalid array length

5.自定义错误： throw 错误内容 影响后续代码的执行

console.log('开头');
var age = 10;
if (age < 18 || age > 60) {
    //自定义错误
    throw '请提供一个合法的年龄'
}
console.log('结束');
// throw '请提供一个合法的年龄'

6.try{ //尝试执行，可能出现错误，一旦出现错误就会执行catch中的语句

}catch(err){ //err, 形参，接收try出现的错误信息， 执行解决错误的代码

}

try {
    //尝试执行，放可能出现的错误代码
    //即使有错误，也不会阻止后续代码的执行
    var age = 11
    if (age < 18 || age > 60) {
        throw '请提供一个合法的年龄'
    }
} catch (error) {
    //catch:捕获错误，解决错误
    //error:形参，用于接收try中出现的错误信息
    console.log(error)
    age=26;
}