javascript

JavaScript

JavaScript简介

javascript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
作用：
网页特效（监听用户的一些行为让网页做出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台的数据，渲染到前端）
服务端编程（node.js）

JavaScript的组成

ECMAScript：
规定了js基础语法核心知识
比如：变量、分支语句、循环语句、对象等等
Web APIs：
DOM：操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

JavaScript书写位置

内部JavaScript

直接写在html文件里，用script标签包住

规范：script标签卸载上面

拓展：alert(‘你好，js’)页面弹出警告对话框

注意事项：我们将 script放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML

如果先加载的JavaScript期望修改其下方的HTML，那么它可能由于HTML尚未被加载而失效

因此，将JavaScript代码放在HTML页面的底部附近通常是最好的策略

外部JavaScript

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中

注意事项：

script标签中间无需写代码，否则会被忽略

外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读，因此这是个好习惯

行内JavaScript

代码写在标签内部

语法：注意：此处作为了解即可，但是后面VUE框架会用这种模式

<button onclick="alert('弹出提示')">按钮</button>

JavaScript输入输出语句

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

 <script>
   // 输出内容
    document.write('我是div标签')
    document.write('<h1>我是标题</h1>')
 </script>

作用：向body输出内容
注意：如果输出的内容写的是标签，也会解析成网页元素
语法2：

 <script>
   // 弹出警示框
   alert('要出的内容')
 </script>

作用：页面弹出警告对话框

语法3：

<script>
  console.log('控制台打印')
</script>

作用：控制台输出语句，程序员调试

输入语法

语法：

<script>
  prompt('请输入您的姓名：')
</script>

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

JavaScript代码执行顺序

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

字面量

在计算机科学中，字面量（literal）是计算机中描述/事/物
比如：
我们工资是：1000 此时 1000 就是数字字面量
‘黑马程序员’ 字符串字面量
还有接下来我们学的 [] 数组字面量 {} 对象字面量 等等

变量

变量就是一个装东西的盒子
通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆
注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器，可以理解为是一个个用来装东西的盒子
1.声明变量：想要使用变量，首先需要创建变量（也称为声明变量或者定义变量）
2.let 变量名
声明变量有两部分构成：声明关键字、变量名（标识）
let即关键字（let:允许、许可、让、要），所谓关键字就是系统提供的专门用来声明（定义）变量的语句
举例：

let age

我们声明了一个age变量
age即变量的名称，也叫标识符

变量赋值

简单点，也可以声明变量的时候直接完成赋值，这种操作也称为变量初始化

// 声明了一个age变量，同时里面存放了18这个数据
let age = 18

更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它

// 声明了一个age变量，同时里面存放了18这个数据
let age = 18
// 变量里面的数据发生变化更改为19
age = 19
// 控制台打印age结果为19
console.log(age)

注意：let不允许多次声明一个变量

声明多个变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它
语法多个变量中间用逗号隔开

let age = 18, uname = 'pink'

说明：看上去代码成都更短，但并不推荐这样。为了更好的可读性，请一行声明一个变量

// 多行变量声明有点长，但更容易阅读
let age = 18
let uname = 'pink'

变量案例-交换变量的值

需求：有2个变量：num1里面放的是10，num2里面放的是20.最后变为num2里面放的是20，num2里面放的是10
目的：练习变量的使用，为后面的冒泡排序做准备
分析：核心思路，使用一个临时变量用来做中间存储
步骤：
声明一个临时变量temp
把num1的值赋值给temp
num2的值赋值给num1
把temp的值给num2
没了临时变量不用自动销毁

变量的本质

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

变量命名规则与规范

规则：必须遵守，不遵守报错
不能使用关键字，有特殊含义的字符，js内置的一些英语单词。例：let、if等等。只能用下划线、字符、数字、$组成，且数字不能为开头
字母严格区分大小写，如Age和age是不同的变量
规范：建议，不遵守不会报错，但不符合业内通识
起名要有意义、遵守小驼峰命名法、第一个单词首字母小写，后面每个单词首字母大写。例：userName

变量拓展-let和var的区别

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

变量拓展-数组

数组（Array）一种将一组数组存储在单个变量名下的优雅方式

// arr 是变量  []里面是数组字面量
let arr = []

数组的基本使用

能够声明数组并且能够获取里面的数据
声明语法：

let 数组名 = [数据1, 数据2, ...., 数据n]

例：

let names = ['小明', '小刚', '小红','小米']

数组是按顺序保存，所有每个数据都有自己的编号
计算机中的编号是从0开始，所以小明的编号为0，小刚的编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

  // 1.声明数组 有序
    let arr = ['刘德华', '张学友', '黎明', '郭富城']
    // 2.使用数组 数组名[索引号] 从0
    console.log(arr);
    console.log(arr[1]); //张学友

数组的一些术语

元素：数组中保存的每个数据都叫数组元素
下标：数组中数组的编号
长度：数组中数据的个数，通过数组的length书写获得

 let arr = ['刘德华', '张学友', '黎明', '郭富城']
 console.log(arr[1]); //张学友
 console.log(arr.length) // 4

