JavaScript介绍

JS是什么？

1.是编程语言，运行在客户端（浏览器）的==编程语言==
2.作用：

• 网页特效
• 表单验证
• 数据交互
• 服务端编程node.js

3.组成：

• ECMAScript+Web APIs（DOM操作文档+BOM操作浏览器）

  JS的书写位置

1.内部

<body> 
  <script>
  alter('hi,js')
  </script>
</body>

• 在</body>的上方写，即html的底部

2.外部

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

• 适合代码多
• 通过src引入外部文件
• 外部js中不要写代码，会被忽略

3.内联

<body> 
  <button onclick="alter('123321')">click me</button>
</body>

• vue框架内使用

JS结束符;要么都写，要么都不写

JS语法

1.输出语法：

document.write('content')

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

  alter('hi,js')
  

• 页面弹出警告对话框

  console.log('console print')
  

• 控制台输出语法，程序员调试使用

2.输入语法：

prompt('please input:')

prompt & alert 会优先执行

字面量

1.定义：字面量是计算机中描述事/物
2.例子：

• 1000元工资中“1000”是数字字面量
• ’小明‘是字符串字面量
• 对象字面量....

  变量是什么？

• 变量是一个储存数据的容器

  变量的基本使用

1.声明变量：
想使用变量，先创建变量

• 语法：

  let 变量名
  

2.赋值：

• 语法：

  变量名=字面量
  

3.更新变量：

• 语法：

  let 变量名=字面值
  变量名=新字面值
  

4.声明多个变量：

• 语法：

  let age=18,name='alis'
  console.log(age,uname)
  

建议一行一行写

变量的本质

• 变量是程序在内存中申请的一块用来存放数据的小空间

变量的命名规则与规范

1.规则：

• 不能用关键字
• 只能用==下划线==，字母，数字，$组成，且==数字不能开头==
• 字母严格区分大小写

2.规范：

• 起名要有意义
• 小驼峰命名法

var&let:
var 是 ES5 的变量声明方式，具有函数作用域，==可以重复声明==，并且存在==变量提升==；
let 是 ES6 新增的声明方式，具有==块级作用域==，不能重复声明，并且不存在变量提升，开发中推荐使用 let 或 const。

数组Array

• 作用：将一组数据存储起来
• 语法：

  //声明数组
  let arr=['A','B','C','D']
  //使用数组
  console.log(arr[0])
  

常量的基本使用

• 概念：const声明的变量

• 使用场景：某个变量永远不会改变，用const声明而不是let

  数据类型

• 目的：数据分类可以帮助我们使用数据；有利于充分利用内存

引用数据类型	基本数据类型	解析	tips
object对象	number数字型	包括整数和小数，负数；	NAN代表一个计算错误。是一个不正确的或者未定义的数学操作所得到的结果；（NAN是粘性的，任何对NAN的操作都会返回NAN）
	string字符串型	使用引号（单，双，反）包裹的数据	引号包引号的情况下，只能外双内单或者外单内双；“+”可以拼接字符串
	boolean布尔型	有两个固定值：true和false（布尔型自变量）
	==undefined==未定义型	未被定义的就是undefined：声明了但是没有给值。	ps：如果检测变量是undefined就说明值没有传递过来
	==null==空型	“无”，“空”，“值未知”的特殊值	如果一个变量里面确定存放的是对象，如果还没有准备好对象，可以放个null

null和undefined的区别：
1.undefined 表示没有赋值
2.null表示赋值了但是内容为空

模板字符串

let age=18
document.write(`我今年${age}岁了`)

JS是一种弱数据类型的语言；只有赋值了才知道是什么数据类型

检测数据类型

• 控制台输出语句：

  let age=18
  let name="chen"
  let flag=false
  let buy
  console.log(age)
  console.log(name)
  console.log(flag)
  console.log(buy)
  

控制台语句经常用于测试结果来使用
数字型和布尔型的颜色是蓝色，字符串和undefined颜色为灰色

• typeof关键字检测数据类型

  let age=18
  let name="chen"
  let flag=false
  let buy
  console.log(typeof age)
  console.log(typeof name)
  console.log(typeof flag)
  console.log(typeof buy)
  

支持两种语法：(1) typeof(x) (2)typeof x

类型转换的作用

JS是弱数据类型，JS也不知道变量到底属于那种数据类型，只有赋值了才清楚。

使用表单，prompt获取的数据默认是字符串类型的，此时就不能直接简单的进行加法运算

