JavaScrip作用域和递归函数知识点梳理
两个数字的最大公约数
什么是最大公约数
两个数字都能整除的一个数字
并且是所有能整除的数字里面最大的那一个
例子: 10 和 20
能被 10 和 20 整除的数字有 1 2 5 10
这些能整除的数字里面最大的就是 10
所以 10 和 20 的最大公约数就是 10
例子: 99 和 199
能被 99 和 199 整除的数字有 1
所以 99 和 199 的最大公约数就是 1
计算最大公约数的思路
1. 要有两个数字
2. 找到两个数字里面相对小的那一个
因为最大公约数不可能比相对小的那个数字还大
假设两个数字就是 10 和 20
循环的时候就应该是 从 1 ~ 10
我得到的数字就是 1 2 3 4 5 6 7 8 9 10
一个一个的去进行取余, 找到那个能倍两个数字都整除的数字
在找的过程中, 先找到 1, 再找到 2, 再找到 5, 再找到 10
需要等到循环结束, 我才能直到哪个是最大的, 因为最后一次的哪个就是最大的
换个思路, 倒着循环, 从 10 ~ 1 循环
那么我得到的数字就是 10 9 8 7 6 5 4 3 2 1
找到能被两个数字整除的那个数字
再找的过程中, 先找到 10, 再找到 5, 再找到 2, 再找到 1
再找的过程中, 我找到的第一个就是最大的, 就可以直接 break 结束循环了
3. 循环从 1 循环到相对比较小的数字
找到这些数字里面能整除的最大的那一个
书写函数:
1. 准备一个函数, 接收两个参数
2. 计算两个数字的最大公约数
3. 把计算结果返回
// 1. 准备一个函数接收两个参数
function gongYueShu(a, b) {
// 2. 计算两个数字的最大公约数
// 2-1. 找到两个数字中相对小的那一个
var min = a // 假设 a 比较小
var max = b // 假设 b 比较大
if (a > b) {
min = b
max = a
}
// 2-2. 循环从 比较小的数字(min) 到 1
// 提前准备一个变量, 保存最大公约数
var gys = 0
for (var i = min; i >= 1; i–) {
// 2-3. 找到那个能整除的数字
if (min % i === 0 && max % i === 0) {
// 2-4. 把找到的这个公约数赋值给 gys 变量
gys = i // 找到的第一个就是最大公约数
break
}
}
// 到达这里, 表示找到了最大公约数
// 3. 返回结果
return gys
}
// 使用这个函数计算除两个数字的最大公约数
var res = gongYueShu(10, 20)
console.log(res)
return 关键字
有两个作用
1. 最为函数的返回值使用
2. 打断函数不在继续执行
当你再函数内部的代码, 执行到 return 关键字以后
return 后面的代码就不再执行了, 直接结束函数
和 break 的功能比较类似
break 是结束 循环的 关键字
return 是结束 函数的 关键字
function fn() {
console.log(‘第一行代码执行’)
console.log(‘第二行代码执行’)
return
// 这里开始向后的代码就不在执行了
console.log(‘第三行代码执行’)
}
fn()
预解析
就是 js 代码的执行过程
为什么要学习预解析
1. 将来你们面试的时候, JS 第二大坑
2. 让你了解一下 JS 代码的执行过程, 不要写不符合规范的代码
什么是预解析
预: 在所有 js 代码执行之前
解析: 对整篇 js 代码进行通读并解释(浏览器在解析)
解析了什么内容(只有两种内容)
1. var 声明的变量
var num
2. 声明式函数(不是赋值式函数)
function fn() {}
怎么解析的
1. var 声明的变量
在所有 js 代码执行之前, 先把变量声明好
再开始执行代码
2. 声明式函数
在所有 js 代码执行之前, 先把函数名声明好, 并且给这个函数名赋值为一个函数
再开始执行代码
声明式函数
function fn() {}
解析一下这一行代码
1. 预解析的过程
告诉浏览器, fn 是一个可以使用的名字
并且 fn 这个名字是一个函数
2. 真正的代码开始执行
fn()
function fn() {
console.log(‘我是 fn 函数’)
}
代码的执行
fn()
function fn() {
console.log(‘我是 fn 函数’)
}
1. 预解析
告诉浏览器 fn 这个名字被声明过可以使用
并且 fn 还是一个函数 function fn() { console.log(‘我是 fn 函数’) }
2. 执行代码
fn()
// var 的预解析
var num = 100
这一行代码包含了两个操作
1. 声明变量 var num
2. 变量赋值 num = 100
在这两个操作里面
声明变量那一步是在 预解析 的时候就完成的
在所有 js 代码开始执行之前, 就已经做好了
变量赋值那一步是在 真正执行代码 的时候才开始做
// var num = 100
// 在 JS 执行的时候
// 先进行预解析
// var num
// 不在有别的东西可以解析了, 那么开始执行代码
// num = 100
// console.log(num)
// var num = 100
拆解代码的执行过程
console.log(num)
var num = 100
1. 预解析的过程
var num
2. 真正执行 所有的 JS 代码
console.log(num) // 其实就是有这个变量, 但是还没有赋值, 就是 undefined
num = 100
赋值式函数的预解析
赋值式函数不会按照声明式函数的预解析进行
而是按照 var 的预解析规则进行
var fn = function () {}
fn() // fn is not a function
var fn = function () {
console.log(‘我是 fn 函数’)
}
分析代码执行过程
fn()
var fn = function () {}
1. 进行预解析
var fn
就告诉浏览器这个 fn 被声名过了, 但是并没有给他赋值为一个函数
2. 代码开始执行
fn() // 这行代码执行的时候, fn 还是一个没被赋值的状态, 是个 undefined
fn = function () {}
预解析的无节操
1. 不管 if 条件是不是成立, 写在 {} 里面的代码都会进行预解析
只是条件不成立的时候, 不会执行 {} 里面的赋值操作
2. 当再函数内部的时候, return 后面的代码虽然不会执行
但是会进行预解析
function fn() {
console.log(num) // undefined
return
var num = 100
}
fn()
// 预解析的无节操 - 1
// console.log(age) // undefined
// if (2 < 1) {
// var age = 18
// }
// console.log(age) // undefined
解析代码执行过程
console.log(age) // undefined
if (2 < 1) {
var age = 18
}
console.log(age) // undefined
1. 预解析 - 不管 if 是否成立
var age
2. 代码执行
console.log(age) // 没有进行赋值, 就是 undefined
if (2 < 1) {
age = 18
}
console.log(age) // 因为 if 条件为 false, 所以 {} 里面的代码没有执行
// console.log(age) // undefined
// if (2 > 1) {
// var age = 18
// }
// console.log(age) // 18
分析代码执行过程
console.log(age) // undefined
if (2 > 1) {
var age = 18
}
console.log(age) // 18
1. 先进行预解析
var age
告诉浏览器, age 这个变量被声名过, 可以使用
2. 开始真正的代码执行
console.log(age) // age 还没有被进行赋值, 就是 undefined
if (2 > 1) {
age = 18
}
console.log(age) // age 已经被赋值过了, 就是 18
预解析小案例
// 未完待续
// var a = b = 10
// console.log(a)
// console.log(b)
var a = b
a = 10
b = 20
console.log(a)
console.log(b)
代码执行过程
var a = b
a = 10
b = 20
console.log(a)
console.log(b)
1. 预解析
var a
告诉浏览器 a 是一个可以使用的变量
2. 代码执行
a = b // 使用 b 这个变量给 a 进行赋值, 但是 b 变量并没有被声名过, 报错
a = 10
b = 20
console.log(a)
console.log(b)
预解析的优先级
当你定义一个变量和一个声明式函数的时候
如果变量名和函数名重名, 再预解析的时候, 以函数为准
为什么要特殊说明这个问题
不是为了让你写代码的时候这么写
是为了告诉你, 出现问题的时候怎么办
console.log(num) // 打印 num 这个变量的值
num(100) // 调用 num 函数, 传递一个 100 作为实参
var num = 100
console.log(num)
num(200) // 报错, 因为到这里 num 已经不是函数了, 是 100 这个数值
function num(a) {
console.log(a) // 打印 a 形参, 接收的是 num() 的时候传递进来的实参
console.log(‘我是一个函数’)
}
console.log(num)
解析代码执行过程
console.log(num)
var num = 100
console.log(num)
function num() {
console.log(‘我是一个函数’)
}
console.log(num)
1. 预解析
告诉浏览器 num 这个变量可以使用
告诉浏览器 num 这个变量可以使用, 并且赋值为一个函数
当预解析结束的时候
num 就是一个函数
2. 真正的代码开始执行
console.log(num) // 此时因为刚刚预解析结束, 所以 num 就是一个函数
num = 100 // 给 num 从新赋值, 赋值为 100, 那么就不在是一个函数了
console.log(num) // 因为已经给 num 从新赋值完毕了, 打印出来 100
console.log(num) // 因为已经给 num 从新赋值完毕了, 打印出来 100
了解作用域
作用: 生效, 可以使用
域: 范围
一个东西可以生效的范围
什么东西 ? 变量(变量名, 函数名)
其实就是一个变量可以生效的范围
作用域分类
1. 全局作用域
一个 html 页面就是一个全局作用域
打开页面的时候, 作用域就生成了, 直到关闭页面为止
2. 局部作用域(私有作用域)
只有函数生成私有作用域
每一个函数就是一个私有作用域
作用域的上下级关系
全局作用域最大, 所有的私有作用域都是再全局作用域下面的
函数生成的私有作用域, 函数写在那个作用域里面
就是哪个作用域的子级
这个位置就是全局作用域
function fn() {
// 这个位置就是 全局作用域的一个叫做 fn 的子级作用域
function fun() {
// 这个位置就是 全局下的 fn 私有作用域下的 fun 私有作用域
}
}
作用域的三大规则
1. 变量定义规则
2. 变量使用规则
3. 变量赋值规则
清晰什么是 定义 / 使用 / 赋值 概念(熟读并背诵全文)
1. 定义
有 var 关键字
或者 function 函数名() {}
var num // 定义变量
function fn() {} // 定义变量
2. 使用
就是当你需要拿到一个变量的值去使用的时候
console.log(num) // 我要使用 num 的值去打印出来
1 + num // 我要使用 num 的值去和 1 进行运算
var abc = num // 我要使用 num 的值赋值给 abc
3. 赋值
给一个变量进行赋值的操作
num = 100 // 要把 100 这个值赋给 num 这个变量
num = function () {} // 要把 函数 这个值赋给 num 这个变量
***********************************
explanatory start 变量定义规则(熟读并背诵全文)
***********************************
当你在定义一个变量的时候
你把这个变量定义在哪个作用域里面
就只有这个作用域及其后代作用域可以使用
当前作用域的所有祖先级作用域不能使用
***********************************
explanatory end 变量定义规则(熟读并背诵全文)
**********************************
// 全局作用域里面的变量 a
// var a = 100
// function fn() {
// var b = 200 // fn 私有作用域里面的变量 b
// function fun() {
// var c = 300 // fun 私有作用域里面的变量 c
// }
// }
***********************************
explanatory start 变量的使用规则(熟读并背诵全文)
***********************************
当你需要使用一个变量的时候首先, 在自己作用域内部查找, 如果有, 就直接使用, 停止查找如果没有, 就去上一级作用域查找, 有就使用, 停止查找如果还没有, 就再去上一级作用域查找, 有就使用, 停止查找直到全局作用域都没有, 那么就报错 "变量 is not defined"***********************************explanatory end 变量的使用规则(熟读并背诵全文)**********************************
// var a = 100
// function fn() {
// var a = 'fn 里面的'
// var b = 200
// function fun() {
// var a = ‘fun 里面的 a 变量’
// var b = ‘fun 里面的’
// var c = 300
// console.log(d) // 得到的是 fn 作用域里面的 b 变量的值
// }
// fun()
// }
// fn()
***********************************
explanatory start 变量赋值规则(熟读并背诵全文)
***********************************
当你需要给一个变量赋值的时候
先在自己作用域内部查找, 如果有, 就给自己作用域内部的变量赋值
如果没有, 就向上一级查找, 如果有就给父级的变量赋值
如果还没有, 就继续向上查找
直到全局作用域都没有, 那么就把这个变量定义为全局变量, 再进行赋值
***********************************
explanatory end 变量赋值规则(熟读并背诵全文)
***********************************
var a = 100 // 全局 a 变量
function fn() {
// var a = 200 // fn 私有变量 a
a = ‘后来赋值操作’
console.log(a)
}
fn() // 因为 fn 函数的执行, 给全局变量 a 从新进行了赋值操作
console.log(a)
作用域小案例
// var a = b = 10 // 这里代码执行完, 全局两个变量, 一个 a 一个 b
// console.log(a)
// console.log(b)
代码解析
var a = b = 10
实际上是三个部分
1. var a
2. a = b
3. b = 10
等于号(赋值) 的规则是从右往左
1. 预解析
var a
2. 代码执行的时候
b = 10 // 标准的变量赋值操作, 根据变量赋值规则, 会把 b 定义成全局变量再赋值
a = b
console.log(a)
console.log(b)
// var a = b
// b = 20
// a = 10
// console.log(a)
// console.log(b)
代码执行过程
1. 预解析
var a
在浏览器里面声明了一个 a 变量可以使用
2. 代码执行
b = 20 // 对于变量 b 来说是变量的赋值
a = b // 对于变量 b 来说, 是变量的使用, 报错了, 后面就没有代码了
function fn() {
a = 100 // 这个 fn 里面没有定义过 a 变量, 这个只是一个单纯的赋值操作
console.log(a)
}
fn()
console.log(a)
页面交互小案例
页面上有两个文本框
分别让用户输入数字
有一个 button 按钮
点击的时候计算两个数字的和, 填充到第三个文本框里面
1. 要给 button 按钮添加一个点击行为
当点击的时候要做一些事情
2. 在点击的函数里面
当点击的时候再去获取两个文本框的内容
只要 JS 从页面文本框里面获取内容, 那么一定是 string
prompt 获取到的是 string
input 获取到的也是 string
3. 在点击的函数里面
计算两个数字的和
把结果填充到第三个文本框里面
// 1. 给 btn 添加一个点击行为
// 当你点击哪个 button 按钮的时候执行 andHandler 函数
btn.onclick = andHandler
function andHandler() {
// 2. 拿到两个文本框 first 和 second 的输入内容
// 获取文本框的内容就是获取文本框 的 value
// first 表示这个文本框
// . 表示 的
// value 就是元素的 value 属性, 也就用用户输入的内容
// 一个文本框 的 用户输入内容
var a = first.value - 0
var b = second.value - 0
// 3-1. 计算结果
var res = a + b
// 3-2. 把结果填充到第三个文本框里面
// 第三个文本框 的 value 值为 res
result.value = res
}
对象数据类型
对象(object): 是我们的复杂数据类型的一种
对象就是在内存中开辟一个空间, 在里面存放一些数据
如何创建一个空的对象
1. 字面量形式创建对象
var obj = {}
2. 内置构造函数创建对象
var obj = new Object()
两种创建方式的区别
1. 字面量创建
可以在创建的时候直接存放一些数据放在对象空间内
也可以后期再使用代码向里面添加或删除
直接再 {} 里面书写
你要起的名字 : 你要存储的值
如果你要写多个, 那么以 逗号(,) 分隔
2. 内置构造函数
目前只能再后期使用代码的形式向里面添加
// 创建了一个空的对象, 对象空间起名为 obj
// var obj = {}
// console.log(obj)
// 内置构造函数创建空对象
// var obj2 = new Object()
// console.log(obj2)
// 直接创建一个有成员的对象
var obj = {
a: 100,
b: true
}
console.log(obj)
操作对象
就是对对象空间内部的数据进行增删改查
增: 向对象空间里面存储一个数据
语法: 对象名.你自己起的名字 = 你要存储的值
删: 删除对象空间里面的某一个数据
语法: delete 对象名.你要删除的数据的名字
改: 修改对象空间里面的某一个数据
语法: 对象名.你要修改的名字 = 你要修改的值
查: 获取对象空间里面某一个数据
语法: 对象名.你要查询的数据的名字
找不到的时候, 就是 undefined
// 0. 创建一个空对象
var obj = {}
// 1. 向对象里面添加一个数据
obj.a = 100
obj.b = 200
console.log(obj) // 打印 obj 的 a 成员的值
// 2. 删除对象里面的某一个数据
delete obj.a
console.log(obj) // 打印 obj 的 a 成员的值
// 3. 修改对象里面某一个数据
// 和创建的语法一摸一样
// 对象空间内本身存在这个名字就是修改
// 对象空间内本身不存在这个名字就是创建
obj.b = 500
// 4. 查询对象里面的某一个数据
// console.log(obj.b)
console.log(obj)
例子: 有一个书架子叫做 obj
1. JS 从入门到放弃 - 100
3. Java 从入门到放弃 - 300
4. 治疗颈椎病 - 20000
5. 怎样活下去 - 100000
当你去找 C++ 从入门到放弃, 就能得到 200
你把 这个数 扔了
你再去找 C++ 从入门到放弃, 只是找不到, 但是书架子不会塌了
JavaScrip作用域和递归函数知识点梳理相关推荐
- 呕心沥血 JavaScript知识点梳理大全，超详细 建议收藏！！！
呕心沥血 JavaScript知识点梳理大全,超详细 建议收藏!!! ✴️大家好,我是王同学,爆肝三天三夜王同学把JavaScript 知识点梳理了一遍,文章没有一点套路,只有满满的干货 ✴️如果对你 ...
- 2019年秋招 Java 面试知识点梳理（高频问题）
Java 面试知识点梳理 基础一 JVM-内存区域分配 HotSpot 对象创建 JVM-类加载机制 JVM-内存分配(堆上的内存分配) JVM-GC回收机制 JVM-垃圾收集器 JVM指令重排序 重 ...
- 华清远见-重庆中心-框架阶段技术总结/知识点梳理
文章目录 华清远见-重庆中心-框架阶段技术总结/知识点梳理/个人总结 框架 Java主流框架 Spring 概念 组成 名词解释 IOC DI Spring控制台应用 1.创建一个普通的Maven项目 ...
- Python培训教程之Python基础知识点梳理
Python语言是入门IT行业比较快速且简单的一门编程语言,学习Python语言不仅有着非常大的发展空间,还可以有一个非常好的工作,下面小编就来给大家分享一篇Python培训教程之Python基础知识 ...
- SQL重要知识点梳理！
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货 作者:牧小熊,华中农业大学,Datawhale成员 有读者留言面试有点虚 ...
- 四年级下册英语计算机房和教师办公室的图片,PEP英语四年级下册-Unit-1思维导图及知识点梳理.pptx...
PEP英语四年级下册-Unit-1思维导图及知识点梳理.pptx (12页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.90 积分 四年级 下册 U ...
- 【数据分析】数据分析基础：SQL重要知识点梳理！
作者:牧小熊,华中农业大学,Datawhale成员 有读者留言面试有点虚,数据库都忘的差不多了,与其临时抱佛脚,不如我们把MySQL的知识点梳理一遍,心中有知识点,面试不慌. 数据库的话我只对MySQ ...
- Python教程：Python基础知识点梳理！
Python语言是入门IT行业比较快速且简单的一门编程语言,学习Python语言不仅有着非常大的发展空间,还可以有一个非常好的工作,下面小千就来给大家分享一篇Python基础知识点梳理. 1.Pyth ...
- Python教程分享之Python基础知识点梳理
Python语言是入门IT行业比较快速且简单的一门编程语言,学习Python语言不仅有着非常大的发展空间,还可以有一个非常好的工作,下面小千就来给大家分享一篇Python基础知识点梳理. Python ...
最新文章
- python中局部变量和全局变量
- 你得学会并且学得会的Socket编程基础知识
- 【题意分析】1044 Shopping in Mars (25 分)【滑动窗口】
- python 代码片段6
- Log4j Bug –减慢您的应用程序
- java 字符查找 截断_java字符串常用操作（查找、截取、分割）
- Laravel最佳实践--API请求频率限制(Throttle中间件)
- java使用RunTime调用windows命令行
- SQL 获取当前系统时间 以及对日期的加减处理
- 代码整洁之道-程序员的职业素养
- matlab有限单元法计算桁架算例代码
- java的hsf高速框架_分布式服务框架HSF - osc_n50eizn7的个人空间 - OSCHINA - 中文开源技术交流社区...
- 电子电路：高频晶体管电路
- 如何用Visio画出总线（空心的箭头）
- free掉结点一定会造成断链吗？
- 该网页无法正常运作 目前无法处理此请求HTTP ERROR 500?
- Android开发笔记（一百四十八）自定义输入法软键盘
- 一套完整的硬件电路设计该怎么做？
- android短信显示内容,Android获取手机短信SMS收件箱内容
- 欺诈、舞弊检测中人与人工智能的分工，共同节省数十亿美元