常量

概念：使用const声明的变量成为“常量”
使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let
命名规范：和变量一致
常量使用：

// 声明一个常量
const G = 9.8
// 输出这个常量

注意：常量不允许重新赋值，声明的时候必须赋值（初始化）
小技巧：不需要重新赋值的数据使用const

数据类型

计算机程序可以处理大量的数据，给数据分类更加充分和高效的利用内存、也更加方便程序员使用数据

基本数据类型

number 数字型
即我们数学中学习到的数字，可以是整数、小数、正数、负数

let age = 18 // 整数
let price = 88.99 // 小数

JavaScript中的正数、负数、小数等 统一称为数字类型
注意事项：js是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认。java是强数据类型，例如：int a = 3 必须是整数

算术运算符

数学运算也叫算术运算符，主要包括加、减、乘、除、取余（求模）
+：求和
-：求差
*：求积
/：求商
%：取模（取余数）开发中经常作为某个数字是否被整除

算术运算符优先级

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级
JavaScript中优先级越高越先被执行，优先级相同时以书丛左向右执行
乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用()可以提升优先级
总结：先乘除后加减，右括号先算括号里面的
NaN 代表一个计算错误，它是一个不正确的或者一个未定义的数学操作所得到的结果

console.log('老师'-2) // NaN

NaN是粘性的，任何对NaN的操作都会返回NaN

console.log(NaN-2) // NaN

字符串类型

string 字符串型
通过单引号(‘’)、双引号(“”)或则反引号(“)包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号

let uname = '小明'  //单引号
let gender = "男"  //双引号
let goods = `小米`  // 反引号
let tel = '13681113456' // 看上去是数字，但是引号包裹的就是字符串
let str = '' // 这种情况叫空字符串

注意事项：无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自己嵌套自己（口诀：外双内单，外单内双）
必要时可以使用转义符，输出单引号或双引号

字符串拼接

场景：+运算符可以实现字符串的拼接
口诀：数字相加，字符相连

document.write('我叫' + '刘德华')  // 我叫刘德华
let uname = '刘德华'
let song = '忘情水'
document.write(unamer+sonog) // 刘德华忘情水

模板字符串

使用场景：在拼接字符串和变量，在没有它之前，要拼接变量比较麻烦

document.write('大家好，我叫' + name + '岁' + age + '岁')

语法：“(反引号)
在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
在内容拼接变量时，用${}包住变量

document.write(`大家好，我叫${
     
     
              name}，今年${
     
     
              age}岁`)

布尔类型

boolean 布尔型
表示肯定或否定时在计算机中对应的是布尔类型数据
它有两个固定的值true和false，表示肯定的数据用true（真），表示否定的数据用false（假）

let isCool = true
console.log(isCool) // true

未定义类型

undefined 未定义型
未定义类型是笔记特殊的类型，只有一个值undefined
只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined

let age // 声明变量但是未赋值
document.write(age) // 输出undefined

工作中的使用场景
我们开发中经常声明一个变量，等待传送过来的数据
如果我们不知道这个数据是否传递过来，此时我们可以通过这个变量是不是undefined，就判断用户是否有数据传递过来

null空类型

null 空类型
JavaScript中的null仅仅是一个代表“无”、“空”或“值未知”的特殊值
null和undefined区别：
undefined表示没有赋值
null表示赋值了，但是内容为空
null开发中的使用场景：
官方解释：null作为尚未创建的对象
大白话：将来有个变量里面存放的是一个对象，但是对象还没有创建好，可以先给null

检测数据类型

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

let num = 10
console.log(typeof num) // number
let str = 'pink'
console.log(typeof num) // string
let flag = false
console.log(typeof num) // boolean
let un
console.log(typeof un) // undefined
let obj = null
console.log(typeof obj) // object

引用数据类型

object 对象

数据类型转换

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

console.log('10000'+'2000') //100002000

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换
规则：
+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算，比如-*/等都会把数据转成数字类型
缺点：转换类型不明确，靠经验才能总结
小技巧：
+号作为正号解析可以转换成数值型
任何数据和字符串相加结果都是字符串

显示转换

编写程序时过度依靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律
为了避免隐式转换带来的问题，通常根逻辑需要对数据进行显示转换
概念：自己写代码告诉系统转成什么类型
转化为数字型：
Number(数据)
如果字符串内容有非数字，转换失败时结果为NaN（Not Number）既不是一个数字
NaN也是number类型的数据，代表非数字
parseInt(数据) 只保留整数
parseFloat(数据) 可以保留小数

赋值运算符

赋值运算符：对变量进行赋值的运算符
已经学过的赋值运算符：= 将等号右边的值给到左边，要求左边必须是一个容器
其他赋值运算符：
+=
-=
*=
/=
%=
使用这些运算符可以在对变量赋值时进行快速操作

一元运算符

自增：符号：++（作用：让变量的值+1）
自减：符号：–（作用：让变量的值-1）
使用场景：经常用于计数来使用，比如进行10次操作，用它来计算进行了多少次了