隐式转换

某些运算符被1执行时，系统内部==自动==将数据类型进行转换，这种转换称为隐式转换

• 规则：
  • +号两边只要有一个是字符串，就会把另外一个转换成字符串
  • 除了+以外的算术运算符，比如- * / 都会把数据转换成数字类型
• 缺点：转换不明显
• tips：
  • +号作为正号解析可以转换成数字型
  • 任何数据和字符串相加结果都是字符串

    console.log(11 + 11)
            console.log('11' + 11)
            console.log(11 - 11)
            console.log('11' - 11)
            console.log(1 * 1)
            console.log('1' * 1)
            console.log(typeof '123')
            console.log(typeof +'123')
            console.log(+'11' + 11)
    

    显式转换

    隐式转换不严谨，故产生显式转换

    概念

    自己写代码告诉系统转换成什么类型

    转换成数字型

• Number（数据）
  • 转成数字类型
  • 如果字符串里有非数字，转换失败时结果是NaN（Not a Number）即不是一个数字
  • NaN也是number类型的数字，代表非数字
• parseInt（数据）
  • 只保留整数
• parseFloat（数据）
  • 可以保留小数

    赋值运算符

    是对变量赋值的运算符

• += ： a+=b即a=a+b
• -= ： a-=b即a=a-b
• /= ： a /=b即a=a /b
• %= ： a%=b即a=a%b

  一元运算符

  能够使用一个运算符做自增运算

• 自增
  • 前置自增 ++a 先加一，再使用
  • 后置自增 a++ 先使用，再加一
• 自减 a--
  • 前置自减 --a 先减一，再使用
  • 后置自减 a-- 先使用，再减一

    let i=1
    console.log(i++ + ++i + i)
    

    比较运算符

• <

• =

• <=
• == 左右两边的值是否相等
• === 左右两边是否类型和值都相等
• ！=

  NaN不等于任何值，包括它自己
  == 会发生隐式转换;=== 不会发生隐式转换

  console.log(5 == '5'); // true
  5（number）
  '5'（string）
  ↓ 隐式转换
  5 == 5
  ↓
  true
  

  逻辑运算符

• 逻辑与&& 一假则假
• 逻辑或|| 一真则真
• 逻辑非！ 真变假，假变真

运算符优先级运算符

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ -- ！
3	算数运算符	先* / % 后+-
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 再||
7	赋值运算符	=
8	逗号运算符	，

表达式和语句

[[输出语句中的易错点]]

• 表达式：是一个可以被求值的代码

  x=7
  3+4
  num++
  

• 语句：是一段可以执行的代码,不一定有值

  prompt,if,else

  分支语句

  程序三大流程控制的语句之一（顺序，分支，循环） 是选择性执行代码；
• ==if分支语句==

  <script>
          let year = +prompt('请输入年份')
          if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0)         {
            alert('闰年')
           }
          else {
              alert('平年')
           }
      </script>
  

  注意 year需要前置+转换成数字型

  //多分支
  if(条件1){
  代码1
  }
  else if(条件2){
  代码2
  }
  else if(条件3){
  代码3
  }
  else{
  代码n
  }
  

• ==三元运算符==

  是比if双分支更简单的写法，可以使用三元表达式
  ？和：配合使用
  一般用来取值

  条件?满足条件执行的代码：不满足条件执行的代码
  3>5?alert('真的'):alert('假的')
  //两个数取最值
          let num1 = +prompt('input one number:')
          let num2 = +prompt('input one number:')
          console.log(num1 > num2 ? num1 : num2)
          //or
          num1>num2?alert(`最大值是：${num1}`):alert(`最大值是：${num2}`)
  //数字补0
          let num1 = +prompt('输入一个数：')
          // num1 < 10 ? alert(`0${num1}`) : alert(`${num1}`)
          num1=num1 < 10 ? 0 + num1 : num1
          alert(num1)
  

• ==switch语句==

  switch case语句一般用于等值判断，不适合区间判断
  switch case语句一般需要配合break关键字使用，没有break会造成case穿透
  当分支比较少时，用if...else语句执行效率更高
  当分支比较多时，用switch语句执行效率高，而且结果更清晰

释义：找到小括号里数据全等的case值，并执行里面对应的代码
若是没有全等=== 的则执行default里面的代码

switch(数据){
       case 值1：
       代码1
       break//退出switch
       
       case 值2：
       代码2
       break
       
       case 值3：
       代码3
       break
    
       default：
       代码n
       break
}

