前言：
眼前我们对“css引导箭头”都比较珍视，姐妹们都想要剖析一些“css引导箭头”的相关资讯。那么小编同时在网络上网罗了一些对于“css引导箭头””的相关内容，希望咱们能喜欢，咱们快快来学习一下吧！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 { width: 500px; height: 320px; display: flex; flex-direction: column; margin: 50px auto; border: 3px solid #333; } .box > ul { height: 60px; display: flex; } .box > ul > li { flex: 1; display: flex; justify-content: center; align-items: center; font-size: 30px; color: #fff; background-color: skyblue; cursor: pointer; } .box > ul > li.active { background-color: orange; } .box > ol { flex: 1; position: relative; } .box > ol > li { width: 100%; height: 100%; background-color: purple; font-size: 50px; color: #fff; position: absolute; left: 0; top: 0; display: none; } .box > ol > li.active { display: block; } </style></head><body> <div class="box"> <ul> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <ol> <li class="active">1</li> <li>2</li> <li>3</li> </ol> </div> <script> /* 案例 - 选项卡 */ for (let i = 0; i < btns.length; i++) { btns[i].onclick = function () { for (let j = 0; j < btns.length; j++) { btns[j].classList.remove('active') boxs[j].classList.remove('active') } btns[i].classList.add('active') boxs[i].classList.add('active') } } /* </script></body></html>ES6箭头函数●箭头函数是ES6 语法中定义函数的一种新方式
●箭头函数只能用来定义函数表达式，所以箭头函数也是匿名函数
●当你把函数当做一个值赋值给另一个内容的时候, 叫做函数表达式
●声明式函数的定义方式是不能定义箭头函数的
○function fn() {} 这样的方式是声明式函数，不能用来定义箭头函数
●语法：() => {}
○()中书写形参
○{}中书写代码片段
箭头函数的特点
●可以省略小括号不写
○当你的形参只有一个的时候, 可以不写小括号
○如果你的形参没有或者两个及以上, 必须写小括号
<script> let fn1 = () => { console.log('我是 fn1 函数, 我没有形参') } fn1() // 一个形参, 可以不写小括号 let fn2 = a => { console.log('我是 fn2 函数, 有一个参数', a) } fn2(10) // 两个形参, 必须写小括号 let fn3 = (a, b) => { console.log('我是 fn3 函数, 有两个参数', a, b) } fn3(100, 200)</script>复制代码●可以省略大括号不写
○当的代码只有一句话的时候, 可以省略大括号不写, 并且会自动返回这一句话的结果
○否则, 必须写你大括号
<script> let fn1 = (a, b) => a + b let res = fn1(10, 20) console.log(res) //30 var arr = [1, 2, 3, 4, 5, 6, 7] //演变过程 // var res = arr.filter(function (item) { return item % 2 }) // var res = arr.filter((item) => { return item % 2 }) // var res = arr.filter(item => { return item % 2 }) var res1 = arr.filter(item => item % 2) console.log(res1) //[1, 3, 5, 7]</script>复制代码●箭头函数中没有arguements
○箭头函数内天生不带有 arguments。没有所有实参的集合
<script> //普通函数 let fn1 = function() { console.log(arguments)//会拿到传递的实参 } fn1(10, 20, 30, 40, 50) //箭头函数 let fn2 = () => { console.log(arguments)//会报错 } fn2(10, 20, 30)</script>复制代码●箭头函数内没有this
○箭头函数中的this指向外部作用域
○也就是书写在箭头函数的外面那个函数 this 是谁, 箭头函数内的 this 就是谁
<script> var obj = { name: '我是 obj 对象', f: function() { console.log('f : ', this) //Object }, f2: () => { // 这里没有 this, 用的是 外部的 this console.log('f2 : ', this) //Window } } obj.f() obj.f2()</script> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
