大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

JavaScript-ECMAScript5-JS基础语法

JavaScript各大模块笔记地址

模块	笔记地址	视频地址
JavaScript-ECMAScript5-JS基础语法	http://t.csdn.cn/7dCpn	https://www.bilibili.com/video/BV1Sy4y1C7ha

一、计算机基础

1、编程语言

1.1 编程

编程
就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程
计算机程序
就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令
程序员
就是从事编程的人员，但是一般程序员都比较幽默，为了形容自己的辛苦工作，也成为“码农”，
或者 “程序猿”/ “程序媛”
注意!!!
上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、黑莓PI、服务器
等等

1.2 计算机语言

计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介
计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类
实际上计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基
础

例如：
0=00000000 1=00000001 2=00000010 3=00000011 4=00000100 
5=00000101 6=00000110 7=00000111 8=00001000 9=00001001 
10=00001010

1.3 编程语言

可以通过类似于人类语言的 ”语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言
编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守
如今通用的编程语言有两种形式：汇编语言和高级语言
汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆
高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等

C语言：puts("你好");
PHP：echo "你好";
Java：System.out.println("你好");
JavaScript： alert("你好"）;

1.4 翻译器

高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器。
翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化，记住1和 0

1.5 编程语言和标记语言区别

编程语言有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while等具有逻辑性和行为能力的
指令，这是主动的。
标记语言（html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的, 他是被动的

1.6 总结

计算机可以帮助人类解决某些问题

程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
编程语言有机器语言、汇编语言、高级语言
高级语言需要一个翻译器转换为计算机识别的机器语言
编程语言是主动的有很强的逻辑性

2、计算机基础

2.1 计算机组成

组成图

2.2 数据存储

计算机内部使用二进制 0 和 1来表示数据
所有数据，包括文件、图片等最终都是以二进制数据（0 和 1）的形式存放在硬盘中的
所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中
硬盘、内存都是保存的二进制数

2.3 数据存储单位

bit < byte < kb < GB < TB<…

位(bit)： 1bit 可以保存一个 0 或者 1 （最小的存储单位）
字节(Byte)：1B = 8b
千字节(KB)：1KB = 1024B  兆字节(MB)：1MB = 1024KB
吉字节(GB): 1GB = 1024MB
太字节(TB): 1TB = 1024GB
…

2.4 程序运行

打开某个程序时，先从硬盘中把程序的代码加载到内存中
CPU执行内存中的代码
注意：之所以要内存的一个重要原因，是因为 cpu 运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械）

二、初识JavaScript

1、初识 JavaScript

1.1 JavaScript 是什么？

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
脚本语言：不需要编译，运行过程中由
现在也可以基于 Node.js 技术进行服务器端编程
为了阅读方便，我们后面把JavaScript 简称为 JS

1.2 JavaScript 的作用

表单动态校验（密码强度检测）（ JS 产生最初的目的）
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

1.3 HTML/CSS/JS 的关系

1.3.1 HTML/CSS 标记语言–描述类语言 JS 脚本语言–编程类语言

HTML 决定网页结构和内容( 决定看到什么 )，相当于人的身体
CSS 决定网页呈现给用户的模样( 决定好不好看 )，相当于给人穿衣服、化妆

1.3.2 JS 脚本语言–编程类语言

实现业务逻辑和页面控制( 决定功能 )，相当于人的各种动作

1.4 浏览器执行 JS 简介

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

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

1.5 JavaScript 组成

JavaScript的组成
ECMAScript

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

DOM ——文档对象模型

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

BOM ——浏览器对象模型

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

1.6 JS 位置

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

行内式

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

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

内嵌式

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

可以将多行JS代码写到<script></script>标签中
内嵌 JS 是学习时常用的方式

外部 JS文件引入

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

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

三、ECMAScript5 基础语法

1、 JavaScript 注释

为了提高代码的可读性，JS与CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是单行注释、多行注释两种

1.1 单行注释

单行注释的注释方式如下：

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来

// 用来注释单行文字（快捷键 ctrl + / ）

1.2 多行注释

多行注释的注释方式如下：

/*
  获取用户年龄和姓名
 并通过提示框显示出来
*/

/* */ 用来注释多行文字（快捷键： ctrl + shift + / ）

2、JavaScript 输入输出语句

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

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

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

3、变量

3.1 变量概述

什么是变量

白话：变量就是一个装东西的盒子
通俗：变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改

变量在内存中的存储

本质：变量是程序在内存中申请的一块用来存放数据的空间。
类似我们酒店的房间，一个房间就可以看做是一个变量。

3.2 变量的使用

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

声明变量

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

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

赋值

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

变量的初始化

声明一个变量并赋值，我们称之为变量的初始化

var age = 18; // 声明变量同时赋值为 18

案例

弹出一个输入框，提示用户输入姓名
弹出一个对话框，输出用户刚才输入的姓名

<script>
     //弹出输入框 propmt()
    var myName = prompt("请输入你的姓名");
    //弹出输入的内容 alert()
    alert(myName)
</script>

3.3 变量语法扩展

更新变量
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准

<script>
    var age = 18;
    age = 81; // 最后的结果就是81因为18 被覆盖掉了
    console.log(age)//81
</script>

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

<script>
    var age = 10,
     name = 'zs',
     sex = 2;
     console.log(age,name,sex)//10 zs 2
</script>

声明变量特殊情况

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

3.4 变量命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
推荐翻译网站：有道爱词霸

3.5 案例

要求：交换两个变量的值 ( 实现思路：使用一个临时变量用来做中间存储 )

    <script>
        var num1 = 10,
            num2 = 20,
            num3 = num2,//将num2的值存在num3中
            num2 = num1,//将num1的值赋给num2
            num1 = num3;//将num3的值赋给num1
        console.log(num1) //20
        console.log(num2) //10
    </script>

4、数据类型

4.1 数据类型的分类

JS 把数据类型分为两类

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

4.2 简单数据类型（基本数据类型）

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

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

4.3 数字型 Number

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

<script>
    var nun = 10; //整数
    var num = 3.14; //小数
</script>

数字型进制

最常见的进制有二进制、八进制、十进制、十六进制
在JS中八进制前面加0，十六进制前面加 0x
进制之间的转换过程 https://jingyan.baidu.com/article/495ba84109665338b30ede98.html

<script>
    //进制
    // 1.生活中常用的是十进制数字，也就是逢10进一
    var num4 = 20;
    console.log(num4)

    // 2.八进制数字序列范围：0~7
    var num1 = 07; // 对应十进制的7
    var num2 = 012; // 对应十进制的12
    var num3 = 08; // 对应十进制的8

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

数字型范围

JS中数值的最大值 MAX_VALUE
JS中数值的最小值 MIN_VALUE

<script>
    //数字的范围 javascript中数字的最大值和最小值
    // 1.最大值
    var num5 = Number.MAX_VALUE
    console.log(num5) //1.7976931348623157e+308

    // 2.最小值
    var num6 = Number.MIN_VALUE
    console.log(num6) //5e-324
</script>

数字型的三个特殊值

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

<script>
    //数字型的三个特殊值 
    // 1.无穷大 Infinity
    var num7 = Number.MAX_VALUE * 2
    console.log(num7) //Infinity

    // 2.无穷小 -Infinity
    var num8 = -Number.MAX_VALUE * 2
    console.log(num8) //-Infinity

    // 3.非数字 NaN
    var num9 = 5 - "你好"
    console.log(num9) //NaN
</script>

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

<script>
    //判断是不是非数字型
    // isNaN()这个方法用来判断非数字，返回值为Boolean类型
    var num1 = 12
    console.log(isNaN(num1)) //false 数字型

    var num2 = 'aaa'
    console.log(isNaN(num2)) //true 非数字型
</script>

4.4 字符串型 String

字符串型可以是引号中的任意文本，其语法为 “双引号” 和 “单引号’’
因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号

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

字符串引号嵌套 JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

<script>
    // 1.外双内单 用" " 包含 ''
    var strMsg2 = "我是'高富帅'"
    // 2.内双外单 ' ' 包含 " "
    var strMsg = '我是一个"高富帅"'
</script>

字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符
转义字符参考 https://blog.csdn.net/butbabuc/article/details/108109829
转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n是newline
\ \	斜杠\ (重点)
\ ’	’ 单引号
\ ‘’	‘’ 双引号
\ t	tab 缩进 (重点)
\ b	空格，b是blank

转义字符案例

<script>
    //字符串转义符案例
    var s = '酷热难耐，火辣的太阳底下，我挺拔的身姿，\n 成为了最为独特的风景。我审视四周，\n这里，是我的舞台，\n我就是天地间的王者。这一刻，\n我豪气冲天，终于大喊一声："收破烂啦"'
    alert(s)
</script>

在这里插入图片描述

字符串长度 length

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符
串的长度
注意：字符串的长度包括里面的空格

<script>
    //字符串长度 length
    // 1.检测获取字符串的长度
    var str = 'my name is andy'
    console.log(str.length) //15
</script>

字符串的拼接 +

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

<script>
    //字符串的拼接 +
    // 1.字符串型+字符串
    var str1 = '沙漠';
    var str2 = '骆驼'
    console.log(str1 + str2) //沙漠骆驼
    console.log('我是' + '孙悟空') //我是孙悟空
    console.log('12' + '12') //1212

    // 2.字符串型+数字型
    console.log('我今年' + 18 + '岁啦') //我今年18岁啦

    // 3.字符串型+Boolean型
    console.log('我是' + true) //我是true

    // 4.数字型+数字型
    console.log(12 + 12) //24
</script>

字符串拼接加强

<script>
    //字符串拼接的加强
    var age1 = 18;
    var age2 = age1 + 1;
    console.log('我今年' + age1 + '岁啦')//我今年18岁啦
    console.log('我明年' + age2 + '岁啦')//我今年19岁啦
</script>

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

显示年龄案例

<script>
    //显示年龄案例
    // 弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年 xx 岁啦”（xx 表示刚才输入的年龄）
    var age = prompt('请输入你的你年龄');
    var str = '你今年' + age + '岁啦'; //引引加加
    alert(str)
</script>

4.5 布尔型 Boolean

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

<script>
    // true做加法时当1来看
    var flag1 = true;
    console.log(flag1 + 1) // 2
    var flag2 = false;

    // false做加法时当0来看
    console.log(flag2 + 1) // 1
</script>

4.6 未定义 Undefined

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

undefined 和字符串相加，会拼接字符串
undefined 和数字相加，最后结果是NaN
undefined 和 boolean值相加，最后结果是NaN

<script>
    // 如果一个变量声明未赋值，就是undefined 未定义数据类型
    var num;
    console.log(num) //undefined

    // 0.undefined拼接
    // 1.undefined+undefined
    var num1;
    var num2;
    console.log(num1 + num2) //NaN

    // 2.undefined+string
    var num3;
    console.log(num + '你好啊') //undefined你好啊

    // 3.undefined+boolean
    var num4;
    console.log(num4 + true) //NaN
    console.log(num4 + false) //NaN

    // 4.undefined+number
    var num5;
    console.log(num5 + 44) //NaN
</script>

4.7 空值 Null

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

null+null=0
null+number=number
null+string=nullstring
null+boolean=0/1
null+undefined=NaN

<script>
    //一个声明变量给 null 值，里面存的值为空
    var space = null
    console.log(space) //null

    // null+null
    console.log(space + space) //0

    // 1.null+string
    console.log(space + '你好呀') //null你好呀

    // 2.null+number
    console.log(space + 3) //3

    // 3.null+boolean
    console.log(space + false) //0
    console.log(space + true) //1

    // 4.null+undefined
    var num;
    console.log(space + num) //NaN
</script>

4.8 检测数据类型 Typeof

typeof 可用来获取检测变量的数据类型
注意 Null的数据类型为 object

类型	例	结果
string	typeof “你哈”	string
number	typeof 18	number
boolean	ttypeof true	false
undefined	typeof undefined	undefined
null	typeof null	object

<script>
    var num = 3;
    console.log(typeof num) //number
    var str = '你哈'
    console.log(typeof str) //string
    var flag = true
    console.log(typeof flag) //boolean
    var undefined;
    console.log(typeof undefined) //undefined
    var num22 = null;
    console.log(typeof num22) //object 
</script>

4.9 数据类型的颜色

通过控制台的颜色判断属于哪种数据类型

数据类型	颜色
String	黑色
Number	蓝色
Boolean	深蓝色
Null	浅灰色
Undefined	浅灰色

<script>
    //String 黑色
    console.log('贝克汉姆') //黑色

    //Number 蓝色
    console.log(12) //蓝色

    //Boolean 深蓝色
    console.log(true); //深蓝色

    //Null和Undefined 浅灰色
    var num = null;
    console.log(num) //浅灰色
    var nu2;
    console.log(nu2) //浅灰色
</script>

5、数据类型的转换

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

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

5.1 转换为字符串型

转换方式

toString()
String()强制转换
加号拼接字符串（隐式转换重点）

<script>
    //转换为字符串型
    // 1. 字型转换为字符型
    // 1.1 toString
    var num = 10;
    var str = toString(num)
    console.log(typeof str) //string

    // 1.2 String
    var num2 = 10;
    var str2 = String(num2)
    console.log(typeof str2) //string

    // 1.3 加号拼接字符串
    var num3 = 10;
    var str3 = num3 + '';
    console.log(typeof str3) //string
</script>

toString() 和 String() 使用方式不一样
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一方式也称为隐式转换

5.2 转换为数字型

注意 parseInt 和 parseFloat 单词的大小写，这两个是重点
隐式转换是我们在进行算数运算的时候，JS自动转换了数据类型

方式	说明	案例
parseInt(string)函数	将string类型转成整数数值型向下取整	parseInt(‘18.9’)
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(‘18.99’)
Number()强制转换函数	将string类型转换为数值型	Number(‘30.22’)
js 隐式转换(- * /)	利用算术运算隐式转换为数值型	‘12’ – 0

<script>
    // 1. 转换成数字型
    // 1.1 转换成整数型 parseInt(变量) 向下取整
    console.log(parseInt('18.9'), typeof parseInt('18.9')) //18 number
    console.log(parseInt('18.1')) //18
    console.log(parseInt('120px')) //120
    console.log(parseInt('rem120px')) //NaN非数字型

    // 1.2 转换成小数型 parseFloat(变量) 得到小数(浮点数)
    console.log(parseFloat('18.99'), typeof parseFloat('18.99')) //18.99 number

    // 1.3 Number强制转换
    console.log(Number('30.22'), typeof Number('30.22')) //30.22 'number'
    console.log(Number('30'), typeof Number('30')) // 30 'number'

    // 1.4 利用算数运算 -*/隐式转换
    console.log('12' - 0, typeof('12' - 0)); //12 'number'
    console.log('12' * 2, typeof('12' * 2)); //24 'number'
    console.log('12' / 2, typeof('12' / 2)); // 'number'
</script>

5.3 转换为布尔型

代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined
其余值都会被转换为 true

方法	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean(‘true’)

<script>
    //转换成布尔型
    // 1.1 代表空，否定的值会被转换为false，如 ’ ’ , 0, NaN , null , undefined
    console.log(Boolean(0)) //false
    console.log(Boolean('')) //false
    console.log(Boolean(null)) //false
    console.log(Boolean(undefined)) //false
    console.log(Boolean(NaN)) //false

    // 1.2 其余的值都会被被转换为true
    console.log(Boolean(3.14)) //true
    console.log(Boolean('你好啊')) //true
</script>

6、运算符

6.1 运算符分类

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

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

6.2 算术运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算
规则：先* /，后 +- ，有括号就先算括号里面的

运算符	描述	实例
+	加	10 + 20 =30
–	减	10 – 20 =-10
*	乘	10 * 20 =200
/	除	10 / 20 =0.5
%	取余数（取模）	返回除法的余数 9 % 2 =1
%	取余数（取模）	返回除法的余数 9 % 3 =0

<script>
    //算数运算符 先*/，后+-，有括号就先算括号里面的
    // 1. + - * /
    console.log(10 + 10) //20
    console.log(10 - 10) //0
    console.log(10 * 10) //100
    console.log(10 / 10) //1

    // 2. % 取余数
    console.log(9 % 3) //0
    console.log(9 % 2) //1
    console.log(2 % 9) //2

    // 3. 浮点数 
    // 3.1 所参与的式子都是浮点数的时候算数运算里面会有问题
    // 3.2 不要直接判断两个浮点数是否相等 !
    var num1 = 0.1 + 0.2;
    console.log(num1) //0.30000000000000004
    console.log(num1 == 0.3) //false 判断是否相等
    var num2 = 0.1 * 0.2
    console.log(num2) //0.020000000000000004
    console.log(num2 == 0.02) //false

    // 4. 当浮点数和整数相加的时候，就不会有问题 乘法不适用
    var num3 = 1 + 0.2 + 0.3
    console.log(num3) //1.5
    console.log(num3 == 1.5) //true
    var num4 = 3 * 0.3
    console.log(num4) //0.8999999999999999
    console.log(num4 == 0.9) //false
</script>

6.3 表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解：是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果，返回给我们，我们称为返回值

<script>
    // 是由数字、运算符、变量等组成的式子，我们称为表达式 1+1
    console.log(1 + 1); //2 就是返回值

    // 正常情况下计算方式 1 + 1= 2
    // 在程序里面 2 = 1+ 1 把右边的表达式计算完毕之后返回值给左边（赋值）
    var num = 1 + 1;
</script>

6.4 递增和递减运算符

递增（++）
递减（- -）
放在变量前面时，我们称为前置递增(递减)运算符
放在变量后面时，我们称为后置递增(递减)运算符
注意：递增和递减运算符必须和变量配合使用。

前置递增运算符

++num
num = num + 1
使用口诀: 先自加，后返回值

<script>
    // 1.想要变量自己加1 num=num+1 比较麻烦
    var num1 = 10;
    num1 = num1 + 1; //++num1
    console.log(num1) //11

    // 2.前置递增运算符 ++num ++写在变量的前面
    var num2 = 10;
    ++num2; //类似于 num2=num2+1
    console.log(num2) //11

    // 3.++前置使用口诀：先自加，后返回值
    var p = 10;
    console.log(++p + 10) //21 p+1+10

    // 4.前置--同理
    var num3 = 10;
    --num3;
    console.log(num3) //9
</script>

后置递增运算符

num ++
num = num +1
使用口诀: 先返回原值，后自加

<script>
    // 1.num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单
    var num = 10;
    num++;
    console.log(num) //11

    // 2. 使用口诀：先返回原值，后自加
    var p = 20;
    console.log(p++ + 10) //30

    // 3.后置递减同理
     var num2 = 20;
    num2--;
    console.log(num2) //19
</script>

前置自增和后置自增的区别

相同点：前置自增和后置自增单独写的时候，执行程序和结果是一样的
不同点：
前置口诀先自加，后返回值
后置口诀先返回原值，后自加

<script>
    // 1.前置自增和后置自增单独写的时候，执行程序和结果是一样的
    var num1 = 10,
        num2 = 10;
    ++num1
    num2++
    console.log(num1, num2) //11 11

    // 2.前置口诀 先自加，后返回值
    var num3 = 20,
        num4 = ++num3 + 10; //num3=num3+1(先自加) num4=21+10
    console.log(num3, num4) //21 31

    // 3.后置口诀 先返回原值，后自加
    var num5 = 20,
        num6 = num5++ + 10 //num6=20+10(先返回值) num5++(后自增)
    console.log(num5, num6) //21 30
</script>

前置运算总结

前置递增和后置递增运算符可以简化代码的编写，让变量的值 + 1 比以前写法更简单
单独使用时，运行结果相同
与其他代码联用时，执行结果会不同
后置：先原值运算，后自加（先人后己）
前置：先自加，后运算（先已后人）
开发时，大多使用后置递增/减，并且代码独占一行，例如：num++; 或者 num–;

6.5 比较(关系)运算符

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

运算符名称	说明	案例	结果
<	小于号	1 < 2	true
>	大于号	1 > 2	false
>=	大于等于号(大于或者等于)	2 >= 2	true
<=	大于等于号(大于或者等于)	3 <= 2	false
==	判等号(会转型) 内容相等	37 == 37	true
!=	不等号	37 != 37	false
=== !==	全等/不全等要求值和数据类型都一致/不一致	37 === ‘37’	false

<script>
    // 比较运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值(true / false)作为比较运算的结果
    // 1. > < >= <=
    console.log(5 > 3) //true
    console.log(5 < 3) //false
    console.log(5 >= 3) //true
    console.log(5 <= 3) //false

    // 2.等于符号 == 默认转换数据类型(内容相等即可) 会把字符串型的转换成数字型
    console.log(3 == '3') //true
    console.log('pink' == '刘德华') //false
    console.log(18 == 18) //true

    // 3.不等于号 ！= 内容相等即可
    console.log(18 != 18) //false
    console.log(3 != '3') //false
    console.log('pink' != '刘德华') //true

    // 4.全等于 === 不全等！== (内容和字符类型全等或者不全等)
    console.log(3 === '3') //false
    console.log(3 !== '3') //true
    console.log('3' === '3') //true
    console.log('3' !== '3') //false
</script>

=、==、=== 总结

符号	作用	用法
=	赋值	把右边给左边
==	判断	判断两边值是否相等(注意此时有隐士转换)
===	全等	判断两边的值和数据类型是否完全相同

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

6.6 逻辑运算符

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

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

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

<script>
    //逻辑运算符
    // 1. && (“逻辑与”，简称"与" and) 返回值true/false
    console.log(3 > 2 && 8 > 5) //true 全部为真才true
    console.log(3 > 5 && 5 < 8) //false 一个为假则false

    // 2. || (“逻辑或”，简称"或" or) 返回值true/false
    console.log(5 == '5' || 5 > 7) //true 一个为真则true
    console.log(5 === '5' || 3 < 1) //false 全部为假则false

    // 3. !(“逻辑非”，简称"非" not) 返回值 true/false
    console.log(!(3 > 5)) //true
    console.log(!(5 > 3)) //false
    console.log(!true) //false
    console.log(!false) //true
</script>

6.7 短路运算(逻辑中断)

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
逻辑与
语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

<script>
    // 短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
    // 1.逻辑与 表达式1 && 表达式2
    // 1.1如果第一个表达式的值为真，则返回表达式2(多个表达式都为真的时候，则返回最后一个)
    console.log(123 && 456) //456
    console.log(123 && 456 && 789) //456 先比较前两个，返回456，在比较456和789
    console.log(123 && 0 && 789) //0

    // 1.2如果第一个表达式的值为假，则返回表达式1 0、null、undefined、""、NaN为false，其余为 true
    console.log(0 && 456 && 789456) //0
    console.log(null && 456) //null
    console.log(undefined && 456 && 789) //undefined
    console.log('' && 456) //''
    console.log(NaN && 456) //NaN
</script>

逻辑或
语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

<script>
    // 短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
    // 2.逻辑或
    // 2.1如果第一个表达式的值为真，则返回表达式1
    console.log(123 || 456 || 789) //123

    // 2.2如果第一个表达式的值为假，则返回表达式2
    console.log(0 || 456 || 789) //456

    // 2.3案例 逻辑或会影响程序的运行结果
    var num = 0;
    console.log(123 || num++);//表达式1为真，直接返回表达式1 123
    console.log(num); // 0
</script>

6.8 赋值运算符

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

赋值运算符	说明	说明
=	直接赋值	var usrName = ‘我是值’
+= ，-=	var usrName = ‘我是值’	var age = 10； age+=5；//15
*=，/=，%=	乘，除，取模后再赋值	var age = 2; age*=5; //10

<script>
    // 1. + -
    var s = 2;
    s++ //相当于 s=s+1
    console.log(s) //3

    // 2. += -=
    var num = 10;
    num += 20 //相当于 num=num+20
    console.log(num) //30
    var p = 30;
    p -= 20 //相当于 p=p-20
    console.log(p) //10

    // 3.*= /= %=
    var age = 3;
    age *= 10 //相当于 age=age*10
    console.log(age) //30
</script>

6.9 运算符优先级

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

优先级顺序	运算符名称	表示符号
1	小括号	`( )`
2	一元运算符	`++` `--` `!`
3	算数运算符	*先` /`后 `+ -`**
4	关系运算符	`>` `>=` `<` `<=`
5	相等运算符	`==` `!=` `===` `!==`
6	逻辑运算符	先 `&&` 后`II`（先与后或）
7	赋值运算符	`=`
8	逗号运算符	`,`

练习题

<script>
    // 1.案例解释 注意权重
    console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) // true
        /* 执行步骤 1. !(12 * 2 == 144) => !false => true 2. '人' != '阿凡达' && true && true)=>true && true && true => true 3. 4 >= 6 || true =>false || true => true */
    var num = 10;
    console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); //true
    // true && true => true

    // 2.其他案例
    var a = 3 > 5 && 2 < 7 && 3 == 4;
    // false && true && false => false
    console.log(a) // false
    var b = 3 <= 4 || 3 > 1 || 3 != 2;
    // true || true || true => true
    console.log(b) // true
    var c = 2 === "2";
    console.log(c) //false
    var d = !c || b && a;
    // true || true && false =>true || false =>true
    console.log(d); // true
