JavaScript

编程语言

1.1 编程

编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
注意：计算机指的是任何能执行代码的设备。

1.2计算机语言

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

1.3 编程语言

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

课程安排

html,css

javascript基础
webAPIs
数据可视化
JavaScript高级

Ajax
NodeJs

Vue基础
Vue基础的项目实战
VuePC项
Vue项目实战
Vue移动端项目

微信小程序
Reactrum

JavaScript基础

JS第一天

基础语法

1.JavaScript介绍

1.1 JavaScript是什么

1.1.1 是什么？

是一种运行在客户端（client）（浏览器）的编程语言，实现人机交互效果
服务端（Server）

1.1.2 作用（做什么？）

• 网页特效（监听用户的一些行为让网页做出对应的反馈）
• 表单验证（针对表单数据的合法性进行判断）
• 数据交互（获取后台的数据，渲染到前端）
• 服务端编程(node.js)
  v8引擎是谷歌研发出来的解析服务器的很重要的引擎
  JavaScript这些年得到了长足的发展（V8引擎的效率）

1.1.3 组成（有什么？）

1. ECMAScript：
   规定了js基础语法核心知识。
   比如：变量，分支语句，循环语句，对象等等
2. Web APIs：
   DOM （Document:文档 ）页面文档对象模型：操作文档，比如对页面元素进行移动，大小，添加删除等操作 例 :轮播图实现点击箭头实现下一张图片
   BOM （Browser:浏览器）浏览器对象模型：操作浏览器，比如页面弹窗，检测窗口宽度，存储数据到浏览器等等
   

搜索东西到JavaScript权威网站:MDN
JS初体验

1.2 JavaScript书写位置

