JavaScript基础语法

javascript简介

概念
- JavaScript 是一种运行在客户端（浏览器）的编程语言
作用

1. 网页特效 (监听用户的一些行为让网页作出对应的反馈)
1. 表单验证 (针对表单数据的合法性进行判断)
1. 数据交互 (获取后台的数据, 渲染到前端)
1. 服务端编程 (node.js)

组成
- ECMAscript
- DOM
- BOM

输入输出语法

prompt('输入内容')  			//弹窗输入语法

alert('输入内容')   			//弹窗输出语法

console.log(数值)  			 //控制台打印输出语法

document.write(数值) 			 //页面打印输出语法

注释

//    					 单行注释		
/**/					 多行注释
/***/ 					 文档注释

变量

变量就是一个容器

变量的几种写法

let age								//先声明,再赋值

let age = 10							//声明并直接赋值

let age = 18, uname = 'andy'			              //同时声明多个变量

交换两个变量(示例)

//先声明两个变量 一个临时变量但不赋值
//都是把右边给左边
`let a = 1
let b = 2
let c `
//把a的值装到临时变量c里面,此时a是空
`c = a`
//把b的值给a,此时b为空
`a = b`
//把临时变量c的值给b
`b = c`
交换完成,临时变量自动销毁

//小算法交换  (笔试面试题)
`let a = 1
let b = 2`

`let a = a + b`	//a= 3 b = 2
`let b = a - b`   //a = 3 b = 1
`let a = a - b`	//a= 2  b = 1

命名规范

规则
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：var for while const
- 严格区分大小写
规范
- 变量名必须有意义-见名知意
- 遵守小驼峰式命名法

未声明直接使用会报错

有声明未赋值默认值是undefined

没有使用let声明变量也可以不推荐(会被添加到window对象上)

常量

常量用法 (语法)

const G = 9.8    //不重新赋值的数据使用const

数据类型

概念和作用
- 1. 更加充分和高效的利用内存
- 1. 也更加方便程序员的使用数据
基本数据类型
- Number数值型(数字)
- string字符串(汉字/字母)
  - 单引号
  - 双引号
  - 反引号${}
  - 长度.length
- boolean布尔型
  - true/false
- undefined未定义
  - 如果一个变量声明但是没有初始化(赋值), 那么默认是undefined(不推荐)
- null空引用
  - 对象类型初始化时, 可以赋值为null

引用数据类型

object对象

let book = {
    name:'JavaScript高级程序设置'
    price:98
}

function函数
array数组

null和undefined的区别
- undefined变量声明但是没有初始化(赋值), 那么默认是undefined
- null在对象初始化时会经常使用

操作符

typeo操作符

检测数据类型

数据类型的转换

为什么需要转换
- 从用户得到的数据都是字符串,而字符串和数字相加会变成相连
String类型转换
- 隐式转换
  - +操作, 只要有一个是字符串类型, 另外一个就会自动转成字符串类型
  - ```
  let num = 123
  let numStr = num + ""
```
- 显示转换
  - String( )
Number类型转换
- 隐式转换
  - */
  - 显示转换
    - Number()
Boolean类型转换
- 隐式转换：
  - 直观上为空的内容, 转成Boolean类型就是false
    - 0/""/undefined/null/NaN
  - 其他的值是true
    - 123
- 显示转换：
  - Boolean()
隐式转换的小技巧
- +号作为正号解析可以转换成Number
  - 可以在取数字值的前面加 +
- 任何数据和字符串相加结果都是字符串

算术运算符

加、减、乘、除、(取模/取余) (+, -, *, /, %)

加号上下文
- 如果+号左右只有一个值解析的结果是正号可用于隐式转换
- 如果两边都是数值(Number)类型则是+号运算符
- +号的左右如果有一个数据是字符串数据类型的话那么这个+号会被解析成连接符
优先级: 先乘除后加减

JavaScript流程控制

赋值运算符

赋值运算符符号：
- +=
- -+
- *=
- /=
- %=
变量加1步骤

以前变量加1步骤：                  赋值运算符加1步骤：            
`let num = 1			  `let num = 1
num = num + 1                     num += 1
console.log(num)`                  console.log(num)`
结果：num+1 =2                    结果：num+1 =2
//总结：
//1. =赋值运算符执行过程?
//➢将等号右边的值赋予给左边,要求左边必须是一个容器
//2.+= 出现是为了简化代码,比如让let num=10，num加5怎么写呢?
//➢num +=5

一元运算符(了解)

(自增/自减)符号
- ++
- -.-
前后自增步骤

前置自增:先自加再使用(记忆口诀: ++在前先加)         后置自增:先使用再自加(记忆口诀: ++在后 后加)
let i=1										let i=1		
console.log(++i + 2) 						  console.log(i++ + 2) 
//结果是： 4								  //结果是：3
//注意:i是2                                      //注意:此时的i是1
//i先自加1,变成2之后，在和后面的2相加              //先和2相加，先运算输出完毕后，i再自加是2
总结：
1.只需要一个表达式就可以运算的运算符叫一元运算符
2.自增运算符也是为了简化写法，每次自加1，使用场景是什么?
	➢经常用于计数来使用。用来计算多少次
3.实际开发中，我们一般都是单独使用的，后置++更多
4.前置自增和后置自增独立使用时二者并没有差别!

比较/关系运算符