注意 case后面有空格

循环

while

重复执行一些操作

• while基本语法

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

  和if语句很像，都要满足小括号里面的条件为true时才会进入循环体执行代码
  while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，知道括号内条件不满足，即跳出
  while（1）——来构造“无限”循环，需要使用break来
  退出循环

• 循环三要素：
  • 变量起始值
  • 终止条件
  • 变量变化量（自增或自减）
    ```js
    let i=1
    while(i<=3){
    document.write('我会循环三次
    ')
    i++
    }

//页面输入1~100
 let i = 1
 while (i <= 100) {
     document.write(i + <br>)
     i++
 }
 
//计算从1加到100的1总和并输出
 

//计算1~100之间所有偶数的和
let i = 1
let sum = 0
while (i <= 100) {
     if (i % 2 === 0) {
        sum = sum +1
        }
i++
}
 document.write(sum)

### 退出循环
- break：退出循环
- contiune：结束本次循环，继续下次循环
```js
//模拟存取钱
 let money = 2000 //注意在循环外
   while (true) {
     let re = +prompt(`
        请选择您的操作 
        1.存钱
        2.取钱
        3.查看余额
        4.退出
    `)
            if (re === 4) break
            switch (re) {
                case 1:
                    let cun = +prompt('请输入存款金额')
                    money = money + cun
                    break
            }
            switch (re) {
                case 2:
                    let qu = +prompt('请输入取款金额')
                    money = money - qu
                    break
            }

            switch (re) {
                case 3:
                    alert(`当前银行卡余额是：${money}`)
                    break
            }
        }

for

for循环的基本使用

• for循环语法
  ```js
  for(变量起始值；终止条件；变量变化量1){
  //循环体
  }

//页面中打印5个小星星
 for (let i = 1; i <= 5; i++) {
            document.write('*')
        }
       
//循环数组
  let arr = ['马超', '赵云', '张飞', '关羽', '黄忠']
        for (let i = 0; i <= arr.length - 1; i++) {
            document.write(arr[i])
        }        

- 退出循环for（ ； ；）也可以狗砸
    - continue：退出本次循环，一般用于排除或者跳过某一个选项，可以使用contiune（直奔i++）
    - break退出整个for循环，一般用于结果已经得到，后续的循环不需要的时候可以使用 （退出整体）                                          
### for循环嵌套
- 从外向里循环
```js
 //外层循环控制行，内层控制列
        for (let i = 1; i <= 5; i++) {
            for (let j = 1; j <= 5; j++) {
                document.write(`*`)
            }
            document.write('<br>')
        }
 //打印倒三角
 for (let i = 1; i <= 5; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`*`)
            }
            document.write('<br>')
        }
        
//打印乘法表
 span {
            border: 1px solid black;
            display: inline-block;
            text-align: center;
        }
        
  for (let i = 1; i <= 9; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`<span>${j}*${i}= ${+ i * j} </span>`)
                //注意：span不是块级元素
            }
            document.write('<br>')
        }

for和while的区别

明确循环次数的时候用for，不确定时用while

数组

数组是什么?

[[数组]] 一种可以顺序保存数据的数据类型

数组的基本操作

1.声明语法

//1.字面量声明数组
let 数组名=[数据1，数据2，...,数据n]
//2.使用new Arrayy 构造函数声明 了解
let arr=new Array(数据1，数据2，...,数据n)

2.取值语法

let names=['1','2','3']
names[0] //1

3.一些术语

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

4.遍历数组
目的：能够遍历输出数组里面的元素

• 用循环把数组中每个元素都访问到，一般会用for循环遍历
• 语法：

  for(let i=0;i<数组名.length;i++){
   数组名[i]
  }
  //eg:
  for(let i=0;i<数组名.length;i++){
   document.write(数组名[i])d
  }
  

//数组求和与平均值
 let arr = [2, 6, 1, 7, 4]
        let sum = 0
        for (let i = 0; i < arr.length; i++) {
            sum = sum + arr[i]
        }
        let ave = sum / arr.length
        document.write(`${sum}\n${ave}`)
 //求数组的最值
   let arr = [2, 6, 1, 77, 52, 25, 7]
        //let max = 0 
        let max=arr[0]
        for (let i = 1; i < arr.length; i++) {
            max = arr[i] > max ? arr[i] : max
        }
        document.write(max)
     
    let arr = [2, 6, 1, 77, 52, 25, 7]
        let min = arr[0]
        for (let i = 1; i < arr.length; i++) {
            min = arr[i] < min ? arr[i] : min
        } 
        document.write(min)