</script>

7、流程控制

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

7.1 顺序结构

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

7.2 分支结构（判断结构）

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
JS 语言提供了两种分支结构语句： if 语句 和 switch 语句

7.2.1 if 分支语句

语法结构

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

执行流程
1. 执行思路:如果表达式为true,那么执行语句1，否则执行语句2
2. if语句里面的语句1和else里面的语句2最终只能有一个语句执行 2选1
3. else后面直接跟大括号
代码验证

<script>
    // 满足判断的条件，则在执行，否则不执行
    // 案例 弹出一个输入框，要求用户输入年龄，如果年龄大于等于 18 岁，允许进网吧
    var age = prompt('请输入你的年龄');
    if (age >= 18) { 
   
        alert('你已经年满18岁了，可以进入')
    }
</script>

7.2.2 if else语句（双分支语句）

语法结构

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

执行流程
代码实现

<script>
    //if else 双分支语句 非循环语句
    //案例一：去网吧根据年龄判定是否能上网
    var age = prompt("请输入你的年龄");
    if (age >= 18) { 
   
        alert("欢迎光临！");
    } else { 
   
        console.log("未满18岁禁止上网！");
    }

    //案例二：判断平年和闰年
    var year = prompt("请输入年份");
    if (year % 4 == 0 && year % 100 == 0 || year % 400 == 0) { 
   
        alert("此年份是闰年" + year);
    } else { 
   
        alert("此年份是平年" + year);
    }

    //练习：输入姓名查看是否中奖
    var name = prompt("请输入你的名字");
    if (name == "刘德华") { 
   
        alert(name + "恭喜你中奖了");
    } else { 
   
        alert(name + "不好意思,您未中奖");
    }
