当前位置: 首页 > news >正文

Day06-JS高级编程

Day01-JS高级编程

一 变量和常量

1 概念

在程序中,变量是值可以改变的量,常量是值不可以改变的量

在ES6以前变量的创建使用var关键字 (可以创建多个同名变量)
从ES6开始变量的创建推荐使用let关键字 (不可以创建多个同名变量)
从ES6开始常量的创建使用const关键 (不可以创建多个同名常量)

2 全局变量

全局变量是创建在函数外面的变量,在整个页面都可以使用

let n = 10
function fun(){console.log("函数内部",n)
}
fun()
console.log("函数外部",n)

3 局部变量

函数作用域变量,块级作用域变量都属于局部变量

function fun(){let m = 10
}for(let i=0;i<20;i++){}

4 var、let定义变量区别

场景一

let创建的变量有严格的作用域

{let m =10 console.log("啊,变量m=",m)
}
console.log("啊,再次输出变量m",m)

var创建的变量页有作用域,它的作用域是整个页面

{var m =10 console.log("啊,变量m=",m)
}
console.log("啊,再次输出变量m",m)

场景二:

变量提升:我们使用var,let创建的全局变量,在浏览器上运行的时候,会把全局变量的声明提升到程序的顶部,当程序运行到我们写的代码位置,再进行赋值;但是let创建的变量有严格的作用域,只能在我们写代码的位置之后才能使用

    <script>console.log(a);var a = 10console.log(a);// console.log(b);let b = 20console.log(b);</script>

二 作用域链

当我们在局部作用域中使用一个变量时,程序会优先在局部作用域找这个变量,如果找不到,程序会往上一级作用域查找,只到全局作用域为止,如果还找不到,则报错,这个过程成为作用域链

        let a = 15function fun(){let a = 10console.log(a);}fun()console.log(a);

面试题: let const var 有什么区别? 什么是变量提升? 怎么避免(解决)变量提升?

区别const用来声明常量,在声明的时候必须赋值,而且值不能改变let var用来声明变量const 和let在同一作用域下,名称不能重复.var在同一作用域下变量名可以重复var 只有全局作用域和函数作用域,没有块级作用域let const 有全局作用域,函数作用域,块级作用域
什么是变量提升变量会被提升到程序的顶部(全局作用域变量,会被提升到程序的最顶部;函数作用域变量会被提升到函数的顶部)
怎么避免变量提升使用let代码var创建变量

三 变量和函数的提升

变量提升

当JS程序放在浏览器中解析的时候,浏览器会找到所有的全局变量,并放在程序的最顶部,值默认为undefined

函数提升

        //函数的调用fun()/*** 函数的声明*/function fun(){console.log("-----------");}

浏览器在运行js程序时,会把函数的声明提升到程序的顶部

        console.log(fun);/*** 函数的声明*/function fun(){console.log("-----------");}//使用var声明一个变量var fun = 100

面试题:

变量和函数名字一样的,提升优先级怎样的。

变量和函数名字一样的,函数提升优先级高

四 递归

函数自己调用自己就叫递归,递归相当于循环,有很多for循环解决不了的问题,可以用递归来解决

案例1-求和

使用递归求1-5的和

    function sum(n){if(n == 1){return 1}else{return n + sum(n-1)}}let result = sum(5)console.log(result);

案例2-求n的阶乘

    function sum(n){if(n == 1){return 1}else{return n * sum(n-1)}}

五 立即执行函数IIFE

为什么要学立即执行函数?

在实际的项目开发中,一个html大概率会引入多个js文件
多个js文件中大概率会有同名的全局变量

我们可以使用立即执行函数来解决这个问题

什么是立即执行函数

立即执行函数本质上就是一个匿名函数,它会在页面打开的时候立即执行 ,立即执行函数,也可以称为IIFE

基本用法

(function(){let a = 20console.log(a);
})()

立即执行函数参数传递

(function(e){console.log("e=",e);
})(123)

书写规范,在前面加;

;(function(e){console.log("e=",e);
})(123)

立即执行函数前面的代码必须要以;结尾,但是程序员的习惯不一样,很多程序员不在代码的末尾写;

http://www.lryc.cn/news/107609.html

相关文章:

  • 针对高可靠性和高性能优化的1200V硅碳化物沟道MOSFET
  • 开发框架软件公司:与之携手,共同开启办公流程化之路!
  • openCV C++环境配置
  • 8.3 作业 c高级
  • django实现部门表的增删改查界面
  • Tomcat的介绍和安装配置、eclipse中动态web项目的创建和运行、使用IDEA创建web项目并运行
  • idea操作——已经push到远程的代码回滚(不保留本地更改)
  • 无涯教程-Lua - 垃圾回收
  • DP(各种模型)
  • 开学在即,这个超好用的中小学新生录取查询系统制作方法值得借鉴
  • 使用Canvas裁剪图片
  • JavaScript |(三)内建对象 | 数组 | string对象 | 尚硅谷JavaScript基础实战
  • 势能线段树
  • 【phaser微信抖音小游戏开发004】往画布上增加文本以及文本的操作
  • 【1.4】Java微服务:服务注册和调用(Eureka和Ribbon实现)
  • QT中使用ffmpeg的api进行视频的播放
  • 使用idea实现git操作大全(在项目开发中遇到的实际情况
  • SQL面试题:一个优化案例
  • 链表的总体涵盖以及无哨兵位单链表实现——【数据结构】
  • 网页版Java五子棋项目(一)websocket【服务器给用户端发信息】
  • 企业大数据可视化案例专题分享-入门
  • GoogLeNet卷积神经网络-笔记
  • 腾讯云TencentOS Server镜像系统常见问题解答
  • 【项目 进程13】2.28共享内存(1) 2.29共享内存(2)
  • Flask框架-流量控制:flask-limiter的使用
  • 【机器学习】西瓜书习题3.5Python编程实现线性判别分析,并给出西瓜数据集 3.0α上的结果
  • Elasticsearch:通过动态修剪实现更快的基数聚合
  • Webpack5 生产模式压缩图片ImageMinimizerPlugin
  • 时序预测 | Matlab实现基于BP神经网络的电力负荷预测模型
  • 基于回溯算法实现八皇后问题