操作数组

增

数组.push  //将一个或多个元素添加到数组尾部，并返回新长度
arr.push(e1,e2,e3...) 
eg:
let arr = ['pink', 'hotpink']
       // 新增push 推
        console.log(arr.push('deeppink'))  //返回的是新数组的长度
        console.log(arr)

删

//前提：
let arr=['pink','red','blue','white']

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

  arr.pop() //删的white
  arr.pop() //删的blue
  

• shift()删除第一个元素

  arr.shift() //删除pink
  

• splice()删除指定元素

  arr.splice(1,1)
  //splice（起始位置-索引号，删除几个）；从索引号为1开始删，删除一个
  

  改

  let arr=['pink','red','white']
  //单个修改
  arr[0]='hotpink'
  //整体修改
  for(let i=0;i<arr.length;i++){
  arr[i]=arr[i]+'teacher'
  }
  

  查

数组案例

数组筛选

 let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
        let newArr = []
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                newArr.push(arr[i])
            }
        }

        for (let j = 0; j < newArr.length; j++) {
            document.write(newArr[j])
            document.write('<br>')
        }

数组去0

let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
        let newArr = []
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] !== 0) {
                newArr.push(arr[i])
            }
        }

        for (let j = 0; j < newArr.length; j++) {
            document.write(newArr[j])
            document.write('<br>')
        }

渲染柱形图

<script>

        let arr = []

        for (let i = 0; i < 4; i++) {

            arr[i] = prompt(`请输入${i + 1}季度的数据：`)

        }

        //盒子

        document.write(`<div class="box">`

        )

  

        //盒子中间

        for (let i = 0; i < 4; i++) {
            document.write(`
               <div style="height:123px;">
                <span>${arr[i]}</span>
                <h4>一季度</h4>
                </div>
            `)
        }
    </script>

冒泡排序