</script>

7.2.3 if else if 多分支语句

分支语句 就是利用多个条件来选择不同的语句执行,得到不同的结果，是一个多选一的过程
语法结构

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

注意点：多分支语句还是多选一，最后只能有一个语句执行；else if里面的条件理论上是可以任意多个的；else和if之间有空格。
执行流程
代码验证

<script>
    //案例 接收用户输入的分数，根据分数输出对应等级字母ABCDE
    var grade = prompt("请输入您的分数");
    if (grade >= 90) { 
   
        alert("A");
    } else if (grade >= 80) { 
   
        alert("B");
    } else if (grade >= 70) { 
   
        alert("c");
    } else if (grade >= 60) { 
   
        alert("D");
    } else { 
   
        alert("E");
    }
</script>

7.2.4 三元表达式（三目运算符）

概念：三元表达式也能做一些简单的条件选择。有三元运算符组成的式子称为三元表达式
语法结构

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

执行思路

如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
简单理解：就类似于 if else （双分支）的简写

代码验证

<script>
    //方式1
    var num = 3;
    var result = num > 5 ? '是的' : '不是';
    console.log(result);//'不是'
    //方式2 直接输出（简写）
    console.log(6 > 5 ? 9 : 10);//9
    //方式3：转化成if else
    var n = prompt("请输入你的数字");
    if (n > 10) { 
   
        console.log("是的");
    } else { 
   
        console.log("不是");
    }
    //案例 数字补0：用户输入数字，如果数字小于10，则在前面补 0 ，比如01，09 ，如果数字大于10，则不需要补，比如 20。
    //方法1 if 条件语句
    var s = prompt("请输入你的数字0~59");
    if (s > 10) { 
   
        console.log(s);
    } else { 
   
        console.log("0" + s);
    }
    //方法2 三元表达式简写
    var s = prompt("请输入你的数字0~59");
    n = s > 10 ? console.log(s) : console.log("0" + s);
</script>

7.2.5 switch 语句

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

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

执行思路
利用表达式的值和case后面的选项值相匹配，如果匹配上，就执行case里面的语句，如果都没有匹配上，那么执行的default里面的语句
① switch ：开关转换， case ：小例子选项
② 关键字 switch 后面括号内可以是表达式或值，通常是一个变量
③ 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
④switch 表达式的值会与结构中的 case 的值做比较
⑤ 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码
执行结束
⑥ 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
⑦ 注意：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句
代码验证

<script>
// 1.swich语句
    switch (8) { 
   
        case 1:
            console.log("这是" + 1);
            break;
        case 2:
            console.log("这是" + 2);
            break;
        case 3:
            console.log("这是" + 3);
            break;
        default:
            console.log("输入有误");
    }

    //案例：查询水果
    var friut = prompt("请输入你的水果");
    switch (friut) { 
   
        case "苹果":
            alert(friut + "价格为3.9");
            break;
        case "橘子":
            alert(friut + "价格为4.9");
            break;
        case "香蕉":
            alert(friut + "价格为5");
            break;
        default:
            alert("对不起，没有此类水果");
    }
</script>

