03 day1--javascript笔记pink老师-基础知识看这一篇就够了！

Ting7亭子

已于 2023-10-01 15:01:00 修改

阅读量3.5k

点赞数 12

分类专栏：前端学习基础--计算机基础、HTML、CSS、JS 文章标签： javascript

于 2021-08-30 16:09:36 首次发布

本文链接：https://blog.csdn.net/qq_36932169/article/details/119989927

版权

前端学习基础--计算机基础、HTML、CSS、JS 专栏收录该内容

8 篇文章 13 订阅

订阅专栏

内容	链接
day1 基础知识大总结（JS使用、变量、数据运算、数组、函数、作用域）	链接
day2 对象	链接
day3 进阶API之DOM技术	链接
day4 进阶API之BOM技术	链接
day5 提高之面向对象ES6	链接

1 初识JavaScirpt

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
现在也可以基于 Node.js 技术进行服务器端编程
JavaScript 的作用
表单动态校验（密码强度检测）（ JS 产生最初的目的）、网页特效、服务端开发(Node.js)、桌面程序(Electron)、App(Cordova) 、控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)
HTML/CSS/JS 的关系
- HTML/CSS 标记语言–描述类语言 :HTML 决定网页结构和内容( 决定看到什么 )，CSS 决定网页呈现给用户的模样
- JS 脚本语言–编程类语言:实现业务逻辑和页面控制( 决定功能 )，相当于人的各种动作

1.1 JS简单介绍

1.1.1 浏览器执行JS简介

浏览器分成两部分：渲染引擎和 JS 引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
JS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

1.1.2 JS的组成

JavaScript 包括 ECMAScript、DOM、BOM
在这里插入图片描述

1.1.3 ECMAScript

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广
泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript更多参看MDN.
ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
在这里插入图片描述

1.2 DOM和BOM文档对象模型

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

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

1.3 初体验

1.3.1 行内式

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

可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性)，如： onclink
注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
可读性差，在 HTML 中编入 JS 大量代码时，不方便阅读
特殊情况下使用

1.3.2 内嵌式JS

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

可以将多行JS代码写到

1.3.3 外部JS

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

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

1.4 注释

1.4.1 单行注释

快捷键 ctrl + /

//  单行注释

1.4.2 多行注释

快捷键 shift + alt + a
vscode中修改快捷键方式：vscode➡ 首选项按钮➡ 键盘快捷方式 ➡ 查找原来的快捷键➡ 修改为新的快捷键➡ 回车确认

/*
	多行注释
*/

1.5 输入输出语句

方法	说明	归属
alert(msg);	浏览器弹出警示框	浏览器
console.log(msg);	浏览器控制台打印输出信息	浏览器
prompt(info);	浏览看弹出输入框，用户可以输入	浏览器

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

1.6 JSON

JSON 是存储和传输数据的格式。
JSON 经常在数据从服务器发送到网页时使用。

JSON 指的是 JavaScript Object Notation
JSON 是轻量级的数据交换格式
JSON 独立于语言 *
JSON 是“自描述的”且易于理解

JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。

{
"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"},
    {"firstName":"Alan", "lastName":"Turing"}
]
}

JSON 语法规则：
数据是名称/值对；数据由逗号分隔；花括号保存对象；方括号保存数组
使用 JavaScript 的内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象var obj = JSON.parse(text);

1.7 调试

如果您的浏览器支持调试，那么您可以f12使用 console.log() 在调试窗口中显示 JavaScript 的值

在调试窗口中，您可在 JavaScript 代码中设置断点

debugger 关键词会停止 JavaScript 的执行，并调用（如果有）调试函数。这与在调试器中设置断点的功能是一样的。如果调试器不可用，debugger 语句没有效果。如果调试器已打开，此代码会在执行第三行之前停止运行。

1.8 一些常用规范

变量名：驼峰式大小写，首字母小写，第二个大写firstName

运算符（ = + - * / ）周围以及逗号之后添加空格

始终使用对代码块缩进使用 4 个空格

始终以分号结束单条语句;

针对复杂语句（compound）的通用规则：

请在第一行的结尾处写开括号
请在开括号前使用一个空格
请在新行上写闭括号，不带前导空格
请不要以分号来结束复杂语句

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

对象定义的通用规则：

把开括号与对象名放在同一行
在每个属性与其值之间使用冒号加一个空格
不要在最后一个属性值对后面写逗号
请在新行上写闭括号，不带前导空格
请始终以分号结束对象定义

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

//可以对短对象在一行中进行压缩，只在属性之间使用空格，就像这样：
var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

为了提高可读性，请避免每行的长度超过 80 个字符。

尽量少地使用全局变量。它包括所有的数据类型、对象和函数。全局变量和函数可被其他脚本覆盖。请使用局部变量替代，并学习如何使用闭包。

一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。
在声明变量时对其进行初始化是个好习惯。

// 在开头进行声明和初始化
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

eval() 函数用于将文本作为代码来允许。在几乎所有情况下，都没有必要使用它。

请不要把字符串、数值和布尔值声明为对象！
如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象。对象无法进行对比
请注意 (x==y) 与 (x===y) 的区别：
当使用 == 相等运算符时，相等字符串是相等的
当使用 === 运算符时，相等字符串是不相等的，因为 === 运算符需要类型和值同时相等。

2 变量

2.1 变量概述

变量就是一个装东西的盒子。用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改
本质：变量是程序在内存中申请的一块用来存放数据的空间

2.2 变量用法

2.2.1 变量初始化

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

//声明变量同时赋值为18
var age = 18; 
// = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
// 一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
//同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。
var age = 18, address ='火影村',salary = 15000;

2.2.2 变量声明特殊情况

