Day06-JS高级编程

Day01-JS高级编程

一 变量和常量

1 概念

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

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

2 全局变量

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

let n = 10
function fun(){
    console.log("函数内部",n)
}
fun()
console.log("函数外部",n)
1
2
3
4
5
6

3 局部变量

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

function fun(){
    let m = 10
}

for(let i=0;i<20;i++){
    
}

1
2
3
4
5
6
7
8

4 var、let定义变量区别

场景一

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

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

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

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

场景二：

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

    <script>
        
        console.log(a);
        var a = 10
        console.log(a);

        // console.log(b);
        let b = 20
        console.log(b);
    </script>
1
2
3
4
5
6
7
8
9
10

二 作用域链

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

        let a = 15

        function fun(){
            let a = 10
            console.log(a);
        }
        fun()
        console.log(a);
1
2
3
4
5
6
7
8

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

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

三 变量和函数的提升

变量提升

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

函数提升

        //函数的调用
		fun()
        /**
         * 函数的声明
        */
        function fun(){
            console.log("-----------");
        }
1
2
3
4
5
6
7
8

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

        console.log(fun);

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

        //使用var声明一个变量
        var fun = 100
1
2
3
4
5
6
7
8
9
10
11

面试题：

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

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

四 递归

函数自己调用自己就叫递归,递归相当于循环,有很多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);
1
2
3
4
5
6
7
8
9
10

案例2-求n的阶乘

    function sum(n){
        if(n == 1){
            return 1
        }else{
            return n * sum(n-1)
        }
    }
1
2
3
4
5
6
7

五 立即执行函数IIFE

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

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

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

什么是立即执行函数

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

基本用法

(function(){
    let a = 20
    console.log(a);
})()
1
2
3
4

立即执行函数参数传递

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

书写规范，在前面加;

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

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