比较运算符符号:
- >:左边是否大于右边
- <:左边是否小于右边
- >=:左边是否大于或等于右边
- <=:左边是否小于或等于右边
- ==:左右两边值是否相等
- ===:左右两边是否类型和值都相等
- !==: 左右两边是否不全等
比较运算符的介绍和使用
- 使用场景:比较两个数据大小、是否相等
- 比较运算符有隐式转换把'2'转换为2,==号只判断值
- ===号全等判断值和数据类型都一样才行
- 比较运算符返回结果只有2个，true或者false
- =和==和===区别
  - =是赋值
  - ==是判断只要求值相等，不要求数据类型一样即可返回true
  - ===是全等.要求值和数据类型都一样返回的才是true
  - 开发中，请使用===
比较运算符细节
- 字符串比较，是比较的字符对应的ASCII码
  
  从左往右依次比较
  
  如果第一位一样再比较第二位，以此类推
  
  比较的少，了解即可
- NaN不等于任何值，包括它本身
  
  涉及到"NaN “都是false
- 尽量不要比较小数，因为小数有精度问题
  
  不同类型之间比较会发生隐式转换
  
  最终把数据隐式转换转成number类型再比较
  
  所以开发中，如果进行准确的比较我们更喜欢===或者!==

逻辑运算符

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边都为true结果才为true	一假则假
II	逻辑或	或者	符号两边有一个true就为true	一真则真
!	逻辑非	取反	true变false false变true	真变假，假变真

逻辑运算符介绍使用：
- 问: 如果我想判断一个变量num是否大于5且小于10,怎么办?
  
  错误写法: 5< num< 10
  
  使用场景:逻辑运算符用来解决多重条件判断
  
  正确写法: num> 5 && num< 10
运算符优先级

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

逻辑运算符练习：

//需求:用户输入一个，判断这个数能被4整除，但是不能被100整除满足条件,页面弹出true,否则弹出false
//先捋思路：
//1:用户输入
//2:判断条件，看余数是不是0,如果是0就是能被整除，余数不是0,则不能被整除
<script>
	// 用户输入
    `let num = +prompt('请输入一个数字:') `
    // 弹出结果
    `alert(num % 4 === 0 && num % 100 !== 0)`
  //num除4是否等于0 并且 num除100不等于0
</script>

➢If分支语句

if分支语句的语法

//括号内填写true(真),或false(假)
//除了0所有的数字都为真
`<script>
    if (1) {
  console.log( '执行语句')
    }
</script>`

单分支

单分支课堂案例1:用户输入高考成绩,如果分数大于700，则提示恭喜考入家里蹲
`<script>
    // 1.用户输入
    let score = +prompt('请输入成绩')
    // 2.进行判断输出
    if (score >= 700) {					//如果只有一行代码, {}可以省略
    alert( '恭喜考入家里蹲')			//if (条件判断)的隐式转换
    }
</script>`

双分支

需求:用户输入，用户名: 牛豫哲,密码: 123456，则提示登录成功，否则提示登录失败
分析:
1:弹出输入框,分别输入用户名和密码
2:通过if语句判断,如果用户名是牛豫哲,并且密码是123456,则执行if里面的语句，否则执行else里面的语句
<script>
    // 1.用户输入
    let zh = prompt('请输入账号')
    let mm = prompt('请输入密码')
    // 2.打印输出
    if (zh === '牛豫哲' && mm ==='123456'){
      alert('恭喜登录成功')
    }else{
      alert('密码或者用户名错误')
    }
</script>

1:能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年
2:需要逻辑运算符
<script>
    // 1.用户输入
    let year = +prompt('请输入年份')
    // 2.判断输出
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
      alert(`${year}年是闰年`)
    }else{
      alert(`${year}年是平年`)
    }
</script>

多分支

需求:根据输入不同的成绩，反馈不同的评价
注:
1:成绩90以上是优秀
2:成绩70~90是良好
3:成绩是60~70之间是及格
4:成绩60分以下是不及格.
<script>
    // 1.用户输入
    let score = +prompt('请输入成绩:')
    // 2.判断输出
    if (score >=90){
      alert('成绩很棒')
    } else if (score >=70){
      alert('成绩还行')
    } else if (score >=60){
      alert('有点危险')
    } else{
      alert('等为父抽出七匹狼')
    }
</script>

三元运算符

三元运算符的用法跟语法

使用场景:其实是比if双分支更简单的写法，可以使用三元表达式
符号:?与:配合使用
语法:条件?满足条件执行的代码:不满足条件执行的代码
-般用来取值
<script>
      // 打印台输出结果为3.假   前真后假
      let sum = 3 > 5 ? 5 : 3
      console.log(sum)
</script>

三元运算符练习

需求:用户输入2个数,控制台输出最大的值
分析:
1:用户输入2个数
2:利用三元运算符输出最大值
<script>
    // 1.用户输入
    let num1 = +prompt('请您输入第一个数：')
    let num2 = +prompt('请您输入第二个数：')
    // 2.判断输出-三元运算符
    num1 > num2 ? alert(`最大值是：${num1}`) : alert(`最大值是：${num2}`)
</script>

需求:用户输入1个数,如果数字小于10,则前面进行补0，比如09 03 等
分析:
1:为后期页面显示时间做铺垫
2:利用三元运算符补0计算
<script>
    // 1.用户输入
    let num = prompt('请输入一个数字：')
    // 2.判断输出-小于10才补0
    num = num < 10 ? 0 + num : num
    alert(num)
