JavaScirpt基础内容总结。

JS的基础语法

JS的组成

JS的书写格式有三个

• 行内式: 行内式的JS 直接元素的内部就可以了
• 内嵌式

<!-- 内嵌式的js -->
    <script>
        // alert("我是一只快乐且单身的程序猿")
    </script>

新建.js文件 在里面写内容，在引入。
<!-- 外部js写法 他是双标签 -->
<script src="my.js"></script>

JS 输出语句

• console.log(msg) 浏览器控制台打印输出信息
• alert(msg) 浏览器弹出警示框。
• prompt(info) 浏览器弹出输入框，用户可以输入

 <script>
        // 这是一个输入框
        prompt('请输入你的年龄');
        //  alert 弹出警示框   输出的展示给用户的
        alert('计算的结果是');
        // Console 控制台输出 给程序员测试用的
        console.log('我是程序员能看到的')
    </script>

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

赋值
将某一数值赋给某个变量的过程，称为赋值

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

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

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

JS数据类型

数据类型简介
1.为什么需要数据类型。
在计算机中，不同的数据所需占用的储存空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

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

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

var x ==6; //x为数字
var x ='bill'; //x为字符串。

<script>
        var num;//这里的num 我们是不确定属于那种数据类型的
        var num = 10; //num 属于数字型
        // JS的变量数据类型 是只有程序在运行过程中，根据右边的值来决定的
        var str ='pink'; //str字符串型
        //JS是动态语言 变量的数据类型是可以变化的
        var x =10; //x是数字型
        x = 'pink'; //x就变成了字符串型
         
    </script>

数据类型的分类

JS把数据类型分为两类:

• 简单数据类型(number,string,Boolean,underfined,null)
• 复杂数据类型(object)

简单数据类型	说明	默认值
Number	数字型，包含 整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true 、false ,等价于1和0	0
String	字符串乐星，如’ 张三’注意在JS里面，字符串都带有引号	'’‘
Undefined	var a=nill; 声明了变量a但是没有给值，此时a = underfined	undefined
Null	var a=null; 声明了变量a为空值	null

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

数字型 Number
1.数字型进制
常见的禁止有二进制 八进制 十六进制。

• 八进制 0~7 我们程序里面数字前面 加0表示八进制
• 十六进制前面加0X

<script>
        var num = 10; //num 数字型
        var PI = 3.14 //PI数字型
        var num1 = 010;
        console.log(num1); //八进制转化为10进制 就是 8
        var num2 = 012;
        console.log(num2);
        //十六进制   0~9 a~f #fffff 数字的前面加0x 表示十六进制
        var num3 = 0x9;
        console.log(num3);
        var num4 = 0xa;
        console.log(num4);
    </script>在这里插入代码片

数字型范围
JavaScript中数值的最大跟最小值

数字类型的三个特殊值

alert(infinity); //代表无穷大，大于任何数值。
alert(-infinity); //代表无穷小，小于任何数值
alert(NAN); //NOT a nmuber,代表一个非数值

数字型 Number
is NaN()
用来判断 是否为非数字的类型，返回ture 或者false.

<script>
        //isNaN()这个方法用来判断非数字  并且返回一个值 如果是数字 返回的是false 如果不是数字返回的是true
        console.log(isNaN(12)); //false 
        console.log(isNaN('字符串'));  //true
    </script>

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

<script>
        //'pink'  '12' 加了引号的就是字符串类型的。
        var str = '我是一个"苦逼"程序员'; //外单内双，外双内单。
        console.log(str);
        var str1 = "我是一个'苦逼'程序员"; //外单内双，外双内单。
        console.log(str1);
    </script>

字符串转义符

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

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

  <script>
        alert('酷热难耐，火辣的太阳底下，我挺拔的身子，成为了最独特的风景。\n我审是四周这里，是我的舞台，我就是天地间的王者。\n这一刻我豪气冲天，终于大喊一声:"回收旧手机，换剪子换菜刀换盆~"');
    </script>

字符串长度

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

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

字符串的拼接

• 多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，在拼接成一个新的字符串。

<script>
        //1.检测获取字符串的长度 length
        var str = 'my name is andy';
        console.log(str.length); //显示 15
        //字符串的拼接 +只要有字符串和其他类型相拼接最终结果是字符串
        console.log('沙漠' + '骆驼'); //字符串的 沙漠骆驼
        console.log('盖伦' + 600); //盖伦600
        console.log('liu'+true);//liu true
        console.log(12+12);//24
        console.log('12'+12);//'1212'
    </script>

口诀是:数值相加，字符相连
字符串拼接加强版。