注意点
① 在开发里面表达式通常使用变量
② num和case里面的值相匹配的时候是全等的，必须是值和数据类型一致才可以：num===2
③ break如果当前的case里面没有break,则不会退出switch是继续执行下一个case(往后执行，不影响前面的)

<script>
    //在开发里面表达式通常使用变量
    //n和case里面的值相匹配的时候是全等的，必须是值和数据类型一致才可以：num===2
    //break如果当前的case里面没有break,则不会退出switch是继续执行下一个case(往后执行，不影响前面的)
    // 1.不存在break
    var num = prompt("请输入你的水果");
    switch (num) { 
   
        case "1":
            console.log("这是" + 1);
        case "2":
            console.log("这是" + 2);    
        case "3":
            console.log("这是" + 3);
        default:
            console.log("输入有误");
    } //输入1 打印 1 2 3 输入有误
    
    // 2.存在break
    var num2 = prompt("请输入你的水果");
    switch (num2) { 
   
        case "1":
            console.log("这是" + 1);
            break;
        case "2":
            console.log("这是" + 2);
            break;
        case "3":
            console.log("这是" + 3);
            break;
        default:
            console.log("输入有误");
    }//输入1 打印 1
</script>

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

一般情况下，它们两个语句可以相互替换
switch…case 语句通常处理 case为比较 确定值 的情况，而 if…else…语句更加灵活，常用于 范围判断 (大于、等于某个范围)
switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次
当分支比较少时，if… else语句的执行效率比 switch语句高
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰

7.3 循环结构

循环目的：在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句
JS 中的循环分类
for 循环
while 循环
do...while 循环

7.3.1 断点调试

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

7.3.2 for循环

概念：在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句
语法结构
初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的

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

代码验证

for循环执行的过程

<script>
    // 1.for循环执行的过程
    for (var i = 1; i < 10; i++) { 
   
        console.log(i); //123456789
    }
    //1.首先执行里面的计数器变量 var i=1,但是这句话在for里面只执行一次index
    //2.去i<10来判断是否满足条件，若果满足条件就去执行循环体，不满足条件就退出循环
    //3.最后执行i++，并且i++是单独写的代码，递增，第一轮结束
    //4.接着执行i<10判断是否满足条件，如果满足条件，就继续执行循环体
    //5.当i>=10的时候，退出循环体
</script>

for循环可以执行相同的代码

<script>
    // 2.for循环可以执行相同的代码
    for (var i = 1; i < 10; i++) { 
   
        console.log('我爱你');//打印9次'我爱你'
    }
</script>

for循环可以控制用户输入的次数

<script>
    // 3.for循环可以控制用户输入的次数
    var num = prompt("请你输入需要执行的次数");
    for (var i = 1; i <= num; i++) { 
   
        console.log("小君君我爱你");
    }
</script>

for循环执行不相同的代码

<script>
    // 4.for循环执行不相同的代码
  var name = prompt('请输入你喜欢的人名字');
    for (var i = 1; i <= 100; i++) { 
   
        console.log(name + '*' + i);
    }
</script>

for if else 嵌套

<script>
    // 5.for if else 嵌套
  var n = prompt("请输入执行次数");
    for (i = 1; i <= n; i++) { 
   
        if (i == 1) { 
   
            console.log("这个小伙子出生啦");
        } else if (i == 60) { 
   
            console.log("这个人老了");
        } else { 
   
            console.log("这个人" + i + "岁啦");
        }
    }
</script>

案例1 求1-100之间所有整数的累加和

<script>
  // 6.案例1 求1-100所有整数的和 重复执行某些操作
  var sum1 = 0
    for (var i = 1; i <= 100; i++) { 
   
        sum1 += i;
    }
    console.log(sum1); //5050
</script>

案例2 求两个数之间的和

<script>
 // 7.案例2 求两个数之间的和
    var sum = 0
    var n = parseInt(prompt("请输入你的数字1")); //数据类型先转换
    var m = parseInt(prompt("请输入你的数字2")); //数据类型先转换
    if (m > n) { 
   
        for (var i = n; i <= m; i++) { 
   
            sum += i;
        }
        console.log(sum);
    } else { 
   
        for (var i = m; i <= n; i++) { 
   
            sum += i;
        }
        console.log(sum);
    }
</script>

案例3 要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩

<script>
// 8.案例3 要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩
var n = prompt("请输入班级人数:");
    var sum = 0;
    var ave = 0;
    for (var i = 1; i <= n; i++) { 
   
        var grade = parseInt(prompt('请输入第' + i + '个学生的成绩'));
        sum += grade;
    }
    ave = sum / n;//循环结束之后在取平均值
    alert('该班级总成绩为:' + sum + "\n" + '该班级平均成绩为:' + ave);
</script>

案例3 求两个数之间所有数和的平均值

<script>
    // 9.案例3 求两个数之间所有数和的平均值
    var sum = 0
    var n = parseInt(prompt("请输入你的数字1")); //数据类型先转换
    var m = parseInt(prompt("请输入你的数字2")); //数据类型先转换
    if (m > n) { 
   
        for (var i = n; i <= m; i++) { 
   
            sum += i;
            var ave = sum / (m - n + 1);
        }
        console.log(sum);
        console.log(ave);
    } else { 
   
        for (var i = m; i <= n; i++) { 
   
            sum += i;
            var ave = sum / (n - m + 1);
        }
        console.log(sum);
        console.log(ave);
    }
</script>

案例4 求1-100之间所有偶数和奇数的和

<script>
// 10.案例4 求1-100之间所有偶数和奇数的和
    //方法1
    var sum1 = 0;
    var sum2 = 0;
    for (var i = 1, j = 2; i < 100, j <= 100; i += 2, j += 2) { 
   
        sum1 += i; //奇数和
        sum2 += j; //偶数和
        var sum = sum1 + sum2; //总和
    }
    console.log(sum1); //2500
    console.log(sum2); //2550
    console.log(sum); //5050
    //方法2
    var sum1 = 0;
    var sum2 = 0;
    for (i = 1; i <= 100; i++) { 
   
        if (i % 2 == 0) { 
    //能被2整除的为偶数
            sum1 = sum1 + i; //偶数和 

        } else { 
   
            sum2 = sum2 + i; //奇数和
        }
    }
    console.log(sum1);//2550
    console.log(sum2);//2500
</script>

案例5 1-100之间能被3整除的数字和

<script>
 // 11.案例5 1-100之间能被3整除的数字和
    var sum4 = 0;
    for (i = 0; i <= 100; i++) { 
   
        if (i % 3 == 0) { 
   
            sum4 += i;
        }
    }
    console.log(sum4); //1683
</script>

7.3.3 for for 双重循环

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

for (外层初始化变量; 外层条件表达式; 外层操作表达式) {
        for (里层初始化变量; 里层条件表达式; 里层操作表达式) {
            //执行语句；
        }
    }

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

代码验证

双重for循环

<script>
    // 1.双重for循环 外层循环执行一次，内层循环要执行全部次数
    for (var i = 1; i <= 3; i++) { 
   
        console.log("这是外层循环的第" + i + "次");
        for (var j = 1; j <= 5; j++) { 
   
            console.log("这是里层循环的第" + j + "次");
        }
    }
</script>

案例1.打印五行五列

<script>
 // 案例1 打印n行n列
    var str = "";
    var n = prompt('请输入你要打印的行：');
    var m = prompt('请输入你要打印的列：');
    for (var i = 1; i <= n; i++) { 
   
        for (var j = 1; j <= m; j++) { 
   
            str = str + "☆";
        }
        str = str + '\n'; //每一行打印完之后换行
    }
    console.log(str);
</script>

案例2 打印倒三角形案例

<script>
    // 案例2 打印倒三角形案例
    var str = "";
    for (var i = 5; i > 0; i--) { 
    //控制行
        for (var j = 1; j <= i; j++) { 
    //控制列v
            str = str + "☆";
        }
        str = str + '\n'; //每一行打印完之后换行
    }
    console.log(str);
</script>

在这里插入图片描述

案例3 九九乘法表

<script>
    // 案例3 九九乘法表
    var str = " ";
    for (var i = 1; i <= 9; i++) { 
   
        for (var j = 1; j <= i; j++) { 
   
            //1x2=2
            str += '\t' + j + "x" + i + "=" + i * j; //注意字符串和number的转换 通过字符串拼接
        }
        str = str + '\n';
    }
    console.log(str);
</script>

7.3.4 while循环

概念
while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环
语法结构

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

执行思路
① 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
② 执行循环体代码
③ 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循
环条件为 false 时，整个循环过程才会结束
注意
① 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
② while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码
代码验证

while循环语法结构当…的时候

<script>
    //1.while循环语法结构 当....的时候
    //2.执行思路 当条件表达式为true则执行循环体，否则退出循环
    var num = 1;
    while (num <= 10) { 
   
        console.log("你好");
        num++;
    }
    //4.里面应该也有计数器，初始化变量
    //5.里面应该也有操作表达式完成计数器的更新，防止死循环
</script>

案例1 打印人的一生，从1岁到100岁

<script>
    // 案例1 打印人的一生，从1岁到100岁
    var i = 1;
    while (i <= 100) { 
   
        console.log("这个人今年" + i + "岁啦");
        i++; //一定要记得更新计数器，防止进入死循环
    }
</script>

案例2计算1-100整数和

<script>
    //案例2计算1-100整数和
    var i = 1;
    var sum = 0;
    while (i <= 100) { 
   
        sum += i;
        i++;
    }
    console.log(sum);//5050
</script>

案例3 弹出一个提示框，你爱我吗，如果输入我爱你，就提示结束，否则一直询问

<script>
    //案例4 弹出一个提示框，你爱我吗，如果输入我爱你，就提示结束，否则一直询问
    var i = prompt("你爱我吗？");
    while (i !== '我爱你') { 
   
        var i = prompt("你爱我吗？");
    }
    alert('我也爱你！');
</script>

7.3.5 do while 循环

概念
do… while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环
语法结构

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

执行思路
① 先执行一次循环体代码
② 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码
注意：先再执行循环体，再判断，我们会发现 do…while 循环语句至少会执行一次循环体代码
代码验证

案例1 打印人的一生