</script>

switch语句

switch语法

<script>
        switch (1) { 
        case 1:
        console.log( '您选择的是1')
        break // 退出switch 
        case 2:
        console. log( '您选择的是2')
        break // 退出switch
        case 3:
        console. log( '您选择的是3' )
        break
        //退出switch
        default: 
        console.log( '没有符合条件的')
        }
    </script>

switch练习

简单计算器
需求:用户输入2个数字，然后输入+-* /任何一个，可以计算结果
分析:
1:用户输入数字
2:用户输入不同算术运算符，可以去执行不同的运算(switch)
<script>
        let num1 = +prompt('请输入任意一个数字')
        let num2 = +prompt('请输入任意一个数字')
        let num3 = prompt('请输入 + - * / 四个符号')
        switch (num3) {
          case '+':
          alert(`两个数加法操作是${num1 + num2}`)
          break
          case '-':
          alert(`两个数减法操作是${num1 - num2}`)
          break
          case '*':
          alert(`两个数乘法操作是${num1 * num2}`)
          break
          case '/':
          alert(`两个数除法操作是${num1 / num2}`)
          break
          default:
            alert('请按规则输入 + - * /')
        }
</script>

While循环

While循环的介绍跟语法

循环:重复执行一些操作， while :在...期间，所以while循环就是在满足条件期间，重复执行某些代码，比如我们运行相同的代码输出5次(输出5句“我学的很棒 ”)。

//While循环基本语法
<script>
    while (循环条件) {
      重复执行的代码(循环体)
    }
</script>
//跟if语句很像， 都要满足小括号里的条件为true才会进入循环体执行代码
//while大括 号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码,然后再回到
//小括号判断条件，直到括号内条件不满足，即跳出

循环退出
- 循环结束:
  
  break:跳出所在的循环
  
  区别:
  
  continue 退出本次循环，一般用于排除或者跳过某一个选项的时候,可以使用continue
  
  break 退出整个循环，-般用于结果已经得到,后续的循环不需要的时候可以使用
While循环三要素
- while循环三要素:
  
  循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
  
  所以，while循环需要具备三要素:
  1. 变量起始值
  2. 终止条件(没有终止条件，循环会一直执行,造成死循环)
  3. 变量变化量(用自增或者自减)
- ```
<script>
   // 1.变量的起始值
   let i = 1
   // 2.终止条件
   while (i <= 3) {
    document.write( '我要循环三次<br>')
    // 3.变量的变化量
    i++
    }
</script> 
```

While循环练习

在页面中打印输出10句“月薪过万”
需求:使用while循环，页面中打印，可以添加换行效果
<script>
    // 1.变量起始值
    let i = 1
    // 2.终止条件
    while (i <= 10){
      document.write('月薪过万 <br> ')
      // 3.变量的变化量
      i++
    }
</script>

需求:使用while循环，页面中打印，可以添加换行效果
1.页面输出1-100
2.计算从1加到100的总和并输出核心思路:
➢声明累加和的变量l
➢每次把i加到l里面
3.筛选偶数 只有偶数才累加
1.<script>
    let i = 1
  //  <!-- 页面输出1~100 -->
  while (i <= 100){
    document.write(`这是第${i}个数 <br>`)
    i++
  }
</script>
2.<script>
    let i = 1
    let l = 0
    while (i <= 100){
      l = i + l

      i++
    }
    console.log(l);
</script>
3.<script>
      let i = 1
      let l = 0
      while ( i <= 100){
        // 筛选偶数 只有偶数才累加
        if ( i % 2 === 0){
          l = l + i
        }
        i++
      }
      console.log(l);
</script>

While循环小案例

需求:页面弹出对话框，‘你爱我吗'，如果输入'爱'，则结束，否则一直弹出对话框
分析:
①:循环条件永远为真，一直弹出对话框
②:循环的时候，重新让用户输入.
③:如果用户输入的是:爱,则退出循环(break)
➢continue 退出本次循环，一般用于排除或者跳过某一个选项的时候,可以使用continue
➢break 退出整个循环，-般用于结果已经得到,后续的循环不需要的时候可以使用
<script>
    while (true){
      let str = prompt('你爱我吗?')
      if (str === '爱'){
        break
      }
    }
</script>

汇总案例

简易ATM取款机

需求:用户可以选择存钱、取钱、查看余额和退出功能

分析:

①:循环的时候，需要反复提示输入框，所以提示框写到循环里面

②:退出的条件是用户输入了4,如果是4,则结束循环，不在弹窗

③:提前准备- -个金额预先存储一-个数额

④:取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额

⑤:输入不同的值，可以使用switch来执行不同的操作

<script>
    // 3.准备一个预存金额
    let money = 100
    // 1.开始循环,输入框写到 循环里面
    while (true){
      let i = +prompt(`
      请您选择操作:
      1.存钱
      2.取钱
      3.查看余额
      4.退出
      `)
      // 2.如果用户输入4 则退出循环
      if ( i === 4 ){
        break
      }
      // 4.根据输入做操作
      switch (i){
        case 1:
          // 存钱
          let cun = +prompt('请输入存款金额')
          money = money + cun
          break
          case 2:
          // 取钱
          let qu = +prompt('请输入取款金额')
          money = money - qu
          break
          case 3:
          // 查看余额
          alert(`您的银行卡余额为${money}元`)
          break
      }
    }