情况	说明	结果
var age; console.log(age);	只声明，不赋值	undefined
console.log(age)	不声明不赋值	直接使用
age = 10;console.log(age);	不声明只赋值	10

2.2.3 变量命名规范

由字母(A-Z,a-z)，数字(0-9)，下划线(_)，美元符号($)组成，如:usrAge,num01,__name
严格区分大小写。 var app; 和 var App; 是两个变量
不能以数字开头。
不能是关键字，保留字。例如：var,for,while
遵循驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
推荐翻译网站：有道爱词霸

3 数据运算

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

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

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

JS 把数据类型分为两类：

基本数据类型(Number,String,Boolean,Undefined,Null)
复杂数据类型(Object)

3.1 基本数据类型

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21，0.21	0
Boolean	布尔值类型，如true，false ，等价于1和0	false
Undefined	var a; 声明了变量a但是没有赋值，此时a=undefined	undefined（未定义的）
string	字符串类型，如“张三”	“”
Null	var a = null;声明了变量a为空值	null

3.1.1 数字型 Number

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

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

1. 进制：
最常见的进制有二进制、八进制、十进制、十六进制。在JS中八进制前面加0，十六进制前面加 0x。

// 1.八进制数字序列范围：0~7
var num1 = 07; 		//对应十进制的7
var Num2 = 019;		//对应十进制的19
var num3 = 08;		//对应十进制的8

// 2.十六进制数字序列范围：0~9以及A~F
var num = 0xA;

2. 数字型范围：

JS中数值的最大值：Number.MAX_VALUE
JS中数值的最大值：Number.MIN_VALUE

consol.log(Number.MAX_VALUE);
consol.log(Number.MIN_VALUE);

3. 三个特殊值

alert(Infinity); 	//Infinity(无穷大) 大于任何数值
alert(-Infinity); 	//-Infinity(无穷小) 小于任何数值
alert(NaN);       	//NaN - Not a Number ,代表任何一个非数值

4. isNaN
这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false，如果不是数字返回的是true

var userAge = 21;
var isOk = isNan(userAge);
console.log(isNum);		//false,21不是一个非数字

var userName = "andy";
console.log(isNan(userName));	//true,"andy"是一个非数字

3.1.2 字符串String

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

var strMsg = "我爱北京天安门~";		//使用双引号表示字符串
var strMsg = '我爱北京';			  //使用单引号表示字符串

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。
1. 字符串引号嵌套
JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

var strMsg ='我是一个“高富帅”' //可以用 ' ' 包含 " "
var strMsg2 ="我是'高富帅'" //可以用" "  包含  ''

2. 字符串转义符
类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n是newline
\ \	斜杠\|
\ ’	’ 单引号
\ ‘’	‘’ 双引号
\ t	tab 缩进
\ b	空格，b是blank的意思
3. 字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

//通过字符串的length属性可以获取整个字符串的长度
var strMsg = "我是高富帅！";
alert(strMsg.length);     //显示6

4. 字符串的拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
注意：字符串 + 任何类型 =拼接之后的新字符串
+号总结口诀：🌏数值相加，字符相连🌏

//1 字符串相加
alert('hello' + ' ' + 'World');  //hello World

//2 数值字符串相加
alert('100' + '100'); //100100

//3 数值字符串+数值
alert('12'+12); //1212

//4 数值+数值
alert(12+12); //24

var  age = 18;
console.log('我今年'+age+'岁');
console.log('我今年'+age+'岁');  //引引加加，最终也是上面的形式

5.字符串拼接加强

console.log('Pink老师' + 18);			//只要有字符就会相连
var age = 18;
// console.log('Pink老师age岁了');		//这样不行,会输出 "Pink老师age岁了"

console.log('Pink老师' + age);		 // Pink老师18
console.log('Pink老师' + age + '岁啦');	// Pink老师18岁啦

我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
变量是不能添加引号的，因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接，口诀🌏“引引加加 ”，删掉数字🌏变量写加中间

3.1.3 布尔型Boolean

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

var flag = true;
console.log(flag + 1); // 2 true当加法来看当1来看，flase当0来看

3.1.4 undefined未定义

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
undefined 和字符串相加，会拼接字符串
undefined 和数字相加，最后结果是NaN

// 如果一个变量声明未赋值，就是undefined 未定义数据类型
var str;
console.log(str);				//undefined
var variable = undefined;
console.log(variable + 'Pink'); //variablePink
console.log(variable + 18); //NaN

3.1.5 空值null

一个声明变量给 null 值，里面存的值为空

var space = null;
console.log(space + 'pink'); //nullpink
console.llog(space + 1); // 1

3.2 typeof

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

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

不同类型的返回值

类型	例	结果
string	typeof “小白”	“string”
number	typeof 18	“number”
boolean	typeof true	“boolean”
undefined	typeof undefined	“undefined”
null	typeof null	“object”
字面量：
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

数字字面量：8，9，10
字符串字面量：‘大前端’，‘后端’
布尔字面量：true、false
通过控制台的颜色判断属于哪种数据类型

黑色	字符串
蓝色	数值
灰色	undefined 和 null

3.3 数据类型转换

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

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

方式	说明	案例
toString()	转成字符串	var num = 1; alert(num.toString());
String()强制转换	转成字符串	var num = 1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num =1; alert(num+“我是字符串”);

//1.把数字型转换为字符串型 toString()  变量.toString()
var num = 10;
var str = num.toString();
console.log(str);

//2.强制转换
console.log(String(num));

toString() 和 String() 使用方式不一样
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一方式也称为隐式转换。
②转换为数字型
- 注意 parseInt 和 parseFloat ，这两个是重点
  - 隐式转换是我们在进行算数运算的时候，JS自动转换了数据类型

