箭頭函數(shù)可以說是ES6的一大亮點,使用箭頭函數(shù),可以簡化編碼過程,使代碼更加的簡潔
本文由千鋒前端老師獨家創(chuàng)作，主要給大家介紹了關(guān)于ES6中箭頭函數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,覺得有幫助的話可以【關(guān)注】持續(xù)追更~
ES6定義變量
我們現(xiàn)在知道定義（聲明）一個變量用的是var
在ES6中又增加了兩種定義（聲明）變量的方式：let和const
let聲明變量： 用let聲明的變量也叫變量
const聲明變量： 用const聲明的變零叫產(chǎn)量
let和const的區(qū)別
聲明時賦值
用let聲明變量的時候可以不賦值
用const聲明變量的時候 必須 賦值
值的修改
用let聲明的變量的是可以任意修改的
用const聲明的變量的是不能修改的，也就是說一經(jīng)聲明就不允許修改
但是 用const聲明的對象，對象里面的屬性的值是可以修改的
<script>
//注意：這里的代碼不能整體運行。需要單獨運行。這里是為了整體做比較
// let 和 const 的區(qū)別
// 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 = '我是定義時候就寫好的內(nèi)容'
console.log(str)
// 當你試圖修改一個 const 定義的常量 直接報錯
str = 'hello world'
</script>
let/const和var的區(qū)別
預解析
○var 會進行預解析, 可以先使用后定義
○let/const 不會進行預解析, 必須先定義后使用
變量重名
○var 定義的變量可以重名, 只是第二個沒有意義
○let/const 不允許在同一個作用域下, 定義重名變量
塊級作用域
var 沒有塊級作用域
let/const 有塊級作用域
塊級作用域 任何一個可以書寫代碼段的 {} 都會限制變量的使用范圍
if() {}
for () {}
<script>
// 注意：代碼不能整體運行需要分開運行，為了對比需要
//let/const 和 var 的區(qū)別
// 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箭頭函數(shù)
箭頭函數(shù)是ES6 語法中定義函數(shù)的一種新方式，箭頭函數(shù)只能用來定義函數(shù)表達式，所以箭頭函數(shù)也是匿名函數(shù)
當你把函數(shù)當做一個值賦值給另一個內(nèi)容的時候, 叫做函數(shù)表達式
聲明式函數(shù)的定義方式是不能定義箭頭函數(shù)的
function fn() {} 這樣的方式是聲明式函數(shù)，不能用來定義箭頭函數(shù)
語法：() => {}
()中書寫形參
{}中書寫代碼片段
箭頭函數(shù)的特點
可以省略小括號不寫
當你的形參只有一個的時候, 可以不寫小括號
如果你的形參沒有或者兩個及以上, 必須寫小括號
<script>
let fn1 = () => {
console.log('我是 fn1 函數(shù), 我沒有形參')
}
fn1()
// 一個形參, 可以不寫小括號
let fn2 = a => {
console.log('我是 fn2 函數(shù), 有一個參數(shù)', a)
}
fn2(10)
// 兩個形參, 必須寫小括號
let fn3 = (a, b) => {
console.log('我是 fn3 函數(shù), 有兩個參數(shù)', a, b)
}
fn3(100, 200)
</script>
●可以省略大括號不寫
○當代碼只有一句話的時候, 可以省略大括號不寫, 并且會自動返回這一句話的結(jié)果，否則, 必須寫大括號
<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>
箭頭函數(shù)中沒有arguements
箭頭函數(shù)內(nèi)天生不帶有 arguments。沒有所有實參的集合
<script>
//普通函數(shù)
let fn1 = function() {
console.log(arguments)//會拿到傳遞的實參
}
fn1(10, 20, 30, 40, 50)
//箭頭函數(shù)
let fn2 = () => {
console.log(arguments)//會報錯
}
fn2(10, 20, 30)
</script>
●箭頭函數(shù)內(nèi)沒有this
○箭頭函數(shù)中的this指向外部作用域
○也就是書寫在箭頭函數(shù)的外面那個函數(shù) this 是誰, 箭頭函數(shù)內(nèi)的 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>
到此這篇關(guān)于ES6定義變量與箭頭函數(shù)講解的文章就介紹到這了文章來源：http://www.zghlxwxcb.cn/news/detail-454840.html
更多關(guān)于ES6的內(nèi)容可以持續(xù)關(guān)注我們，技術(shù)問題歡迎大家一起交流討論~文章來源地址http://www.zghlxwxcb.cn/news/detail-454840.html
到了這里，關(guān)于【JavaScript解析】ES6定義變量與箭頭函數(shù)詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
