ES6定义变量与箭头函数
ES6定义变量 ●我们现在知道定义(声明)一个变量用的是var●在ES6中又增加了两种定义(声明)变量的方式:let和const let声明变量●用let声明的变量也叫变量 const声明变量●用const声明的变零叫产量 let和const的区别●声明时赋值○用let声明变量的时候可以不赋值○用const声明变量的时候 必须 赋值●值的修改○用let声明的变量的是可以任意修改的○用const声明的变量的是不能修改的,也就是说一经声明就不允许修改○但是 用const声明的对象,对象里面的属性的值是可以修改的 <script> //注意:这里的代码不能整体运行。需要单独运行。这里是为了整体做比较 // let 和 const 的区别 // 1. 声明时赋值 let n console.log(n) //undefined n = 200 console.log(n) //200 // 不能定义常量不赋值 会报错 const n2 // 2. 值的修改 let n = 100 console.log(n) //100 n = 'hello world' console.log(n) //hello world const str = '我是定义时候就写好的内容' console.log(str) // 当你试图修改一个 const 定义的常量 直接报错 str = 'hello world' </script> 复制代码 let/const和var的区别●预解析○var 会进行预解析, 可以先使用后定义○let/const 不会进行预解析, 必须先定义后使用●变量重名○var 定义的变量可以重名, 只是第二个没有意义○let/const 不允许在同一个作用域下, 定义重名变量●块级作用域○var 没有块级作用域○let/const 有块级作用域○块级作用域: 任何一个可以书写代码段的 {} 都会限制变量的使用范围■if() {}■for () {} <script> // 注意:代码不能整体运行需要分开运行,为了对比需要 //let/const 和 var 的区别 // 1. 预解析 console.log(n) //undefined var n = 100 // Uncaught ReferenceError: Cannot access 'n2' before initialization //未捕获引用错误:在初始化之前无法访问“n2” console.log(n2) let n2 = 200 console.log(n3) // Uncaught ReferenceError: Cannot access 'n3' before initi const n3 = 300 // // 2. 变量重名 var n = 100 var n = 200 console.log(n) //Uncaught SyntaxError: Identifier 'n1' has already been declared //未捕获的语法错误:标识符“n1”已声明 let n1 = 100 let n1 = 200 //会报错 const n2 = 200 const n2 = 300 //会报错 // 3. 块级作用域 if (true) { var n = 100 console.log(n) //100 } console.log(n) // 100 if (true) { let n = 200 console.log(n) //200 } console.log(n) //Uncaught ReferenceError: n is not defined const n = 400 if (true) { const n = 300 console.log(n) //300 } console.log(n) //400 </script> 复制代码 案例-选项卡 <!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> <style> * { margin: 0; padding: 0; } .box { wi