<script>
   //案例1 打印人的一生
    var i = 1;
    do { 
   
        console.log("你今年" + i + "岁啦");
        i++;
    } while (i <= 100);
</script>

案例2 计算1-100整数和

<script>
    //案例2 计算1-100整数和
    var sum = 0;
    var i = 1;
    do { 
   
        sum += i;
        i++;
    } while (i <= 100);
    console.log(sum);//5500
</script>

弹出一个提示框，你爱我吗，如果输入我爱你，就提示结束，否则一直询问

<script>
    //案例3 弹出一个提示框，你爱我吗，如果输入我爱你，就提示结束，否则一直询问
    do { 
   
        var i = prompt("你爱我吗？");
    } while (i !== "我爱你");
    alert("我也啊你！");
</script>

7.3.6 continue break关键字

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

<script>
    //continue退出当前次的循环,直接执行下一次的循环
    for (var i = 1; i <= 5; i++) { 
   
        if (i == 3) { 
   
            continue; //只要遇见continue就退出本次循环，直接跳到i++
        }
        console.log('我正在吃第' + i + '个包子'); //1.2.4.5
    }

    //案例：求出1-100之间除了能被7整除之外的整数和
    var sum = 0;
    for (var i = 1; i <= 100; i++) { 
   
        if (i % 7 == 0) { 
   
            continue;//i是7的倍数的时候退出本次循环
        }
        sum += i;
    }
    console.log(sum); //4315
</script>

break关键字
① break 关键字用于立即跳出整个循环（循环结束）
② 代码验证

<script>
    //break 跳出整个循环
    for (var i = 1; i <= 5; i++) { 
   
        if (i == 3) { 
   
            break; //退出整个循环 在3以及后面的不再打印
        }
        console.log(i);//1 2
    }
</script>

7.3.7 循环小结

① JS 中循环有 for 、while 、 do while
② 三个循环很多情况下都可以相互替代使用
③ 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用 for
④ while 和 do…while 可以做更复杂的判断条件，比 for 循环灵活一些
⑤ while 和 do…while 执行顺序不一样，while 先判断后执行，do…while 先执行一次，再判断执行
⑥ while 和 do…while 执行次数不一样，do…while 至少会执行一次循环体，而 while 可能一次也不执行
⑦ 实际工作中，我们更常用for 循环语句，它写法更简洁直观，所以这个要重点学习

作业

作业1 求100以内所有能被3和7整除的数的和

<script>
    // 作业1 求100以内所有能被3和7整除的数的和
    var sum = 0;
    for (var i = 0; i <= 100; i++) { 
   
        if (i % 3 == 0 && i % 7 == 0) { 
   
            console.log(i) // 0 21 42 63 84 
            sum = sum + i
        }
    }
    console.log(sum) //210
</script>

作业2 打印出正金字塔（1357）

<script>
    // 作业2 打印出正金字塔（1357）
    for (var i = 1; i <= 4; ++i) { 
   
        // 根据规律知道需要用for输出多余的空格，只需要左边的空格
        for (var k = 1; k <= 4 - i; ++k) { 
   
            document.write("&ensp; ");
        }
        // 结合2n-1的公式求出每一行的星星数
        for (var j = 1; j <= 2 * i - 1; ++j) { 
   
            document.write("☆");
        }
         // 每打完一行就执行换行
        document.write("<br />");
    }
</script>

作业3 打印出倒金字塔（7351）

<script>
    // 作业2 打印出倒金字塔（7351）
    for (var i = 1; i <= 4; i++) { 
   
        for (k = 0; k <= i - 1; k++) { 
   
            document.write(" &ensp;");
        }
        for (j = 1; j <= 9 - 2 * i; j++) { 
   
            document.write("☆");
        }
        document.write("<br />");
    }
</script>

作业4 用户登录验证

    // 作业4 用户登录验证
    //方法一：while
    var msg = prompt('名字');
    var pwd = prompt('密码');
    while (msg != 'admin' || pwd != '123') { 
   
        alert('请你先登录');
        msg = prompt('名字');
        pwd = prompt('密码');
    }
    alert('登录成功');

    //方法二：do while
    do { 
   
        var msg2 = prompt('名字');
        var pwd2 = prompt('密码');
    } while (msg2 != 'admin' || pwd2 != '123');
    alert('登录成功');
</script>

7.4 断点调式

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

8、数组

概念：数组 Array是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。简单来说数组就是一组数据的集合，存储在单个变量下

8.1 数组的创建方式

利用new关键字创建数组
利用数组字面量创建数组
语法规范
①我们数组里面的数据用逗号分隔
②数组里面的的数据称为数组元素
③素组元素可以是任意数据类型,数据类型无限制

利用new关键字创建数组
▶ 注意： Array()，A 要大写

<script>
    // 利用 new 关键字创建数组
    //创建了一个空数组
    var 数组名 = new Array();
    //创建了一个长度为2的空数组
    var arr = new Array(2);
    //创建了一个数组，并且添加了两个数组元素
    var arr = new Array(1, 2);
</script>

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

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

8.2 访问数组元素（索引）

访问素组元素console.log（arr[i]）数组名[索引号]
索引号从0开始
代码验证

<script>
    var arr = [5, true, "你好", 2];
     //访问数组索引号为0的元素
    console.log(arr[0]); //5
    //访问数组索引号为1的元素
    console.log(arr[1]); //true
    console.log(arr[4]); //undefined,因为没有这个数组元素
</script>

案例

<script>
    //练习 定义一个数组，里面存放星期一、.....星期日
    var arr = [];
    for (i = 1; i <= 7; i++) { 
   
        arr[arr.length] = i;
    }
    console.log(arr); //(7) [1, 2, 3, 4, 5, 6, 7]
</script>

8.3 遍历数组

数组的遍历：取出（访问数组中所有的元素）
① i要从0开始，因为索引号从零开始
②i计数器当索引号使用
③ 遍历数组的方式： for循环 forEach()方法
代码验证
①for 循环遍历数组

<script>
    //遍历数组方式一 for循环
    var arr = [1, 2, 3, 4]
    for (i = 0; i < arr.length; i++) { 
    //i要从0开始，因为索引号从零开始
        console.log(arr[i]); //1 2 3 4 逐个打印数组中的元素
    }
    console.log(arr.length); //4 获取数组长度：有几个数组元素，长度就是多少
</script>

②forEach()方法遍历数组

<script>
    // 遍历数组方式二 forEach
    // 1.原函数遍历
    var arr2 = [1, 2, 3, 4]
    arr2.forEach(function(element) { 
   
        console.log(element) //1 2 3 4 逐个打印数组中的元素
    });
    
    // 2.箭头函数
    var arr3 = [5, true, "你好", 2];
    arr3.forEach(value => { 
   
        console.log(value) //5 true 你好 2
    })
</script>

8.4 数组长度

数组长度： 数组名.length访问数组元素的数量（数组长度）
注意
①此处数组的长度是数组元素的个数，不要和数组的索引号混淆
②当我们数组里面的元素个数发生了变化，这个length属性跟着一起变化
代码验证

数组名.length动态监测数组元素的个数

<script>
    //1.arr.length动态监测数组元素的个数
    var arr = [1, 2, 3, 4, 5, 6];
    //i要从0开始，因为索引号从零开始
    for (i = 0; i < arr.length; i++) { 
    
        console.log(arr[i]);
    }
    //获取数组长度：有几个数组元素，长度就是多少
    console.log(arr.length); // 6
</script>

修改数组长度

<script>
    //3.修改数组的长度
    //3.1查看数组长度
    var arr = [2, 3, 5, 6];
    console.log(arr.length); //4

    //3.2通过增加素组元素（数组索引号）来增加数组长度
    arr[4] = 7; //为数组索引号为4的下标增加一个数组元素
    console.log(arr.length); //5

    //3.3直接通过修改数组长度来增加数组长度
    arr.length = 6; //修改增加数组长度
    console.log(arr.length); //6
    console.log(arr); //[2, 3, 5, 6, 7, 空]
    console.log(arr[5]); //空undefined

    //3.4直接通过修改数组长度来减少数组长度
    arr.length = 1; //减少数组长度
    console.log(arr) //2 从后面开始删除数组元素
</script>

案例1：利用数组长度求数组元素的和以及平均值

<script>
    //2.案例：求数组元素的和以及平均值
    var arr = [2, 6, 1, 7, 4];
    var sum = 0;
    for (i = 0; i < arr.length; i++) { 
   
        sum += arr[i]; //求和
    }
    var ave = sum / arr.length; //求平均值
    //总和
    console.log(sum);//20
    //平均值
    console.log(ave);//4
</script>

8.5 案例

请将 [“关羽”,“张飞”,“马超”,“赵云”,“黄忠”,“刘备”,“姜维”]; 数组里的元素依次打印到控制台

<script>
    // 案例1 请将 ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维'] 数组里的元素依次打印到控制台
    var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维'];
    // 方法1 for 循环遍历
    for (let i = 0; i < arr.length; i++) { 
   
        console.log(arr[i])
    }
    //方法2 forEach遍历 箭头函数
    arr.forEach(element => { 
   
        console.log(element)
    });
</script>

计算数组的和以及平均值

<script>
    //案例2 计算数组的和以及平均值
    var sum = 0;
    var arr2 = [50, 42, 58, 95, 32, 20];
    for (let i = 0; i < arr2.length; i++) { 
   
        sum += arr2[i] //求和
    }
    var ave = sum / arr2.length //求平均值
    console.log(sum, ave) // 297 49.5
</script>

求数组中的最大值

<script>
    //案例3 求数组中的最大值
    var arr3 = [50, 42, 58, 95, 32, 20];
    var max = arr3[0]
    for (let i = 1; i < arr3.length; i++) { 
   
        if (arr3[i] > max) { 
   
            max = arr3[i];
        }
    }
    console.log(max) //95
</script>

将数组 [‘red’, ‘green’, ‘blue’, ‘pink’] 转换为字符串，并且用 | 或其他符号分隔