1.内部JavaScript
直接写在html文件里，用script标签包住
为什么script标签最好写在的上面？
js代码以后，更多的是会处理网页中的内容 DOM
alert(’ 内容 ')可以帮助弹出警示框
注意：
1.括号和引号都要是英文下的
2.‘t’ 和 ‘(’ 之间没有空格

2.外部JavaScript
注意：
1.写在外部js文件的内容，就直接写js代码即可
2.内部和外部js的写法，可以混用 （但是要重新写一个script标签去写代码）
3.一旦一个script写上src之后，这个script标签的内容就会被忽略掉
3.内联（行内）JavaScript
几乎不用
代码写在标签内部

1.3 JavaScript的注释

注释是写给人看的，代码是写给机器看的
注释在工作中的使用规范：注释并不是越多越好
我们并不会给每一行都写上注释，只会给一些关键点写上注释

1.3.1单行注释//

在代码的上边或者右边写

1.3.2 多行注释 /* */

快捷键：shift+alt+A

1.4 JavaScript的结束符

作用：英文下的 ’ ; ’ 代表语句结束
实际开发中，可写可不写，为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）

1.5 输入和输出语法

什么是语法：

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

1.5.1输出语法:

网页中输出语法1:

document.write('要输出的内容')

**作用:**向body内输出内容，在网页尾部添加内容
**注意:**如果输出的内容写的是标签，也会被解析成网页元素
**特点:**写在网页中的内容会被解析成html标签

弹框中输出语法2：

alert('内容')

注意:
document.write(‘内容’)内容会被识别成html标签
alert(‘内容’)不会被识别成html标签

控制台输出语法3:

console.log('内容')

注意:
在控制台中输出信息，主要是给程序员看的

1.5.2 输入语法

prompt(' 请输入内容')

**作用:**显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

JavaScript代码执行顺序：
按HTML文档流顺序执行JavaScript代码
alert()和 prompt() 它们会跳过页面渲染先被执行(目前作为了解，后期讲解详细执行过程)

1.6 字面量

在计算机科学当中，字面量是在计算机中描述 事 / 物
通俗理解：在JS中，数据该怎么写
数字型的数据：18 字符串型的数据：’ ’ 数组：[ ] 对象：{ }

JavaScript变量

1.变量是什么？

变量是计算机存储数据的容器，帮助我们存储数据，
注意：变量不是数据本身，他们仅仅是一个用于存储数值的容器，可以理解为一个用来装东西的纸盒子

2.变量的基本使用

2.1 声明变量：

语法：let 变量名
声明变量有两部分构成:声明关键字、变量名(标识)
let 即关键字(let:允许、许可、让、要)，所谓关键字是系统提供的专门用来声明(定义)变量的词语
let是声明变量的关键字
let 后面跟着的是 变量的名字
注意:变量的名字，无论什么时候， 这个名字不需要加引号
变量 只声明,没有赋值,这时候变量就是:undefined

2.2 变量赋值:

定义了一个变量后，你就能够初始化它(赋值:将数据赋予给某个变量)。在变量名之后跟上一个“=”，然后是数值。
为什么要使用变量去代表数据呢？
因为如果数据被使用的次数比较多的话，用变量去代表数据，方便我们后续对数据的修改
变量之所以叫做变量，就是因为它们所代表的数据是可以改变的

2.3 更新变量

通过let声明的变量，只需要声明一次，不允许多次声明同一变量

2.4 声明多个变量

语法：多个变量中间用逗号隔开

3.变量的本质

内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间

4.变量命名规则与规范

规则:必须遵守，不遵守报错(法律层面)
1.不能用关键字
关键字：有特殊含义的字符，JavaScript内置的一些英语词汇，例如:let,var,if,for等
2.只能用下划线，字母，数字，￥组成，且数字不能开头
3.字母严格区分大小写，如Age和age是不同的变量
规范:建议，不遵守不会报错，但不符合业内通识(道德层面)
1.起名要有意义（见名知意）
2.遵守小驼峰命名法（一个单词无法表达出意思）

• 第一个单词首字母小写，后面每个单词首字母大写。例: userName

5.变量拓展-let和var的区别

let 和 var 区别:
在较旧的JavaScript，使用关键字 var 来声明变量 ，而不是 let。
var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它
let 为了解决 var 的一些问题。
var声明:
1.可以先使用 在声明 (不合理)
2.var声明过的变量可以重复声明(不合理)
3.比如变量提升、全局变量、没有块级作用域等等

6.变量拓展-数组

数组（Array）-一种将一组数据存储在单个变量名下的优雅方式
let arr = [ ]

6.1 数组的基本使用

1.声明语法：
let arr = [ 数据1，数据2，数据3，… , 数据n ]
2.1 数组是按顺序保存，所以每个数据都有自己的编号
2.2 计算机中的编号从0开始
2.3 在数组中，数据的编号也叫索引或下标

2.取值语法：
数组名[ 下标 ]
如何能够保证每一次都拿到数组中最开始的那个元素？

数组名[0]

如何能够保证每一次都拿到数组中最末尾的那个元素？

数组[ 数组.length-1 ] 得到数组中有几个元素减一

7.常量

常量是一种特殊的变量，常量的值不允许被修改

7.1 常量的基本使用

概念：使用const声明的变量称为“常量”
使用场景：当某个变量永远不会改变的时候
命名规范和变量一致
常量使用：
注意：常量不允许重新赋值，否则会报错

和变量不同的地方：
1.声明的关键字不同 const
2.常量被声明完之后，就不能修改值了（初始化不能修改）
声明常量的同时就要赋值,否则会报错

JavaScript数据类型

整体分为俩大类：基本数据类型 和 引用数据类型

布尔型只有俩个值：true和false

1. 数字类型（Number）

1.先乘除后加减
2.小括号的优先级最高
3.为了更加好的表达出代码的意思,我们有时间在一些高优先级的符号操作中,也会使用小括号（）
%的用途:对俩数进行求余
取余： 10 % 3 —》1 2%5 —》2


NaN（Not a Number）代表一个计算错误，它是一个不正确的或者一个未定义的数学操作所得到的结果
NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

字符串型（string）

定义字符串的方法：单引号’ ’ 、 双引号 " " 、 反引号
需要选择自己一个比较喜欢的符号，长期的使用它，在特殊的情况下适时地转变引号（外单内双，外双内单，既有双又有单使用反引号）
’ \ '为转意字符可以将单双引号转换之后不代表语法意思

变量没有定义

JS第二天

代码执行顺序：

非数字型使用运算符 ‘-’ 、‘*’ 、‘/’ 、'%会出现NaN
‘+’ 对于数字而言是加法的意思，对于非数字而言，是属于连接的意思
1.从上往下执行
2.遇到一行代码的情况则是从内到外执行
3.遇到等号 ‘=’ 先执行 ‘=’ 右边的代码

反引号的使用：

1.如果字符串内部出现了换行
2.在字符串的内部需要使用到变量

布尔型（boolean）

true 真/false假（不是字符串，不要加引号）
布尔型的数据在条件判断和循环中才会使用到

未定义型（undefined）

只声明变量，不赋值，变量的默认值是undefined

空类型（null）

和undefined其实是同一个意思：变量 没有值

控制台输出语句和检测数据类型

通过 typeof 关键字检测数据类型

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式
1.作为运算符: typeof x (常用的写法)
2.函数形式: typeof(x)
换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。

数据类型转换

1.为什么要类型转换

JavaScript是弱数据类型:JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚
坑:使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算

2.字符串 --> 数字

2.1 隐式转变

数据与数据之间进行 - * / % 时,JS引擎会偷偷帮助我们转变成数字
隐式转变的能力是有限的，如果实在转不了最后得到的还是NaN
只有长得像数字的字符串 才能转变成功

let result = num1 - num2
console.log(result)

2.2 显示转变

需要程序员自己额外写代码才能进行转变

Number（字符串）以字符串的数据作为原材料，产生了一项新的数据
Number转变数据的特点：整数，小数 都能够正常的转成功。如果数据中出现了单位，转换不成功

parseInt（数据）：数据转变成整数，缺失小数的部分,不会四舍五入
可以帮助我们把单位去除 ‘10px’——>10
使用场景：有时候我们就是想让小数的部分缺失掉

parseFloat（数据）:数据转变为 带有小数的效果 不会缺失小数的部分
可以帮助我们把单位去除
+ 数据：将字符串数据转换为数字型 ，不识别单位 ，可以保留小数

 let str1 = prompt('请输入第一个数字:')
        let str2 = prompt('请输入第二个数字:')

        let result = +str1 + +str2
        alert(result)

3.数字–>字符串

3.1 隐式转换（最简单最常用）

数字和字符串相加，系统就会尝试着偷偷的帮你把数字变成字符串

let result = num1 + ''

字符串和任何东西相加都是字符串

3.2显示转换

4.数据–>布尔型 boolean（数据）

• 数字：非0既true
• 字符串：非空既true
• undefined：false
• null：false

书写案例的步骤:

1.用假数据写布局
2.写样式
3.写js代码 ( 模板字符串 ${} )
4.把准备好的html字符串显示在网页中

常见错误

1.在常量声明的时候缺少初始化
2.提示 age变量没有定义过
很可能 age 变量没有声明利赋值
或者我们输出变量名和声明的变量不一致引起的(简单说写错变量名了)

3.常量被重新赋值了
常量不能被重新赋值

常见运算符

1.赋值运算符（=）

1.1 基本理解

把等号右边的东西赋值给等号左边的变量
当遇到了等号赋值时，不是从左往右去执行代码的（先执行等号右边的代码，将右边的代码计算出来之后，在进行赋值的操作）

num = num + 5
简写
num += 5

’ ++ '累加1

let num = 100
        num++
        ++num
        console.log(num)

小八股文
无论在数据前面 写上++ 还是在数据的后面写上 ++，他们对num这个变量产生的效果都是一样的: 都让num的数据自增1
前置++和后置++的区别在于表达式的值不一样
++变量–>这个表达式的值 是数据+1之后的结果
变量+±->这个表达式的值 是数据本身的结果

let i = 1
console.log(i++ + ++i + i)
运行结果：7

2.比较运算符

通过比较运算符将会得到一个布尔类型的数据

console.log(num1 > num2)
运算结果：false
console.log(num1 < num2)
运算结果：true
console.log(num1 >= num2)
运算结果：false
console.log(num1 <= num2)
运算结果：true
console.log(num1 == num2)是否等于
运算结果：false
console.log(num1 === num2)是否全等于
运算结果：false
console.log(num1 !== num2)是否不全等于
运算结果：true

‘=’ 赋值

'=='只比较值不比较类型

'==='既比较值又比较类型，比较严格，工作中常使用

字符串的比较

比较的是每个字符的ASCII码,首字母不同就比首字母大小

let str1 = 'aab'
let str2 = 'aba'
console.log(str1 > str2)
运行结果：false

NaN自己都不等于自己
不等于自身的值结果为false的是NaN

let temp = 'aaa' - 9
console.log(temp === temp)

计算机在进行小数运算时，有时候会出现极度缺失的问题
不同类型之间比较会发生隐式转换
最终把数据隐式转换转成number类型再比较
所以开发中，如果进行准确的比较我们更喜欢 === 或者!==

3.逻辑运算符

3.1 && 并且

// 判断一个变量num是否大于5并且小于10
        let num = 8
        console.log(num > 5 && num < 10)

3.2 || 或者

// 判断一个变量num是否大于5或者小于10
        let num = 8
        console.log(num > 5 || num < 10)

3.3 ！取反

运算符优先级

JS第三天

代码执行顺序

1.从上往下
2.从内往外
3.赋值语句：先执行=的右边，在执行赋值语句

程序三大流程控制语句

• 以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
• 有的时候要根据条件选择执行代码，这种就叫分支结构
• 某段代码被重复执行，就叫循环结构
  

分支语句

可以让我们有选择性的执行想要的代码
目标:能使用if语句执行满足条件的代码

if语句

if语句有三种使用::单分支、双分支、多分支单分支使用语法:

if(条件){
           // 代码1
           // 代码2
        ...
        }
        条件:我们可以通过一个比较运算符产生布尔类型的数据
        布尔类型的数据为true,或者是带有true的意思的数据,将会执行大括号中的代码,大括号中的代码依旧是从上到下执行的
        */

条件：括号内的条件为true时进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

调整位置使用tab，一个tab键就是四个空格

双分支语句

if (条件) {
            满足条件要执行的代码
        } else {
            满足条件要执行的代码
        }

多分支语句

使用场景：适合于有多个结果的时候

if (条件1) {
            满足条件要执行的代码1
        } else if(条件2){
            满足条件要执行的代码2
        }else if(条件3){
            满足条件要执行的代码3
        }
        ...
        else{
            满足条件要执行的代码n
        }

释义：
1.先判断条件1，若满足条件1就执行代码1，其他不执行
2.若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
3.若依然不满足继续往下判断，依次类推
4.若以上条件都不满足，执行else里的代码n
else if是否定了上面的条件，没必要在写到代码里面

三元运算符

三元表达式适合使用双分支
三元表达式确实可以将双分支进行简化，但是它针对的是每一个分支只有一行代码
三元表达式其实是有值的，三元表达式最主要的场景是帮助我们求值的

语法结构： 条件 ？ 代码1 ：代码2

age >= 18 ? alert('欢迎光临') : alert('未成年人不准入内')

switch语句

可以帮助我们实现多分支

switch (数据){
case 值1:
	代码1
	break
case 值2:
	代码2
	break
default:
	代码n
	break
}

释义:
找到跟小括号里数据全等的case值，并执行里面对应的代码
若没有全等 === 的则执行default里的代码
注意：
1.switch case语句一般用于等值判断,不能用于区间判断
2. switch case一般需要配合break关键字使用 没有break会造成case穿透

循环语句

断点调试

在浏览器中打断点
在某些代码的地方做一个标记，让浏览器在执行到这行代码的时候，停下来，看看当下每个变量的数据一步一步的执行代码

while循环

循环：重复执行一些操作，while

语法：

while(条件){
	代码1（循环体）
	代码2（循环体）
}

释义:
跟if语句很像，都要满足小括号里的条件为true才会进入 循环体 执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

循环的三要素

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。while循环需要具备三要素:

JS第四天

如何产生一个具备次数的循环代码

let i=1
while (i<=5){
console.log('haha')
i++
}

如何由用户决定循环的次数

let i = 1
let end = prompt('请输入循环的次数:')
while(i<=end) {
console.log('haha')
i++
}

循环退出

循环结束：一般来说在分支语句内才有意义
continue：结束本次循环，继续下次循环（continue一般放在if当中）
break：退出整个循环
区别：
continue退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue

1~100内偶数的和
        let i = 0
        let sum = 0
        while (i <= 100) {
            if (i % 2 !== 0) {
                i++
                continue
            }
            sum += i
            i++
        }
        console.log(sum)

break退出整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用
break经常会和死循环一起使用，死循环其实更多的时候不是一种错误，是一种有意为之的操作
循环：1.明确了循环的次序 2.没有明确循环的次数

1~100之间的累加和,加到多少之后,值超过了2000
let i = 0
        let sum = 0

        while (i <= 100) {
            sum += i
            if (sum > 2000) {
                console.log(`加到${i}之后,值超过了2000,最终计算的和是${sum}`)
                break
            }
            i++
        }

注意：
1.因为弹框的次数不确定–>死循环+break
2.进行break的条件判断
3.从整体的代码机构开始写，搭建好具体的代码结构，搭建完成之后在zhugejipo
4.余额:余额是会被不断增加和减少，所以需要有一个变量，来代表余额
5.余额变量声明在哪的问题: 循环之外

for循环

for 基本使用

1.for循环语法

作用:重复执行代码
好处:把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式

for (let i = 1; i >= 5; i++) {
	console.log('haha')
}

2.循环遍历

遍历：把数组完整的从头到尾的走一遍

let arr = ['张三', '赵云', '关羽', '刘备']
	for (let i = 1; i <= 4; i++) {
			console.log(arr[i - 1])
    }

3.退出循环

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue
break 退出整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用

构造无限循环需要使用break退出循环
1.while(true)用来构造无限循环
2.for(::)也可以来构造无限循环

循环嵌套

从内向外思考

逻辑中断

并且&& 一假则假
当逻辑运算符在左右连接其他类型数据的时候，整个逻辑运算符将会得到什么值，看谁具备决定权，谁具备决定权，表达式的值就是谁
或者|| 一真则真
判断一个数是不是质数：
1.不能在循环中的if后面跟上else，下是质数的结论，我们应该再循环结束之后，才可以下这个是质数的结论
2.在循环之外，下是质数的这个结论的条件
2.1.将计数器的值 和 973 进行对比，(需要把1et i=2放到循环之外)
2.2.我们可以增加标记位
最开始先给标记位一个初始值
在循环中，条件成立了改变标记位的值
在循环结束之后，我们需要判断标记位是否改变过

数组

1.数组的概念

数组可以把一组相关的数据一起存放，并提供方便的访问（获取）方式

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

2.创建数组

2.1数组的创建方式

1.利于new创建数组

let arr = new Array(); //创建了一个空的数组

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

let arr2 = []; //创建了一个空的数组

数组里的数据一定用逗号分隔
数组里的数据称为数组元素
声明数组并赋值称为数组的初始化

2.2数组元素的类型

数组中可以存放任意类型的数据

let arr3 = [1, 2, 'pink', true];

3.获取数组元素

3.1数组的索引

索引（下标）：用来访问数组元素的序号（数组下标从0开始）
数组可以通过索引来访问，设置，修改对应的数组元素
格式：数组名[ 索引下标 ]

console.log(arr3[2]) //pink

4.遍历数组

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

4.1 数组的长度

使用"数组名.length"可以访问数组元素的数量（数组长度）
1.数组的长度是元素的个数
2.arr.length动态监测数组元素的个数

数组元素是arr [ i ] i 是计数器

5.数组中新增元素

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

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

5.2通过修改数组索引新增数组元素（常用）

1.可以通过修改数组索引的方式追加数组元素
2.不要直接给数组名赋值，否则会覆盖掉以前的数据

6.操作数组

增加数组数据方式:
数组.方法()
//数组.push(数据)
//arr.push的效果是往arr中的末尾添加元素
push的结果是 添加完之后,最新的arr中有几个元素
//数组.unshift(数据）
//arr.unshift的效果是往arr中的开头增加元素
从数组中删除一个元素
//数组.pop()
功能:删除数组中最后一个元素
结果:被删除的那个元素
//数组.shift()
功能:删除数组最开始的那个元素
结果:被删除的那个元素
数组.splice() 在任意位置,添加或删除
//splice 如果只想删除元素不想添加,第三部分不写
//splice 如果只想添加不想删除,第二部分写0
// 数组.splice(位置, 要删除的元素的个数, 要添加的元素)

方法的初始

7. 冒泡排序

冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大或从大到小 ）

数组排序:arr.sort()
数组逆序:arr.reverse()

JS第五天

函数

变量是用来存储数据的
函数是用来存储代码的

1.1 为什么需要函数

function是被设计为执行特定任务的代码块
函数可以把具有相同或相似逻辑的代码包裹起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

1.2 函数使用

函数的俩个基本步骤：
1.定义函数

function 函数名( ){
重复使用的代码
}

2.调用函数

 函数名( )

特点：函数如果只定义不调用函数体内的代码不执行
命名规范：
1.和变量名基本一致
2.尽量使用小驼峰式命名
3.前缀应该为动词
4.常用动词：

JS第六天

1.3函数传参

1.3.1 函数的参数

作用:能够让函数体内部的功能更加灵活多变
参数分为俩种：形参和实参

function fn(a, b, c) {
            console.log('haha')
            console.log('hehe')
        }
        fn(10，20)
        //10会给a,20给b，c是undefined

1.声明语法：

function 函数名(参数列表){
	函数体
}

参数列表：

• 传入数据列表
• 声明这个函数需要传入几个数据
• 多个数据用逗号隔开
  2.调用语法:

函数名(传递的参数)

形参:形式上的变量（在定义函数的时候小括号中写的）
实参：实际上的数据（在调用函数的时候，小括号中写的）
大部分的情况下形参的数量和实参的数量要保持一致
如果实参和形参数量不一致，函数体内部的代码依然会执行
实参和形参的赋值：从左往右一一对应
多出来的形参：undefined
多出来的实参：没人要（并不是完全没人要，函数内部，有一个特殊的变量：arguments，无论形参是什么情况，他都会把所有的实参囊括在内）

小结论：什么时候使用arguments？当实参的数量不确定
默认值：

(start = 1, end = 100)

默认值什么时候生效：当没有传递实参的时候，才会生效
参数默认值的第二种写法:

if(start===undefined){
start=1
}
if(end===undefined){
end=100
}

start = start || 1
end = end || 100

1.3.2 返回值

return 数据

函数的返回值：让调用者处理数据变得更加灵活
return和循环无关，结束的是函数
以后定义函数的时候，要不要加参数，要不要写return：看情况
看需求的描述：
描述1：定义一个函数，这个函数的功能是计算1~100之间的累加和，并且把累加和在控制台打印出来（不需要）
描述2：定义一个函数，这个函数的功能是计算有调用者传递的俩个数之间的累加和，并且把累加和在控制台打印出来（需要参数，不需要返回值）
描述3：定义一个函数，这个函数的功能是计算1~100之间的累加和，并且把这个结果给调用者，调用者拿到结果之后，随意处理（不需要参数，要有返回值）
描述4：定义一个函数，这个函数的功能是计算有调用者传递的俩个数之间的累加和，并且把这个结果给调用者，调用者拿到结果之后，随意处理（都需要）
返回值的注意点：
细节一：一个函数只要遇到了return，return之下的代码不会执行
细节二：return可以返回几个数据？（最多return一项数据）
return后面没有跟数据，相当于return undefined
如果我们有多个数据需要返回，我们可以把多个数据放到一个数组中去，把整个数组返回回去
细节三：一个函数可以有return，也可以没有
如果没有return，相当于在函数的最后加了 return undefined

作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

变量有一个坑，特殊情况：
如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强力不推荐
函数内部的形参也认为是局部变量

1.全局作用域

在任何区域都可以访问和修改（script标签下的区域）
在全局作用域下定义的变量：全局变量

2.局部作用域

2.1 函数作用域

在函数的大括号范围内
在函数作用域下定义的变量：局部变量

2.2 块级作用域

for形成的块级作用域 if形成的块级作用域 …
在块级作用域下定义的变量：局部变量

2.3 全局作用域下和局部作用域下，都有相同的变量

变量访问原则：就近原则

3.作用域链

由一个又一个的作用域形成的链条
作用域链本质：变量的查找机制（现在当前的作用域下找一找有没有这个变量，没有就继续往上找，如果找完全局作用域，依然没有发现这个变量，就会报错：xxx is not defined）

匿名函数

let num = 100
        let fn1 = function () {
            console.log('xixi')
            console.log('haha')
        }
        fn1()

没有名字的函数，无法直接使用

1.函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式
语法：

let fn=function(){
//函数体
}

调用：

fn()

具名函数和匿名函数唯一差别:

具名函数的特点:先调用，在定义
匿名函数不能先调用，在定义，会报错

立即执行函数

调用匿名函数:

function(){}()

场景介绍：避免全局变量之间的污染
语法：

JS第七天

数组的使用

sort内部,是把数组中的每个元素当做字符串对待
可以给sort这个方法,增加一个实参
sort的内部,在俩俩对比每一组数据的时候,sort都会调用这个函数,并且以这个函数的结果来决定从小到大还是从大到小
实参:有时候也可以是一个函数

arr.sort(function (num1, num2) {
            // return num2 - num1 //逆序
            return num1 - num2 //正序
        })

1.对原数组产生了影响
2.对原数组不会产生会影响，而是形成了新的数组,新的数据我们一般都会用变量去接受这些新的数据

数组的常见方法：

1. 数组.forEach(函数) 循环遍历

forEach的内部,会使用for循环对arr进行循环遍历
他在循环遍历的过程中，每遍历一个元素，他都会调用我们传递的function(){}，他还会把当前遍历的这个元素以实参的形式传递过来
e是之前的arr[ i ]

//对arr进行循环遍历, 计算平均值
let sum = 0
    arr.forEach(function (e) {
      sum += e
    })
    let aver = sum / arr.length
    console.log(aver)

2. 数组.filter(函数) 过滤

//在arr的所有元素中, 将未成年人拎出来,形成一个新的数组
let newArr = arr.filter(function (e) {
      // if (e < 18) {
      //   return true
      // } else {
      //   return false
      // }
      return e < 18
    })
    console.log(newArr)

3. 数组.map(函数) 一一映射

//需要一个新的数组, 新数组里面的每个元素是arr里面对应元素的平方
let newArr = arr.map(function (e) {
      return e * e
    })
    console.log(newArr)

4. 数组.silce(开始位置，结束位置)

包含开始的位置，不包含结束的位置

let newArr = arr.slice(2, 4)

5.数组.some(函数)

得到数组中是否有满足条件的元素
some可以得出一个结论：有没有（布尔类型）

//arr有没有年龄为16的元素
let flag = arr.some(function (e) {
      return e === 16
      // if (e === 16) {
      //   return true
      // } else {
      //   return false
      // }
    })

6.数组.every(函数)

是否都满足条件
every可以得出一个结论：是否都

// arr是否都是成年人
    let flag2 = arr.every(function (e) {
      return e > 18
    })
    console.log(flag2)

7.数组.join(’ 连接符 ')

连接形成新的字符串

//将arr中每一个元素使用-进行拼接形成字符串
    let newStr = arr.join('-')
    console.log(newStr)

8.数组.findIndex(函数)

let index=数组.findIndex(函数)

找到满足条件的元素的下标索引
如果没有满足条件的下标索引，结果为 -1

9.数组.find(函数)

let obj=数组.find(函数)

找到满足条件的元素
找不到结果就是undefined

对象

当我们需要存储多项同一类型的数据是使用数组
当我们需要存储一个物体多方面的信息时使用对象
如果我们需要存储多个同类物品，每个物体都具备多方面信息时选择数组里包含对象[ {},{},{} ]

1.什么是对象

• JS中的一种数据类型 可以理解为一种无序的数据集合，数组是有序的数据集合

• 用来描述某个事物，例如描述一个人
  ->如果用多个变量保存比较散，用对象比较统一

• 比如描述 班主任 信息
  静态特征 :姓名，年龄，身高，性别，爱好 =>可以使用数字，字符串，数组，布尔类型等表示
  动态行为 :(点名，唱，跳，rap)=> 使用函数表示

2.对象使用

语法: . 后面跟着的东西不会被识别成变量,而[ ]不会
查：
对象.属性名
对象[ ’ 属性名 ’ ]
选哪种？
95%以上的情况都用对象.属性名，当属性的名字是用变量来表示的情况用第二种
改：
对象.属性名=新值
对象[属性名]=新值
新增:
对象.不存在的熟悉=值
对象[不存在的熟悉]=值
删除:
delete 对象.属性
delete 对象[属性]
循环遍历:

for(let k in 对象){
//k所代表的是对象的属性名
}

2.1 对象声明语法：

let 对象名={}

2.2 对象有属性和方法组成

属性：信息或叫特征(名词).比如：手机尺寸，颜色…
方法：功能或叫行为(动词).比如：手机打电话，发短信…

2.3 属性

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

属性都是成对出现的，包括属性名和值，它们之间使用英文：分隔
多个属性之间使用英文 ，分隔
属性就是依附在对象上的变量 (外面是变量，对象内是属性)
属性名可以使用" "或 ’ ’ ，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

内置对象

数学对象（Math）

console.log(Math.PI) //圆周率

Math.ceil(数据) //数据的向上取整

Math.floor(数据) //数据的向下取整

Math.round(数据)//四舍五入

Math.abs(数据) //取数据的绝对值

Math.pow() //幂运算
console.log(Math.pow(3, 2)) //幂运算 3的平方

//形参用arguments,小括号里的是实参
Math.max(数据1，数据2, ...数据n) //最大值
Math.min(数据1，数据2, ...数据n) //最小值

//可以帮助我们产生一个随机数,随机数的范围是0~1,包含0不包含1
//功能：接受俩个数字，产生一个这俩个数字之间的随机整数
Math.random()//随机数

//俩个数（M,N）之间的随机整数
M+Math.floor(Math.random()*(M-N+1))

JS第八天

1.回顾

arr.sort()内部运行代码和order

数据的存储结构：

基本的数据类型:number string boolean undefined null
引用数据类型:object:数组,对象{}
基本数据类型和引用数据类型 ,在内存中的存储结构

let num1 = 100
        let str1 = 'hello'
        let arr = [1, 2, 3, 4, 5]
        let obj = {
            name: 'zs',
            age: 18
        }

内存空间：栈空间 堆空间
1.栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
简单数据类型存放到栈里面
栈空间：存的基本数据类型
堆(操作系统):存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收.
堆空间：存的引用数据类型

引用数据类型：堆里面存的数据本身，栈：能够找到堆空间中的某个地址

结论:引用数据类型在赋值的时候，其实赋值的是地址

结果：zs
只要在代码中遇到了{ }，就是新的对象
只要在代码中遇到了[ ],就是新的数组

声明变量的关键字

var的特点：
1.可以先使用在定义
2.不存在块级作用域，只有函数作用域

let 和 const 的区别

const常量：特点：在初始化完后，他的值不能改变（在引用数据类型的情况下，我们是可以去修改对象或数组内部的东西，但是我们不能对变量整体进行赋值）

以后再声明变量的时候，使用let 还是const？
优先使用const，当发现这个变量需要修改了，再把这个const变成let

对象套对象的结构

// 创建一个对象: 姓名是zs,年龄是18岁,有一个老婆,老婆的姓名是ls,年龄是21, 老婆有一只狗,叫做大黄,2岁了
    let obj = {
      name: 'zs',
      age: 18,
      wife: {
        name: 'ls',
        age: 21,
        dog: {
          name: '大黄',
          age: 2
        }
      }
    }
    obj.wife.name //ls

JS课程回顾

1. 同一个HTML中不同的script标签共享全局变量
2. 控制台打印的细节：
   1.打印对象或者数组的时候，会在打印的左边有一个折叠的箭头，如果打开三角箭头此时此刻会把这个对象或者数组的最新信息呈现在下方
3. 函数名其实也是一个变量
4. 函数的形参也是一个变量，由调用的时候通过实参赋值的