<script>
        console.log('盖伦' + 18); //盖伦18
        console.log('盖伦' + 18 + '岁'); //18岁
        var age = 19;
        console.log('盖伦age岁');
        //我们变量不要写道字符串里面，是通过和字符串相连的方式试下呢。
        console.log('盖伦' + age + '岁');
        //变量和字符串相连的口诀:引引 加加
        console.log('盖伦' +age +'岁');
        
    </script>

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

布尔型Boolean

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

<script>
        var flag = true; //flag布尔型
        var flag1 = false; //flage1 布尔型
        console.log(flag + 1); //true 参与加法运算当1来看
        console.log(flag1 + 1); //false 参与加法运算当0来看
    </script>

Undefined和Null

一个声明后没有赋值的变量会有一个默认值undefined(如果进行相连hi哦这相加时，注意结果)

<script>
 var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'pink'); //underfinedpink
        console.log(variable + 1); //结果为NaN undefined 和数字相加 最后的结果时NaN
        // null 空值
        var space = null;
        console.log(space + 'pink'); //结果为nullpink
        console.log(space + 18); //空值+18结果为18 
</script>

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

数据转换:

就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现三种方式的转换:

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

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

转换成字符串的做法

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

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

转换为数字型(重点)

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

<script>
        var age = prompt('请输入您的年龄')
            //1.parseInt(变量) 可以把字符型的转换为数字型得到的式整数 
        console.log(parseInt(age));
        console.log(parseInt('3.14')); // 3 取整数
        console.log(parseInt('3.94')); //3  取整数
        console.log(parseInt('120px')); //120 会去掉 pX单位
        console.log(parseInt('rem120px')); //NaN
        //2.parseFloat(变量) 可以把字符型的转换为数字型 得到的式小数 浮点数
        console.log(parseFloat('3.14'));
        console.log(parseFloat('120px'));
        console.log(parseFloat('rem120px'));
          //3.利用 Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));
        //4.利用了算数元素- * / 隐式转换
        console.log('12' - 0); // 12
        console.log('123' - '120');
        console.log('123' * 1);
    </script>

注意parsIent和prseFloat 单词的大小写，这两个是重点。
案例:简单加法器
计算两个数的值,用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次值的相加结果
案例分析

1. 先弹出第一个输入框，提示用户输入第一个值 保存起来
2. 在弹出第二个框，提示用户输入第二个值 保存起来
3. 把这两个值相加，并将结果赋给新的变量(注意数据类型转换)
4. 弹出警示框(alert),把计算的结果输出(输出结果)

<script>
        var num1 = prompt('请您输入第一个值')
        var num2 = prompt('请您输入第二个值')
        var result = parseFloat(num1) + parseFloat(num2);
        alert('你的结果是:' + result);
    </script>

转换为布尔值

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

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

   <script>
        console.log(Boolean(''));
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(null));
        console.log(Boolean(undefined));
        console.log('----------------');
        console.log(Boolean('123'));
        console.log(Boolean('你好吗'));
        console.log(Boolean('我很好'));
    </script>

扩展
1.标识符
标识(zhi)符:就是指开发人员为变量、函数、参数取得名字
标识符不能是关键字或保留字。
关键字:是指JS本身已经使用了的字，不能用他们充当变量名，方法名。

关键字

包括:break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、vold、while、with等。

保留字

保留字:实际上就是预留的关键字，意思是现在虽然还不是关键字，但是未来可能会成文关键字，同样不能使用它们当变量名和方法名
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient
volatile
运算符 也被称位操作符，适用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有:

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

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

<script>
        console.log(1 + 1); //2
        console.log(1 - 1); //0
        console.log(1 * 1); // 1
        console.log(1 / 1); //1
        //1. % 取余
        console.log(4 % 2); //0
        console.log(5 % 3); //2
        console.log(3 % 5); //3
        // 浮点数 算数运算符里面会有问题
        console.log(0.1 + 0.2);
        console.log(0.07 * 100);
        // 我们不能直接用浮点数进行比较   
        var num = 0.1 + 0.2;
        console.log(num == 0.3);//false
    </script

注意:
算数运算符的优先级是先乘除后加减，有小括号先算括号里面的数。

表达式 和返回值
表达式:就是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解:是由数字、运算符、变狼等组成的式子。
在我们的程序里面 2 = 1 + 1 把我们的右边表达式计算完毕把返回值给左边。

递增和递减运算符

概述
如果 需要反复给数字变量添加或减去1，可以使用递增(+ +)和递减(- -)运算符来完成。
在JS中递增( + +)和递减(- -)既可以放在变量前面，也可以放在变量后面，放在变量前面时，我们可以称为前置递增(递减)运算符，放在变量后面时，我们可以称位后置递增(递减)运算符。
注意
递增和递减必须和变量配合使用