<script>
    //案例4 将数组 ['red', 'green', 'blue', 'pink']里面的元素转换为字符串,并用"|"分隔
    var arr4 = ['red', 'green', 'blue', 'pink']
    var str = '';
    for (let i = 0; i < arr4.length; i++) { 
   
        str += arr4[i] + "|"
    }
    console.log(str) //red|green|blue|pink|
</script>

8.6 数组元素的操作

8.6.1 增加数组元素

新增数组元素：不要给数组名直接赋值，否则会原来的数组元素就没了
通过修改 length 数组长度新增数组元素
① 增加数组长度，其多出来的数组下标对应的数组元素为undefined

<script>
    // 修改数组长度（通过修改 length 长度新增数组元素）
    var arr = [1, 2, 3, 4];
    arr.length = 5;
    //增加了数组长度，其新增的索引号的元素用空值undefined 表示
    console.log(arr[5])//undefined 
    console.log(arr); //(5) [1, 2, 3, 4, 空白]
</script>

通过修改数组索引新增数组元素
注意：不能直接给数组名赋值，否则会覆盖掉以前的数据

<script>
    //通过索引号增加数组元素
    var arr = [1, 2, 3, 4];
    //arr[]里面的内容代表数组的索引号位置，5代表相对索引号位置所代表的元素
    arr[4] = 5;
    console.log(arr);
</script>

通过循环往空数组里面插入数据增加数组元素（追加数组元素）

<script>
    //通过循环往空数组里面插入数据
    var arr = [];
    for (var i = 0; i < 10; i++) { 
   
        arr[i] = i + 1;
    }
    console.log(arr);
</script>

8.6.2 删除数组元素

删除重复的数组元素

<script>
    //1.删除重复的数组元素
    var arr4 = [0, 1, 0, 2, 0, 5, 0, 6, 0, 3, 0, 0, ];
    var arr5 = []; //定义一个空数组
    for (i = 0; i < arr4.length; i++) { 
   
        if (arr4[i] != 0) { 
   
            arr5[arr5.length] = arr4[i];
        }
    }
    console.log(arr5); //[1, 2, 5, 6, 3]
</script>

利用循环+判断条件删除指定数组元素

<script>
    var arr6 = ['张三', 'true', 98, 'andy', 666];
    var arr7 = []
    for (let i = 0; i < arr6.length; i++) { 
    // 循环
        //删除索引号为2和4的数组元素（判断）
        if (i != 2 && i != 4) { 
   
            arr7.push(arr6[i])
        }
    }
    console.log(arr7) //['张三', 'true', 'andy']
</script>

利用条件筛选数组从而删除元素

<script>
    //3.利用条件筛选数组从而删除元素
    // 选出大于10的数组元素并组成一个新数组
    var arr8 = [1, 5, 6, 8, 75, 24, 96, 02, 45]
    var arr9 = []
    for (let i = 0; i <= arr8.length; i++) { 
   
        if (arr8[i] > 10) { 
   
            arr9.push(arr8[i])
        }
    }
    console.log(arr9) //[75, 24, 96, 45] 
</script>

8.6.3 修改数组元素

直接通过数组索引修改对应数组元素

<script>
    //修改数组元素
    var arr10 = [1, 2, 3];
    arr10[1] = 4;
    console.log(arr10); //[1, 4, 3]
</script>

8.6.4 筛选数组元素

案例

<script>
    //筛选数组元素：选择取出条件表达式限制的值
    //方法一
    var arr12 = [1, 2, 3, 10, 2, 50, 92, 75, 60];
    var newArr1 = [];
    var j = 0;
    for (var i = 0; i < arr12.length; i++) { 
   
        if (arr12[i] > 10) { 
   
            newArr1[j] = arr12[i];//符合条件的数组元素添加到新数组中
            j++;
        }
    }
    console.log(newArr1);//[50, 92, 75, 60]
    //方法二
    var arr13 = [1, 2, 3, 10, 2, 50, 92, 75, 60];
    var newArr2 = [];
    for (var i = 0; i < arr13.length; i++) { 
   
        if (arr13[i] > 10) { 
   
            newArr2[newArr2.length] = arr13[i];//符合条件的数组元素添加到新数组中
        }
    }
    console.log(newArr2);//[50, 92, 75, 60]
</script>

8.6.5 翻转数组元素

方法一从最后一个开始循环，让最后一个数组的元素作为第一个，依次类推

<script>
    //翻转数组
    //1.方法一
    var arr14 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    var arr15 = []
    for (var i = arr14.length - 1; i >= 0; i--) { 
   
        arr15[arr15.length] = arr14[i]
    }
    console.log(arr15) //[9, 8, 7, 6, 5, 4, 3, 2, 1]
</script>

方法二数组方法 数组名.push() 后面会学

<script>
    //2.方法二 数组方法 数组名.push() 后面会学
    var arr16 = ['账单', '李四', '王五', 555, true]
    var arr17 = new Array() //new一个空数组
    for (let i = arr16.length - 1; i >= 0; i--) { 
   
        arr17.push(arr16[i])
    }
    console.log(arr17) / [true, 555, '王五', '李四', '账单']
</script>

8.6.7 数组排序（冒泡排序）

for循环+if条件判断实现数组排序
① 外层for循环管循环的次数
② 里层for循环管每一趟交换的次数

<script>
    //案例 数据从小到大排序
    var arr = [23, 14, 65, 10, 52, 18, 85, 63, 24, 59];
    for (i = 0; i < arr.length - 1; i++) { 
   
        for (var j = 0; j < arr.length - i - 1; j++) { 
   
            if (arr[j] > arr[j + 1]) { 
   
            //内部交换变量
                var arr1 = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = arr1;
            }
        }
    }
    console.log(arr);
</script>

8.6.8 数组嵌套

数组里面可以嵌套任何数组和对象

<script>
    // 数组嵌套
    var arr = [2, 5, 6, 3],
        arr2 = [5, 9, 8, 5],
        obj = { 
   
            name: '张三',
            age: 20,
            sex: '男',
        }
    arr3 = [];
    arr3[0] = arr;
    arr3[1] = arr2;
    arr3[2] = obj
    arr3[3] = true
    console.log(arr3);
</script>

9、函数

9.1 函数概念

函数概念：就是封装了一段可被重复调用执行的代码块,通过此代码块可以实现大量代码的重复使用
函数使用步骤：①声明函数②调用函数
代码验证
求两个数以及之间数字的累加和和平均值

<script>
    //求两个数以及之间数字的累加和和平均值
    function fn(num1, num2) { 
    //声明函数
        var sum = 0;
        if (num1 > num2) { 
   
            for (let i = num2; i <= num1; i++) { 
   
                sum += i;
            }
            var ave = sum / (num1 - num2 + 1)
        } else { 
   
            for (let i = num1; i <= num2; i++) { 
   
                sum += i;
            }
            var ave = sum / (num2 - num1 + 1)
        }
        console.log(sum, ave)
    }
    //调用函数并传参
    fn(2, 10) //54 6
    fn(30, 1) //465 15.5
</script>

9.2 函数的使用步骤

函数的使用分为两步
① 声明函数
② 使用函数

9.2.1 声明函数

语法结构

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

注意事项
① function 是声明函数的关键字,必须小写
② 由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum
③ 函数在使用时分为两步：声明函数和调用函数。

9.2.2 调用函数

语法结构

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

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

9.2.3 函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）

9.2.4 案例

求两个数以及之间数字的累加和和平均值

<script>
    //求两个数以及之间数字的累加和和平均值
    function fn(num1, num2) { 
    //声明函数
        var sum = 0;
        if (num1 > num2) { 
   
            for (let i = num2; i <= num1; i++) { 
   
                sum += i;
            }
            var ave = sum / (num1 - num2 + 1)
        } else { 
   
            for (let i = num1; i <= num2; i++) { 
   
                sum += i;
            }
            var ave = sum / (num2 - num1 + 1)
        }
        console.log(sum, ave)
    }
    //调用函数并传参
    fn(2, 10) //54 6
    fn(30, 1) //465 15.5
</script>

9.3 函数参数

9.3.1 形参和实参

函数可以带参数也可以不带参数
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参
参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在 调用函数时传递不同的值进去

参数	说明
形参	形式上的参数函数定义的时候用于接收调用函数传过来的实参
实参	实际上的参数函数调用的时候传递的参数实参是传递给形参的

语法结构
① 函数调用的时候实参值是传递给形参的
② 形参简单理解为:不用声明的变量
③ 在JavaScript中，形参的默认值是undefined
④ 实参和形参的多个参数之间用逗号(参数, 参数 , 参数…)分隔，

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

代码验证
利用函数参数求任意两个数的和

<script>
    //案例 利用函数求任意两个数字的和
    //声明函数传形参
    function fn(num1, num2) { 
   
        var add = num1 + num2
        console.log(add) //50
    }
    //调用函数传实参
    fn(20, 30)
</script>

9.3.2 形参实参个数的匹配

形参实参的匹配情况

参数个数	结果
实参个数等于形参个数	依次匹配正常输出结果
实参个数多于形参个数	只取到形参的个数：形参从前往后依次取实参，直到形参取完，剩下的实参就不再取出
实参个数小于形参个数	从前往后依次对应，多出来的形参就相当于一个没有声明值的变量，所以是undefined

实参形参个数相等

<script>
    //实参个数=形参个数 一一匹配 正常输出结果
    function fn1(name, age) { 
   
        console.log(name, age)
    }
    fn1('张三', 20) //张三 20
</script>

实参个数>形参个数

<script>
    //实参个数>形参个数 
    //形参从前往后依次取实参，直到形参取完，剩下的实参就不再取出
    function fn2(num1, num2) { 
   
        console.log(num1 + num2) //3
    }
    fn2(1, 2, 3) //3
</script>

实参个数<形参个数

<script>
    //实参个数<形参个数
    //从前往后一一对应，多出来的形参就相当于一个没有声明值的变量，所以是undefined
    function fn3(a, b, c, d) { 
   
        console.log(a) //1
        console.log(b) //2
        console.log(c) //3
        console.log(d) //undefined
    }
    fn3(1, 2, 3) //1 2 3 undefined
</script>

9.3 函数的返回值

所有的函数都会自动返回一个值
① 加return则返回return后面的确定值
② 不加return，则统一返回函数的默认返回值undefined

