JavaScript函數(shù)擴展與箭頭函數(shù)超詳細講解

更新時間：2022年11月08日 15:52:34 作者：亦世凡華、

這篇文章主要介紹了JavaScript函數(shù)擴展與箭頭函數(shù)的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧

函數(shù)參數(shù)擴展

ES6 允許給函數(shù)參數(shù)賦初始值：

形參初始值具有默認值的參數(shù)，一般位置要靠后(潛規(guī)則)；使用參數(shù)默認值時，函數(shù)不能有同名參數(shù)；參數(shù)默認值不是傳值的，而是每次都重新計算默認值表達式的值。

function add(a,b,c=10){
    return a + b + c; 
}
let result = add(1,2);
console.log(result); // 13

與解構(gòu)賦值結(jié)合,如果傳遞數(shù)值了就用傳遞的數(shù)值，否則就用默認值

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
})

當函數(shù)傳參給予了默認值，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>

當我們給參數(shù)設(shè)置默認值時，會自動形成作用域，僅限函數(shù)內(nèi)部的數(shù)據(jù)傳值，如果函數(shù)形參沒有傳遞數(shù)值，就會找函數(shù)之外的數(shù)，以下面例子為例：

<script>
    var x = 1;
    // 函數(shù)形參定義了x的值，就不需要去外面再找x值
    function f(x, y = x) {
        console.log(y);
    }
    f(2) // 2
    var a = 1;
    // 函數(shù)形參沒有定義a的值，所以需要去外面找a的值，所以打印為1
    function g(b = a){
        let a = 2;
        console.log(b);
    }
    g()//1
</script>

rest參數(shù)

ES6引入rest參數(shù)(其形式為：...變量名)，用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對象，rest 參數(shù)搭配的變量是一個數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。

<script>
    // ES5 獲取實參的方式
    function date(){
        console.log(arguments);
    }
    date(1,2,3,4,5)
    console.log('--------------');
    // rest參數(shù)
    function date1(...args){
        console.log(args);
    }
    date1(1,2,3,4,5)
</script>

箭頭函數(shù)

在ES6中規(guī)定允許使用箭頭 ( => ) 定義函數(shù)。

//正常寫法
let fn = function(){
}
//箭頭函數(shù)
let fn1 = (a,b) =>{
    return a + b;
}
console.log(fn1(1,2)); //3

箭頭函數(shù)的使用規(guī)范

箭頭函數(shù)中：this 是靜態(tài)的，this始終指向函數(shù)聲明時所在作用域下的 this 的值。

function getName(){
    console.log(this.name);
}
let getName2 = () =>{
    console.log(this.name);
}
// 設(shè)置 window 對象的 name 屬性
window.name = '張三'
const person = {
    name:'小張'
}
// 直接調(diào)用
getName() //張三
getName2() //張三
//call 方法調(diào)用
getName.call(person) //小張
getName2.call(person) //張三 箭頭函數(shù)是靜態(tài)的，始終指向開始時的第一個值

箭頭函數(shù)中：不能構(gòu)造實例化對象，否則會報錯。

let Person = (name,age) =>{
    this.name = name;
    this.age = age;
}
let p = new Person('張三',18)
console.log(p);

箭頭函數(shù)中：不能使用 arguments 變量。

let fun = () => {
    console.log(agruments);
}
fun(1,2,3)

箭頭函數(shù)中：箭頭函數(shù)的簡寫方式。

1、省略小括號，當形參有且只有一個的時候。

let add = n => {
    return n*n;
}
console.log(add(8));//64

2、省略花括號，當代碼體只有一條語句時，此時 return 必須省略，而且語句的執(zhí)行結(jié)果就是函數(shù)的返回值。

let pow = (n) => n+n;
console.log(pow(2)); //4

箭頭函數(shù)的嵌套

箭頭函數(shù)內(nèi)部，還可以使用箭頭函數(shù)：

<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 箭頭函數(shù)嵌套
    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>

箭頭函數(shù)案例

點擊 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 調(diào)用，先在外部保存this，否則this會指向window對象
            let _this = this;
            // 點擊 2s 之后讓盒子顏色改變
            setTimeout(()=>{
                // div.style.background = 'pink'
                _this.style.background = 'pink'
            },2000)
        })
    </script>
</body>

從數(shù)組中返回偶數(shù)的元素：

<script>
    const arr = [1,6,9,10,100,25];
    /* filter() 方法創(chuàng)建一個新的數(shù)組,函數(shù)中有return返回值。
     * 若返回值為true，這個元素保存到新數(shù)組中；
     * 若返回值為false，則該元素不保存到新數(shù)組中；原數(shù)組不發(fā)生改變。
    */
    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);
    // 箭頭函數(shù)適合與 this 無關(guān)的回調(diào)：定時器。數(shù)組方法的回調(diào)
    // 箭頭函數(shù)不適合與 this 有關(guān)的回調(diào)：事件回調(diào)、對象的方法 
</script>