方式	说明	案例
parselnt(string)函数	将string类型转成整数数值型	parselnt(‘78’)
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(‘78.21’)
Number()强制转换函数	将string类型转换为数值型	Number(‘12’)
js 隐式转换(- * /)	利用算术运算隐式转换为数值型	‘12’-0

// 1.parseInt()
var age =prompt('请输入您的年龄');
consolo.log(parseInt(age));  //数字型18
consolo.log(parseInt('3.14'));  //3取整
consolo.log(parseInt('3.94'));  //3,不会四舍五入
consolo.log(parseInt('120px'));  //120,会去掉单位

// 2.parseFloat()
console.log(parseFloat('3.14'));  //3.14
consolo.log(parseFloat('120px'));  //120,会去掉单位


// 3.利用Number(变量)
var str ='123';
console.log(Number(str));
console.log(Number('12'));   

// 4.利用了算术运算 - * /   隐式转换
console.log('12'-0);  // 12
console.log('123' - '120');  //3
console.log('123' * 1);  // 123

3.4 运算符

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

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

3.4.1 算数运算符

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

运算符	描述	实例
+	加	10 + 20 =30
-	减	10 - 20 =-10
*	乘	10 * 20 =200
/	除	10 / 20 =0.5
%	取余数（取模）	返回出发的余数 9 % 2 =1
浮点数的精度问题:
浮点数值的最高精度是17位小数，但在进行算数计算时其精确度远远不如整数。所以不要直接判断两个浮点数是否相等

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

3.4.2 递增（++）和递减（- -）运算符

放在变量前面时，我们称为前置递增(递减)运算符
放在变量后面时，我们称为后置递增(递减)运算符
注意：递增和递减运算符必须和变量配合使用。
①前置递增运算符🔥 ++num num = num + 1
使用口诀:先自加，后返回值

var num = 10;
alert (++num + 10); // 21   先自加 10+1=11，返回11，此时num=11

②后置递增运算符🔥 num ++ num = num +1
使用口诀:先返回原值，后自加

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

③小结🔥

前置递增和后置递增运算符可以简化代码的编写，让变量的值 + 1 比以前写法更简单
单独使用时，运行结果相同，与其他代码联用时，执行结果会不同
开发时，大多使用后置递增/减，并且代码独占一行

3.4.3 比较(关系)运算符

比较运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值(true / false)作为比较运算的结果。

运算符名称	说明	案例	结果
<	小于号	1 < 2	true
>	大于号	1 > 2	false
>=	大于等于号(大于或者等于)	2 >= 2	true
<=	小于等于号(小于或者等于)	3 <= 2	false
==	判等号(会转型)	37 == 37	true
!=	不等号	37 != 37	false
=== !==	全等要求值和数据类型都一致	37 === ‘37’	false
注意：
符号	作用	用法
–	–	–
=	赋值	把右边给左边
==	判断	判断两边值是否相等(注意此时有隐士转换)
===	全等	判断两边的值和数据类型是否完全相同

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

3.4.4 逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值

逻辑运算符	说明	案例
&&	“逻辑与”，简称"与" and true && false
II	“逻辑或”，简称"或" or	true II false
！	“逻辑非”，简称"非" not	！true

逻辑与：两边都是 true才返回 true，否则返回 false
逻辑或：两边都为 false 才返回 false，否则都为true
逻辑非：逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

3.4.5 短路运算（逻辑中断）

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

语法：表达式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

var num = 0;
console.log(123 || num++);
// 先返回在加，相当于 (123 || 0)
console.log(num);    // 123

3.4.6 赋值运算符

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

赋值运算符	说明	案例
=	直接赋值	var usrName = ‘我是值’
+= ，-=	加，减一个数后再赋值	var age = 10； age+=5；//15
*=，/=，%=	成，除，取模后再赋值	var age = 2; age*=5; //10

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

3.4.7 运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – ！
3	算数运算符	先 * / 后 + -
4	关系运算符	>, >= , < , <=,
5	相等运算符	，！=，=，！==
6	逻辑运算符	先 && 后
7	赋值运算符	=
8	逗号运算符	，

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
练习题

console.log( 4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true)	// true

var a = 3 > 5 && 2 < 7 && 3 == 4; 
console.log(a); 	//false 

var b = 3 <= 4 || 3 > 1 || 3 != 2; 
console.log(b); 	//true

var c = 2 === "2"; 
console.log(c);  	//false

var d = !c || b && a ;
console.log(d);		//true

3.5 流程控制

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

3.5.1 分支结构 if与switch语句

1. if语句

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

2. if else 语句

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

判断闰年：

var year = prompt('请输入年份');

if (year % 4 == 0 && year % 100 !=0 || year % 400 ==0)
{
   alert('这个年份是闰年');
}
else
{
  alert('这个年份是平年');
}

3. if else if 语句

if(条件表达式1)
{
  语句1;
}
else if(条件表达式2)
{
   语句2;
}
else if(条件表达式3)
{
  语句3;
}
else
{
   //上述条件都不成立执行此处代码
}

4. 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里面的语句

// 用户在弹出框里面输入一个水果，如果有就弹出该水果的价格， 如果没有该水果就弹出“没有此水果”
        var fruit = prompt('请您输入查询的苹果');
        switch (fruit) {
            case '苹果':
                alert('苹果的价格为3.5元/千克');
                break;
            case '香蕉':
                alert('香蕉的价格为3元/千克');
                break;
            default:
                alert('没有这种水果');
        }

3.5.2 三元表达式

