JavaScript函數擴展與箭頭函數超詳細講解
函數參數擴展
ES6 允許給函數參數賦初始值:
形參初始值 具有默認值的參數,一般位置要靠後(潛規則);使用參數默認值時,函數不能有同名參數;參數默認值不是傳值的,而是每次都重新計算默認值表達式的值。
function add(a,b,c=10){ return a + b + c; } let result = add(1,2); console.log(result); // 13
與解構賦值結合,如果傳遞數值瞭就用傳遞的數值,否則就用默認值
function connect({host="127.0.0.1",username,password,port}){ console.log(host); console.log(username); console.log(password); console.log(port); } connect({ // host:'localhost', //傳瞭值就用這個,如果沒有傳就用默認值 username:'root', password:'root', port:80 })
當函數傳參給予瞭默認值,length屬性將忽略傳遞默認值的長度。
<script> function fun(a,b,c){ console.log(fun.length); } fun()//3 function fun(a,b,c=1){ console.log(fun.length); } fun()//2 </script>
當我們給參數設置默認值時,會自動形成作用域,僅限函數內部的數據傳值,如果函數形參沒有傳遞數值,就會找函數之外的數,以下面例子為例:
<script> var x = 1; // 函數形參定義瞭x的值,就不需要去外面再找x值 function f(x, y = x) { console.log(y); } f(2) // 2 var a = 1; // 函數形參沒有定義a的值,所以需要去外面找a的值,所以打印為1 function g(b = a){ let a = 2; console.log(b); } g()//1 </script>
rest參數
ES6引入rest參數(其形式為:…變量名),用於獲取函數的多餘參數,這樣就不需要使用arguments對象,rest 參數搭配的變量是一個數組,該變量將多餘的參數放入數組中。
<script> // ES5 獲取實參的方式 function date(){ console.log(arguments); } date(1,2,3,4,5) console.log('--------------'); // rest參數 function date1(...args){ console.log(args); } date1(1,2,3,4,5) </script>
箭頭函數
在ES6中規定允許使用箭頭 ( => ) 定義函數。
//正常寫法 let fn = function(){ } //箭頭函數 let fn1 = (a,b) =>{ return a + b; } console.log(fn1(1,2)); //3
箭頭函數的使用規范
箭頭函數中:this 是靜態的,this始終指向函數聲明時所在作用域下的 this 的值。
function getName(){ console.log(this.name); } let getName2 = () =>{ console.log(this.name); } // 設置 window 對象的 name 屬性 window.name = '張三' const person = { name:'小張' } // 直接調用 getName() //張三 getName2() //張三 //call 方法調用 getName.call(person) //小張 getName2.call(person) //張三 箭頭函數是靜態的,始終指向開始時的第一個值
箭頭函數中: 不能構造實例化對象,否則會報錯。
let Person = (name,age) =>{ this.name = name; this.age = age; } let p = new Person('張三',18) console.log(p);
箭頭函數中:不能使用 arguments 變量。
let fun = () => { console.log(agruments); } fun(1,2,3)
箭頭函數中:箭頭函數的簡寫方式。
1、省略小括號,當形參有且隻有一個的時候。
let add = n => { return n*n; } console.log(add(8));//64
2、 省略花括號,當代碼體隻有一條語句時,此時 return 必須省略,而且語句的執行結果就是函數的返回值。
let pow = (n) => n+n; console.log(pow(2)); //4
箭頭函數的嵌套
箭頭函數內部,還可以使用箭頭函數:
<script> // ES5 語法的多重嵌套 function insert(value) { return {into: function (array) { return {after: function (afterValue) { array.splice(array.indexOf(afterValue) + 1, 0, value); return array; }}; }}; } console.log(insert(2).into([1, 3]).after(1)); //[1, 2, 3] // ES6 箭頭函數嵌套 let insert = (value) => ({into: (array) => ({after: (afterValue) => { array.splice(array.indexOf(afterValue) + 1, 0, value); return array; }})}); console.log(insert(2).into([1, 3]).after(1)); //[1, 2, 3] </script>
箭頭函數案例
點擊 div 2s 之後顏色變成 pink :
<head> <title>Document</title> <style> div { width: 200px; height: 200px; background: #58a; } </style> </head> <body> <div id="id"></div> <script> // 獲取元素 let div = document.querySelector('#id') // 綁定事件 div.addEventListener("click",function(){ // 如果想用 this 調用,先在外部保存this,否則this會指向window對象 let _this = this; // 點擊 2s 之後讓盒子顏色改變 setTimeout(()=>{ // div.style.background = 'pink' _this.style.background = 'pink' },2000) }) </script> </body>
從數組中返回偶數的元素:
<script> const arr = [1,6,9,10,100,25]; /* filter() 方法創建一個新的數組,函數中有return返回值。 * 若返回值為true,這個元素保存到新數組中; * 若返回值為false,則該元素不保存到新數組中;原數組不發生改變。 */ const result = arr.filter(function(item){ if(item%2===0){ return true; }else{ return false } }) console.log(result); console.log('-------------------'); const result1 = arr.filter(item => item % 2 ===0 ) console.log(result1); // 箭頭函數適合與 this 無關的回調:定時器。數組方法的回調 // 箭頭函數不適合與 this 有關的回調:事件回調、對象的方法 </script>
使用總結:
箭頭函數沒有自己的this對象
不可以當做構造函數,即不能對箭頭函數使用new命令,否則報錯
不可以使用arguments對象,該對象在函數體內不存在,如需使用用rest函數代替
不可以使用yield命令,因此箭頭函數不能用作 Generator 函數。
到此這篇關於JavaScript函數擴展與箭頭函數超詳細講解的文章就介紹到這瞭,更多相關JS函數擴展與箭頭函數內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 關於ES6中的箭頭函數超詳細梳理
- JavaScript中的this例題實戰總結詳析
- JavaScript中forEach的錯誤用法匯總
- Javascript動手實現call,bind,apply的代碼詳解
- JavaScript數據扁平化詳解