let与const声明的变量的特点

let
1，let定义的变量不会预解析，必须先声明再使用，否则会报错
2，let不能定义已经定义过的变量（无论之前是用var定义的还是let或者const定义的）
3，let是块级作用域，函数内部使用let定义后，对函数外部无影响，简单说就是在一个{}里面生效
4，由于let是块级作用域，在循环绑定事件过程中let会在这个循环中生效，再次循环时let会重新定义生效
const
1，const定义的变量不会预解析，必须先声明再使用，否则会报错
2，const定义的变量不允许修改，但是，在数组里面，const的值是允许被修改的，这是因为const存储的是地址，值的内容可以变化

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
     //在学习的script中使用var定义变量    
     console.log(a);
     var a = 12 ;
     //let用同样的方式就会报错
    //  console.log(b);
     let b = 20;
     //报错：Uncaught ReferenceError: Cannot access 'b' before initialization
    //-----------------------------
    let c = 25;
    //let声明过的变量不能被重新赋值
    //报错：Uncaught SyntaxError: Identifier 'c' has already been declared
   //-----------------------------
   function num()
   {
       let d = 15 ;
       return (d * 3) + c;
   }
   console.log(num());
   //let作用域：在函数内可以调用函数外的let，反之外不能调用内
   //-----------------------------
     var ul = document.createElement("ul");
     ul.setAttribute("id","nav");
     document.body.appendChild(ul);
     for(let i = 1;i < 5; i++)
     {
         var lis =document.createElement("li");
         ul.appendChild(lis);
         console.log(i); // 正常输出1,2,3,4
     }
    // console.log(i); //报错:i is not defined
    //let 在使用循环定义变量很实用。
    //--------------------------------------
    //const声明不可以改变的变量、不能被修改
    const e = 100;
    console.log(e);
   // e = e-10; //报错：Assignment to constant variable.
    const arr = ['1','2','3','4','5'];
    arr[2]='我是数字';
    console.log(arr);
    //const 定义的数字是可以被修改的
    //暂时性死区:
     var v =12;
     if(true)
     {
         //console.log(v); //报错：Cannot access 'v' before
         const v = 24;
         console.log(v); //重新定义v，输出 24
     }
     console.log(v);  //输出 12
    </script>
</body>
</html>

解析

使用let对数组及对象解构，可以方便的设置和更新数组。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //----------------数组解构----------------------------
        // let array = ['1','曹操','男','39','cc@qq.com','13999999999'];
        // let [id,user,sex,age,email,mobile] = array;
        // console.log(id);
        // console.log(user);
        // console.log(sex);
        // console.log(age);
        // console.log(email);
        //let 可以对数组属性赋值到变量中，数组按索引排列，自定义变量名
        //----------------数组解构1-1-----------------------------
        // let [username,[age1,sex],email] = ['曹操',[23,'男'],'cc@qq.com'];
        // console.log(username);
        //----------------数组解构-2-----------------------------
        // let array = ['1','曹操','男','39','cc@qq.com','13999999999'];
        // let [id,user,sex,age,email,mobile] = [array[0],array[1]='刘备',array[2],array[3],array[4]='lb@qq.com',array[5]='13888888888'];
        // console.log(user);
        // console.log(email);
        // console.log(mobile);
        //----------------数组解构-3------------------------------
        // let array = ['刘备','男','lb@qq.com'];
        // let [user,sex,mobile] = array;
        // console.log(array);
        //----------------对象解构------------------------------
        // let obj = {'user':'曹操','email':'cc@qq.com','mobile':'13999999999'};
        // let {user,email,mobile} = obj;
        // console.log(user);
        // console.log(email);
        // console.log(mobile);
        //----------------对象解构-1------------------------------
        //  let user = {
        //      userName :'刘备',
        //      email:"lb@qq.com",
        //      other:{
        //          age:25,
        //          sex:'男',
        //      }
        //  };
        //  let {userName,email,other:{age,sex}} = user;
        //  console.log(userName);
        //  console.log(email);
        //  console.log(age);
         //区分大小写，
         //--------------对象解构-2------------------------------
        //  let user = '曹操';
        //  let email = 'cc@qq.com';
        //  ({user,email} = {user:'刘备',email:'lb@qq.com'});
        //  console.log(user);
        //  console.log(email);
        //--------------对象解构-3----------------------------------
        // let user = {
        //      userName :'刘备',
        //      email:"lb@qq.com",
        //      other:{
        //          age:undefined,
        //          sex:'男',
        //      }
        //  };
        //  let {userName,email,other:{age= 30,sex}} = user;
        //  console.log(age);
        //--------------对象解构-4----------------------------------
         let user = {
             userName :'刘备',
             email:"lb@qq.com",
             other:{
                 age:undefined,
                 sex:'男',
             }
         };
         let {userName:User,email,other:{age=25,sex}}=user;
         console.log(User);
         console.log(sex);
        </script>
</body>
</html>

示例图

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：坚持

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

Grid还原首页图片布局

2020-07-04 21:22:36