语法结构 : 表达式1 ? 表达式2 : 表达式3
执行思路：如果表达式1为true，则返回表达式2的值,如果表达式1为false，则返回表达式3的值
案例：数字补0
用户输入数字，如果数字小于10，则在前面补0，比如01，09，
如果数字大于10，则不需要补，比如20

var figuer = prompt('请输入0~59之间的一个数字');
        var result = figuer < 10 ? '0' + figuer : figue
        alert(result);

3.5.3 断点调试

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

3.5.4 for 循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。

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

// 求1-100所以的整数和
var sum = 0;
for (var i = 1; i <= 100; i++) {
    var sum = sum + i;
}
console.log(sum);

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

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

内层循环可以看做外层循环的语句
内层循环执行的顺序也要遵循 for 循环的执行顺序
外层循环执行一次，内层循环要执行全部次数

3.5.5 while循环

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

执行思路：

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

注意：

使用 while 循环时一定要注意，它必须要有退出条件，否则会称为死循环
while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码
do while循环

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

执行思路：

先执行一次循环体代码
再执行表达式，如果结果为true，则继续执行循环体代码，如果为false，则退出循环，继续执行后面的代码
先执行再判断循环体，所以dowhile循环语句至少会执行一次循环体代码
需求：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问

do {
	var love = prompt('你爱我吗？');
} while (love != '我爱你');
alert('登录成功');

3.5.6 continue 关键字

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。
例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子

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

3.5.7 break关键字

break 关键字用于立即跳出整个循环
例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的也不吃了

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

4 数组

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

//普通变量一次只能存储一个值
var num = 10;
//数组一次可以存储多个值
var arr =[1,2,3,4,5];

4.1 创建数组

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

利用 new 创建数组
利用数组字面量创建数组
①利用 new 创建数组

var 数组名 = new Array();
var arr = new Array(); //创建一个新的空数组 注意 Array()，A要大写

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

// 1.利用数组字面量方式创建空的数组 
var 数组名 =[];
// 2.使用数组字面量方式创建带初始值的数组
var 数组名 =['小白','小黑','小黄','瑞奇'];
// 3.数组中可以存放任意类型的数据，例如字符串，数字，布尔值等
var arrStus =['小白'，12,true,28.9];

数组的字面量是方括号 [ ]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式

4.2 数组操作

4.2.1 数组的索引（下标）

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

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

4.2.2 遍历数组

4.2.2.1 for

我们可以通过 for 循环索引遍历数组中的每一项

// 数组索引访问数组中的元素
var arr = ['red','green', 'blue'];
console.log(arr[0]) // red
console.log(arr[1]) // green
console.log(arr[2]) // blue

// for循环遍历数组
var arr = ['red','green', 'blue'];
for (var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

4.2.2.2 forEach()

array.forEach(function(currentValue,index,arr))

currentValue : 数组当前项的值
index: 数组当前项的索引
arr: 数组对象本身

<body>
    <script>
        // forEach 迭代(遍历) 数组
        var arr = [1, 2, 3];
        var sum = 0;
        arr.forEach(function(value, index, array) {
            console.log('每个数组元素' + value);
            console.log('每个数组元素的索引号' + index);
            console.log('数组本身' + array);
            sum += value;
        })
        console.log(sum);
    </script>
</body>

4.2.2.3 For/In 循环：遍历对象属性

for (let x in person)，如果索引顺序很重要，请不要在数组上使用 for in。

for in 循环遍历 person 对象
每次迭代返回一个键 (x)
键用于访问键的值
键的值为 person[x]

const person = {fname:"Bill", lname:"Gates", age:25};

let text = "";
for (let x in person) {
  text += person[x];
}

4.2.2.4 For Of 循环

JavaScript for of 语句循环遍历可迭代对象的值。
它允许您循环遍历可迭代的数据结构，例如数组、字符串、映射、节点列表等

for (variable of iterable) {
  // code block to be executed
}

4.2.3 数组的长度

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

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

注意：

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

4.2.4 数组中新增元素

①通过修改 length 长度新增数组元素

可以通过修改 length 长度来实现数组扩容的目的
length 属性是可读写的

var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引号是 4，5，6 的空间没有给值，就是声明变量未给值，默认值就是 undefined
②通过修改数组索引新增数组元素

可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据
这种方式也是我们最常用的一种方式

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

案例：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

①声明一个新的数组用于存放新数据。
②遍历原来的数组，找出大于等于 10 的元素。
③依次追加给新数组 newArr。
实现代码1：

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 定义一个变量 用来计算 新数组的索引号
var j = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 给新数组
        newArr[j] = arr[i];
        // 索引号 不断自加
        j++;
    }
}
console.log(newArr);

实现代码2：

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 给新数组
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

4.2.5 删除指定数组元素

将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。