9.3.1 概念

函数的返回值：把 函数的值 返回给函数的 调用者
关键字：return 语句
语法结构

   //2.返回值的格式
    function 函数名() {
            return 需要的返回结果;
        }
        函数名(); //调用者

我们的函数只是实现了某种功能，最终的结果返回给函数的调用者函数名() 通过return实现的
只要函数遇到return 就把后面的结果返回给调用者，形式：函数名()=return后面的结果
代码验证

<script>
    //代码验证
    function getReturn() { 
   
        return 666;
    }
    getReturn(); //getReturn=666
    console.log(getReturn());
</script>

案例

案例一求任意两个数的和

<script>
    //案例：求任意两个数的和
    function sum(num1, num2) { 
   
        return num1 + num2;
    }
    console.log(sum(1, 2));
</script>

返回两个数的最大值

<script>
    //案例：返回两个数的最大值
    //方法一 return
    function max1(num3, num4) { 
   
        if (num3 > num4) { 
   
            return num3;
        } else { 
   
            return num4
        }
    }
    console.log(max1(80, 330)); //330

    //方法二 三元运算符
    function max2(num5, num6) { 
   
        return (num5 > num6 ? num5 : num6)
    }
    console.log(max2(110, 120)); //120
</script>

返回组中的最大值

<script>
    //返回组中的最大值
    function max3(arr) { 
   
        var max4 = arr[0];
        for (var i = 1; i < arr.length; i++) { 
   
            if (arr[i] > max4) { 
   
                max4 = arr[i];
            }
        }
        return max4;
    }
    //max([5, 8, 5, 62, 35, 69, 84]);//函数的调用者：实参是一个数组送过去
    //在实际开发中，我们经常用一个变量来接受函数返回的结果，使用更简单
    var re = max3([5, 8, 5, 62, 35, 69, 84]);
    console.log(re);
</script>

9.3.2 return 注意事项

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

<script>
    //1.return 终止函数
    function getSum(num1, num2) { 
   
        return num1 + num2; //return后面的代码不会被执行
        console.log("你好"); //不会被执行
    }
    var s = getSum(1, 2);
    console.log(s); //3
</script>

return只能返回一个值
① 返回最后一个值
② 若要数组返回多个值，那么可以用数组的形式返回，最后用遍历数组打印结果

<script>
    //2.return只能返回一个值 返回最后一个值
    function getSum2(num11, num21) { 
   
        return num11, num21;
    }
    var s2 = getSum2(1, 2);
    console.log(s2); // 2

    //若要数组返回多个值，那么可以用数组的形式返回
    function getSum(num12, num22) { 
   
        return [num12, num22, num12 + num22, num12 * num22, num12 - num22];
    }
    var s = getSum(1, 2);
    for (i = 0; i < s.length; i++) { 
   
        //利用数组的遍历打印出来每一个数组元素
        console.log(s[i]); 
    }
</script>

函数如果有return，则返回return后面的值，如果没有return，那么返回undefined
函数都是有返回值的
① 如果有return 则返回 return 后面的值
② 如果没有return 则返回 undefined

<script>
    //有return，则返回return后面的值
    function fun1() { 
   
        return 666; //return存在
    }
    var fun1 = fun1();
    console.log(fun1);//666

    //没有return时返回的值
    function fun2() { 
   

    }
    var fun2 = fun2();
    console.log(fun2); //undefined
</script>

9.3.3 break、continue、return 的区别

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

9.3.4 练习

练习1 利用函数求任意两个数的最大值

<script>
    //方法1 if else条件判断
    function fn1(num1, num2) { 
   
        if (num1 > num2) { 
   
            return num1
        } else { 
   
            return num2
        }
    }
    console.log(fn1(10, 20)) //20

    //方法2 三元运算符
    function fn1(num3, num4) { 
   
        return num3 > num4 ? num3 : num4
    }
    console.log(fn1(10, 20)) //20
</script>

练习2 求数组的最大值

<script>
    // 求数组 [5,2,99,101,67,77] 中的最大数值
    function fn2(arr1) { 
   
        var max = arr1[0];
        for (let i = 1; i < arr1.length; i++) { 
   
            arr1[i] > max ? max = arr1[i] : max
        }
        return max; //注意，返回的时候值是给函数的调用者
    }
    //若要使用返回值，那么就需要定义一个变量来接收这个返回值
    var Max = fn2([5, 2, 99, 101, 67, 77])
    console.log('最大值为:' + Max) //最大值为:101
</script>

练习3 创建一个函数，实现两个数之间的加减乘除运算，并将结果返回

<script>
    function fn3(a, b) { 
   
        //返回对象
        return { 
   
            乘法运算结果: a * b,
            加法运算结果: a + b,
            减法运算结果: a - b,
            除法运算结果: a / b,
            取余运算结果: a % b
        }
    }
    var result = fn3(60, 12)
    console.log(result)
</script>

在这里插入图片描述

9.4 arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments来获取
只有函数才有 arguments 对象，而且每个函数都内置好了这个arguments对象
arguments对象中存储了传递的 所有实参
arguments展示形式是一个 伪数组，因此可以进行for循环遍历取出每一个元素
伪数组具有以下特点：
① 具有数组 length属性
② 按索引方式储存数据
③ 不具有真正数组的一些方法，比如 push , pop ，forEach等方法
④ 具有数组的属性，不具有数组的方法
代码验证

<script>
    function fn() { 
   
        console.log(arguments); //里面存储了所有传过来的实参
        console.log(arguments[2]); //索引号2下表的数组元素
        console.log(arguments.length); //长度
        //取出arguments下的数组元素
        for (var i = 0; i < arguments.length; i++) { 
   
            console.log(arguments[i])
        }
    }
    fn(1, 2, 3)
</script>

案例利用 arguments函数求任意个数的最大值

<script>
    //利用 arguments 函数求任意个数的最大值
    function fn2() { 
   
        var max = arguments[0];
        for (i = 1; i < arguments.length; i++) { 
   
            if (arguments[i] > max) { 
   
                max = arguments[i];
            }
        }
        return max; //记得return返回值给函数的调用者 
    }
    // 定义一个变量用来接收返回值
    var s = fn2(1, 2, 3, 5, 48, 5, 2, 522, 3);
    console.log(s); //522
</script>

9.5 函数封装案例

案例 1：利用函数封装方式，翻转任意一个数组

<script>
    //方法1 不定义形参+arguments+for循环
    function fn() { 
   
        for (i = 0, j = arguments.length - 1; j > i; i++, j--) { 
   
            var temp = arguments[i];
            arguments[i] = arguments[j];
            arguments[j] = temp;
        }
        return arguments;
    }
    console.log(fn(5, 8, 9, 4, 2, 3, 5, 4, 2, 3));
    //方法2 定义形参+数组的方法push()
    function fn2(arr) { 
   
        var arr2 = []
        for (let i = arr.length - 1; i >= 0; i--) { 
   
            //利用数组方法
            arr2.push(arr[i])
        }
        return arr2;
    }
    var arr3 = fn2([5, 8, 9, 4, 2, 3, 5, 4, 2, 3])
    console.log(arr3);
    //方法3 数组的属性length+for循环
    function fn3(arr) { 
   
        var newArray = [];
        for (i = arr.length - 1; i >= 0; i--) { 
   
            // 利用数组长度
            newArray[newArray.length] = arr[i];
        }
        return newArray;
    }
    var arr4 = fn3([5, 8, 9, 4, 2, 3, 5, 4, 2, 3])
    console.log(arr4);
</script>

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

<script>
    function sort(arr) { 
   
        for (i = 0; i < arr.length - 1; i++) { 
   
            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;
                }
            }
        }
        return arr;
    }
    var arr1 = sort([5, 2, 4, 8, 6, 3, 0, 59, 62, 25, 35]);
    console.log(arr1);
    var arr2 = sort([24, 52, 69, 53, 42, 51]);
    console.log(arr2);
</script>

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

<script>
    //方法一 
    function year(num) { 
   
        if (num % 4 == 0 || num % 100 == 0 || num % 400 == 0) { 
   
            return "该年份为闰年";
        }
        return "该年份为平年";

    }
    console.log(year(2021)); //该年份为平年
    console.log(year(2020)); //该年份为闰年
    //方法2 
    function isRunYear(num) { 
   
        var flag = false;
        if (num % 4 == 0 && num % 100 != 0 || num % 400 == 0) { 
   
            return !flag;
        }
        return flag;
    }
    console.log(isRunYear(2000)); //true
    console.log(isRunYear(2001)); //false
</script>

9.6 函数的相互调用

执行思路：
浏览器从上往下解析的过程中没有发现有函数被调用，就不会进入函数的内部，到了底部发现调用了fn1,然后返回顶部执行，输出111，之后发现fn2调用，然后直接去执行fn2
代码验证打印顺序 111>222

<script>
    function fn1() { 
   
        console.log(111)
        fn2();
    }

    function fn2() { 
   
        console.log(222);
    }
    fn1();
</script>

函数相互调用执行打印顺序 111>222>444>333

<script>
    fn1();

    function fn1() { 
   
        console.log(111);
        fn2(); //在fn1函数里面调用了fn2函数
        console.log(333);
    }

    function fn2() { 
   
        console.log(222);
        console.log(444)
    }
</script>

案例：用户输入年份，判断平年闰年并输入当前2月份的天数
执行思路：
month()调用第一个函数,用户输入年份(实参) > 在if判断条件中发现第二个函数的调用者并带着第一个函数的实参year传给第二个函数的行参，然后执行第二个函数 > 第二个函数对参数进行操作，并返回值作为第一个函数的判断条件

<script>
    //判断2月份天数
    function month(year) { 
   
        if (isRunYear(year)) { 
   
            console.log(year + "年是平年, 2月份有28天");

        } else { 
   
            console.log(year + "年是闰年, 2月份有29天");
        }
    }
    month(prompt("请输入你的年份"));
    //判断平年闰年
    function isRunYear(num) { 
   
        var flag = false;
        if (num % 4 == 0 && num % 100 != 0 || num % 400 == 0) { 
   
            return !flag;
        }
        return flag;
    }