前置递增运算符
++num前置递增，就是自加1，类似于num = num+1,但是++num写起来更简单。
口诀 ：先加1 后返回值

<script>
// 2.前置递增运算符 + +写在变量的前面
        var age = 10;
        ++age; //类似于 age=age + 1
        console.log(age);
        // 3.
        var p = 10;
        console.log(++p + 10);
</script>

后置递增运算符
就是自加1，类似于num = num+1,但是++num写起来更简单。
使用口诀:先返回原值，后自加。

  <script>
        var num = 10;
        num++; //num = num + 1
        console.log(num);
        //1.前置自增和后置自增如果单独使用 效果是一样的
        //2.后置自增 口诀 先返回原址 后自加 1
        var age = 10;
        console.log(age++ + 10);
        console.log(age);
    </script>
</head>

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

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

<script>
        console.log(3 >= 5); //false
        console.log(2 <= 4); //true 
        // 1.我们程序里面的等于号是 ==  默认转换数据类型 会把字符串的数据转化为数字型
        console.log(3 == 5);
        console.log('刘' == '德华'); //false
        console.log(18 == 18);
        console.log(18 == '18');
        console.log(18 != 18);
        //我们程序里面有全等 一摸一样 要求两侧的值还有数据类型完全一致才可以true
        console.log(18 === 18); //true
        console.log(18 === '18'); //false
    </script>

符号	作用
=	赋值
==	判断
===	全等

逻辑运算(逻辑中断)

短路运算的原理:当有多个表达式(值)时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。

逻辑与

• 语法:表达式 1&&表达式2
• 如果第一个表达式的值为真，则返回表达式 2
• 如果过第一个表达式的值为假，则返回表达式1

逻辑或

• 语法:表达式||表达式2
• 如果第一个表达式的值为真，则返回表达式 1
• 如果第一个表达式的值为假，则返回表达式2

script>
        // 1.用我们的布尔值参与的逻辑运算 true && false == false
        // 2.123 && 456 是值 或者是表达式 参与逻辑运算？
        // 3.逻辑与短路运算 如果表达式1 结果为真 则返回表达式 2 如果表达式是假则返回表达式2
        console.log(123 && 456); //456
        console.log(0 && 456); //0
        console.log(0 && 1 + 2 && 456 * 56789); //0
        console.log('' && 1 + 2); //'' 
        // 如果有空的或者否定的为假 其余是真的 0 '' unll undefined NaN
        // 逻辑或短路运算 如果表达式 结果 为真 则返回的是表达式 1 结果为假 则返回表达式 2
        console.log(123 || 456); //123
        console.log(123 || 456 || 456 + 123); //123
        console.log(0 || 456 || 456 + 123); //456
    </script>

注意：
逻辑中断很重要 它会影响我们程序的运行结果。

赋值运算符

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

<script>
        var num = 10;
        //num = num + 1; num++
        // num = num +2; //num +=2;
        // num += 2
        console.log(num);
        num += 5
        console.log(num); //15
        var age = 2
        age *= 3
        console.log(age); //6
    </script>

运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ - - ！
3	算数运算符	先 * / % 后 + - (先乘除后加减)
4	关系运算符	> >= < <

• 5 相等运算符 等于 != 全等于 !==
• 6 逻辑运算符 先&&后||
• 7 赋值运算符 =
• 8 逗号运算符 ,
  做个测试

<script>
        console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true); //true  4>
        // =6 是false '人' !='阿凡达'是true  12 * 2 等于 144 是false 但是前面有取反  所以是 true  
        // 逻辑与的优先级比逻辑或权重高
        //  所以先算后面三个 如果    两次都是true所以结果也是 true   false和true 只要有一个是true结果是true   (逻辑与算符的权重低所以用它隔开)
        var num = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');
        //  用逻辑运算符分为两部分 前部分5 == num /2 和 (2 +2 *num).toString() === '22');两部分
        //前面的是5等于 num /2  10/2=5 所以是 true 后面的(2 + 2 * num) 2*10+2==22 然后.toString
        // 转换为字符 '22' 完全等于'22' 所以也是true  ,true与上 true  所以结果也是true
    </script>

流程控制

在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的，很多时候我们要通过控制代码 的执行顺序来实现我 我们要完成的功能。
简单来说流程控制就是来控制我们的代码按照什么结构顺序来执行
流程精致主要三种结构，分别是 顺序结构，分支结构和循环结构，这三种结构代表三种代码执行的顺序。

