根据视频进行整理
【https://www.bilibili.com/video/BV1uK411H7on?p=1】
视频资源(百度网盘)：
链接：【https://pan.baidu.com/s/1VBnPHafId30dWLhkI1DojA】
提取码：1234
ES6
1. let 关键字
let 关键字用来声明变量，使用 let 声明的变量有几个特点：
- 不允许重复声明
- 块儿级作用域
- 不存在变量提升
- 不影响作用域链
1.1 声明变量
// 可以使用let声明单个变量 let a; // 可以在声明变量的同时赋值 let b = 100; // 可以一次同时声明多个变量 let c,d,e; // 可以声明多个变量同时赋值 let f = 'abc', g = 123, h = {}, i = []; // 变量不能重复声明 // let a = 100;
var 可以重复声明变量：
var j = 100; var j = []; console.log(j)
1.2 块级作用域
{ let age = 12; } console.log(age)
var 不具有块级作用域
{ var username = 'zs' } console.log(username)
1.3 不存在变量提升
var 声明变量，相当于在最前面声明一个变量。
console.log(myage) var myage = 20
上面代码相当于：
var myage console.log(myage) myage = 20
由于声明了没有赋值，所以输出为undefined
而 let 声明变量不会存在变量提升，会直接报错
console.log(myage) let myage = 20
1.4 不影响作用域链
{ let myname = '张三' { // 在该作用域下没有 myname，会向上一级作用域寻找 myname // 找到输出 console.log(myname) // 没有找到报错 console.log(myage) } }
1.5 案例实践 – 点击 DIV 换色
使用 var 声明变量 i ，并且使用 items[i] 修改样式会报错
<!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> <style> .item { width: 100px; height: 50px; border: solid 1px rgb(42, 156, 156); float: left; margin-right: 10px; } </style> </head> <body> <div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <script> // 获取元素 let items = document.querySelectorAll('.item') // console.log(items) // 给元素绑定事件 for( var i=0; i<items.length; i++ ) { items[i].onclick = function() { //修改当前元素的背景颜色 // 使用 items[i] 进行修改 items[i].style.background = 'pink' } } </script> </body> </html>
原因使用 var 声明 i 相当于在全局声明了一个变量 i 每次 i++，相当于对全局的 i ++，事件绑定完成后 i 为3，当点击元素触发事件会导致数组下标越界。
使用 let 则不会，因为 let 存在块级作用域
// 获取元素 let items = document.querySelectorAll('.item') // console.log(items) // 给元素绑定事件 for( let i=0; i<items.length; i++ ) { items[i].onclick = function() { //修改当前元素的背景颜色 // 使用 items[i] 进行修改 items[i].style.background = 'pink' } }
2. const 关键字
const 关键字用来声明常量，const 声明有以下特点
- 声明必须赋初始值
- 标识符一般为大写
- 不允许重复声明
- 值不允许修改
- 块儿级作用域
2.1 声明常量
// 声明常量 // 声明必须赋初始值 // 标识符一般为大写(潜规则), 不大写也不报错, 只是常量习惯性大写 const PI = 3.14 console.log(3.14)
声明常量不赋初始值会报错
const A
2.2 不允许重复声明
const PI = 3.14 const PI = 3.1415
2.3 值不允许修改
const PI = 3.14 PI = 3.1415
2.4 块儿级作用域
const PI = 3.14 { // 在该作用域下没有声明PI, 会向上一级作用域寻找 console.log(PI) }
2.5 对于数组和对象的元素修改, 不算做对常量的修改
数组和对象变量中保存的为数组和对象的地址，改变对象和数组中的元素没有修改其地址，所以相当于没有修改数组和对象变量，不会报错
const ARR = ['a', 1, 2, 3, 45] ARR[0] = 0 console.log(ARR)
声明对象类型使用 const，非对象类型声明选择 let
