let 和 const
1.let 和 const是什么 声明变量和常量 var声明变量 let 代替var 声明变量 const 声明常量 constant 2.let 和const的用法
var username = "alex"
let age = 18
const sex = "male";
console.log(username,age,sex);
3.什么是变量什么是常量
username = "ZS"
age = 28
console.log(username,age);//ZS 18
sex = "xioaming"
// var let声明的是变量 变量一段初始化后 还可以重新赋值
// const 声明的就是常量 常量一旦初始化就不能重新赋值 否则就会报错
let const var区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.重复声明
// 已经存在的变量或常量 又声明了一遍
// var 允许重复声明 let const 不允许
// var a = 1
// var a =2
// console.log(a);//2
// function fun(a){
// let a =1
// }
// fun()//报错
// 2.变量提升
// var会提升变量的声明到当前作用域的顶部
// console.log(a);//undefined
// var a = 1
// // 相当于
// var a;
// console.log(a);
// a = 1
// let const不存在变量提升
// console.log(a);//报错
// let a = 1
// 3.暂时性死区
// 只要作用域内存在let 和 const 他们所声明的变量或常量就
// 自动绑定这个区域不在收到外部作用域的影响
// let a = 2
// let b = 1
// function func(){
// console.log(b);
// console.log(a);
// let a =1
// }
// func()//报错
// 4.window 对象的属性和方法
// 在全局作用域中 通过function声明的函数 就会自动变成window对象的属性和方法
// let 和const不会
var age = 14
function fun(){}
console.log(window.age);
console.log(window.fun);
console.log(fun === window.fun);
// 5.块级作用域
</script>
</body>
</html>
const
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 为什么需要 const
// let
// let sex = "male"
// sex = "111"
// console.log(sex);
// const
// const sex = "123"
// ...
// sex = 456 //报错
// console.log(sex);
// const 就是为了那些一旦初始化就不希望重新复赋值的情况设计的
// 2.const的注意事项
// 2.1使用const声明常量一旦声明就必须立即初始化
// 不能留到以后赋值
// const sex;
// sex="123"
// const sex=123
// 2.2const声明的常量 允许在不重新赋值的情况下修改他的值
// 基本数据类型 没办法修改
// const sex = "123";
// sex = "456"
// 引用数据类型
const proson = {username:213}
proson.username = "456"
console.log(proson);
// 什么时候用const 什么时候用let
// for(let i =0;i<3;i++){}
// 需求不确定时先用const
const username = "213"
username = "ZS"
</script>
</body>
</html>
模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.认识模板字符串
const username1 = `123`
const username2 = "123"
console.log(username1 === username2);
// 2.模板字符串与一般字符串的区别
const proson = {username:"123"}
console.log("我的名字是"+ proson.username);
console.log(`我的名字是${proson.username}`);
// 和其他东西一起使用的时候使用模板字符串方便注入
// 其他情况使用模板字符串或一般字符串都行
</script>
</body>
</html>
模板字符串的注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.输出多行字符串
// 一般字符串
// const info = '第一行\n第二行'
// console.log(info);
// 模板字符串
// const info = `第一行\n第二行`
// console.log(info);
// const info = `第一行
// 第二行`
// console.log(info);
// 模板字符串中 所有的空格 换行或缩进都会被保留在输出之中
// 输出特殊字符
// const info = `\`\\'`
// console.log(info);
// 3.模板字符串注入
// ${}
const username = "alex"
const proson = {age:18,sex:`male`}
const Getsex = function(sex){
return sex === `male`?`男`:`女`
}
const info = `${username},${proson.age},${Getsex(proson.sex)}`
console.log(info);
// 只要最终得到一个值的就可以注入到模板字符串中
</script>
</body>
</html>
模板字符串的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width='device-width', initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>学生信息表</p>
<ul id="list">
<li style="list-style: none;">信息加载中</li>
</ul>
<script>
const student =[
{
username:`Alex`,
age:18,
sex:`male`
},
{
username:`ZhangSan`,
age:28,
sex:`male`
},
{
username:`LiSi`,
age:20,
sex:`female`
},
]
const list = document.getElementById("list")
let html = ``
for(var i =0;i<student.length;i++){
html +=`<li>${student[i].username}
${student[i].age},${student[i].sex}</li>`
}
list.innerHTML = html
</script>
</body>
</html>
块级作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.什么是块级作用域
// var没有块级作用域
// for(var i =0;i<3;i++){
// console.log(i);
// }
// console.log(i);
// let const有块级作用域
// for(let i =0;i<3;i++){
// console.log(i);
// }
// console.log(i);//报错
// 2.作用域链
function fnc() {
for (let i = 0; i < 3; i++) {
i = i + 1
console.log(i);
}
}
fnc()
console.log(i);//报错
// 作用域：内层作用于>外层作用域>全局作用域
// 3.有哪些块级作用域
// {
// let age = 18;
// console.log(age);
// }
// console.log(age);//报错
// {}
// for(){}
// while(){}
// do{}while()
// if()
// switch()
// 只有let 和 const有块级作用域
// function (){}
// 对象不构成任何作用域
</script>
</body>
</html>
箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.认识箭头函数
// const add=(x,y)=>{
// return x + y
// }
// console.log(add(1,2));
// 2.箭头函数的结构
// const/let 函数名 = 参数 => 函数体
// 3.如何将一般函数改写成箭头函数
// 声明形式
// function add(){}
// 声明形式 -> 函数表达式形式
// const add = function(){}
// const add =()=>{}
</script>
</body>
</html>
箭头函数的注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.单个参数
// const add = (x) => {
// return x + 1
// }
// console.log(add(1));
// 简化
// const add = x=>{
// return x +1
// }
// console.log(add(1));
// 无参数或多个参数不能省略圆括号
// const add = ()=>{
// return 1+1
// }
// console.log(add());
// const add = (x,y)=>{
// return x+y
// }
// console.log(add(1,1));
// 单行函数体
// 单行函数体可以同时省略{}和return
// const add = (x, y) => x + y
// console.log(add(1, 1));
// 多行函数体不能简化
// const add = (x,y)=>{
// const sum = x+y
// return sum
// }
// 3.单行对象
// const add = (x,y)=>{
// return {
// value:x + y
// }
// }
// console.log(add(1,1));
// const add = (x,y)=>({
// value:x + y
// })
// console.log(add(1,1));
// 如果浏箭头函数返回单行对象 可以在{}外面加上() 让浏览器不再认为那是函数体的花括号
// const add =(x,y)=>[x,y]
// console.log(add(1,2));
</script>
</body>
</html>
箭头函数的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.单个参数
// const add = (x) => {
// return x + 1
// }
// console.log(add(1));
// 简化
// const add = x=>{
// return x +1
// }
// console.log(add(1));
// 无参数或多个参数不能省略圆括号
// const add = ()=>{
// return 1+1
// }
// console.log(add());
// const add = (x,y)=>{
// return x+y
// }
// console.log(add(1,1));
// 单行函数体
// 单行函数体可以同时省略{}和return
// const add = (x, y) => x + y
// console.log(add(1, 1));
// 多行函数体不能简化
// const add = (x,y)=>{
// const sum = x+y
// return sum
// }
// 3.单行对象
// const add = (x,y)=>{
// return {
// value:x + y
// }
// }
// console.log(add(1,1));
// const add = (x,y)=>({
// value:x + y
// })
// console.log(add(1,1));
// 如果浏箭头函数返回单行对象 可以在{}外面加上() 让浏览器不再认为那是函数体的花括号
// const add =(x,y)=>[x,y]
// console.log(add(1,2));
</script>
</body>
</html>