//老师代码
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];   // 空数组的默认的长度为 0 
// 定义一个变量 i 用来计算新数组的索引号
for (var i = 0; i < arr.length; i++) {
    // 找出大于 10 的数
    if (arr[i] != 0) {
        // 给新数组
        // 每次存入一个值，newArr长度都会 +1  
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

4.2.6 翻转数组

将数组 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的内容反过来存放

// 把旧数组索引号的第4个取过来(arr.length - 1),给新数组索引号第0个元素(newArr.length)
var arr = ['red','green','blue','pink','purple'];
var newArr = [];
for (var i = arr.length -1; i>=0; i--){
    newArr[newArr.length] = arr[i];
}
console.log(newArr);

4.3 数组排序

冒泡排序：将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序，输出： 1，2，3，4，5

var arr = [5,4,3,2,1];
for (var i = 0; i <= arr.lengtg-1; i++){ //外层循环管趟数，5个数共交换4躺
    for (var j = 0; j <= arr.length - i - 1; j++){
        //里层循环管每一趟交换的次数
        //前一个和后面一个数组元素相比较
        if(arr[j] > arr[j+1]){
            var temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }  
    }
}
console.log(arr);

4.3.1 sort、reverse

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序，无参数	该方法会改变原来的数组，返回新数组
sort()	对数组的元素进行排序	该方法会改变原来的数组，返回新数组

// 1.翻转数组
var arr = ['pink','red','blue'];
arr.reverse();
console.log(arr);

// 2.数组排序(冒泡排序)
var arr1 = [3,4,7,1];
arr1.sort();
console.log(arr1);

// 对于双位数
var arr = [1,64,9,61];
arr.sort(function(a,b) {
     return b - a;  //降序的排列
     return a - b; //升序
 	}
 )

不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。
正因如此，sort() 方法在对数值排序时会产生不正确的结果。我们通过一个比值函数来修正此问题：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 
// 现在 points[0] 包含最低值
// 而 points[points.length-1] 包含最高值

比值函数：
比较函数的目的是定义另一种排序顺序。
比较函数应该返回一个负，零或正值，这取决于参数：function(a, b){return a-b}
以随机顺序排序数组
points.sort(function(a, b){return 0.5 - Math.random()});
数组最值
Math.max.apply 来查找数组中的最高值。Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。
Math.min.apply 来查找数组中的最低值。Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。
“自制”方法。此函数遍历数组，用找到的最高值与每个值进行比较

function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
        if (arr[len] > max) {
            max = arr[len];
        }
    }
    return max;
}
function myArrayMin(arr) {
    var len = arr.length
    var min = Infinity;
    while (len--) {
        if (arr[len] < min) {
            min = arr[len];
        }
    }
    return min;
}

排序对象数组
JavaScript 数组经常会包含对象：即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。解决方法是通过比较函数来对比属性值

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];

cars.sort(function(a, b){
    return a.year - b.year
});
//比较字符串属性会稍复杂
cars.sort(function(a, b){
      var x = a.type.toLowerCase();
      var y = b.type.toLowerCase();
      if (x < y) {return -1;}
      if (x > y) {return 1;}
       return 0;
});

4.4.5 数组索引

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在返回索引号，如果不存在，则返回-1
lastIndexOf()	在数组的最后一个索引，从后向前索引	如果存在返回索引号，如果不存在，则返回-1

//返回数组元素索引号方法 indexOf(数组元素)  作用就是返回该数组元素的索引号
//它只发返回第一个满足条件的索引号
//如果找不到元素，则返回-1
var arr = ['red','green','blue'.'pink','blue'];
console.log(arr.indexOf('blue'));  // 2

console.log(arr.lastIndexOf('blue')); // 4

4.4.6 数组去重

案例：有一个数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’]，要求去掉数组中重复的元素。

分析：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。
核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。
我们怎么知道该元素没有存在？利用新数组.indexOf(数组元素) 如果返回是 -1 就说明新数组里面没有改元素

// 封装一个去重的函数 unique 独一无二的
function unique(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
console.log(demo);

4.4 数组对象方法

4.4.1 数组对象的创建

创建数组对象的两种方式

字面量方式
new Array()

4.4.2 检测是否为数组

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

4.4.3 添加删除数组元素

方法名	说明	返回值
push(参数1…)	末尾添加一个或多个元素，注意修改原数组	并返回新的长度
pop()	删除数组最后一个元素	返回它删除的元素的值
unshift(参数1…)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1，无参数，修改原数组	并返回第一个元素

// 1.push() 在我们数组的末尾，添加一个或者多个数组元素 push 推
var arr = [1, 2, 3];
arr.push(4, '秦晓');
console.log(arr);
console.log(arr.push(4, '秦晓'));
console.log(arr);
// push 完毕之后，返回结果是新数组的长度


// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
arr.unshift('red');
console.log(arr);

// pop() 它可以删除数组的最后一个元素，一次只能删除一个元素
arr.pop(); //不加参数
// shift() 它剋删除数组的第一个元素,一次只能删除一个元素
arr.shift(); //不加参数

筛选数组：有一个包含工资的数组[1500,1200,2000,2100,1800],要求把数组中工资超过2000的删除，剩余的放到新数组里面

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] < 2000) {
        newArr.push(newArr[i]);
    }
}
console.log(newArr);

4.4.4 数组转化为字符串

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join(‘分隔符’)	方法用于把数组中的所有元素转换为一个字符串	返回一个字符串

// 1.toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2.join('分隔符')
var arr1 = ['green', 'blue', 'red'];
console.log(arr1.join()); // 不写默认用逗号分割
console.log(arr1.join('-')); //  green-blue-red
console.log(arr1.join('&')); // green&blue&red

4.4.5 concat()、slice()、splice()

方法名	说明	返回值
concat()	连接两个或多个数组不影响原数组	返回一个新的数组
slice()	数组截取slice(begin,end)	返回被截取项目的新数组
splice()	数组删除splice(第几个开始要删除的个数)	返回被删除项目的新数组，这个会影响原数组

4.4.5.1 splice拼接数组

splice() 方法可用于向数组添加新项

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi"); //Banana,Orange,Lemon,Kiwi,Apple,Mango

第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组
使用 splice() 来删除元素
通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：
fruits.splice(0, 1); // 删除 fruits 中的第一个元素

4.4.5.2 concat合并（连接）数组

concat() 方法通过合并（连接）现有数组来创建一个新数组

4.4.5.3 slice裁剪数组

slice() 方法用数组的某个片段切出新数组。
slice() 可接受两个参数，比如 (1, 3)。该方法会从开始参数选取元素，直到结束参数（不包括）为止

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3); //[1,3)  Orange,Lemon

