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' beforeconst 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>
示例图