</script>

9.7 函数的声明方式

函数声明有两种方式
① 命名函数——利用函数关键字自定义函数（自定义函数方式）
② 匿名函数——利用函数表达式声明函数

9.7.1 命名函数

概念：利用函数关键字 function 自定义函数方式
因为有名字，所以也被称为命名函数
调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面
语法代码

<script>
    //声明函数方式
    function fn() { 
   
        console.log(111) //函数体
    }
    //调用函数 不限位置
    fn();
</script>

9.7.2 匿名函数

概念：利用函数关键字自定义函数
因为函数没有名字，所以也称为匿名函数
语法
var 变量名=function(){函数体}；
函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数
函数表达式也可以进行传递参数
函数调用的代码必须写到函数体后面
语法代码

<script>
    //函数表达式
    var fun = function() { 
    //fun是变量
            console.log('我是函数表达式'); //函数体
        }
        //调用者，函数调用的代码必须写到函数体后面
    fun();
</script>

9.7.3 构造函数

注意构造函数的函数名要大写
构造函数不需要return 就可以返回结果
构造函数的首字母必须大写
属性和方法前面必须添加this

<script>
    //构造函数
    function Fun() { 
   
        console.log("我是构造函数");

    }
    var fun2 = new Fun();
</script>

10、作用域

…

11、对象

11.1 对象

什么是对象
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等等
对象的组成
对象是由属性和方法组成的
① 属性：事物的特征，在对象中用属性来表示（常用名词）
② 方法：事物的行为和功能，在对象中用方法来表示（常用动词）
为什么需要对象
保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组，而对象里卖弄又可以包含很多很多数组等等

11.2 对象创建的方式

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

11.2.1 利用字面量创建对象

（1）创建对象

① 里面属性或者方法我们采取键值对的形式 键(属性名) : 值(属性值)
② 多个属性之间用逗号隔开
③ 方法后面跟得是一个匿名函数

对象字面量
就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法
{ } 里面采取键值对的形式表示 { key:value }和css中的 属性:属性名一样
▶ 键：相当于属性名
▶ 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
语法
var 对象名={ };创建了一个空对象
语法案例

<script>
<script>
    var star = { 
   
        //对象的属性
        name: 'pink',
        age: 18,
        sex: '男',
        //对象的方法
        sayHi: function() { 
   
            console.log('大家好啊~');
        }
    }
    console.log(star.name) //pink 调用对象的属性
    star.sayHi(); //调用对象的方法
</script>

（2）调用对象

① 调用对象的属性，我们采用 对象名.属性” .” 我们理解为的
② 调用属性还有一种方法 对象名['属性名']
③ 调用对象的方法（调用函数） 对象名.方法名( ) 千万别忘记小括号
④ 对象的方法是一个匿名函数，因为在对象中只有key:value的形式，所以“=”转化了
⑤ 对象的方法简写形式 fn( ){函数体}

<script>
    var obj = { 
   
        uname: '张三丰',
        age: 18,
        sex: '男',
        sayHi: function() { 
   
            console.log('hai~~');
        }
    }

    //调用属性方式一
    console.log(obj.uname); //张三丰
    //调用属性方式二
    console.log(obj['age']); //18
    //调用方法（函数的调用者）
    obj.sayHi(); //hai~~
</script>

（3）变量、属性、函数、方法的区别

相同点

变量和属性的相同点：都是用来存储数据的
函数和方法的相同点：都是实现做某种功能做某件事，调用的时候都需要小括号

不同点

变量和属性
变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
函数和方法
函数：单独存在的，通过函数名( )的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用对象.方法名( )的方式就可以调用，方法用来描述该对象的行为和功能

<script>
    //变量
    var num = 20;
    var obj2 = { 
   
            //属性
            age: 18,
            name: '滕杰'
        }
        //变量的使用
    console.log(num)
        //属性的使用
    console.log(obj2.name)

    //函数（匿名函数）
    fn1 = function() { 
   
        console.log('我是匿名函数')
    }
    fn1(); //我是匿名函数
    //方法
    var obj2 = { 
   
        fn2: function() { 
   
            console.log('我是方法，也是匿名函数')
        },
        fn3() { 
   
            console.log('我是方法，这是我的简写形式')
        }
    }
    obj2.fn2(); //我是方法，也是匿名函数
    obj2.fn3(); //我是方法，这是我的简写形式
</script>

11.2.2 利用 new Object( ) 创建对象

创建原理
跟之前的 new Array( )原理一致：var 对象名 = new Object( )
创建对象注意点
① Object( ) ：第一个字母大写
② new Object() ：需要 new关键字
③ 使用的格式：对象名.属性 = 值
④ 每一组键值对之间用分号 ; 分隔
调用对象
① 调用对象的属性，我们采用 对象名.属性” .” 我们理解为的
② 调用属性还有一种方法 对象名['属性名']
③ 调用对象的方法（调用函数） 对象名.方法名( ) 千万别忘记小括号
④ 对象的方法是一个匿名函数

<script>
    var obj = new Object(); //创建了一个空对象
    obj.uname = '张三丰';
    obj.age = 18;
    obj.sayHi = function() { 
   
        console.log('hi~');
    }

    //调用属性
    console.log(obj.uname)
    console.log(obj['age']);
    //调用方法
    obj.sayHi();
</script>

11.2.3 利用构造函数创建对象

为什么要用构造函数的方式创建对象呢？
因为前两种方式一次只能创建单个对象，要创建多个对象的话，需要重复相同的代码，因此我们可以利用函数的方法重复这些代码，我们把这个函数称为构造函数
构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用，我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面
语法格式

  function 构造函数名() {
        this.属性 = 值;
        this.方法 = function() {}
    }
    new 构造函数名(); //创建实例对象

构造函数的调用
调用属性：对象名.属性名
调用方法：对象名.方法名
注意点
① 构造函数首字母大写。
② 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法
③ 构造函数中不需要 return 返回结果
④ 当我们创建对象的时候，必须用 new 来调用构造函数
代码验证

<script>
    function Star(uname, age, sex) { 
   
        this.姓名 = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function(sang) { 
   
            console.log(sang);
        }
    }
    var s = new Star('刘德华', 18, '男'); //new实例对象
    //调用属性
    console.log(s.姓名);
    console.log(s['age']);
    //调用方法 传参
    s.sing('冰雨');
</script>

11.3 构造函数和对象的区别

构造函数：明星泛指的某一大类(class类)
对象：特指是一个具体的事物
利用构造函数创建对象的过程我们称为对象的实例化

<script>
    function Star(uname, age, sex) { 
   
        this.姓名 = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function(sang) { 
    //函数的方法（匿名函数）
            console.log(sang);
        }
    }
    var s = new Star('刘德华', 18, '男'); //new 对象的实例化
    console.log(typeof s); //object对象
    console.log(s);
</script>

11.4 new关键字执行的过程

new关键字执行的过程
1.new构造函数可以在内存中创建一个空的对象
2.this就会指向这个新建的对象
3.执行构造函数里面的代码给这个空对象添加属性和方法
4.完事之后返回这个对象（所以构造函数里面不需要return）

11.5 遍历对象

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

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

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key
① 获取属性名 console.log(k)
② 获取属性值 console.log(obj[k])

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

语法验证

<script>
    //遍历对象 for(变量)in(对象名)
    var obj = { 
   
            name: '滕杰',
            age: 18,
            sex: '男',
            fn: function() { 
    //匿名函数，因为对象里面是key:value 所以=号转换了
                console.log('你好')
            }
        }
        //遍历
    for (const i in obj) { 
   
        console.log(i) //属性名
        console.log(obj[i]) //属性值
    }
</script>

???未完待续…

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/169762.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

JavaScript-ECMAScript5-JS基础语法「建议收藏」

JavaScript-ECMAScript5-JS基础语法

JavaScript各大模块笔记地址

一、计算机基础

1、 编程语言

1.1 编程

1.2 计算机语言

1.3 编程语言

1.4 翻译器

1.5 编程语言和标记语言区别

1.6 总结

2、计算机基础

2.1 计算机组成

2.2 数据存储

2.3 数据存储单位

2.4 程序运行

二、初识JavaScript

1、初识 JavaScript

1.1 JavaScript 是什么？

1.2 JavaScript 的作用

1.3 HTML/CSS/JS 的关系

1.4 浏览器执行 JS 简介

1.5 JavaScript 组成

1.6 JS 位置

三、ECMAScript5 基础语法

1、 JavaScript 注释

1.1 单行注释

1.2 多行注释

2、JavaScript 输入输出语句

3、变量

3.1 变量概述

3.2 变量的使用

3.3 变量语法扩展

3.4 变量命名规范

3.5 案例

4、数据类型

4.1 数据类型的分类

4.2 简单数据类型（基本数据类型）

4.3 数字型 Number

4.4 字符串型 String

4.5 布尔型 Boolean

4.6 未定义 Undefined

4.7 空值 Null

4.8 检测数据类型 Typeof

4.9 数据类型的颜色

5、 数据类型的转换

5.1 转换为字符串型

5.2 转换为数字型

5.3 转换为布尔型

6、 运算符

6.1 运算符分类

6.2 算术运算符

6.3 表达式和返回值

6.4 递增和递减运算符

6.5 比较(关系)运算符

6.6 逻辑运算符

6.7 短路运算(逻辑中断)

6.8 赋值运算符

6.9 运算符优先级

7、流程控制

7.1 顺序结构

7.2 分支结构（判断结构）

7.2.1 if 分支语句

7.2.2 if else语句（双分支语句）

7.2.3 if else if 多分支语句

7.2.4 三元表达式（三目运算符）

7.2.5 switch 语句

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

7.3 循环结构

7.3.1 断点调试

7.3.2 for循环

7.3.3 for for 双重循环

7.3.4 while循环

7.3.5 do while 循环

7.3.6 continue break关键字

7.3.7 循环小结

7.4 断点调式

8、数组

8.1 数组的创建方式

8.2 访问数组元素（索引）

1、编程语言

5、数据类型的转换

6、运算符

（1）创建对象