如果结束参数被省略，则 slice() 会切出从第一个参数开始到数组的剩余部分

4.4.5.4 filter()筛选数组

filter() 方法创建一个包含通过测试的数组元素的新数组。

array.filter(function(currentValue,index,arr))

filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组
注意它直接返回一个新数组

<body>
    <script>
        // filter 筛选数组
        var arr = [12, 66, 4, 88, 3, 7];
        var newArr = arr.filter(function(value, index) {
            // return value >= 20;
            return value % 2 === 0;
        });
        console.log(newArr);
    </script>
</body>

4.4.5.5 every()、some()

Array.every()
every() 方法检查所有数组值是否通过测试。true/false

Array.some()
some() 方法检查某些数组值是否通过了测试。true/false

some()方法用于检测数组中的元素是否满足指定条件（查找数组中是否有满足条件的元素）
注意它返回的是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false
如果找到第一个满足条件的元素，则终止循环，不再继续查找

<body>
    <script>
        // some 查找数组中是否有满足条件的元素 
        var arr1 = ['red', 'pink', 'blue'];
        var flag1 = arr1.some(function(value) {
            return value == 'pink';
        });
        console.log(flag1);
        // 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
        // 2. some 也是查找满足条件的元素是否存在  返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环
    </script>
</body>

4.4.5.6 map()

map() 方法通过对每个数组元素执行函数来创建新数组。
map() 方法不会对没有值的数组元素执行函数。
map() 方法不会更改原始数组。

4.4.5.7 ES6新增find()

Array.find()
find() 方法返回通过测试函数的第一个数组元素的值。
findIndex() 方法返回通过测试函数的第一个数组元素的索引。

5 函数

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

5.1 函数的使用

函数在使用时分为两步：声明函数和调用函数
①声明函数

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

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

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

调用的时候千万不要忘记添加小括号
口诀：函数不调用，自己不执行
注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

5.2 函数的封装

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

5.2.1 函数的参数：形参和实参

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

参数	说明
形参	形式上的参数函数定义的时候传递的参数当前并不知道是什么
实参	实际上的参数函数调用的时候传递的参数实参是传递给形参的
1. 参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

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

例如：利用函数求任意两个数的和

// 声明函数
function getSum(num1,num2){
    console.log(num1+num2)
}

// 调用函数
getSum(1,3) //4
getSum(6，5) //11

函数调用的时候实参值是传递给形参的
形参简单理解为:不用声明的变量
实参和形参的多个参数之间用逗号(,)分隔，

2. 形参和实参个数不匹配：

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多于形参个数	只取到形参的个数
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

function sum(num1, num2) {
    console.log(num1 + num2);
}
sum(100, 200);             // 300，形参和实参个数相等，输出正确结果
sum(100, 400, 500, 700);   // 500，实参个数多于形参，只取到形参的个数
sum(200);                  // 实参个数少于形参，多的形参定义为undefined，结果为NaN

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

3. 小结：

函数可以带参数也可以不带参数
声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
调用函数的时候，函数名括号里面的是实参
多个参数中间用逗号分隔
形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

5.2.2 函数的return返回值

1. retuern语句：
有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。
return 语句的语法格式如下：

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

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

// 声明函数
function sum(){
    ...
    return  666;
}
// 调用函数
sum();      // 此时 sum 的值就等于666，因为 return 语句会把自身后面的值返回给调用者

2. return 终止函数
return 语句之后的代码不被执行

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

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

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

4.小结
函数都是有返回值的

如果有 return ，则返回 return 后面的值
如果没有 return，则返回 undefined

break、continue、return 的区别：

break ：结束当前循环体(如 for、while)
continue ：跳出本次循环，继续执行下次循环(如for、while)
return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

5.2.3 函数的调用

因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。具体演示在下面的函数练习中会有。
1.利用函数封装方式，翻转任意一个数组

function reverse(arr) {
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
    }
    return newArr;
}
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);

2.利用函数封装方式，对数组排序 – 冒泡排序

function sort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - i - 1; j++) {
            var temp = arr[j];
            arr[j] = arr[j + 1]; 
            arr[j + 1] = temp;
        }
    }
    return arr;
}

3.输入一个年份，判断是否是闰年（闰年：能被4整除并且不能被100整数，或者能被400整除）

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

4.用户输入年份，输出当前年份2月份的天数，如果是闰年，则2月份是 29天，如果是平年，则2月份是 28天

function backDay() {
    var year = prompt('请您输入年份:');
    if (isRun(year)) { //调用函数需要加小括号
        alert('你输入的' + year + '是闰年，2月份有29天');
    } else {
        alert('您输入的' + year + '不是闰年，2月份有28天');
    }
}
backDay();
//判断是否是闰年的函数
function isRun(year) {
    var flag = false;
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
        flag = true;
    }
    return flag;
}

5.3 arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

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

// 函数声明
function fn() {
    console.log(arguments);  //里面存储了所有传递过来的实参
    console.log(arrguments.length); // 3
    console.log(arrguments[2]); // 3
}

// 函数调用
fn(1,2,3);

例如：利用函数求任意个数的最大值

 function maxValue() {
    var max = arguments[0];
    for (var i = 0; i < arguments.length; i++) {
        if (max < arguments[i]) {
            max = arguments[i];
        }
    }
    return max;
}
console.log(maxValue(2, 4, 5, 9)); // 9
console.log(maxValue(12, 4, 9)); // 12

5.4 函数的声明

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

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

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

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

// 调用  
fn();

5.4.2 函数表达式方式(匿名函数)

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

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...};

// 调用的方式，函数调用必须写到函数体下面
fn();

