前端学习-JavaScript基础

一、初识JavaScript

官网: https://www.w3.org/standards/webdesign/script

说明：

JavaScript语法规范是ECMAScript，ECMAScript由ECMA国际(前身European Computer Manufacturers Association 欧洲计算机制造商协会)设计,但是其中的浏览器API由W3C进行维护。

ECMA标准列表: https://www.ecma-international.org/publications/standards/Stnindex.htm

ECMAScript标准: https://www.ecma-international.org/publications/standards/Ecma-262.htm

ECMAScript标准内容: https://www.ecma-international.org/ecma-262/11.0/index.html

JavaScript推荐教程：
英文: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps

中文: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference

W3School JavaScript资料： https://www.w3school.com.cn/js/index.asp

菜鸟教程 JS资料：https://www.runoob.com/js/js-tutorial.html

ES6参考书：https://es6.ruanyifeng.com/

1.1 什么是JavaScript

JavaScript和Java没有任何关系。

JavaScript（缩写：JS）是一门完备的动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。

JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

特点:

是一种轻量级解释性语言，边解释便执行（对比：Java语言执行→编写Java代码，编译成class字节码，通过虚拟机加载运行）

是一种弱类型语言：声明变量不能使用具体的数据类型，变量的数据类型由值决定。（Java声明变量必须有具体的数据类型）

通常用来HTML网页中，用来处理与用户的交互。

脚本语言：

在运行之前不需要预处理的程序语言。通常由语言的解析引擎来解释执行。

说明:

JavaScript很多场景下简称为js

1.2 为什么要学习JavaScript

用于表单验证
- 用于检验数据的合法性，避免错误数据的产生
- 用于减轻服务器的压力
用于页面的交互特效
- 常见的页面动画效果
- 软件业务要求的处理
jQuery、Vue.js、React.js、微信小程序等等的学习基础
因为其是脚本语言，所以它还可以用于游戏的编写

二、JavaScript的组成

ECMAScript：语法规范标准，现在常用的语法规范标准是ES6版本。
- 变量
- 数据类型
- 运算符
- 程序逻辑：顺序结构，分支结构（条件结构），循环结构
- 数组、函数
- 对象
- 关键字，保留字
BOM对象：（Brower Object Model）浏览器对象模型，提供了与浏览器交互通信。（面试常问）
DOM对象：（Document Object Model）文档对象模型，用来访问和操作HTML文档。（面试常问）

三、ECMAScript的语法

3.1 使用JavaScript的方式

在HTML中使用JS脚本的三种方式

3.1.1 嵌入式：

内部JavaScript(Internal JavaScript)：通过在页面中使用

<script type="text/javascript">// 书写JS代码(在控制台显示内容)console.log('Hello World!!!')// 书写JS代码(在页面显示内容)document.write('Hello World!!!');
</script>

3.1.2 外部文件引入(External JavaScript)：

通过页面中使用

<!-- 引入外部自定义js文件 -->
<script type="text/javascript" src="./js/index.js"></script>

3.1.3 事件定义方式（Inline JavaScript handlers）：

通过在页面标签中添加事件属性，书写JS脚本（不推荐）

<button onclick="console.log('你点了我')">点我</button>

3.2 变量（熟记）

官方地址：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Variables