顺序流程控制

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

分支流程控制

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

if语句

语法结构

<script>
        //if的语法分结构  if 如果
        //if (条件表达式) {
        //执行语句
        //}
        //2.执行思路 如果if里面的条件表达式结果为真 true 则执行大括号里面的
        //如果if 条件表达式结果为佳 则不执行 大括号里面的语句 则执行if语句后面的代码
        //3.代码体验
        if (6 > 5) {
            alert('沙漠骆驼')
        }
    </script>

语句可以理解为一个行为，循环语句和分支语句就是经典的语句
一个程序有很多个语句组成，一般情况下，会分割成一个一个的语句。
执行流程‘
判断条件 如果为true 则执行大括号里面的内容
如果为false 就不执行里面的语句跳过 执行其他的语句。

做个案例

<script>
        //案例进入网吧
        //弹出一个对话框,要求用户输入年龄,如果年龄大于18岁允许进入网吧.
        //案例分析 1.弹出prompt 输入框,用户输入年龄,程序把这个值取过来保存到变量中
        //2.使用if语句来判断年龄,如果年龄大于18岁就执行if大括号里面的输出语句
        var age = prompt('请输入您的年龄');
        if (age >= 18) {
            alert('一起上网么楼')
        }
</script>

else 双分支

  //1.语法结构 if 如果 else 就是否则
        // if () {
        //     // 执行语句1
        // } else {
        //执行语句二
        }
        //2.执行思路 如果表达式结果为真 那么执行语句 1 否则执行语句2]

if里面的语句 1 和else 里面的语句2 最终只能有一个语句执行 2选1，注意 else 后面直接跟大括号

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

 <script>
        //if else if 语句是多分支语句
        //3.语法规范
        if (条件表达式1) {
            //语句1 
        } else if(条件表达式2) {
            //语句2;
        } else if (条件表达式3) {
            //语句3;
        } else {
            //最后的语句
        }
            //执行思路 
            //1.如果条件表达式1 满足就执行语句1 执行完毕后，退出整个if分支语句
            //2.如果条件表达式1 不满足，则判断条件表达式2 满足的话执行语句2 ，以此类推
            //3.如果上面的所以条件表达式都不成立，则执行else里面的语句

            //注意点
            //1. 多点分支语句还是多选 1 最后只能有一个语句执行
            //2.else if 里面的条件理论上是可以任意多个的
            //3.else if 中间要有一个空格

    </script>

三元表达式

• 由三元运算符组成的式子我们称为三元表达式。

• ++ num 3+5 ?:

• 语法结构

• 条件表达式 ？ 表达式1: 表达式2
  ++ 如果条件表达式 结果为真，则 返回 表达式1的值 如果条件表达式结果为假 则返回表达式2的值。
  语法结构
  switch语句也是多分支语句，他用句基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch

<script>
        //1.switch 语句也是多分支语句 也可以实现多选1
        //2.语法结构 switch 转换、开关 case 小例子或者选项的意思
        // switch (表达式) {
        //     case value:
        //         执行语句1;
        //         break;
        //     case value:
        //         执行语句2;
        //         break
        //     default:
        //         执行最后的语句;
        // }
        // //3.执行思路  利用我们的表达式的值和 case后面的选项值 相匹配，如果匹配上，就执行该case
        // 里面的语句 如果都没有匹配上，那么执行 default里面的语句

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