let arr=[5,4,3,2,1]
for(let i=0;i<arr.length;i/+++){
for(let j=0;j<arr.length;j++){
//开始交换，但是第一个数大于第二个数才交换
if(arr[j]>arr[j+1]){
//交换2个变量
let temp=arr[j]
arr[j]=arr[j+1]
arr[j+1]=temp                                                                
}

数组排序

• 数组sort（）方法可以排序
• 语法：
  ```js
  let arr=[4,2,5,1,3]
  //升序
  arr.sort(function(a,b){
  return a-b
  })
  //降序
  arr.sort(function(a,b){
  return b-a
  })

# 一、`' '`、`" "` 和 `` ` ` `` 的区别

在 JavaScript 中，单引号、双引号和反引号都可以表示字符串。

### 1. `' '` 和 `" "`

用于表示普通字符串。

```js
document.write('你好')
document.write("你好")

两者效果基本相同。

---

2. 变量不需要加引号

如果要输出变量本身：

let name = '张三'

document.write(name)

输出：

张三

⚠️ 如果写成：

document.write('name')

输出的是：

name

因为 'name' 是字符串，而不是变量。

记忆：

name      // 变量
'name'    // 字符串

---

3. 反引号 ` ` —— 模板字符串

当需要在字符串中插入变量时，可以使用反引号。

let name = '张三'
let age = 18

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

输出：

我叫张三，今年18岁

变量需要放在：

${变量名}

---

二、什么时候使用哪一种？

情况	写法
输出固定文字	'你好'
输出变量	name
输出文字 + 变量	`你好，${name}`
==输出固定 HTML==	'<br>'
多行模板字符串	使用反引号

示例

let price = 20
let num = 3

document.write('商品信息')
document.write(`价格：${price}`)
document.write(`数量：${num}`)

---

三、JavaScript 中的换行

要注意：

JavaScript 字符串中的换行和网页 HTML 中的换行不是完全一回事。

---

1. document.write() 中网页换行使用 <br>

document.write('第一行<br>第二行')

显示：

第一行
第二行

也可以分开写：

document.write('第一行')
document.write('<br>')
document.write('第二行')

注意

<br> 是 HTML 标签，所以需要写成字符串：

document.write('<br>')

不能写：

document.write(<br>)

---

2. \n 表示换行符

在 JavaScript 字符串中：

\n

表示换行。

例如：

let str = '第一行\n第二行'

---

prompt() 中使用 \n

特别适合在弹窗中换行：

let re = +prompt(
    '请选择您的操作：\n1. 存钱\n2. 取钱\n3. 查看余额\n4. 退出'
)

显示：

请选择您的操作：
1. 存钱
2. 取钱
3. 查看余额
4. 退出

---

document.write() 中不要把 \n 当成 HTML 换行

例如：

document.write('第一行\n第二行')

在 HTML 页面中通常不会按照预期显示成两行。

网页中需要换行时，优先使用：

document.write('第一行<br>第二行')

3. document.write() 输出变量 + 换行

网页中换行用 <br>：

let a = 10
let b = 20

document.write(a)
document.write('<br>')
document.write(b)

显示：

10
20

也可以直接写：

document.write(`${a}<br>${b}`)

4. console.log() 输出变量 + 换行

如果是在控制台输出，推荐使用 \n：

let a = 10
let b = 20

console.log(`${a}\n${b}`)

结果：

10
20

---

四、空格

1. 普通空格

直接输入空格：

document.write('你好 世界')

---

2. HTML 中多个连续空格

HTML 默认会折叠连续空格。

例如：

document.write('你好     世界')

页面中通常不会保留这 5 个空格。

如果希望保留多个空格，可以使用：

 

例如：

document.write('你好     世界')

---

3. document.write() 输出变量 + 空格

直接在字符串里加空格：

let a = 10
let b = 20

document.write(`${a} ${b}`)

显示：

10 20

如果想要多个空格，可以用：

document.write(`${a}   ${b}`)

---

---

4. console.log() 输出变量 + 空格

console.log(`${a} ${b}`)

或者更简单：

console.log(a, b)

console.log() 的逗号会自动在变量之间留空格：

let a = 10
let b = 20

console.log(a, b)

输出：

10 20

---

五、速记表

需求	写法
固定文字	'你好'
变量	name
文字 + 变量	`你好${name}`
网页换行	<br>
JS 字符串换行	\n
HTML 空格	&nbsp;

总结

固定文字加引号，变量不加引号，文字+变量用反引号；网页换行用 <br>，字符串换行用 \n。

为什么用函数

代码复用，封装包裹代码逻辑，直接调用函数名

函数使用

//定义
function 函数名(){
   函数体
}

//调用
函数名()

• 函数命名：
  • 和变量命名基本一致
  • 小驼峰
  • 前缀应该为动词

    函数传参

    ```js
    //求从一个数开始到一个数结束之间的所有数字和
    function getSum(start,end){
    let sum=0
    for(let i=start;i<=end;i++){
    sum+=i
    }
    console.log(sum)
    }

getSum(1,50)

- start,end就是==形参==
> 声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
- 1，50是==实参==
> 调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
## 参数默认值：
形参：可以看作变量，但是如果一个变量不给值，默认是什么？（NaN）
```js
 function getAdd(num1, num2) {
            document.write(num1 + num2)
        }
        getAdd()  //结果是NaN
        
        let num1=prompt('请输入起始值：')
        let num2=prompt('请输入结束值：')
        getAdd(num1,num2)

用户不输入实参，可以给出形参默认值，可以默认为0，使得程序更严谨

function getAdd(num1=0,num2= 0) {
            document.write(num1 + num2)
        }
        getAdd()  //结果是0
  //这个默认值只有在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参，否则会默认为undefined

//eg:
function getArrSum(arr = []) {
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            console.log(sum)
        }
        getArrSum([1, 2, 3, 4, 5])

函数返回值

返回值函数概念：

• 当调用某个函数时，这个函数会返回一个结果出来
• 这就是有返回值的函数

  1.很多函数都需要返回值
  2.当函数需要返回数据时，使用return
  3.函数可以没有return，此时默认返回值是undefined

  ```js
  function get(x, y) {
              return
              x + y
          }
          let sum = get(1, 2)
          console.log(sum) //undefined

       
function get(x, y) {
            return x + y
        }
        let sum = get(1, 2)
        console.log(sum) //返回值返回给了函数调用者

求最大值函数
```js
function getMax(num1 = 0, num2 = 0) {
            let max = num1 > num2 ? num1 : num2
            return max
        }
        console.log(getMax(67, 345))

求数组最大值

 function getMaxArr(arr = []) {
            let max = arr[0]
            for (let i = 0; i < arr.length; i++) {
                max = arr[i] > max ? arr[i] : max
            }
            return max
        }
        console.log(getMaxArr([3, 6, 3, 8, 5, 89, 235, 654, 76, 35]))

作用域

匿名函数