</script>

JavaScript数组

for循环的基本使用

for循环的语法

<script>
            // 打印输出十句
      for(let i = 1; i <= 10; i++ ){
        document.write('键盘敲烂，月薪过万 <br>')
      }
    </script>

for循环和while循环有什么区别呢:
- 当如果明确了循环的次数的时候推荐使用for循环
- 当不明确循环的次数的时候推荐使用while循环
- 目标:掌握for循环重复执行某些代码
  
  退出循环
  
  continue退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
  
  break 退出整个for循环，一般用于结果已经得到,后续的循环不需要的时候可以使用
- 了解:
  
  while(true)来构造“无限”循环，需要使用break退出循环。
  
  for(;) 也可以来构造“无限”循环，同样需要使用break退出循环。

for循环的练习

1.利用for循环输出1~100岁
2.求1-100之间所有的偶数和
3.页面中打印5个小星星
★★★★

1.
<script>
      for(let i = 1; i <= 100; i++){
        document.write(`今年我${i}岁啦！<br>`)
      }
</script>
2.
<script>
      let sum = 0
      for(let i = 1; i <= 100; i++){
      if(i % 2 === 0){
        sum = sum + i
        }
      }
      document.write(`一到一百之间的偶数和是${sum}`)
</script>
3.
<script>
      // 页面中打印5个小星星★★★★
      for (let i = 1; i <= 5; i++){
        document.write('★')
      }
</script>

for循环的最大价值，循环数组

需求:请将数组['马超',‘赵云’，‘张飞'， ‘关羽'，'黄忠']依次打印出来

<script>
      // 遍历数组
      //必须从0开始，因为数组索引号从0开始arr. Length = 6
          //遍历数组|I
          let arr = ['马超','赵云','张飞','关羽','黄忠']
          for (let i = 0; i < arr.length; i++) {
              console. log(arr[i])
            }
</script>

嵌套for循环

嵌套for循环的介绍
- 嵌套for循环就是第二个for循环在第一个循环体内，循环顺序分别是：外层先循环一次，外层循环一次之后内层开始循环，内层需要循环完毕，紧接着条件满足外层接着循环第二次，循环第二次之后，内层继续循环完毕，以此类推，直到循环结束

嵌套for循环练习

计算:假如每天记住5个单词， 3天后一共能记住多少单词?
拆解:
➢第一天:5个单词
➢第二天:5个单词
➢第三天:5个单词

<script>
    // 计算:假如每天记住5个单词， 3天后一共能记住多少单词?
    // 拆解:
    // ➢第一天:5个单词
    // ➢第二天:5个单词
    // ➢第三天:5个单词
    // 第一层循环,循环多少天
    for(let i = 1 ; i <= 3 ; i++ ){
      document.write(`这是第${i}天<br>`)
      // 第二层循环，循环每天背了多少个单词
      for(let j = 1 ; j <= 5 ; j++ ){
        document.write(`这是今天背的第${j}单词<br>`)
      }
    }
</script>

示意图：

数组

数组的介绍

数组: (Array)是一种可以按顺序保存数据的数据类型

为什么要数组?

思考:如果我想保存一个班里所有同学的姓名怎么办?

场景:如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

数组的基本使用

声明语法

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

取值语法

