目录
背景.......问就是前景广阔。
*浏览器执行js的原理
浏览器分为了两部分 渲染引擎 和 js引擎
渲染引擎∶用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
JS引擎∶也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，最长提到的比如chrome浏览器的V8引擎
浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行S代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言会逐行解释执行。
*1.1JS基础知识
*1.1JS组成
ECMAScript俗称ES也就是常说的ES6,ES9是JavaScript 语言的下一代标准。
ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
DOM——文档对象模型
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
BOM——浏览器对象模型
BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的
可以与浏览器窗口进行
互动的对象结构。通过BOM何以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
*1.2JS写法
JS有3种书写位置，分别为行内、内嵌和外部
行内样式：不推荐，因为不便于维护.
<button onclick="window.alert('按钮')">提示文本信息</button>行内js写法 注意：
可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读;
引号易错，引号多层嵌套匹配时，非常容易弄混;特殊情况下使用
-------------------------------------------------------------------------------------------------------------------------------
内联样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
<script >alert("这是JS内联样式")</script >内嵌js写法 注意：
可以将多行JS代码写到<script>标签中
内嵌JS是学习时常用的方式
-------------------------------------------------------------------------------------------------------------------------------
外联样式：写在js文件中，使用script的src属性导入
<script src="./01-JS外联写法.js"></script>外部js文件 注意：
利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用引用外部JS文件的script标签中间不可以（大咩）写代码
适合于JS代码量比较大的情况
*1.3JS注释
就单行注释（ctrl+/）和多行注释（shift+Alt+A）（vscode中ctrl+shift+/），就这内容你个寄吧还整理？对 我整理了。
*1.4JS中的输入输出语句
早在小学二年级的时候 我们就学过c++ c语言 加瓦的输入输出语句
那js中我们的输入输出语句是什么呢？
//可视作输入
prompt('小妹妹你叫什么呀？');//输入语句单引号引的提示内容
//可以看成是输出
alert('变态我报警了啊');//浏览器弹出警示框
console.log('哈哈哈');//汶览器控制台打印输出信息
prompt(info);//浏览器弹出输入框，用户可以输入
//加不加引号看变量
*2.0JS的变量
*2.1什么是变量？
变量：nmd你连变量是啥都不知道？早在小学二年级我们就学过“变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。” 我们搜躲到变量本质:变量是程序在内存中申请的一块用来存放数据的空间。
这里可以考虑一下对象和变量的关系，我后面写。
*2.2变量的使用
使用变量要经过 1变量声明 2给变量赋值
var age; //内存中分配一个空间
age=8; //赋值把值存入变量中
console.log(age);//输出结果
var a=19;//这叫变量的初始化
var是一个JS关键字，用来声明变量( variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管.
简单案例;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jxl</title>
</head>
<body>
<script>
//简单输出
var myname='旗木卡卡西';
var address='木叶村';
var age=30;
var email='1653770115@qq.com'
var gz=2000;
//控制台打印
console.log(myname);
console.log(address);
console.log(age);
console.log(email);
console.log(gz);
// 例二、1.弹出一个输入框，提示用户输入姓名。
// 2弹出一个对话框，输出用户刚才输入的姓名。
//输入用户名 存储到一个myname变量中
var myname=prompt('请输入你的名字');
alert(myname);
</script>
</body>
</html>*2.3变量的语法扩展
1.更新变量
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。nmd这个也整理？是个变量都这样约束。
2.可以同时声明多个变量
同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开
var age =10, name='jxl',sex=1;3.声明变量的特殊情况
3.1首先是只声明不赋值，
var age；
console.log(age);// 控制台打印undefined3.2第二是不声明不赋值直接使用
console.log(tell);//会报错3.3第三情况,不声明直接使用,这里涉及到不声明直接赋值,变量会变成全局变量.
tel=1111;
console.log(tel);//是可以输出的*2.4变量的命名规范:
由字母(A-Za-z)、数字(O-9)、只有两种特殊的符号,下划线线[(_)、美元符号($ )组成,中间不能有空格，如: usrAge, num01,_name
严格区分大小写。
var app;和var App;//是两个变量
不能以数字开头。18age是错误的
不能是关键字、保留字。例如: var、for、while
变量名必须有意义。//这个变量写尽量能看懂的,这个哈哈哈
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
//变量中各有一个特殊的 name在一些浏览器中默认有特殊含义,别乱起.
交换变量的实现思路
//自己想,交换值.
小结
为什么需要变量?
需要用变量保存一些数据
变量是什么?
变量是一个容器,用于存放数据
变量的本质?
变量是内存的一块空间用来存储数据
变量怎么使用?
在使用变量时候,一定要声明变量,然后赋值
声明变量的本质失去内存申请空间
变量的初始化?
声明变量并且赋值
1.0数据类型
简介:
1.1为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
1.2变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
变量的数据类型可以变化
var x='您好';
x=25;这种操作是允许的
1.3数据类型的分类
简单数据类型
1.3.1数字型
我们把整型和浮点型统一为数字型
这里强调 现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加0x
var num1=010;//0开头表示是8进制数
var num2=0x99;//表示该数字是16进制的数字数字型也有最大值和最小值
最大值:Number.MAX_VALUE，这个值为:1.7976931348623157e+308
最小值:Number.MIN_VALUE，这个值为:5e-32
控制台的相关提示
lnfinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ,Not a number，代表一个非数值 //出现的情况 一个数字型和一个字符串求和
关于NAN
isNAN( 变量);// isNaN(）这个方法用来判断非数字并且返回一个值如果是数字返回的是 false 如果不是数字返回的是true
1.3.2字符串型
字符串型可以是引号中的任意文本，其语法为双引号""和单引号”
因为HTML标签里面的属性使用的是双引号JS这里我们更推荐使用单引号。
这样的写法的意义是,文本的强调作用 像这样
字符串的转义符意义类似于html中的换行空格分割线
强调：换行、特殊符号
3.字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。
使用方法：
var str ='fsfsdfgggdfg';
console.log(str.length); //直接输出4.字符串拼接 ----数值相加，字符相连
多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串
var str='abc'+'1234';//则str的值就是abc1234
// 2．字符串的拼接＋只要有字符串和其他类型相拼接最终的结果是字符串类型
console.log('沙漠’+‘骆驼);//字符串的 '沙漠骆驼'
console.log('pink老师:+18);// 'pink老师18'
console. log('pink' + true); // 'pinktrue'
console.log(12 + 12);// 24
console. log(12+'12');// '1212'
4.半 字符串相加，常用使用方法。
var age=18;
console.log('我今年'+age+'岁了');//可以控制输出语句动态变化交互显示年龄的小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jxl</title>
</head>
<body>
<script>
//弹出一个输入框（prompt)，让用户输入年龄（用户输入）
//把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接（程序内部处理)
//使用alert语句弹出警示框（输出结果)
var age = prompt('请输入您的年龄');
var str ='您今年已经'+ age +'岁了';
alert(str);
</script>
</body>
</html>5布尔型
布尔类型有两个值: true和false ，其中true表示真(对)，而false表示假(错)。
需要注意的是，参与到数值型加法运算 true=1 false=0
6 Undefined和Null
1.4获取变量数据类型
var num = 10;
console.log(typeof num); // number
var str = 'pink ';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag);// boolean
var vari = undefined;
console.log(typeof vari);// undefined
var timer = null;
console.log(typeof timer);// object
// prompt 取过来的值是字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);//string
根据控制台字体颜色判断类型
1.5数据类型的转换
使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换∶
转换为字符串类型
转换为数字型
转换为布尔型
1.5.1转换为字符
| 方式 | 说明 | 案例 |
| toString() | 转成字符串 | var num= 1; alert(num.toString()); |
| String()强制转换 | 转成字将串 | var num = 1; alert(String(num)); |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1; alert(num+ "我是字符串"); |
//方法1
var num1=10;
var str1=num1.toString();
//方法2
var num2=10;
var str2=num2+'';
//方法3
var num3=10;
var str3=String(num3);
方法
对象.toString()和String()使用方式不一样。
三种转换方式，我们更喜欢用加号拼接字符串转换方式，这一种方式也称之为隐式转换
1.5.2转换数字型
注意parselnt和parseFloat单词的大小写，这2个是重点
//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
console.log(parseInt( '120rem120px'));//只会取第一个数字。120把后面的剪掉。
//2. parseFloat(变量)可以把字符型的转换为数字型得到是小数浮点数
console.log(parseFloat( '3.14'));
console.log(parseFloat( '120px'));// 120会去到这个px单位
console.log(parseFloat( 'rem120px'));// NaN
//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);
小demo,用户输入一个出生年份进行计算
<script>
var year=prompt('请输入出生年份');//这里获取得是字符串的年份数字
var age=2022-year;//通过 - 进行隐式类型转换
alert('你的年龄是'+age);
</script>小demo，加法器
<script>
var num1=prompt('请输入第一个值');
var num2=prompt('亲输入第二个值');
var sum=parseFloat(num1)+parseFloat(num2);
alert('求和'+sum);
</script>1.5.3转换布尔类型
代表空、否定的值会被转换为false ，如空单引号''、0、NaN、null、undefined其余值都会被转换为true。
console.log(Boolean(''));// false
console.log(Boolean(e));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean( '123'));
console.log(Boolean('你好吗'));
console.log(Boolean('我很好"));
小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jxl</title>
</head>
<body>
<script>
var pname=prompt('请输入的姓名');
var age=prompt('请输入你的年龄');
var sex=prompt('请输入你的性别');
alert('您的名字叫做'+pname+'\n您的年龄是'+age+'\n您的性别是'+sex);
</script>
</body>
</html>2.1相关知识点
2.1.1解释型语言和编译型语言
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。
翻译器翻译的方式有两种:一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
编译器 是在代码执行之前进行编译，生成中间代码文件
解释器 是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器）
图解：
2.1.2标识符、关键字、保留字
2.2.1标识符
标识(zhi)符∶就是指开发人员为变量、属性、函数、参数取的名字。标识符不能是关键字或保留字。 标识符不能是关键字或者保留字
2.2.2关键字
关键字∶是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。
包括: break、case、catch、continue、default、delete、do、else、finally、for、function、if、in,instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with
2.2.3保留字
保留字︰实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名戍方法名。
包括: boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、
private、protected、public、short、static、super、synchronized, throws、transient、volatile等。
2.0运算符
运算符( operator )也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
算数运算符
不要直接判断两个浮点数是否相等！
// 2．浮点数算数运算里面会有问题
console.log(0.1 +0.2);//0.30080000000000004
console.log(0.07 *10日);//7.000000000000001
// 3．我们不能直接拿着浮点数来进行相比较是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3);// false
2.1递增和递减运算符
++ --
如果需要反复给数字变量添加或减去1，可以使用递增(++）和递减(-- )运算符来完成
在JavaScript中，递增（++）和递减( --)既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增(递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
注意:递增和递减运算符必须和变量配合使用。
++a 先a+1再返回值
a++先返回值后a+1
-- 类似
小结：
前置递增和后置递增运算符可以简化代码的编写，让变量的值＋1比以前写法更简单
单独使用时，运行结果相同
与其他代码联用时，执行结果会不同
后置:先原值运算，后自加(先人后己)
前置∶先自加，后运算(先已后人)
开发时，大多使用后置递增/减，并且代码独占一行，例如:num++;或者num--;
2.2比较运算符
主要是会返回一个返回值。
==与===的区别
==有一个类型转换，也就是18=='18' 但会报true。
===是全等
//1．我们程序里面的等于符号是==默认转换数据类型会把字符串型的数据转换为数字型只要求值相等就可以
//2．我们程序里面===要求有全等一模一样要求两侧的值还有数据类型完全一致才可以 true
2.3逻辑运算符
概念∶逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断
主要有 与或非
逻辑中断/短路运算
短路运算的原理∶当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
1.逻辑与
语法:表达式1&&表达式2
如果第一个表达式的值为真，则返回表达式2 //这里就很奇怪。但是得返回表达式2
如果第一个表达式的值为假，则返回表达式1
//如果有空的或者否定的0 ''" null undefined NaN（这五个为假） 其余是真的
2.逻辑或
语法:表达式1||表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2
逻辑中断的小案例
var num = 0;
console.log ( 123 || num++);
console. log (num);
//123为真直接输出就不再执行num++了2.4赋值运算符
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
3.0流程控制-分支
流程控制
顺序流程控制
分支流程控制if语句
分支流程控制switch语句
switch(表达式){
case value1:
执行语句1;break;
case value2:
执行语句2;break;
...
default:
执行最后的语句;
}
// 3．执行思路﹐利用我们的表达式的值和case后面的选项值相匹配如果匹配上，就执行该case里面的语句如果都没有匹配上，那么执行 default里面的语句
需要注意的事项
switch语句和if else if 语句的区别
1.一般情况下，它们两个语句可以相互替换
2.switch..case语句通常处理case为比较确定值的情况，而i...else.….语句更加灵活，常用于范围判断(大于、等于某个范围)
3.switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if….else语句有几种条件就得判断多少次。
4.当分支比较少时，if...else语句的执行效率比switch语句高。
5.当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
三元表达式
三元表达式也能做一些简单的条件选择。有三元运算符组成的式子称为三元表达式
条件？表达式1：表达式2
4.0循环
//所有语言都一样这里不做过多重复
for循环
// 1. for 重复执行菜些代码，通常跟计数有关系
// 2. for 语法结构
for(初始化变量;条件表达式;操作表达式){1/循环体
}
// 3．初始化变量就是用var声明的一个普通变量，通常用于作为计数器使用
// 4．条件表达式就是用来决定每一次循环是否继续执行就是终止的条件
// 5．操作表达式是每次循环最后执行的代码经常用于我们计数器变量进行更新（递增或者递减)
while循环
先执行条件表达式，如果结果为true，则执行循环体代码;如果为false，则退出循环，执行后面代码执行循环体代码
循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束
do...while循环
执行思路跟while不同的地方在于do while 先执行一次循环体在判断条件如果条件表达式结果为真，则继续执行循环体，否则退出循环
小结
JS中循环有for . while、do while三个循环很多情况下都可以相互替代使用
如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用forwhile和do...while可以做更复杂的判断条件，比for循环灵活—些
while和do...while执行顺序不一样，while先判断后执行，do...while先执行一次，再判断执行while和do...while执行次数不一样，do...while至少会执行一次循环体，而while可能一次也不执行
continue关键字
continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的
代码就会少执行
一次）。
例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下
break关键字
break关键字用于立即跳出整个循环（循环结束)。
例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下:
循环的一个案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jxl</title>
</head>
<body>
<div style="border-radius: 5px;"></div>
<script>
// 简易ATM
// 里面现存有100块钱。
// 如果存钱，就用输入钱数加上先存的钱数,之后弹出显示余额提示框
// 如果取钱，就减去取的钱数，之后弹出显示余额提示框如果显示余额，就输出余额
// 如果退出，弹出退出信息提示框
var num=prompt('请输入您想要执行的操作：'+'\n'+'1.存钱'+'\n'+'2.取钱'+'\n'+'3.显示余额'+'\n'+'4.退出'+'\n');
var money=100,all='true';
while(all){
switch(num){
case '1'||1:
var num2=prompt('请输入存的金额');
num=prompt('账户余额为'+(money=(parseInt(money)+parseInt(num2)))+'\n'+'请输入您想要继续执行的操作：'+'\n'+'1.存钱'+'\n'+'2.取钱'+'\n'+'3.显示余额'+'\n'+'4.退出'+'\n');
break;
case '2'||2:
var num3=prompt('请输入取的金额');
num=prompt('账户余额为'+(money=(parseInt(money)-parseInt(num3)))+'\n'+'请输入您想要继续执行的操作：'+'\n'+'1.存钱'+'\n'+'2.取钱'+'\n'+'3.显示余额'+'\n'+'4.退出'+'\n')
break;
case '3':
alert('您现在有'+money+'元');
num=prompt('请输入您想要继续执行的操作：'+'\n'+'1.存钱'+'\n'+'2.取钱'+'\n'+'3.显示余额'+'\n'+'4.退出'+'\n')
break;
case '4':
all='false';
break;
default:
alert('请正确输入：')
}
if(all=='false')
break;
}
alert('成功退出');
</script>
</body>
</html>*JS写法规范
标识符命名规范
变量、函数的命名必须要有意义变量的名称一般用名词
函数的名称一般用动词
操作符规范
//操作符的左右两侧各保留一个空格
单行注释
// 单行注释前面注意有个空格
其他规范
{ }前后包 （）前后要用空格
5.0JS数组
数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
创建数组
JS中创建数组有两种方式:
利用new创建数组。
var arr=new Array();
利用数组字面量创建数组。
// 1．使用数组字面量方式创建空的数组
var 数组名=[ ] ; //空数组
// 2．使用数组字面量方式创建带初始值的数组
var数组名=[ '小白'，'小黑'，'大黄，'瑞奇'];
// 3. var arr1=[1,2,'hello',true]; // 满足任意元素
存放在数组里面的元素叫数组元素
获取数组元素
如果直接使用console.log(arr1);
会输出整个数组包含所有元素以及长度。
格式 数组名[索引号] console.log(ar1[1]);
遍历数组
从代码中我们可以发现，从数组中取出每一个元素时，代码是重复的，有所不一样的是索引值在递增
遍历:就是把数组中的每个元素从头到尾都访问一次(类似我们每天早上学生的点名)。
数组长度
获取方法 数组名.length 例 arr.length
长度等于元素个数；
我们可以通过修改length长度新增数组元素
可以通过修改length长度来实现数组扩容的目的
lenath属性是可读写的
例：
// 1．新增数组元素修改length长度
var arr = [ ' red ' , 'green', 'blue ' ];
console.log(arr.length);
arr.length = 5;// 把我们数组的长度修改为了5里面应该有5个元素
// 2. 新增元素，修改索引号经常使用的
var arr = [ ' red ' , 'green', 'blue ' ];
arr1[3]='pink';
学习三个案例
1.0要求∶将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组。
2.0要求：数组逆序
3.0要求；冒泡排序
// var arr = [2,0,6,1,77,0,52,0,25,7],arr1=[];
// for(var i=0;i<arr.length;i++){
// if(arr[i]!=0)
// arr1[arr1.length]=arr[i];
// }
// console.log(arr1);
// var arr=['red', 'green', 'blue' , 'pink', 'purple'],arr1=[];
// console.log(arr);
// for(var i=arr.length-1;i>=0;i--){
// arr1[arr1.length]=arr[i];
// }
// console.log(arr1);
var arr=[12,1,6,78,5,61,7,7,9,54];
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr.length;j++)
if(arr[j]>arr[j+1]){
var t=arr[j];
arr[j]=arr[j+1];
arr[j+1]=t;
}
}
console.log(arr);6.0JavaScript函数
6.1使用函数的原因
在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。
封装重复可执行的代码块
6.2声明函数
function 函数名(){
//函数体
}要点：
(1)function声明函数的关键字全部小写
(2）函数是做某件事情，函数名一般是动词(表示函数的执行目的逻辑)
(3）函数不调用，自己不执行 -------- 函数名（）；
6.3函数封装
函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
6.4函数的参数
形参和实参
形参可以看作是不用声明的变量
function 函数名（形参1，形参2...）{
}
函数名（实参1，实参2.. ）；
型参与实参个数不匹配的问题
// 2．如果实参的个数多于形参的个数会取到形参的个数；
/ / 3．如果实参的个数小于形参的个数
//形参可以看做是不用声明的变量，多余的形参定义为undefined，最终结果就是NaN
参数小结
函数可以带参数也可以不带参数
声明函数的时候，函数名括号里面的是形参，形参的默认值为undefined
调用函数的时候，函数名括号里面的是实参
多个参数中间用逗号分隔
形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配
6.5函数的返回值
格式：
function 函数名（）{
return 需要返回的结果；
}
(1）我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名(）通过return实现的(2）只要函数遇到return就把后面的结果返回给函数的调用者 函数名 () = return 后面的结果
这句话很抽象
return 终止函数
return后面的语句不会被执行。
我们的函数如果有return则返回的是 return后面的值，如果函数没有return则返回undefined（关于这点，函数会被执行，但是涉及到接收函数的值，会报出undefined）
如图：
function fun1(){
console.log("hello");
}
console.log(fun1()); 
break ,continue ,return的区别
break :结束当前的循环体（如 for、while )
continue :跳出本次循环，继续执行下次循环(如for、while )
return :不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码
arguments的使用 （太好用了）
在不确定参数个数时候使用
当我们不确定有多少个参数传 递的时候，可以用arguments来获取。在JavaScript中 ，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
//不知道形参的个数，那就不写了，通过使用arguments直接使用
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点:
具有length属性
按索引方式储存数据
不具有数组的push , pop等方法
function fn(){//这里我们不知道传入函数的实参的个数
console.log(arguments);//使用arguments这个字面量可以以数组的形式访问所有元素。
for(var i=0;i<arguments;i++){
console.log(arguments[i]);
}
}
fn(1,2,3,4);案例练习
//反转数组
function fan(){
var str=' ';
for(var i=0;i<arguments.length;i++){
str+=' '+arguments[i];
}
console.log(str);
for(var i=0;i<(arguments.length/2);i++){
var temp=0;
temp=arguments[arguments.length-i-1];
arguments[arguments.length-i-1]=arguments[i];
arguments[i]=temp;
}
str=' ';
for(var i=0;i<arguments.length;i++){
str+=' '+arguments[i];
}
console.log(str);
}
fan(6,9,12,'a','b','c');6.6函数的声明方式(单独出一篇记录)
函数的两种声明：
// 1．利用函数关键字自定义函数(命名函数)
function fn(){
}
fn();
// 2．函数表达式(匿名函数)
var变量名= function(0;var fun = function(）{
console.log('我是函数表达式');
}
fun();
//(1)fun是变量名不是函数名//(2)
6.7作用域
定义
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
js作用域分全局和局部（函数内部产生的）。
变量也分为全局变量（比较占内存）和局部变量。
补（全局变量特殊的地方）//不要这样使用。
function fn(){
num=100;//函数内没有进行声明直接使用的变量默认为全局变量。
}
//这里的num只是涉及到赋值并没有进行变量的声明，
console.log(num);//那么在使用的时候就可以视作为全局变量局部变量
函数的形参，相当于一个局部变量。
3.从执行效率来看全局变量和局部变量
(1）全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
(2)局部变量当我们程序执行完毕就会销毁，比较节约内存资源
es6中提出了块级作用域。
作用域链
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值这种结构我们称为作用域链，就近原则
var num=20;
function fn(){
var num=20;
function fn1(){
console.log(num);//这里使用到了num，浏览器会通过链式查找这种方式找到num
}
}图解
7.0JavaScript预解析
JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。
// 1．我们js引擎运行js分为两步:预解析代码执行
//(1)．预解析js引擎会把js里面所有的 var 还有 function提升到当前作用域的最前面
//(2)．代码执行按照代码书写的顺序从上往下执行
// 2．预解析分为变量预解析（变量提升）和函数预解析（函数提升)
/(1）变量提升就是把所有的变量声明提升到当前的作用域最前面（只声明不执行） 不提升赋值操作
//(2）函数提升就是把所有的函数声明提升到当前作用域的最前面(函数本身就是只声明不执行) 不调用函数
例子解释：
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>jxldemo</title>
</head>
<body>
<script>
//1问
console.log(num1);
//2问
console.log(num2); //
var num2 = 10;
// 3问
fn();
function fn() {
console.log(11);
}
//4问
fun();
var fun = function () {
console.log(22);
};
</script>
</body>
</html>
分析：
1中没定义变量直接使用，报错
2中由于代码中有var的操作，js解析器会将2中的代码进行解析(变量提升就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作)，如下图
console.log(num2); var num2;
--------> console.log(sum2);
var num2 = 10; num2=10;
4中代码有一点很有意思。
fun();
var fun = function () { -------->这里的函数是通过表达式的方式定义。function作为右值不进行提升
console.log(22);
};
当表达式执行时执行次序如下
var fun;
fun();
fun = function () {
console.log(22);
};
注意
//函数表达式调用必须写在函数表达式的下面
这里补一个案例
针对var a=b=c=9;等价于var a=9;b=9;c=9;//一个变量一个var
8.0对象
JavaScript中的对象分为3种∶自定义对象、内置对象、浏览器对象
8.1对象定义
具体的事物叫对象。
对象由方法和属性组成。
属性∶事物的特征，在对象中用属性来表示(常用名词)
方法 : 事物的行为，在对象中用方法来表示(常用动词)
8.2创建对象
方法一
键值对
这里提一下经常提到的键值对概念
对象字面量∶就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。
{ }里面采取键值对的形式表示
键∶相当于属性名
值︰相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等).
对 : nmd 就是一个键对应一个值，成对出现
1.利用对象字面量创建对象{ } //案例如下：
var abj={
uname:'jxl',
age:18,
//加个方法
sayHi: function(){
console.log('hi!');
}
}(1）里面的属性或者方法我们采取键值对的形式键属性名﹔值属性值
(2）多个属性或者方法中间用逗号隔开的
(3）方法冒号后面跟的是一个匿名函数
2.使用对象
(1)．调用对象的属性我们采取对象名.属性名
通过obj.uname访问------------console.log(obj.uname);
(2)．调用属性还有一种方法对象名['属性名']
通过obj['uname']访问------------console.log([obj'uname']);
(3）调用对象的方法sayHi 对象名.方法名
通过obj.sayHi();---------------obj.sayHi(); //这里不要忽略括号
小结：变量、属性、函数、方法的区别
1.变量和属性的相同点他们都是用来存储数据的
变量: 单独声明并赋值使用的时候直接写变量名单独存在
属性: 在对象里面的不需要声明的使用的时候必须是对象.属性
2．函数和方法的相同点都是实现某种功能 做某件事
函数: 是单独声明并且调用的函数名(）单独存在的
方法: 在对象里面调用的时候对象.方法()
方法二
利用new object创建对象//注意O大写 new object的方式
var obj=new Object(); //创建一个空对象
//通过追加属性添加对象的值
obj.uname='';
obj.age=18;
obj.sayHi=function(){
console.log('hi');
}(1）我们是利用等号=赋值的方法添加对象的属性和方法
(2）每个属性和方法之间用分号结束
2.使用对象的方式和键值对创建对象调用的方式一样
(1)．调用对象的属性我们采取对象名.属性名
通过obj.uname访问------------console.log(obj.uname);
(2)．调用属性还有一种方法对象名['属性名']
通过obj['uname']访问------------console.log([obj'uname']);
(3）调用对象的方法sayHi 对象名.方法名
通过obj.sayHi();---------------obj.sayHi(); //这里不要忽略括号
方法三
利用构造函数创建对象
（我们为什么使用构造函数创建对象？）//可以提高代码复用性。创建多个同类型对象
构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
构造函数︰是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
案例
//写构造函数的过程
function Person(uname,uage,usex){
this.pname=uname;
this.page=uage;
this.psex=usex;
this.sayHi=function(hello){
console.log('hello');
}
}
var jxl=new Person('jxl',18,'男');
注意：
1．构造函数名字首字母要大写
2．我们构造函数不需要return就可以返回结果，构造函数返回的是对象（object）。
3. 调用构造函数必须使用new
4. 我们只要new了构造函数（），调用构造函数返回的是一个对象
5. 利用构造函数创建对象的过程我们称为对象的实例化。
构造函数中的new 的执行过程
1.在构造函数中创建一个空对象
2.this就会指向空对象
3.执行构造函数中的代码给空对象添加属性和方法。
4.返回这个新对象（构造函数中不需要return）
8.3遍历对象（for in）
for in操作
var mr = {
uname: "鸣人",
sex: "男",
age: 18,
skill: function () {
alert("hello");
},
}
for(var k in mr){
console.log(k);//输出得到的是属性名
console.log(mr[k]);//obj[k]得到的是属性值
}for in中经常使用到的就是k或者key相当于for中的i
8.4内置对象
内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)
JavaScript提供了多个内置对象:简述Math、 Date 、 Array、string等
math对象
Math是一个内置对象，它具有数学常数和函数的属性和方法。不是一个函数对象.
Math数学对象不是一个构造函数﹐所以我们不需要new来调用而是直接使用里面的属性和方法即可
例如：Math.max(1,6,99); //当参数里面有非数字类型的数值。则会报错NAN。
例2 Math.max()直接log输出，报错Infinity
案例代码：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jxldemo</title>
</head>
<body>
//自己封装函数
<script>
var myMath={
Pi:3.1415926,
max:function(){
var max=arguments[0];
for(var i=1;i<arguments.length;i++){
if(arguments[i]>max)
max=arguments[i];
}
return max;
},
min:function(){
var min=arguments[0];
for(var i=1;i<arguments.length;i++){
if(arguments[i]<min)
min=arguments[i];
}
return min;
},
}
console.log(myMath.max(9,6,9,88,77,99));
console.log(myMath.min(9,1,6,3,66,44,77));
</script>
</body>
</html>math的常用对象：
Math.random( ){ }产生随机数。返回一个随机小数
方法不含参数
这里引入一个小技巧使用mdn文档。根据文档进行函数的参训开发和编写。
1.查询函数的功能
2.查看里面内部参数的意义和类型
3.查看返回值的意义和类型
4.进行demo测试
3112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
