javascript
javascript箭头函数和this的指向问题
箭頭函數
下面兩代碼等價:
const fun1 = function(x){ return x*x;}const fun = x => x*x;function換成=>，放在參數和函數體中間
注意：如果沒有參數，或有多個參數，需要使用（）來定義參數列表
如果有一個參數，可以不()
如果函數體中只有一條語句，可以不用{}
排序：
let arr = [1,5,2,34,22]; let narr = arr.sort(function(a,b){ return a-b;}); console.log(narr);也可以換成:
let narr = arr.sort((a,b)=>a - b); //省略了{}運行：
1.如果箭頭函數返回對象時，一定要在對象外邊加上小括號
<script>const fun = id =>({id:id,namee:'Hang三'});console.log(fun(10))</script>運行結果:
this的指向
- 普通函數的this:指向它的調用者，如果沒有調用者則默認指向window.
- 箭頭函數的this:指向箭頭函數定義時所處的對象，而不是箭頭函數使用時所在的對象，默認使用父級的this
- 綜上，箭頭函數沒有自己的this，它的this是繼承而來，默認指向在定義它時所處的對象
- 代碼塊多于一條語句，就用大括號括起來，并且用return返回
- 箭頭函數能夠簡化回調函數
點擊塊的背景顏色后變色，用普通函數實現：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><style>#box{width: 100px;height: 50px;background: red;}#box.bgcolor{background:teal;}</style> </head> <body> <div id = "box"></div> </body> <script>const box = document.getElementById('box');box.onclick = function(){this.className = 'bgcolor';} </script></html>效果:
點擊紅色的之后:
用箭頭函數：（加延遲函數setTimeOut)
由這個箭頭函數的this的用法也可以知道箭頭函數中的this并不是誰調用這個方法就代表哪個對象，而是在它所聲明的位置的父級對象
上面的函數轉化成鉤子函數寫可以簡化為:
goods = [11,2,43,21,4]; let sum = goods.filter(n =>n >= 10).map(n => n*0.5).reduce((s,n)=>s+n);map filter reduce方法
其中:
map()方法定義在JavaScript的Array中，它返回一個新的數組，數組中的元素為原始數組調用函數處理后的值。
1.map方法
注意：
map()不會對空數組進行檢測
map()不會改變原始數組
語法:
array.map(function(currentValue, index, arr), thisIndex)
參數說明：
function(currentValue, index, arr)：必須。為一個函數，數組中的每個元素都會執行這個函數。其中函數參數：
currentValue：必須。當前元素的的值。
index：可選。當前元素的索引。
arr：可選。當前元素屬于的數組對象。
thisValue：可選。對象作為該執行回調時使用，傳遞給函數，用作"this"的值。
2.reduce方法:
reduce() 方法
實例
計算數組元素相加后的總和：
輸出結果：
125
reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。
reduce() 可以作為一個高階函數，用于函數的 compose。
注意: reduce() 對于空數組是不會執行回調函數的。
語法：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
function(total,currentValue, index,arr) 必需。用于執行每個數組元素的函數。
initialValue 可選。傳遞給函數的初始值
3.JavaScript Array filter() 方法
返回數組 ages 中所有元素都大于 18 的元素:
var ages = [32, 33, 16, 40];function checkAdult(age) {return age >= 18; }function myFunction() {document.getElementById("demo").innerHTML = ages.filter(checkAdult); }輸出結果為:
32,33,40
filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
注意： filter() 不會對空數組進行檢測。
注意： filter() 不會改變原始數組。
語法
array.filter(function(currentValue,index,arr), thisValue)
function(currentValue, index,arr) 必須。函數，數組中的每個元素都會執行這個函數
thisValue 可選。對象作為該執行回調時使用，傳遞給函數，用作 “this” 的值。
如果省略了 thisValue ，“this” 的值為 “undefined”
總結
以上是生活随笔為你收集整理的javascript箭头函数和this的指向问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【学习笔记】opencv的python接
- 下一篇： 【笔记】springboot使用Spri