Javascript 进阶

一. 变量提升

看以下代码, 或多或少会有些问题的.

function fn(){
    console.log(name);
    var name = '大马猴';
}
fn()

发现问题了么. 这么写代码, 在其他语言里. 绝对是不允许的. 但是在js里. 不但允许, 还能执行. 为什么呢? 因为在js执行的时候. 它会首先检测你的代码. 发现在代码中会有name使用. OK. 运行时就会变成这样的逻辑:

function fn(){
    var name;
    console.log(name);
    name = '大马猴';
}
fn()

看到了么. 实际运行的时候和我们写代码的顺序可能会不一样....这种把变量提前到代码块第一部分运行的逻辑被称为变量提升. 这在其他语言里是绝对没有的. 并且也不是什么好事情. 正常的逻辑不应该是这样的. 那么怎么办? 在新的ES6中. 就明确了, 这样使用变量是不完善的. es6提出. 用let来声明变量. 就不会出现该问题了.

function fn(){
    console.log(name);  // 直接报错, let变量不可以变量提升.
    let name = '大马猴'; 
}
fn()

==结论一, 用let声明变量是新版本javascript提倡的一种声明变量的方案.==

let还有哪些作用呢?

function fn(){
    // console.log(name);  // 直接报错, let变量不可以变量提升.
    // let name = '大马猴';
    var name = "周杰伦";
    var name = "王力宏";
    console.log(name);
}
fn()

显然一个变量被声明了两次. 这样也是不合理的. var本意是声明变量. 同一个东西. 被声明两次. 所以ES6规定. let声明的变量. 在同一个作用域内. 只能声明一次.

function fn(){
    // console.log(name);  // 直接报错, let变量不可以变量提升.
    // let name = '大马猴';
    let name = "周杰伦";
    console.log(name);
    let name = "王力宏";
    console.log(name);
}
fn()

注意, 报错是发生在代码检查阶段. 所以. 上述代码根本就执行不了.

==结论二, 在同一个作用域内. let声明的变量只能声明一次. 其他使用上和var没有差别==

二. 闭包函数(难)

2.1 定时器

setTimeout(函数名, 时间（毫秒)，表示多长时间后运行此函数，注意：函数名不要带括号。

function fn(){
    console.log('测试定时器')
}
setTimeout(fn, 5000)

常见的用法

setTimeout(function (){
    console.log('我是一个匿名函数')
}, 3000)

setInterval 每隔多长时间运行一次，会一直运行；使用场景：每隔多长时间重新设置一下cookie

setInterval(function (){
    console.log('每隔一秒钟运行一次')
}, 1000)

在浏览器的控制台上可以输入window.clearInterval(s)，让setInterval 代码停止运行

let s= setInterval(function (){
    console.log('每隔一秒钟运行一次')
}, 1000)

window.clearInterval(s)

2.2 时间

先扩展一个软件测试时的问题：
有时候，前端发布版本了，但是在浏览器上看到页面没有更新（还是旧版本的内容，而不是新版本的），但是前端的开发经过检查后，坚定是版本已经发布了。既然前端已经发布了新版本，那么页面的内容应该是新的才对，而为什么页面内容还是旧的呢？原因在于：浏览器对同一个URL访问的时候，会进行缓存，因为前不久访问了这个url，离现在返回的时间不长，浏览器对前面的内容进行缓存了，直接展示出来，而没有去获取最新的资源。
为了解决这个问题，可以在url后面添加一些变化的参数来确保每次访问的url是不一样的，这样浏览器就不会缓存了，问题来了，这个是要根据网页内容的需求来做的，比如一些业务要实时更新内容，如：订单页面，购物车页面等等。对于一些不是那么经常要更新内容的页面，即不需要多添加这些变化的参数，一是这样可以减少服务器访问的压力，二是可以减少服务器的流量费，三是可以提高用户体验（快速获取页面内容）减少加载时间。
而这些变化的参数可以使用随机数来实现，而是可以使用时间戳参数。

JS中时间的运用

// 这里直接在JS文件中运行，打印出来的时间少了八小时。（通过getTime()获取到的时间戳是对的）时区是0时区，要获取中国的时间，要加8小时，但是在HTML中运行时间是对的，问题还没找到，后续查询一下

function time(){
    let t = new Date()

    console.log(t)

    let yea = t.getYear()   // 这个方法要加1900，输出是122，加1900=2022（老网站）
    // console.log(yea)

    let year = t.getFullYear()
    // console.log('年份',year)

    let month = t.getMonth() + 1
    // console.log('月份', month)    //需要加1，才是当前月份

    let date = t.getDate()
    // console.log('日', date)

    let hour = t.getHours()
    // console.log(hour)

    let minute = t.getMinutes()
    // console.log(minute)
    let seconds = t.getSeconds()
    // console.log(seconds)

    format_date = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + seconds;
    console.log(format_date)
    }
setInterval(time, 1000)

要注意
1、在逆向的时候，如果看到一个东西 + 1900先要想到这个是一个时间；
2、获取时间的时候，可以不加小括号let d=new Date

JS中的时间戳

单位是：毫秒，13位数字

// 获取时间戳
let d=new Date();
console.log(d.getTime())