自增运算符的用法

前置自增：

let num = 1
++num

每执行一次，当前变量数值加1

其作用相当于num+=1

后置自增：

let num = 1
num++

每执行一次，当前变量数值加1
其作用相当于num+=1

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

前置自增：先自加再使用（记忆口诀：++在前先加）

let i = 1
console.log(++i + 2) // 4
// 注意：i是2
// i先自加1，变成2之后，再和后面的2相加

后置自增：先使用再自加（记忆口诀：++在后后加）

let i = 1
console.log(i++ + 2) // 3
// 注意：此时i是1
// 先和2相加，先运算再输出完毕后，i再自加是2

比较运算符

比较运算符的介绍
使用场景：比较两个数据大小、是否相等
比较运算符：

字符串比较，是比较的字符对应的ASCII码
从左往右依次比较
如果第一位一样再比较第二位，以此类推
比较的少，了解即可
NaN不等于任何值，包括它本身
涉及“NaN”都是false
尽量不要比较小数，因为小数精度有问题
-不同类型之间比较会发生隐式转换
最终把数据隐式转换转成number类型再比较
所以开发中，如果进行准确的比较我们更喜欢=或者!

逻辑运算符

使用场景：逻辑运算符用来解决多重条件判断
正确写法：num > 5 && num < 10
&& 逻辑与 日常读法：并且 特点：两边都为true，结果才为true。一假则假
|| 逻辑或 日常读法：或者 特点：符号两边有一个true就为true。一真则真
! 逻辑非 日常读法：取反 特点：true变false false变true。真变假，假变真

运算符优先级

表达式和语句

表达式时可以被求值的代码，JavaScript引擎会将其计算出一个结果

x - 7
3 + 4
num++

语句：语句是一段可以执行的代码。比如：prompt()可以弹出一个输入框，还有if语句、for循环语句等等、

区别

表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧
表达式：num=3+4
语句：而语句不一定有值，所以比如alert() for和break等语句就不能被用于赋值
语句：alert() 弹出对话框 console.log() 控制台打印输出
某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分（例如continue语句）

分支语句

程序三大流程控制语句
以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构

有的时候要根据条件选择执行代码，这种就叫分支结构

某些代码被重复执行，就叫循环结构

分支

分支语句可以让我们有选择性的执行想要的代码
分支语句包含：

if单分支语句

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

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

括号内的条件为true时，进入大括号里面执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换为布尔类型
如果大括号只有一个语句，大括号可以省略，但是不提倡这么做
除了0 所有的数字都为真 true
除了’’ 所有的字符串都为真 true

if双分支语句

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

if多分支语句

使用场景：适合于有多个结果的时候，比如学习成绩可以分为：优、良、中、差

if (条件) {
   
   
            
  代码1
} else if(条件2){
   
   
            
  代码2
}
else if(条件3){
   
   
            
  代码3
}
else {
   
   
            
  代码n
}

三元运算符

使用场景：其实是比if双分支更简单的写法，，可以使用三元表达式
符号：?与:配合使用
语法：

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

一般用来取值

switch语句

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

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

循环语句

循环：重复执行某一些操作

while循环

循环：重复执行一些操作，while：在…期间，所以while就是在满足条件期间，重复执行某些代码
比如我们运行相同的代码输出5次

while循环基本语法

while (循环条件) {
   
   
            
  要重复执行的代码(循环体)
}

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

循环三要素

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程，所以while循环需要具备三要素：
变量起始值
终止条件（没有终止条件，循环会一直执行，造成死循环）
变量变化量（用自增或自减）

循环退出

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

for循环

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

for (变量起始值; 终止条件; 变量变化量) {
   
   
            

}

了解：
while(true)来构造“无限”循环，需要使用break退出循环
for(;;)也可以构造“无限”循环，同样需要使用break退出循环

for循环和while循环区别

当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环

for循环嵌套

一个循环里面套一个循环，一般用在for循环里

for(外部声明记录循环次数的变量; 循环条件; 变化值){
   
   
            

  for(内部声明记录循环次数的变量; 循环条件; 变化值){
   
   
            
      循环体
  }
}

操作数组

数组本质是数据集合，操作数据无非就是增、删、改、查语法：

【查】查询数组数据

数组[下标]
我们称为访问数组数据

【改】重新赋值

数组[下标]=新值

  let arr = []
    arr[0] = 1
    arr[1] = 5
  // 修改
  let arr1 = ['pink','red','green']
  arr[0]='hotpink'

【增】数组添加新的数据

arr.push(新增的内容)

数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度(重点)
语法：arr.push(元素1,…,元素n)

let arr = ['red','green']
arr.push('pink')
console.log(arr) // ['red','green','pink']

arr.unshift(新增的内容)

arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回数组的长度

let arr = ['red','green']
arr.unshift('pink')
console.log(arr) // ['pink'],'red','green']

【删】删除数组中的数据

arr.pop()

数组.pop()方法从数组中删除最后一个元素，并返回该该元素的值
语法：

let arr = ['red','green']
arr.pop()
console.log(arr) // ['red']
<