1. 一般情况下，他们两个语句可以相互替换
2. switch…case语句通常处理 case为比较确定之的情况，而if…else…语句更加灵活，常用于范围判断(大于、等于莫格范围）
3. switch 语句进行条件判断后直接执行到程序的条件语句，效率个广告。而if…else语句有几种条件，就得判断多少次。
   JS中的循环
   在JS中，主要有三种类型的循环语句:

• for 循环
• while 循环
• do_while

for循环

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

  <script>
        //1.for 重复执行某些代码。通常跟计数有关系
        //2.for 语法结构
        // for (初始化变量; 条件表达式; 操作表达式) {
        //循环体
        // }
        //3.初始化变量 就是用var声明一个普通变量，通常用于作为计数器使用
        //4.条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
        //5.操作表达式 每次循环最后执行的代码 经常用于我们计数器变量进行更新 (递增或者递减)  
        //代码体验 我们重复打印100句你好
        for (var i = 1; i <= 100; i++) {
            console.log('你好吗');
        }
        //1.首先执行里面的计数器变量 var i = 1 但是这句话在for 里面只执行了一次 index
        //2.去i < 100 来判断变量 var i =1 但是满足条件 就去执行 循环体 不满足条件退出循环
        //3.最后去执行i++ i++是单独写的代码 递增 第一轮结束
        //4. 接着去执行 i <= 100 如果满足条件 就去执行 循环体 不满足条件退出循环 第二轮 
    </script>

断点调试

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

断点调试可以帮我们观察程序的运行结果
浏览器中按F12–>sources–找到需要调试的文件–>在程序的某一行设置断点。
Watch:监视，通过watch可以监视变量的值的变化，非常的常用dai
F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
代码调试的能力非常重要，只有学会了代码调试，才能徐汇自己解决bug的能录，出血之不要觉得调试代码麻烦就不去调试，知识点花点时间肯定学的会，但是代码调试这个东西自己不去练习，就永远不能掌握。

for 循环重复某些相同操作

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

script>
        //1.for 重复执行某些代码。通常跟计数有关系
        //2.for 语法结构
         //for (初始化变量; 条件表达式; 操作表达式) {
        //循环体
        // }
        //3.初始化变量 就是用var声明一个普通变量，通常用于作为计数器使用
        //4.条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
        //5.操作表达式 每次循环最后执行的代码 经常用于我们计数器变量进行更新 (递增或者递减)  
        //代码体验 我们重复打印100句你好
        for (var i = 1; i <= 100; i++) {
             console.log('你好吗');
        }
        //1.首先执行里面的计数器变量 var i = 1 但是这句话在for 里面只执行了一次 index
        //2.去i < 100 来判断变量 var i =1 但是满足条件 就去执行 循环体 不满足条件退出循环
        //3.最后去执行i++ i++是单独写的代码 递增 第一轮结束
        //4. 接着去执行 i <= 100 如果满足条件 就去执行 循环体 不满足条件退出循环 第二轮
        //for 循环可以执行相同的代码
         for (var i = 1; i <= 10; i++) {
             console.log('潘凯是个大帅逼');
         }
        //我们可以让用户控制输出的次数 
        // var num = prompt('请您输入次数');
        // for (var i = 1; i <= num; i++) {
        //     console.log('潘凯是个大帅逼');
        // }
        for (var i = 1; i <= 100; i++) {
            if (i == 1) {
                console.log('这个人今年1碎了,他出生了');
            } else if (i == 100) {
                console.log('这个人今年100岁了,他死了');

            } else {
                console.log('这个人' + i + '岁了');

            }
        }
    </script>

双重for循环

很多情况下，单层for循环不能满足我们的需求，比如说我们要打印一个5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。

<script>
         for (var i = 1; i <= 5; i++) {
        //     console.log('⭐');

        // // }
        // var str = '';
        // for (var i = 1; i <= 5; i++) {
        //     str = str + '⭐';
        // }
        // console.log(str);
        var num = prompt('请输入星星的个数');
        var str = '';
        for (var i = 1; i <= num; i++) {
            str = str + '⭐'
        }
        console.log(str);
    </script>

总结

• for循环可以重复执行某些相同的代码
• for循环可以重复执行些许不同的代码，因为我们有计数器
• for循环可以重复执行某些操作，比如算数运算符加法操作
• 随着需求增加，双重for循环可以做更多更好看的效果
• 双重for循环，外层循环一次，内层for循环全部执行
• for 循环时循环条件和数字直接相关的循环
• 分析要比写代码更重要
• 一些核心算法想不到，但是要学会，分析它执行过程。
  1.数组(Array) :就是一组数据的集合 存储在单个变量下的优雅方式
  数组可以把一组相关的数据一起存放，并提供方便的访问 (获取)方式。

数组的创建方式

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

1. 利用new 创建数组
2. 利用数组字面量创建数组

new创建数组

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

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

数组元素的类型

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

数组的索引

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

var arr = ['小白','大黑','小黄'，'瑞奇'];
索引号:       0	 	1     2      3
  //5.数组里面的数据 比如 1，2我们称之为数组元素
        //6.获取数组元素 格式 数组名[索引号]  索引号从零开始
        var arr = []; //创建一个新的数组
        var arr1 = [1, 2, '大黄', 'true']
        console.log(arr1);
        console.log(arr1[2]); //大黄
        var arr2 = ['德玛西亚', '诺克萨斯', '艾欧尼亚', '盖伦']
        console.log(arr2[0]);
        console.log(arr2[1]);
        console.log(arr2[2]);
        console.log(arr2[4]); //索引号从零开始 我给了他四个元素 就是 0 1 2 3，没有第四个 所以输出 undefined
        // 练习  定义一个数组 里面存放 周一到周日一共七天 在控制台输出 周日 
        var arr3 = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        console.log(arr3[6]); //输出周日

便历数组:
便历就是把数组中的每个元素从头到尾都访问一次

数组的长度、

使用"数组名.length"可以访问数组元素的数量(数组长度)。

/ 数组的长度是元素个数 不要跟索引号混淆
        //arr.length 动态监测数组元素的个数
<script> 
var arr1 = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维']
for (var i = 0; i < arr1.length; i++) 					            {console.log(arr1[i]);
}
</script>

数组中新增元素

可以通过修改length长度以及索引号增加数组元素。

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

var arr = ['red', 'greem', 'blie']
        console.log(arr.length);
        arr.length = 5; //把我们数组的长度修改成 5 里面应该有五个元素
        console.log(arr);
        console.log(arr[3]);
        console.log(arr[4]);
        //2.新增数组元素，修改索引号
        var arr1 = ['red', 'green', 'blue'];
        arr1[3] = 'pink';
        console.log(arr1);
        console.log(arr1);
        arr1[0] = 'yellow'; //替换原来的数组元素
        console.log(arr1);
        arr1 = '有点意思';
        console.log(arr1); //不要直接给 数组名赋值 否则会覆盖掉以前的数

函数的概念

在JS里面可能会定义非常多的相同代码 或者功能相似的代码，这些代码可能需要大量重复使用
虽然for循环语句也能实现一些简单的重复操作，但是比较有局限性，此时我们就可以使用JS中的函数。
函数:就是封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用。

function getSum(num1, num2) {
             var sum = 0;
            for (var i = num1; i <= num2; i++) {
               sum += i;
                   }
             console.log(sum);

函数使用分为两步:声明函数 和调用函数

//1.声明函数
        // function 函数名() {
        //     //函数体
        // }
        // function sayHi() {
        //     console.log('hi');

        // }
        //function 声明函数的关键字 全部小写
        //(2)函数是做某件事情 函数名一般是动词 sayHi
        //(3)函数不调用自己不执行
        //2.调用函数
        // 函数名()
        // sayHi()
        //调用函数的时候千万不能忘记小括号

        //声明函数
        // function getSum() {
        //     var sum = 0;
        //     for (var i = 1; i <= 100; i++) {
        //         sum += i;
        //     }
        //     console.log(sum);
        // }
        // //调用函数
        // getSum()
        // 函数我们可以利用函数的参数实现函数重复不同的代码

        //形参
        // function 函数名(形参1, 形参2..) { //在声明函数的小括号里面 是形参 (形式上的参数)

        // }
        // 函数名(实参1.实参2...); //在函数调用的小括号里面是实参(实际的参数)
        //3.形参和实参的执行过程
        // function cook(aru) { //形参是接收实参的 相当于aru='酸辣土豆丝' 形参类似一个变量
        //     console.log(aru);
        // }
        // cook('酸辣土豆丝');
        // cook('驴肉火烧');
        // // 4.函数的而参数可以有也可以没有次数

        // 1.利用函数求任意两个数的和
        // function getSum(num1, num2) {
        //     console.log(num1 + num2);

        // }
        // getSum(1, 3);
        // getSum(8, 3);

        // //2.利用函数求任意两个数之间的和 
        // function getSum(start, end) {
        //     var sum = 0;
        //     for (var i = start; i <= end; i++) {
        //         sum += i;
        //     }
        //     console.log(sum);

        // }
        // getSum(1, 100);
        // getSum(1, 10)
        //3.注意点
        // 多个参数之间用逗号隔开
        // 形参可以看做是不用声明的变量

        // //函数形参实参个数匹配
        // function getSum(num1, num2) {
        //     console.log(num1 + num2);

        // }
        // //1.如果实参的个数和形参的个数一直 则正常输出结果
        // getSum(1, 2);
        // //2.如果实参的个数多余形参的个数 会取道形参的个数
        // getSum(1, 2, 3);
        // //3.如果实参的个数小于形参的个数  多余的形参定义为undefined最终的结果就是NaN
        // //形参可以看作是不用声明的变量 num2是一个变量但是没有接受值 结果就是undefined
        // getSum(1); //NaN
        //我们尽量让实参的个数和形参相匹配

        // 函数的返回值
        //return语句
        //2. 函数的返回值格式
        // function 函数名() {
        //     return 需要返回的结果;
        // }
        // 函数名();
        // 我们函数只是实现某种功能 最终的结果需要返回给函数的调用者 通过return
        //2.质押函数遇到return 就把后面的结果 返回给函数的调用者 函数名()=return后面的结果
        //3.代码验证
        // function getResult() {
        //     return 666;
        // }
        // getResult(); // getResult () =666
        // console.log(getRult());

        // function cook(aru) {
        //     return aru;
        // }
        // console.log(cook('大肘子'));
        //4.求任意两个数的和
        // function getSum(num1, num2) {
        //     return num1 + num2;
        // }
        // console.log(getSum(1, 2));

        // 利用函数 求任意两个数的最大值
        // function getMax(num1, num2) {
        //     function getMax(num1, num2) {
        //         if (num1, num2) {
        //             return num1;
        //         } else {
        //             retur num2;
        //         }
        // }
        // return num1 > num2 ? num1 : num2;
        // }
        // console.log(getMax(1, 3));

        // 利用函数求一个数组中的最大值
        // function getArrMax(arr) {
        //     var max = arr[0];
        //     for (var i = 1; i <= arr.length; i++) {
        //         if (arr[i] > max) {
        //             max = arr[i];
        //         }
        //     }
        //     return max;
        // }
        // //getArrmax([5, 2, 25, 24, 99, 42]); //实参是一个数组送过去。
        // //在实际开发里面 常用一个变量来接受函数 的返回结果 使用更简单
        // var re = getArrMax([5, 2, 25, 24, 99, 42]);
        // console.log(re);

        // 函数返回值 注意事项
        //1.return 终止函数
        function getSum(num1, num2) {
            return num1 + num2;
            alert('我是不会被执行的'); //return 后面的代码不会被执行 
        }
        console.log(getSum(1, 2));

        //2.return 只能返回一个值
        function fn(num1, num2) {
            return num1, num2; //返回的结果是最后一个值
        }
        console.log(fn(1, 2));

        //我们求任意两个数的额加减乘除 结果
        function getResult(num1, num2) {
            return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
        }
        var re = getResult(1, 2); //返回的是一个数组。
        console.log(re);

        // 4. 我们函数 如果有return 则返回 return 后面的值 如果函数没有 return 则返回 undefined
        function fun1() {
            return 666;
        }
        console.log(fun1()); //返回66
        function fun2 () {

        }
        console.log(fun2()); //undefined
        
        
        //break ,continue ,return 的区别
        // break :结束当前的循环(for while)
        // continue：跳出本次循环继续执行下次循环(for while)
        // return:不仅可以退出循环还可以返沪return语句中的值同时还可以 结束当前函数体内的代码
        

arguments的使用

当我们不确定有多少个参数传递的时候可以用arguments 来获取 在JavaScaript中arguments实际上
他是当前函数的一个内置对象 所有函数都内置可一个arguments对象argunments对象存储了传递的所有实参
arguments展示形式是一个伪数组，因此可以进行遍历，伪数组 具有 一下特点:
具有lenght属性
按索引方式存储数据
不具有数组的push pop等方法
函数可以调用另一个函数
因为每个函数都是独立的代码块，用于完成特殊的任务，因此经常会用到函数相互调用的情况。

 // arfuments的使用  只有函数才有 arguments 对象 而且是每个函数都内置好了 这个 arguments
        //function fn() {
        // console.log(arguments); //里面存储了所有传递过来的实参
        // console.log(arguments.length);
        // console.log(arguments[2]);
        //     //可以按照数组的方式遍历arguments
        //     for (var i = 0; i < arguments.length; i++) {
        //         console.log(arguments[i]);

        //     }
        // }
        //fn(1, 2, 3);
        //伪数组 并不是真正意义上的 数组
        // 1.具有数组的length 属性
        // 2.按照索引的方式进行存储的
        //3.它没有真正数组的一些放大pop() push()等等

        //利用函数反转任意数组 reverse 反转
        // 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, 2, 4, 0, 9]);
        // console.log(arr1);
        // var arr2 = reverse(['red', 'Pink', 'green']);
        // console.log(arr2);

        // 利用函数冒泡排序 sort 排序
        /*   function sort(arr) {
              for (var 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([1, 4, 9, 8]);
          console.log(arr1);
          var arr2 = sort([11, 22, 24, 20]);
          console.log(arr2); */

        /*   利用函数判断闰年

          function isRunYear(year) {
              如果闰年则返回true 否则返回false
              var flag = false;
              if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                  flag = true;
              }
              return flag;
          }
          console.log(isRunYear(2000));
          console.log(isRunYear(1997)); */

        // 函数的相互调用
        // function fn1() {
        //     console.log(22);
        //     fn2(); //在fn1 函数里面调用了fn2函数
        // }
        // fn1()

        // function fn2() {
        //     console.log(33);

        // }

        // 用户输入年份，输出当前年份2月份的天数
        // 如果是闰年，则二月份是29天，如果是平年，则2月份是28天。
        // function backDay() {
        //     var year = prompt('请您输入年份');
        //     if (isRunYear(year)) { //调用函数需要加小括号
        //         alert('当前年份是闰年2月份有29天');
        //     } else {
        //         alert('当前年份是平年2月份有28天')
        //     }
        // }
        // backDay();
        //判断是否为闰年
        // function isRunYear(year) {
        //     // 如果闰年则返回true 否则返回false
        //     var flag = false;
        //     if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
        //         flag = true;
        //     }
        //     return flag;
        // }
        // 函数的声明方式
        // // 1. 利用函数关键字自定义函数(命名函数)

        // function fn() {

        // }
        // fn();
        // // 2.函数表达式(匿名函数)
        // var 变量名 = function() {};
        // var num = 10;
        // var fun = function(aru) {
        //     console.log('我是函数表达式');
        //     console.log(aru);


        // }
        // fun('天气真好');
        //(1)fun 是变量名 不是函数名
        //(2)函数表达式声明方式跟声明变量差不多，只不过变量里面 存的是值 
        // 而函数表达式里面存的是函数
        //(3)函数表达式也可以进行传递参数

作用域

作用域概述
通常来说,一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性
和代码范围就是这个名字的作用域，作用域的使用提高了程序逻辑的局部性
增强了程序的可靠性 减少了名字冲突
变量的作用域
根据作用域的不同，我们变量分为全局变量和局部变量
1.全局变量：在全局作用域下的变量 注意 在函数内部没有直接声明直接赋值的变量也叫做全局变量.
2.局部变量 : 在局部作用域下的变量 后者在函数内部的变量就是局部变量 只能在函数内部使用。
注意 函数的形参也可以看作是局部变量
3.从执行效率来看全局变量和局部变量
(1)全局变量只有浏览器关闭的时候才会销毁 比较占用内存资源
(2)局部变量 当我们程序执行完毕就会销毁,比较节约内存资源.
在ES6以后新增了快级作用域 if{} for{}
作用域链:
1.只要是代码,就至少有一个作用域1
2.卸载函数内部的局部作用域
3.如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
4.根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问
就称作作用域链

        //JavaScript作用域:就是代码名字(变量)在莫格范围内起作用和效果 目的是为了提高程序的
        // 可靠性更重要的是减少命名冲突
        //2. JS的作用域(es6)之前:全局作用域 局部作用域
        //3. 全局作用域: 整个script标签 或者是一个单独的JS文件
        //     var num = 10;
        //     var num = 30;
        //     console.log(num);

        //     //在函数内部就是局部作用域(函数作用域) 这个代码的名字 旨在函数内部起效果和作用
        //     function fn() {
        //         //局部作用域
        //         var num = 20;
        //         console.log(num);

        //     }
        //     fn();nagezhi
        //作用域链:内部函数访问外部函数的变量采取的是链式查找的方式来决定取那个值 这种结构被我们称位作用域链  就近原则.
        // var num = 10;

        // function fn() { //外部函数
        //     var num = 20;

        //     function fun() { //内部函数
        //         console.log(num);   

        //     }
        //     fun();
        // }
        // fn();

        // JS预解析
        // console.log(num); //为什么是undefined呢?
        var num = 10;
        // 相当于执行了一下代码  预解析 JS引擎会把js里面所有的 var 还有function提升到当前 作用域的最前面
        // var num;
        // console.log(num);
        // num = 10;


        // fn();

        // function fn() {
        //     console.log(11); //

        // } 
        // // 相当于

        // function fn() {
        //     console.log(11);

        // }
        // fn(); //所以没问题 预解析 JS引擎会把js里面所有的 var 还有function提升到当前 作用域的最前面


        // fun();
        // var fun = function() {
        //         console.log(22);

        //     }
        //     //相当于执行了一下代码  预解析 JS引擎会把js里面所有的 var 还有function提升到当前 作用域的最前面
        // fn();
        // var fun = function() {
        //     console.log(22);

        //}
        // 案例
        var num = 10;

        function fn() {
            console.log(num);
            var num = 20;
            console.log(num);

        }
        fn();
        // 相当于
        // var num;

        // function fn() {
        //     var num;
        //     console.log(num);
        //     num = 20;
        //     console.log(num);

        // }
        // num = 10;
        // fn();

        var a = '18'
        f1()

        function f1() {
            var b = 9;
            console.log(a);
            console.log(b);
            var a = '123';
        }
        // 相当于
        var a;

        function f1() {
            var b = 8;
            var a = 9;
            b = 8;
            console.log(a);
            console.log(b);
            a = '123';
        }
        a = 18;
        f1();