因为函数没有名字，所以也称为匿名函数
这个fn 里面存储的是一个函数
函数调用的代码必须写到函数体后面

6 正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。
完整的 RegExp 参考手册
https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

6.1 特点

实际开发，一般都是直接复制写好的正则表达式
但是要求会使用正则表达式并且根据自身实际情况修改正则表达式

6.2 创建正则表达式

在JavaScript中，可以通过两种方式创建正则表达式

通过调用 RegExp 对象的构造函数创建
通过字面量创建

6.2.1 通过调用 RegExp 对象的构造函数创建

通过调用 RegExp 对象的构造函数创建:var 变量名 = new RegExp(/表达式/);

6.2.2 通过字面量创建

通过字面量创建:var 变量名 = /表达式/;注释中间放表达式就是正则字面量

6.2.3 测试正则表达式 test

test()正则对象方法，用于检测字符串是否符合该规则，该对象会返回true或false,其参数是测试字符串:regexObj.test(str)
regexObj 写的是正则表达式
str 我们要测试的文本
就是检测str文本是否符合我们写的正则表达式规范

<body>
    <script>
        // 正则表达式在js中的使用

        // 1. 利用 RegExp对象来创建 正则表达式
        var regexp = new RegExp(/123/);
        console.log(regexp);

        // 2. 利用字面量创建 正则表达式
        var rg = /123/;
        // 3.test 方法用来检测字符串是否符合正则表达式要求的规范
        console.log(rg.test(123));
        console.log(rg.test('abc'));
    </script>
</body>

6.3 正则表达式中的特殊在字符

6.3.1 边界符

正则表达式中的边界符(位置符)用来提示字符所处的位置，主要有两个字符

边界符	说明
^	表示匹配行首的文本(以谁开始)
$	表示匹配行尾的文本(以谁结束)

如果^ 和 $ 在一起，表示必须是精确匹配

// 边界符 ^ $
var rg = /abc/;   //正则表达式里面不需要加引号，不管是数字型还是字符串型
// /abc/只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc'));
console.log(rg.test('abcd'));
console.log(rg.test('aabcd'));

var reg = /^abc/;
console.log(reg.test('abc'));   //true
console.log(reg.test('abcd'));	// true
console.log(reg.test('aabcd')); // false

var reg1 = /^abc$/
// 以abc开头，以abc结尾，必须是abc

6.3.2 字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了
所有可供选择的字符都放在方括号内
- ①[] 方括号:/[abc]/.test('andy'); // true 后面的字符串只要包含 abc 中任意一个字符,都返回true
- ②[-]方括号内部范围符:/^[a-z]$/.test() 方括号内部加上 - 表示范围，这里表示 a - z 26个英文字母都可以
- ③[^] 方括号内部取反符 ^:/[^abc]/.test('andy') // false 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false
  注意和边界符 ^ 区别，边界符写到方括号外面
- ④字符组合:/[a-z1-9]/.test('andy') // true 方括号内部可以使用字符组合，这里表示包含 a 到 z的26个英文字母和1到9的数字都可以

<body>
    <script>
        //var rg = /abc/;  只要包含abc就可以 
        // 字符类: [] 表示有一系列字符可供选择，只要匹配其中一个就可以了
        var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
        console.log(rg.test('andy'));
        console.log(rg.test('baby'));
        console.log(rg.test('color'));
        console.log(rg.test('red'));
        var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
        console.log(rg1.test('aa'));
        console.log(rg1.test('a'));
        console.log(rg1.test('b'));
        console.log(rg1.test('c'));
        console.log(rg1.test('abc'));
        console.log('------------------');

        var reg = /^[a-z]$/; // 26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
        console.log(reg.test('a'));
        console.log(reg.test('z'));
        console.log(reg.test(1));
        console.log(reg.test('A'));
        // 字符组合
        var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true  
        console.log(reg1.test('a'));
        console.log(reg1.test('B'));
        console.log(reg1.test(8));
        console.log(reg1.test('-'));
        console.log(reg1.test('_'));
        console.log(reg1.test('!'));
        console.log('----------------');
        // 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
        var reg2 = /^[^a-zA-Z0-9_-]$/;
        console.log(reg2.test('a'));
        console.log(reg2.test('B'));
        console.log(reg2.test(8));
        console.log(reg2.test('-'));
        console.log(reg2.test('_'));
        console.log(reg2.test('!'));
    </script>
</body>

6.3.3 量词符

量词符用来设定某个模式出现的次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

<body>
    <script>
        // 量词符: 用来设定某个模式出现的次数
        // 简单理解: 就是让下面的a这个字符重复多少次
        // var reg = /^a$/;

        //  * 相当于 >= 0 可以出现0次或者很多次 
        // var reg = /^a*$/;
        // console.log(reg.test(''));
        // console.log(reg.test('a'));
        // console.log(reg.test('aaaa'));

        //  + 相当于 >= 1 可以出现1次或者很多次
        // var reg = /^a+$/;
        // console.log(reg.test('')); // false
        // console.log(reg.test('a')); // true
        // console.log(reg.test('aaaa')); // true

        //  ?  相当于 1 || 0
        // var reg = /^a?$/;
        // console.log(reg.test('')); // true
        // console.log(reg.test('a')); // true
        // console.log(reg.test('aaaa')); // false

        //  {3 } 就是重复3次
        // var reg = /^a{3}$/;
        // console.log(reg.test('')); // false
        // console.log(reg.test('a')); // false
        // console.log(reg.test('aaaa')); // false
        // console.log(reg.test('aaa')); // true
        //  {3, }  大于等于3
        var reg = /^a{3,}$/;
        console.log(reg.test('')); // false
        console.log(reg.test('a')); // false
        console.log(reg.test('aaaa')); // true
        console.log(reg.test('aaa')); // true
        //  {3,16}  大于等于3 并且 小于等于16
        var reg = /^a{3,6}$/;
        console.log(reg.test('')); // false
        console.log(reg.test('a')); // false
        console.log(reg.test('aaaa')); // true
        console.log(reg.test('aaa')); // true
        console.log(reg.test('aaaaaaa')); // false
    </script>
