ES6从入门到进阶第四节箭头函数三个点运算符 ..._箭头函数的三个点参数-优快云博客

本文深入探讨了JavaScript中的函数特性，包括默认参数、扩展运算符的应用，以及箭头函数的语法和this指向规则。通过实例展示了如何使用扩展运算符进行数组元素的展开和复制，同时讲解了箭头函数在保持this上下文方面的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title>函数</title>
</head>
<body>
<script type="text/javascript">
    /*
    函数的默认参数
    扩展运算符 三个点...  可以展开数组
     */
    function show(a, b = '我'){
        console.log(a,b);
    }
    show('wwoshi', '你');
    show("nishi");

    //函数的参数已经是定义的变量，不能重复被定义 和for循环不一样
    function show1(a) {
        let a = 12;
        console.log(a);
    }
    //show1(); //Identifier 'a' has already been declared 
    
    let arr = ['apple', 'orange', 'pear'];
    console.log(arr);
    console.log(...arr);//apple orange pear 散开
    function show2(...a) {
        console.log(a);
    }
    show2([1,2,2,3,3]);

    function show3(a, b, c) {
        console.log(a, b, c);
    }
    show3(...[1,2,2]);

    function show4(a, b, ...c) {
        console.log(a, b, c);
    }
    show4(1, 2, 3, 4);

    let arr1 = [1,3];
    let arr2 = [...arr1];
    console.log(arr2);//不是引用数组，是复制数组

    /*
    箭头函数
    （）=> {语句}
    （a,b）=> a+b; 这是return的值
    this指向 ：定义函数所在的对象，不是运行时所在的对象
    箭头函数没有arguements
    箭头函数不能当构造函数
     */
    let show5 = (a = 12, b = 5)=>{
        console.log(a, b);
    }
    show5();

    let json = {
        id: 1,
        show: function(){
            //console.log(this.id); 1
            // setTimeout(function(){
            //     console.log(this.id);//undefined
            // }, 200);
            setTimeout(()=>{console.log(this.id)}, 200); //1
        }
    }
    json.show();
</script>
</body>
</html>

/*
箭头函数
（）=> {语句}
（a,b）=> a+b; 这是return的值
this指向：定义函数所在的对象，不是运行时所在的对象
箭头函数没有arguements
箭头函数不能当构造函数
*/