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>

示例图

批改老师：

天蓬老师

批改状态：合格

老师批语：坚持

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Grid还原首页图片布局

2020-07-04 21:22:36