</body>

6.3.4 用户名验证

功能需求：

如果用户名输入合法, 则后面提示信息为 : 用户名合法,并且颜色为绿色
如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为绿色

分析：

用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.
首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/
当表单失去焦点就开始验证.
如果符合正则规范, 则让后面的span标签添加 right 类.
如果不符合正则规范, 则让后面的span标签添加 wrong 类.

<body>
    <input type="text" class="uname"> <span>请输入用户名</span>
    <script>
        //  量词是设定某个模式出现的次数
        var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
        // {6,16}  中间不要有空格
        // console.log(reg.test('a'));
        // console.log(reg.test('8'));
        // console.log(reg.test('18'));
        // console.log(reg.test('aa'));
        // console.log('-------------');
        // console.log(reg.test('andy-red'));
        // console.log(reg.test('andy_red'));
        // console.log(reg.test('andy007'));
        // console.log(reg.test('andy!007'));
        var uname = document.querySelector('.uname');
        var span = document.querySelector('span');
        uname.onblur = function() {
            if (reg.test(this.value)) {
                console.log('正确的');
                span.className = 'right';
                span.innerHTML = '用户名格式输入正确';
            } else {
                console.log('错误的');
                span.className = 'wrong';
                span.innerHTML = '用户名格式输入不正确';
            }
        }
    </script>
</body>

6.4 括号总结

大括号量词符里面面表示重复次数
中括号字符集合匹配方括号中的任意字符
小括号表示优先级

// 中括号 字符集合 匹配方括号中的任意字符
var reg = /^[abc]$/;
// a || b || c
// 大括号 量词符 里面表示重复次数
var reg = /^abc{3}$/;   // 它只是让c 重复3次 abccc
// 小括号 表示优先级
var reg = /^(abc){3}$/;  //它是让 abc 重复3次

在线测试正则表达式：https://c.runoob.com/

6.5 预定义类

预定义类指的是某些常见模式的简写写法

预定类	说明
\d	匹配0-9之间的任一数字，相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[ ^ 0-9]
\w	匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_ ]
\W	除所有字母、数字、和下划线以外的字符，相当于[ ^A-Za-z0-9_ ]
\s	匹配空格（包括换行符，制表符，空格符等），相当于[\t\t\n\v\f]
\S	匹配非空格的字符，相当于[ ^ \t\r\n\v\f]

6.5.1 表单验证

分析：

手机号码: /^1[3|4|5|7|8][0-9]{9}$/
QQ: [1-9][0-9]{4,} (腾讯QQ号从10000开始)
昵称是中文: ^[\u4e00-\u9fa5]{2,8}$

<body>
    <script>
        // 座机号码验证:  全国座机号码  两种格式:   010-12345678  或者  0530-1234567
        // 正则里面的或者 符号  |  
        // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
        var reg = /^\d{3,4}-\d{7,8}$/;
    </script>
</body>

6.6 正则表达式中的替换

6.6.1 replace 替换

replace()方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式

stringObject.replace(regexp/substr,replacement)

第一个参数: 被替换的字符串或者正则表达式
第二个参数：替换为的字符串
返回值是一个替换完毕的新字符串

// 替换 replace
var str = 'andy和red';
var newStr = str.replace('andy','baby');
var newStr = str.replace(/andy/,'baby');

6.6.2 正则表达式参数

/表达式/[switch] switch按照什么样的模式来匹配，有三种:

g: 全局匹配
i:忽略大小写
gi: 全局匹配 + 忽略大小写

7 递归

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数
简单理解：函数内部自己调用自己，这个函数就是递归函数
由于递归很容易发生"栈溢出"错误，所以必须要加退出条件 return

<body>
    <script>
        // 递归函数 : 函数内部自己调用自己, 这个函数就是递归函数
        var num = 1;
        function fn() {
            console.log('我要打印6句话');

            if (num == 6) {
                return; // 递归里面必须加退出条件
            }
            num++;
            fn();
        }
        fn();
    </script>
</body>

8 浅拷贝和深拷贝

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
深拷贝拷贝多层，每一级别的数据都会拷贝
Object.assign(target,…sources) ES6新增方法可以浅拷贝

8.1 浅拷贝

// 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    }
};
var o = {}
for(var k in obj){
    // k是属性名，obj[k]是属性值
    o[k] = obj.[k];
}
console.log(o);
// 浅拷贝语法糖
Object.assign(o,obj);

8.2 深拷贝

// 深拷贝拷贝多层，每一级别的数据都会拷贝
var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    }
    color: ['pink','red']
};
var o = {};
// 封装函数
function deepCopy(newobj,oldobj){
    for(var k in oldobj){
        // 判断属性值属于简单数据类型还是复杂数据类型
        // 1.获取属性值   oldobj[k]
        var item = obldobj[k];
        // 2.判断这个值是否是数组
        if(item instanceof Array){
            newobj[k] = [];
            deepCopy(newobj[k],item)
        }else if (item instanceof Object){
              // 3.判断这个值是否是对象
            newobj[k] = {};
            deepCopy(newobj[k],item)
        }else {
            // 4.属于简单数据类型
            newobj[k] = item;           
        } 
    }
}
deepCopy(o,obj);