变量的命名规则
- 首字符：只能使用字母、下划线（_）、美元符号($)
- 其余部分：只能使用字母、下划线（_）、美元符号($)和数字
- 不能使用关键字和保留字(ES6关键字和保留字：http://wiki.xuetang9.com/?p=7476)
变量的命名规范
- 使用驼峰命名：第一个单词的首字母小写，其余单词的首字母大写
- 不建议使用单个字母作为变量名，取名要语义化。见名知意。
变量的使用步骤
- 声明变量
- 变量赋值
- 使用变量

3.2.1 var声明变量

JavaScript是一种弱类型语言，没有明确的数据类型

在声明变量时，不需要指定变量类型，变量的类型由赋给变量的值决定

我们每一行代码结尾都是使用了;号表示一行代码的结束，在非严格要求下是可以不写;号的，推荐加上

//先声明后赋值
var number;
number = 20;
//声明并赋值
var name = "Jack";
var weight = 120,height = 175;
//不声明直接赋值（不允许使用）
count = 1000;
// 在ES5中没有赋值的变量默认值为 undefined
var age;
console.log(age);// ES5变量提升(不允许使用)
console.log(sex);
var sex = 12;

3.2.2 let声明变量

ES6.0 新增了let命令，用来声明变量，它的用法类似于var，let与var的作用域不同且不会变量提升

//ES6作用域不同
{var num1 = 1;let num2 = 2;
}
console.log(num1);//输出1
console.log(num2);//异常//ES6没有变量提升
console.log(sex);
let sex = 12;

3.3 常量

使用const关键字定义常量。常量不能再次赋值。通常常量名使用全大写，多个单词使用下划线连接。

// 定义常量
const DAYS = 7;
const ADD_USER_INFO;
// 常量不能再次赋值
DAYS ++; //Uncaught TypeError: Assignment to constant variable.
// 常量在定义时必须赋值
const FOO;  //SyntaxError: Missing initializer in const declaration

3.4 数据类型

尽管在声明变量时不需要声明变量的数据类型，这并不代表JavaScript中没有数据类型，它由赋给变量的值决定。在JavaScript中，提供了常用的基本数据类型

3.4.1 5种简单数据类型

类型	说明
number	数值,包括整数浮点数
string	字符串，使用单引号或者双引号包裹
boolean	boolean类型,0为false，非零为true
null	空,表示没有任何值的指向。认为null是一种特殊的object
undefined	未赋值,表示未赋值的变量

3.4.2 复杂的数据类型

类型	说明
Object	对象
Function	函数
Array	数组，存储多个值（特殊的对象）

判断数据类型：使用 typeof 获取类型

示例:

console.log(1,typeof 1); // number
console.log('123',typeof '123'); // string
console.log(true,typeof true); // boolean
console.log(null,typeof null); // object
console.log(undefined,typeof age);// age未定义，或者没有初始化 ,undefined
console.log({},typeof {}); // object
console.log(function(){},typeof function(){}); // function
console.log([],typeof []); // object

3.4 运算符

3.4.1算数运算符

+、-、 *、 /、 %、**、++、--

说明

两个数字不能计算时：结果为 NAN。

除0的时候：结果Infinity。表示无限大

在JavaScript中**表示指数运算

console.log('加法运算：%d',1 + 2);
console.log('减法运算：%d',20 - 58);
console.log('乘法运算：%d',5 * 6);
console.log('除法运算：%f',60 / 7);
console.log('取模运算：%d',3000 % 67);
let num1 = 100,num2 = 80;
console.log('数字++：%d',num1++);
console.log('数字++之后：%d',num1);
console.log('++数字：%d',++num2);
let num3 = 50,num4 = 30;
console.log('数字--：%d',num3--);
console.log('数字--之后：%d',num3);
console.log('--数字：%d',--num4);

3.4.2 关系运算符（比较运算符）

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

说明

===、!== 表示恒等或恒不等，比较过程中会比较数据的类型

3.4.3 逻辑运算符

! 、&&、||

逻辑或：通常用于赋默认值。

3.4.4 赋值运算符：

= 、+= 、-=、*= 、/= 、%= 、**=

3.5 程序逻辑

3.5.1 顺序

一般情况下都是同步逻辑，即从上至下依次执行代码。后续我们会接触到异步逻辑，其逻辑会延迟等待服务器响应后才会继续执行。

3.5.2 分支

if-[else if]-else

说明:

基础的条件结构

ES中依旧支持三元运算符

配合逻辑运算符使用：
&&：多个条件同时为true，则返回true，任意一个条件为false，则返回false

||：任一一个条件为true，则返回true，否则，返回false

!：非运算符，表示取反条件，若原条件为true，则返回false，反之返回true

switch-case

语法：

switch(表达式或变量) {case a:代码块break;case b:代码块break;default:默认代码块
}

说明：

横值判断的条件结构

如果一个case末尾没有写break，那么在当前case的逻辑执行完毕后，会继续执行紧靠的下一个case中的逻辑

示例：

let constellation = prompt('请输入您的星座');
switch (constellation) {case '白羊座':alert('白羊座是十二宫第一个星座，白羊们乐观开朗，活泼可爱，性格上也大大咧咧，给人一中看上去就非常愉悦的感觉，这是上天赋予他们的天赋，总是那么的热情、阳光、率真。白羊对朋友也非常的仗义，爱恨分明，慷慨大方，虽然有些时候会有一点脾气，但是谁还没有二两脾气呢？和白羊座交朋友，他们会给你带来无限的欢声笑语，让你永远在祥和的气氛中生活。');break;case '金牛座':alert('踏实、稳健的金牛座是一个保守的星座，他们喜欢安定的生活，性格上属于慢热型，无论是工作、生活，他们都需要一段时间的适应。财富是金牛座与生俱来的特质，他们在投资方面有着独到的眼光，金牛座对恋人的格言是：我负责挣钱养家，你只需负责貌美如花。而且金牛座对美食也有着很高的鉴赏水平，喜欢宁静的环境，喜欢一切美好的事物。');break;case '双子座':alert('双子座不会拒绝任何新鲜的事物，好奇的双子座有着极高的情商，和双子座聊天永远不会让你感觉寂寞，聪明的小脑袋里装满都是新鲜和古灵精怪的东西，这也让双子座有着更多的朋友。双子座如果想带你去一个地方玩的话，他会把这个地方说成人间仙境一般，甚至都不落下一个细节。双子总是给人一种花心的感觉，实际上双子只是喜欢新鲜事物，而且一直追求着。');break;default:alert('其他星座');
}

3.5.3 循环

while

只要条件为 true，循环结构中的代码块能够一直重复执行

语法：

while (条件) {要执行的代码块
}

do-while

是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环

语法：

do {要执行的代码块
} while (条件);

for

假如您需要运行代码多次，且每次使用不同的值，那么循环for相当方便使用

语法：

for (语句 1; 语句 2; 语句 3) {要执行的代码块
}

示例

斐波那契数列：由意大利数学家列昂纳多·斐波那契发明，这个数列从第三项开始，每一项都等于前两项之和，如：1、1、2、3、5、8……
现在我们用for循环来输出前50位斐波那契数列的值

let str = "";
let one = 1,two = 1;    //记录前两个数
let num = 50;           //要输出的总数
for(let i = 1;i <= num; i++) {if(i >= 3) {let end = one + two;    //先计算当前数的值one = two;              //将第二个数的值赋值给第一个数two = end;              //将新的值赋值给第二个数if(i === 50) {str += end;}else {str += end + '、';}}else {str += 1 + '、';}
}
console.log(str);

结束循环的方式

break：终止整个循环，让逻辑往后继续

continue：跳过本次循环，继续后续的循环

return：它只能放在函数中，其作用是跳出整个函数逻辑，相当于循环也结束了

3.6 函数编程

3.6.1 概念

函数允许你在定义的区块内存储一段代码用来执行一个单独的任务，然后调用该段代码时，你需要使用一个简短的命令，而不用重复编写多次该段代码。

函数与方法

方法是在对象内定义的函数 , 参考链接 https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions

3.6.2 函数语法

function 函数名(参数1,参数2...) {// 代码[return [返回值];]
}

说明

普通函数名规则与规范遵守变量命名规则规范，作为构造函数时使用帕斯卡命名规范(后续讲解)

因为JavaScript本身是弱类型，所以它的参数也没有类型检查和类型限定。函数中的参数是可选的，根据函数是否需要带参，可分为不带参的无参函数和有参函数

参数列表的多个参数使用逗号隔开，例如(name,age)，且参数名不能相同

return语句用来规定函数的返回值，当然函数不一定需要返回值

匿名函数：

使用function定义，function关键字后没有名称时，称为匿名函数

let 函数名 = function(参数1,参数2...){...
}

3.6.3 调用语法

要执行一个函数，必须先调用这个函数，当调用函数时，必须指定函数名以及后面的参数（如果是有参函数）

函数名(实参列表);

3.6.4 自执行函数

直接执行匿名函数，无需通过额外的方式调用

//1 可以使用开头
!function(形参列表){//alert(形参列表);
}(实参列表);
//2 使用()将函数及函数后的括号包裹
(function(){}());
//3 使用()值包裹函数值(无法表明函数与之后的()的整体性，不推荐使用)
(function(){})();

3.6.5 参数的默认值

function log(x, y = 'World') {console.log(x, y);
}

3.6.6 扩展参数rest

用于获取函数的多余参数。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中

rest 参数之后不能再有其他参数（即只能是最后一个参数）

function push(...items) {console.log(items);
}
push(1, 2, 3);

3.6.7 解构

ES6可以从数组中提取值，按照对应位置，对变量赋值

let [a, b, c] = [1, 2, 3];
console.log(a); let [ , , z] = ["a", "b", "c"];
console.log(z); let [head, ...tail] = [1, 2, 3, 4];
console.log(head);
console.log(tail);let [foo = true] = [];

3.6.8 闭包

词法作用域：词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。嵌套函数可访问声明于它们外部作用域的变量

function init() {let name = "不知火舞";         // name 是一个被 init 创建的局部变量function displayName() {     // displayName() 是内部函数，一个闭包alert(name);             // 使用了父函数中声明的变量}displayName();
}

基础用法：

function welcomeFunc() {let text = "不知火舞";return function () {alert(text);}
}
let myFunc = welcomeFunc();
myFunc();

进阶用法：

function addFunc(x) {return function(y) {return x + y;};
}let add5 = addFunc(5);
let add10 = addFunc(10);
console.log(add5(2));        // 7
console.log(add10(2));      // 12

3.7 箭头函数定义

箭头函数语法比函数表达式更简洁，但是它没有自己的this

基本语法：

3.7.1 多个参数时

//普通函数
function f(参数1, 参数2,..., 参数N){//内部逻辑
}//箭头函数
(参数1, 参数2, ..., 参数N) => { //内部逻辑
}

3.7.2 单个参数时

//普通函数
function f(参数1) {//内部逻辑
}//箭头函数
参数1 => { //内部逻辑
}

3.7.3 无参数时

//普通函数
function f() {//内部逻辑
}//箭头函数
() => { //内部逻辑
}

3.7.4 返回一个单行表达式

//普通函数
function f() {return 表达式;
}//箭头函数
() => 表达式;

3.7.5 返回对象

//普通函数
function f(参数1, 参数2,..., 参数N) {return {属性名: 值,...}
}//箭头函数
(参数1, 参数2,..., 参数N) => ({属性名: 值,...
});

3.8 对象

3.8.1 自定义对象

自定义对象方式：

let 对象名 = {属性名:值,...
}

属性的值可以是任何数据类型，包括其它对象、函数

为对象赋值或者添加新的属性并赋值

对象名.属性名 = 值;
对象名.新属性名 = 值; // 新属性名在对象的大括号中没有定义
对象名[属性名字符串] = 值;   //该方式常用于动态设置属性，因为[]中可以是变量

对象取值

let 变量名 = 对象名.属性名;
let 变量名 = 对象名[属性名字符串];

in运算符：查看对象的某个属性是否存在

let 变量名 =  "属性名" in 对象名;

delete操作符：删除对象的某个属性

delete 对象名.属性名;

3.8.2 遍历对象方式

for-in：遍历对象属性

迭代获取对象属性名称

// 创建对象
let section = {id:375,name:'官方公告区',iconPath:'../imgs/notic.png',description:'官方发布公告的内容'
};
// 迭代对象
for(let propertyName in section){console.log(propertyName+":"+section[propertyName]);
}

for-of：遍历对象数组

遍历对象数组中的每个对象（类似于java中的foreach结构）

for(let sectionName of sections){console.log(sectionName);
}

3.8.3 this关键字

在function定义的函数中，this关键字指代函数的调用对象

var name = 'window';
function show(){console.log(this);console.log(this.name);
}
show();      //一次调用
function show2(){show();  //二次调用
}
show2();//对象隐式绑定
var obj = {name: 'obj',show: show    //对show方法进行引用
}
obj.show();//显示绑定
show.apply(obj);
show.call(obj);
show.bind(obj)();

箭头函数的this是函数被创建时绑定的，它指向当前词法作用域中的this

自身没有this

不会因被怎么样的方式调用改变绑定

var str = 'window';
const obj = {str:'obj',nativeFn: function(){console.log(this.str, '当前词法作用域中的this');return function(){console.log('原生函数',this.str);}},arrowFn: function(){console.log(this.str, '当前词法作用域中的this');return ()=>{console.log('箭头函数',this.str);}}
};
const obj2 = { str: 'obj2'};var nativeFn = obj.nativeFn();
var arrowFn = obj.arrowFn();
console.log('函数调用一 **********');
nativeFn();
arrowFn();console.log('函数调用二 **********');
nativeFn.call(obj2);
arrowFn.call(obj2);console.log('函数调用三 **********');
setTimeout(function(){nativeFn();arrowFn();
},50);

3.9 内置对象（熟记）

3.9.1 String

构造函数

构造函数	说明
String()	无参构造创建字符串对象
String(字符串)	通过带参构造创建字符串对象

ES中主要使用单引号或者双引号创建字符串对象,注意使用引号创建的字符串属于’string’类型，但是使用new String()创建的对象属于’object’类型

属性与方法

几乎java字符串有的方法在ES的内置对象String中都有

类别	名称	说明
属性	length	获取字符串长度
方法	charAt(索引)	获取指定索引字符
方法	indexOf(查找字符串)	获取指定值在字符串中首次发现所在索引,未找到返回-1
方法	split(字符)	按照指定的字符进行分割形成字符串数组
方法	slice(起点,终点)	获取指定索引的字符串，不包含终点（终点索引不能比起点小）
方法	substr(起点,长度)	获取指定索引，指定个数字符组成的字符串
方法	substring(起点,终点)	获取两个指定索引之间的字符串（终点索引可以比起点小）
方法	toLowerCase()/toUperCase()	将字符串转换为小写/大写
方法	replace(目标字符串,新字符串)	将字符串中指定内容替换为新字符串内容(支持正则表达式)

let message = "JavaScript 的标准是 ECMAScript 。截至 2012 年，所有的现代浏览器都完整的支持  ECMAScript 5.1，旧版本的浏览器至少支持 ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为 ECMAScript 6 或者 ES6。自此，ECMAScript 每年发布一次新标准。";//获取字符串长度
console.log(message.length);
//获取指定索引字符
console.log(message.charAt(5));
//获取首个指定字符串所在的索引位置
console.log(message.indexOf('ECMAScript'));
//拆分
console.log(message.split('。'));
//获取指定索引的字符串，不包含终点（终点索引不能比起点小）
console.log(message.slice(3,5));
//获取指定索引，指定个数字符组成的字符串
console.log(message.substr(3,5));
//获取两个指定索引之间的字符串（终点索引可以比起点小）
console.log(message.substring(3,0));
//将字符串转换为小写
console.log(message.toLocaleLowerCase());
//将字符串转换为大写
console.log(message.toLocaleUpperCase());
//普通文本替换
console.log(message.replace('微博','***'));
//正则表达式替换
console.log(message.replace(/微博/g,'***'));

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量（需要将变量名写在${}之中）

它是增强版的字符串，因此它同样可以使用上面的属性和方法

let name = '使命召唤手游';    //游戏名称
let company = '腾讯';     //厂商
let description = '周杰伦助阵代言，TGA最佳移动游戏，《使命召唤手游》终于在战士们的期待声中于2020年12月25日强势登场。作为使命召唤系列在移动端的延续，我们在努力还原经典玩法地图角色的同时，还结合手机端的操作特点进行了适配优化。同时，我们也针对大家反馈的匹配机制、枪械平衡、配音特效等问题进行了调整，希望给战士们带来最优质的游戏体验。';//字符串拼接方式，繁杂且容易出错
document.write('<h4>游戏名称：' + name + '</h4>' +'<h6>厂商：' + company + '</h6>' +'<p>' + description + '</p>'
);//模板字符串方式，简单，不易出错
document.write(`<h4>游戏名称：${name}</h4><h6>厂商：${company}</h6><p>${description}</p>
`)

3.9.2 Array

构造函数

构造函数	说明
Array()	创建空数组
Array(长度)	创建指定空间数组
Array(元素列表)	根据传入的元素个数创建数组

说明：

在ES中使用主要中括号方式创建数组

属性与方法

类别	名称	说明
属性	length	设置或返回数组中元素的数目
方法	数组[索引]	访问数组指定索引元素
方法	join(分割符)	把数组所有元素放入一个字符串，通过一个分割符进行分割（不适用于对象数组）
方法	push(元素)	向数组末尾添加一个或多个元素，并返回新的数组长度
方法	pop()	移除并返回数组最后一个元素
方法	splice(索引,删除个数,添加元素列表)	从数组中的指定索引位置，添加或删除指定数量的元素
方法	indexOf(元素)	获取对应元素的索引位置（不适用于对象数组）
方法	concat(待拼接数组列表)	把几个数组合并成一个数组并返回
方法	forEach(callback(value[,index]))	数组每个元素都执行一次回调函数 value为值(必须有)、index为索引(可以有)
方法	filter(callback(value[,index]))	检测数组元素，并返回符合条件所有元素的数组 value为值(必须有)、index为索引(可以有)
方法	map(callback(value[,index]))	创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果 value为值(必须有)、index为索引(可以有)

//基本数据类型数组
let array1 = [1,2,3,4,5,6];
//对象数组
let array2 = [{name: '张三',age: 12,score: 89},{name: '李四',age: 14,score: 78},{name: '王五',age: 13,score: 93}
];//获取数组长度
console.log(`数组1的长度为：${array1.length}`);//获取指定索引元素
console.log(`数组2索引1的数据为：`,array2[1]);//分割
console.log(`数组1使用短横线分割后：${array1.join('-')}`);//向数组末尾添加一个或多个元素，并返回新的数组长度
console.log(`数组1添加一个100：${array1.push(100)}`);
array2.push({name: '赵六',age: 13,score: 100
})
console.log(`数组2添加一个对象：`,array2);//移除最后一个元素
console.log(`移除前：`,array1);
array1.pop();
console.log(`移除后：`,array1);

3.9.3 JSON

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null

JSON的属性名称必须是双引号括起来的字符串；最后一个属性后不能有逗号

JSON对象基本结构示例

let responseData = {"data": {"list": [{"name": '张三',"age": 12,"score": 89},{"name": '李四',"age": 14,"score": 78},{"name": '王五',"age": 13,"score": 93}],"totalNumber": 48},"message": '获取学生列表数据成功',"code": 200
}

方法列表

类别	名称	说明
方法	parse	解析JSON字符串并返回对应的值
方法	stringify	返回与指定值对应的JSON字符串

在vue中，我们经常使用JSON.parse(JSON.stringify(数据))的方式，对数据进行深度拷贝

3.9.4 Date

构造函数

构造函数	说明
new Date()	当前时间日期对象
new Date(毫秒数)	指定毫秒数日期对象,1970-01-01 00:00:00开始
new Date(dateString)	指定格式字符串日期,MM DD，YYYY hh:mm:ss
new Date(年,月,日,小时,分,秒,毫秒)	创建指定数值的日期对象

成员方法

名称	说明
getFullYear()	从 Date 对象以四位数字返回年份
getMonth()	从 Date 对象返回月份 (0 ~ 11)
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay ()	从 Date 对象返回一周中的某一天 (0 ~ 6)，0为星期天
getHours ()	返回 Date 对象的小时 (0 ~ 23)，24时自动变为0
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

//获取当前的日期对象
let dateData = new Date();//获取当前的年份
let year = dateData.getFullYear();
console.log(`今年是：${year}年`);
//获取当前的月份(0~11)
let month = dateData.getMonth() + 1;
console.log(`本月是：${month}月`);
//获取当天的日期
let date = dateData.getDate();
console.log(`今天是：${date}日`);
//获取当天的星期数
let day = dateData.getDay();
console.log(`今天的星期数是：${day}`);
//获取当前的小时数(0~23)，24时自动变为0
let hour = dateData.getHours();
console.log(`当前是：${hour}点`);
//获取当前的分钟数(0~59)
let minute = dateData.getMinutes();
console.log(`当前是：${minute}分`);
//获取当前的秒数(0~59)
let second = dateData.getSeconds();
console.log(`当前是：${second}秒`);
//获取当前的豪秒数(0~59)
let millisecond = dateData.getMilliseconds();
console.log(`当前是：${millisecond}豪秒`);
//获取 1970 年 1 月 1 日至今的毫秒数
let time = dateData.getTime();
console.log(`1970 年 1 月 1 日至今的毫秒数是：${time}豪秒`);//获取本月有多少天
let mineDate = new Date(year,month,0);
console.log(`${year}年${month}月一共有:${mineDate.getDate()}天`)

3.9.5 Math

属性和方法

类别	方法	描述
属性	E	返回算术常量 e，即自然对数的底数（约等于2.718）
属性	PI	返回圆周率（约等于3.14159）
方法	abs(x)	返回 x 的绝对值
方法	ceil(x)	对 x 进行上舍入
方法	floor(x)	对 x 进行下舍入
方法	max(x,y,z,…,n)	返回最高值
方法	min(x,y,z,…,n)	返回最低值
方法	pow(x,y)	返回 x 的 y 次幂
方法	random()	返回 0 ~ 1 之间的随机数（不包括1）
方法	round(x)	把 x 四舍五入为最接近的整数
方法	sqrt(x)	返回 x 的平方根

//算术常量e的值
console.log(Math.E);
//圆周率
console.log(Math.PI);
//绝对值
console.log(Math.abs(-183));
//获取最大值
let number = [2,56,23,567,13,54];
console.log(Math.max(...number));/*** 获取指定范围的随机一个整数值* @param minNum 最小值* @param maxNum 最大值* @returns number 整数*/
function getRandomNum(minNum, maxNum) {//假设我们希望获取一个10~100的随机整数//1. Math.random() 获取一个0~1的随机小数(不包括1） 也就是[0,1)//2. maxNum - minNum 计算出两个数的差值 也就是100-10=90//3. Math.random() * (maxNum - minNum) 的值就变成了[0,90)//4. Math.random() * (maxNum - minNum) + minNum 的值就变成了[10,100)//5. Math.floor(Math.random() * (maxNum - minNum) + minNum) 的值就变成了[10,99]，可以发现这里100没有包含进来，因此在maxNum - minNum需要+1return Math.floor(Math.random() * (maxNum - minNum + 1) + minNum);
}

8. 浏览器中的JS代码调试

设置断点

刷新页面运行程序

通过单行或者进入的方式查看程序执行过程以及，执行过程中的数据

8.1 设置断点

1. 通过F12键 ，进入浏览器调试模式
2. 找到浏览开发者窗体Source选项
3. 在page界面中找到需要调试的代码
4. 在代码的指定行设置断点

8.2 开始调试

1. 在开发者窗体按Ctrl+R
2. 在页面展示窗体按F5或者Shift + F5, Shift + F5会帮助我们清空本地缓存从服务器重新获取数据