Javascript 中 var 和 let 、const 的区别及使用方法

<script>
    var userName;
    var age,address,phone;
    console.log(userName)
    console.log(age)
    console.log(address)
    console.log(phone)
</script>

<script>
    var userName = 'sa'
    var age = 18,address = '南昌',phone = '19238824523'
    console.log(userName)
    console.log(age)
    console.log(address)
    console.log(phone)
</script>

<script>
 var userName = 'sa'
 console.log(userName)
 var userName = 77  // 这边也可以省略var
 console.log(userName)
</script>

<script>
    // 定义函数，测试两个变量是否在函数体外部可以使用
    function test(){
        var msg = '这是局部变量'
        message = '这是全局变量'
 
    }
    test()
    console.log(window.message)
    console.log(message)
    console.log(msg)
</script>

<script>
    // 定义函数，测试变量提升
    function test(){
        console.log(msg)
        var msg = '变量'
        console.log(msg)
    }
    test()
</script>

 function test(){
        var msg
        console.log(msg)
         msg = '变量'
        console.log(msg)
    }
    test()

    // let 和 var 的作用域区别
if (true) {
    var username = 'sa'
    let msg = 'ss'
}
    console.log(username)
    console.log(msg)

<script>
var userName
var userName
let msg
let msg
</script>

<script>
var userName
let userName
 
let msg
var msg
// 这边将会报一个重复定义的错误
 
</script>

<script>
let age = 20
console.log(age) // 20
if (true) {
    let age = 18
    console.log(age) // 18
}
</script>

<script>
function test() {
    console.log(age)
    let age = 20
}
test()
</script>

<script>
var msg = '我是var声明的变量'
let mess = '我是let声明的变量'
console.log(window.msg)
console.log(window.mess)
</script>

<script>
    // 当前声明两个变量
    var msg = '我是var声明的变量'
    let mess = '我是let声明的变量'
</script>
<script>
    var msg = 'sa' // 这里没问题，var 存在变量提升声明来处理
    let mess = 'ss' // 当之前声明了变量mess，这里将报错，let 不存在变量提升
</script>

<script>
let mess // 当前只声明了一个 let 变量
</script>
<script>
  if (typeof mess === 'undefined'){
      let mess
  }
  mess = 'sa' // mess 被限制在 if {} 作用域块中，当前赋值为全局赋值
  console.log(mess) // sa
  try {
      console.log(age)
  }
  catch (error) {
      let age
  }
  age = 20  // age 被限制在 catch {} 作用域块中，当前赋值为全局赋值
  console.log(age) // 20
</script>

for (var i = 0; i < 6; i++) {
    setTimeout(() => {
        console.log(i) },0) //  这将打印六个 6
}

for (let i = 0; i < 6; i++) {
    setTimeout(() => {
        console.log(i) },0) //  这将打印六个 6
}

<script>
const age = 20
age = 30
</script>

<script>
const age = 20
const age = 30
</script>

<script>
if (true) {
    const age = 30
}
console.log(age)
</script>

const student = {
    name: 'sa',
    age: 18,
    address: 'shanghai'
}
student.name = 'saa'
console.log(student.name) // 输出saa

for (const key in { a: 1, b: 2, c: 3 }){
    console.log(key)
}