数组名[下标]
例
let names = ['小明'，'小刚'，'小红'，'小丽’，'小米']
names[0] // 小明
names[1] // 小刚
通过下标取数据
●取出来是什么 类型的，就根据这种类型特点来访问

一些术语

➢元素:数组中保存的每个数据都叫数组元素
➢下标:数组中数据的编号
➢长度: 数组中数据的个数,通过数组的length属性获得
let names = ['小明'，'小刚'， '小红'，'小丽’，'小米']
console. log(names[0]) // 小明
console. log( names[1]) //小刚
console. log( names. length) // 5

遍历数组(重点)

遍历数组的练习

需求:求数组[2,6,1,7, 4]里面所有元素的和以及平均值
分析:
1:声明一一个求和变量sum。
2:遍历这个数组，把里面每个数组元素加到sum里面。
3:用求和变量sum除以数组的长度就可以得到数组的平均值。
<script>
    // 需求:求数组[2,6,1,7, 4]里面所有元素的和以及平均值
    // 分析:
    // ①:声明一一个求和变量sum。
    // ②:遍历这个数组，把里面每个数组元素加到sum里面。
    // ③:用求和变量sum除以数组的长度就可以得到数组的平均值。
    let arr = [2,6,1,7,4]
    let sum = 0
    for(let i = 0;i < arr.length ; i++ ) {
      sum = sum + arr[i]
    }
    console.log(`数组的结果是:${sum}`)
    console.log(`数组的平均值是:${sum / arr.length}`)
</script>

数组求最大值和最小值
需求:求数组[2,6,1,77,52,25,7]中的最大值
分析:
①:声明一个保存最大元素的变量max。
②:默认最大值可以取数组中的第-个元素。
③:遍历这个数组，把里面每个数组元素和max相比较。
④:如果这个数组元素大于max就把这个数组元素存到max里面，否则继续下一轮比较。
⑤:最后输出这个max
<script>
    // 求数组[2,6,77,52,25,7]中的最大值
    let arr = [2,6,77,52,25,7]
    // 默认最大值选取数组中的第一个元素
    let max = 2
    // 开始for循环
    for(let i = 1 ; i <= arr.length ; i++){
      if(max <arr[i]){
        max = arr[i]
      } 
    }
    // 输出max 
    console.log(max)
</script>

操作数组

增

数组**push()**介绍

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

语法：
arr.push('元素1','元素2'...)

<script>
    let arr = ['牛豫哲','小红','小粉',]
    // 增加后面      
    arr.push('小橙','小蓝')  //'牛豫哲','小红','小粉','小橙','小蓝'
</script>

数组**arr.unshift()**介绍

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

<script>
    let arr = ['牛豫哲','小红','小粉',]
    // 增加前面      
    arr.unshift('小橙','小蓝')  //'小橙','小蓝','牛豫哲','小红','小粉','小橙','小蓝
</script>

删

删前

想要数组开头删除1个数据元素利用那个方法?带参数吗?
arr.shift()
不带参数
返回值是删除的元素

任意删

想要指定删除数组元素用那个?开发常用吗?有那些使用场景?
arr.splice(起始位置(下标),删除的个数)
开发很常用，比如随机抽奖，比如删除指定商品等等

删后

想要数组末尾删除1个数据元素利用那个方法?带参数吗?
arr.pop()
不带参数
返回值是删除的元素

改

<script>
    let arr = ['牛豫哲','小红','小粉','小橙','小蓝']
    // 修改
    for(let i = 0 ; i < arr.length ; i++){
      arr[i] = arr[i] + '老师'
    }
    console.log(arr);
</script>

查

数组案例(重点)

数组筛选

需求:将数组[2, 0,6,1, 77,0, 52, 0,25, 7]中大于等于10的元素选出来，放入新数组
分析:
1:声明一个新的数组用于存放新数据newArr
2:遍历原来的旧数组，找出大于等于10的元素
3:依次追加给新数组newArr
<script>
    // 重点案例
    let arr = [2,0.6,1,77,0,52,06,25,7]
    // 1.声明新的空数组
    let newArr = []
    // 2.遍历旧数组
    for (let i = 0 ; i < arr.length ; i++){
      if(arr[i] >= 10){
        // 3.满足条件，追加给新数组
        newArr.push(arr[i])
      }
    }
    // 4.输出新数组
    console.log(newArr);
</script>

数组去0

需求:将数组[2,0,6,1, 77,0,52, 0, 25, 7]中的0去掉后，形成一个不包含0的新数组
分析:
1:声明一个新的数组用于存放新数据newArr
2:遍历原来的旧数组，找出不等于0的元素
3:依次追加给新数组newArr
<script>
   let arr = [2,0,6,1,77,0,52,0,25,7]
  //  1.声明一个新的数组
  let newArr = []
  for(let i = 0 ; i < arr.length ; i++){
    // 2.找出不等于0的元素
    if (arr[i] !== 0 ){
      newArr.push(arr[i])
    }
  }
  // 3.输出新数组
  console.log(newArr)
</script>

数组排序

顺序排序

arr.sort(function (a, b) {
        return a - b
        })

逆序排序

arr.sort(function (a, b) {
        return b - a
        })

综合案例

根据数据生成柱形图

需求:用户输入四个季度的数据，可以生成柱形图
分析:
1:需要输入4次，所以可以把4个数据放到- -个数组里面
利用循环，弹出4次框，同时存到数组里面.
2:遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
div里 面包含显示的数字和第n季度

css部分

<style>
        * {
            margin: 0;
            padding: 0;
        }


        .box {
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 50px auto;
            justify-content: space-around;
            align-items: flex-end;
            text-align: center;
        }


        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            flex-direction: column;
            justify-content: space-between;
        }


        .box div span {


            margin-top: -20px;
        }


        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>

JavaScript部分

<script>
        // 1.四次弹框效果
        // 声明一个新的数组
        let arr = []
        for(let i = 1 ; i <= 4 ; i++){
        // let num =  prompt(`请输入第${i}季度数据`)
        // arr.push(num)
        arr.push(prompt(`请输入第${i}季度数据`))
        }
        // 盒子头部
        document.write(`<div class="box">`)
        // 盒子中间
            for(let i = 0 ; i < arr.length ; i++){
                document.write(`
                <div style="height: ${arr[i]}px;">
                <span>${arr[i]}</span>
                <h4>第${i + 1}季度</h4>
                </div>
                `)
            }
        // 盒子尾部
        document.write(`</div>`)
    </script>

JavaScript函数

为什么需要函数

为什么需要函数
- 可以实现代码复用，提高开发效率
函数是什么
- function执行特定任务的代码块
说明
- 函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于
- 精简代码方便复用
- 比如我们前面使用的alert() 、prompt() 和console.log()都是一些js函数,只不过已经封装好了,我们直接使用的
函数细节补充
- 两个相同的函数后面的会覆盖前面的函数.
- 在Javascript中实参的个数和形参的个数可以不一致
- 如果形参过多会自动填上undefined (了解即可)
- 如果实参过多那么多余的实参会被忽略(函数内部有一个arguments,里面装着所有的实参)
- 函数一旦碰到return就不会在往下执行了函数的结束用return

函数使用

函数的声明语法

function 函数名( ){
     函数体
}

函数的命名规范

和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议:常用动词约定如下

动词含义
can 判断是否可执行某个动作
has 判断是否含义某个值
is 判断是否为某个值
get 获取某个值
set 设置某个值
load 加载某些数据

动词	含义
can	判断是否可执行某个动作
has	判断是否含义某个值
is	判断是否为某个值
get	获取某个值
set	设置某个值
load	加载某些数据

函数调用

函数名（）
函数不调用，自己不执行
函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行次

函数传参

声明语法

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

单个参数

function 任意函数名 (任意传参1){
}
函数名(任意传参1)

多个参数

function 任意函数名 (任意传参1,任意传参2){
}
函数名(任意传参1,任意传参2)

函数说明
- 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
- 实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
- 形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
- 开发中尽量保持形参和实参个数一致
- 我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参
总结
- 函数传递参数的好处是？
  - 可以极大的提高了函数的灵活性
- 函数参数可以分为那两类？怎么判断他们是那种参数？
  - 函数可以分为形参和实参
  - 函数声明时，小括号里面的是形参，形式上的参数
  - 函数调用时，小括号里面的是实参，实际的参数
  - 尽量保持形参和实参的个数一致
- 参数中间用什么符号隔开？
  - 逗号

函数传参-参数默认值

语法

function 任意函数名 (x = 0,y = 0){
    document.write(x + y)
}
函数名()   //结果是0，而不是NaN
函数名(1,2)  //结果是3

说明：这个默认值只会在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参, 否则默认为 undefined

默认值说明
1. 形参：可以看做变量，但是如果一个变量不给值，默认是什么？
  - undefined
2. 但是如果做用户不输入实参，则出现 undefined + undefined 结果是什么？
  - NaN
3. 我们可以改进下，用户不输入实参，可以给形参默认值，可以默认为 0, 这样程序更严谨，可以如上操作：

函数封装-求学生总分

需求：学生的分数是一个数组,计算每个学生的总分
分析：
- ①：封装一个求和函数
- ②：传递过去的参数是一个数组
- ③：函数内部遍历数组求和

<script>
    function getArrSun(arr = []){
      let sum = 0
      for (let i = 0 ; i < arr.length ;i++){
        sum += arr[i]
      }
      console.log(sum);
    }
    getArrSun([5,5,5,5])
</script>

参数可以自定义，用户自己输入

<script>
    function getSum (x = 0,y = 0){
      let sum = 0
      for(let i = x;i <= y;i++){
        sum += i
      }
      console.log(sum);
    }
    let sum1 = +prompt('请输入起始值')
    let sum2 = +prompt('请输入结束值')
    getSum(sum1,sum2)
</script>

函数返回值

函数返回值(语法)

return 数据

使用

<script>
    function fu(){
      return 20      //返回值是20
    }
    console.log(fu())
</script>

函数返回值介绍

提问:什么是函数?
- 函数是被设计为执行特定任务的代码块
提问:执行完特定任务之后，然后呢?
- 把任务的结果给我们
缺点:把计算后的结果处理方式写死了，内部处理了
解决:把处理结果返回给调用者
有返回值函数的概念:
- 当调用某个函数，这个函数会返回一一个结果出来
  - 这就是有返回值的函数

函数返回值细节

在函数体中使用return关键字能将内部的执行结果交给函数外部使用
return 后面代码不会再被执行，会立即结束当前函数，所以return后面的数据不要换行写
return 函数可以没有return, 这种情况函数默认返回值为undefined

作用域

作用域介绍

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
如果形参过多会自动填上undefined (了解即可)
如果实参过多那么多余的实参会被忽略(函数内部有一个arguments,里面装着所有的实参)
函数一旦碰到return就不会在往下执行了函数的结束用return

全局/局部作用域

全局作用域
- 全局有效，作用于所有代码执行的环境(整个script标签内部)或者一个独立的js文件
局部作用域
- 局部有效，作用于函数内的代码环境,就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

全局/局部变量

全局变量
- 函数外部let的变量，全局变量在任何区域都可以访问和修改
局部变量
- 函数内部let的变量，局部变量只能在当前函数内部访问和修改
变量访问原则
- 就近原则
  - 只要是代码，就至少有一个作用域

写在函数内部的局部作用域
- 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
访问原则:在能够访问到的情况下先局部，局部没有在找全局

变量有一个坑，特殊情况:
- 如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐，但是有一种情况，函数内部的形参可以看做是局部变量。

匿名函数

匿名函数(语法)

function() {}

函数表达式(语法)

let fn = function (){
    函数体
}
调用：
fn()
//函数表达式和具名函数的不同
// 1.具名函数的调用可以写到任何位置
// 2.函数表达式，必须先声明函数表达式，后调用

立即执行函数(语法)

第一种写法：
(function () { console.1og(11) })();

第二种写法：
(function () { console.1og(11) }());

1.立即执行函数有什么作用?
- 防止变量污染
2.立即执行函数需要调用吗?有什么注意事项呢?
- 无需调用，立即执行，其实本质已经调用了
- 多个立即执行函数之间用分号隔开

逻辑中断

逻辑运算符里的短路

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
原因：通过左边能得到整个式子的结果，因此没必要再判断右边
运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值
符号短路条件
&& 左边为false就短路
竖杠(打不出来) 右边为true就短路

符号	短路条件
&&	左边为false就短路
竖杠(打不出来)	右边为true就短路

转换为boolean型

空字符串为假，其他为真

数字只有零为假，其余为真

记忆:“、0、undefined、null、 false、NaN转换为布尔值后都是false,其余则为true

隐式转换:
1. 有字符串的加法“”+1，结果是“1”
2.减法一(像大多数数学运算-样)只能用于数字，它会使空字符串"转换为0
1. null经过数字转换之后会变为0
2. undefined 经过数字转换之后会变为NaN

综合案例

转换时间案例
- 需求:用户输入秒数，可以自动转换为时分秒
  
  分析:
  
  ①:用户输入总秒数(注意默认值)
  
  ②:计算时分秒(封装函数)里面包含数字补0
  
  ③:打印输出
计算公式：计算时分秒
- 小时: h= parselnt(总秒数 / 60 / 60 % 24)
  
  分钟: m = parselnt(总秒数/ 60 % 60 )
  
  秒数: S = parselnt(总秒数% 60)

<script>
    // age = age + 1
    // 1. 用户输入
    let second = +prompt('请输入秒数:')
    // 2.封装函数
    function getTime(t) {
      // console.log(t)  // 总的秒数
      // 3. 转换
      // 小时：  h = parseInt(总秒数 / 60 / 60 % 24)
      // 分钟：  m = parseInt(总秒数 / 60 % 60)
      // 秒数: s = parseInt(总秒数 % 60) 
      let h = parseInt(t / 60 / 60 % 24)
      let m = parseInt(t / 60 % 60)
      let s = parseInt(t % 60)
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      // console.log(h, m, s)
      return `转换完毕之后是${h}小时${m}分${s}秒`
    }
    let str = getTime(second)
    document.write(str)
    console.log(h)
</script>

JavaScript对象

对象的介绍

对象是什么?
- 对象是一种数据类型
- 无序的数据的集合
对象有什么特点?
- 无序的数据的集合
- 可以详细的描述描述某个事物
对象有属性和方法组成
- 属性:信息或叫特征(名词)。比如手机尺寸、颜色、重量等...
- 方法:功能或叫行为(动词)。比如手机打电话、发短信、玩游戏...

对象声明使用(语法)

对象声明语法

```
let 对象名 = { }   //简单
```
```
let对象名= new 0bject() 
```

对象使用语法

let 对象名 ={
  属性名:属性值，
  方法名:函数
}

使用方法如下

let obj= {
uname :‘pink老师',
age: 18,
gender:'女' 
}

第一对象的练习

<script>
    let obj = {
      uname:'小米10青春版',
      num:'100012816024',
      weight:'0.55kg',
      address:'中国大陆',
    }
    console.log(obj)
</script>

注意：属性和值用**;号隔开，多个属性用，**隔开

对象(增删改查)

增
- 对象名.新属性名=新值
- 如果没有属性就是增
删
- delete 对象名.属性名(了解)
改
- 对象名.属性名=新值
- 如果有属性就是改
查
1. 对象名.属性名
2. 对象名['属性名']
  - 字符串用
  - 对于多词属性或则-等属性，点操作就不能用了。
    
    我们可以采取:对象['属性'] 方式，单引号和双引号都阔以
  - 没有必要的时候直接使用点语法,在需要解析变量的时候使用[]语法

对象的方法

一般不用这种方式遍历数组、主要是用来遍历对象，for in语法中的k是一个变量,在循环的过程中依次代表对象的属性名，由于k是变量,所以必须使用[]语法解析，一定记住: k 是获得对象的属性名，对象名[k] 是获得属性值

遍历对象(重点)

 <script>
    let obj = {
      a : '刘德华',
      b : '牛豫哲',
      c : '郭富城',
      d : '黎明'
    }
    // b对象
    for(let k in obj){
      console.log(obj[k]);
    }
</script>

遍历数组对象(案例)

需求:请把下面数据中的对象打印出来:
//定义一个存储了若干学生信息的数组
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
]

结果：

<script>
    let students = [
    {name: '小明', age: 18, gender: '男', hometown: '河北省'},
    {name: '小红', age: 19, gender: '女', hometown: '河南省'},
    {name: '小刚', age: 17, gender: '男', hometown: '山西省'},
    {name: '小丽', age: 18, gender: '女', hometown: '山东省'}
    ]
    for(let i = 0 ;i < students.length; i++){
      console.log(students[i].name);
      console.log(students[i].age);
      console.log(students[i].gender);
      console.log(students[i].hometown);
    }
</script>

内置对象

内置对象介绍

介绍: Math对象是JavaScript提供的一个“数学"对象
作用: 提供了一系列做数学运算的方法

内置对象(语法)

Math对象包含的方法有:
- random: 生成0-1之间的随机数 (包含0不包括1)
- ceil: 向. 上取整
- floor:" 向下取整
- max: 找最大数
- min: 找最小数
- pow: 幂运算
- abs:绝对值
- 更多在Math在线文档

内置对象-生成任意范围随机数

Math.random() 随机数函数，返回一个0 - 1之间，并且包括0不包括1的随机小数 [0, 1）
1. 如何生成0-10的随机数呢？
  - ```
  Math.floor(Math.random() * (10 + 1))
```
2. 如何生成5-10的随机数？
  - ```
  Math.floor(Math.random() * (5 + 1)) + 5
```
3. 如何生成N-M之间的随机数
  - ```
  Math.floor(Math.random() * (M - N + 1)) + N
```

生成任意范围随机数

随机点名案例.

需求:请把['赵云', ‘黄忠’,‘关羽', '张飞',‘马超’，, '刘备', '曹操']随机显示一个名字到页面中

<script>
    let arr = ['张飞','林冲','李逵','曹操','关羽','刘备','马超']
    //  1.得到一个随机数,作为数组的索引号，这个随机数0~6
    let random = Math.floor(Math.random() * arr.length)
    // 2.页面输出数组里面的元素
    document.write(arr[random])
  </script>

随机点名案例改进

需求:请把[赵云', '黄忠',‘关羽',‘张飞',‘马超'，'刘备',‘曹操']随机显示一个名字到页面中，但是不允许重复显示

分析:

①:利用随机函数随机生成- -个数字作为索引号

②:数组[随机数]生成到页面中

③:数组中删除刚才抽中的索引号

<script>
    let arr = ['张飞','林冲','李逵','曹操','关羽','刘备','马超']
    //  1.得到一个随机数,作为数组的索引号，这个随机数0~6
    let random = Math.floor(Math.random() * arr.length)
    // 2.页面输出数组里面的元素
    document.write(arr[random])
    // 3.splice(起始位置(下标)，删除几个元素)
    arr.splice(random,1)
    console.log(arr);
  </script>

猜数字游戏

需求:程序随机生成1~10之间的- -个数字，用户输入一个数字

①:如果大于该数字，就提示，数字猜大了,继续猜

②:如果小于该数字，就提示，数字猜小了，继续猜

③:如果猜对了，就提示猜对了，程序结束

<script>
    // 1.随机生成一个数字1~10
    // 取到N~M的随机整数
    function getRandom(N,M){
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    let random = getRandom(1 , 10)
    console.log(random)
    // 需要不断地循环
    // 2.用户输入一个值
    while (true){
      let num = +prompt('请输入你猜的数字')
    // 3.判断输出
    if(num > random){
      alert('您猜大了')
    }else if (num < random){
      alert('您猜小了')
    }else{
      alert('猜对啦，真厉害')
      break  //退出循环
    }
    }
</script>

需求:程序随机生成1~10之间的- -个数字，用户输入一个数字

①:如果大于该数字，就提示，数字猜大了，继续猜

②:如果小于该数字，就提示，数字猜小了，继续猜

③:如果猜对了，就提示猜对了，程序结束

 <script>
    // 1.随机生成一个数字1~10
    // 取到N~M的随机整数
    function getRandom(N,M){
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    let random = getRandom(1 , 10)
    // 2.设定三次，三次没猜对就直接退出
    let flag = true  //开关变量
    for (let i = 1 ; i <= 3 ; i++){
      let num = +prompt('请输入1~10之间的一个数字:')
        if(num > random){
          alert('您猜大了，继续')
        }else if(num < random){
          alert('您猜小了，继续')
        }else {
          flag = false
        alert('猜对啦,真厉害')
        break
        }
    }
    //写道for的外面来
    if(flag) {
      alert('次数已经用完')
    }
  </script>

拓展-术语解释

术语	解释	举例
关键字	在JavaScript中有特殊意义的词汇	let、var、function、if、else、switch、case、break
保留字	在目前的JavaScript中没意义，但未来可能会具有特殊意义的词汇	int、short、long、char
标识(标识符)	变量名、函数名的另一种叫法	无
表达式	能产生值的代码，一般配合运算符出现	10 + 3、age >= 18
语句	一段可执行的代码	If () for()

拓展- 基本数据类型和引用数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
- 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null
- 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

堆栈空间分配区别

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

简单/复杂类型的内存分配

简单类型的内存分配
- 值类型（简单数据类型）： string ，number，boolean，undefined，null
- 值类型变量的数据直接存放在变量（栈空间）中

复杂类型的内存分配
- 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
- 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

JavaScript基础笔记

JavaScript基础语法

javascript简介

输入输出语法

注释

变量

变量的几种写法

交换两个变量(示例)

命名规范

常量

数据类型

操作符

数据类型的转换

算术运算符

JavaScript流程控制

赋值运算符

一元运算符(了解)

比较/关系运算符

逻辑运算符

➢If分支语句

单分支

双分支

多分支

三元运算符

switch语句

While循环

汇总案例

JavaScript数组

for循环的基本使用

for循环的最大价值，循环数组

嵌套for循环

数组

数组的介绍

数组的基本使用

遍历数组(重点)

操作数组

增

删

改

查

数组案例(重点)

数组排序

综合案例

JavaScript函数

为什么需要函数

函数使用

函数的声明语法

函数的命名规范

函数调用

函数传参

声明语法

函数传参-参数默认值

函数返回值

函数返回值(语法)

函数返回值介绍

函数返回值细节

作用域

作用域介绍

全局/局部作用域

全局/局部变量

匿名函数

匿名函数(语法)

函数表达式(语法)

立即执行函数(语法)

逻辑中断

逻辑运算符里的短路

转换为boolean型

综合案例

JavaScript对象

对象的介绍

对象声明使用(语法)

对象声明语法

对象使用语法

对象(增删改查)

对象的方法

遍历对象(重点)

内置对象

内置对象介绍

内置对象(语法)

内置对象-生成任意范围随机数