JavaScript
搜索
分类

JavaScript函数扩展与箭头函数超详细讲解

作者：亦世凡华、 时间：2024-10-31 17:34:09　

函数参数扩展

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

JavaScript函数扩展与箭头函数超详细讲解

当函数传参给予了默认值，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>

JavaScript函数扩展与箭头函数超详细讲解

箭头函数

在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);

JavaScript函数扩展与箭头函数超详细讲解

箭头函数中：不能使用 arguments 变量。

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

JavaScript函数扩展与箭头函数超详细讲解

箭头函数中：箭头函数的简写方式。

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>

JavaScript函数扩展与箭头函数超详细讲解

从数组中返回偶数的元素：

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

JavaScript函数扩展与箭头函数超详细讲解

使用总结：

箭头函数没有自己的this对象

不可以当做构造函数，即不能对箭头函数使用new命令，否则报错

不可以使用arguments对象，该对象在函数体内不存在，如需使用用rest函数代替

不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

来源：https://z5qyj5pyi.blog.csdn.net/article/details/126804778

标签：JavaScript,函数扩展,箭头函数
0
投稿

猜你喜欢

  • 认识那些被忽略的SQL Server注入技巧

    2009-01-20 13:15:00

  • VScode连接远程服务器上的jupyter notebook的实现

    2022-02-19 17:09:51

  • Python Opencv中基础的知识点

    2023-06-08 21:10:48

  • 探讨php中防止SQL注入最好的方法是什么

    2023-09-11 14:20:48

  • python仿evething的文件搜索器实例代码

    2022-05-05 09:05:15

  • python 实现定时任务的四种方式

    2023-06-28 14:37:27

  • MySQL连接查询实例详解

    2024-01-28 11:39:13

  • python 代码实现k-means聚类分析的思路(不使用现成聚类库)

    2021-05-28 06:30:24

  • Python多模块引用由此引发的相对路径混乱问题

    2021-07-11 03:57:10

  • ASP编程入门进阶（十）：Global.asa文件

    2008-07-12 07:05:00

  • python生成并处理uuid的实现方式

    2022-11-18 12:37:26

  • Python中层次聚类的详细讲解

    2022-07-02 06:07:13

  • Nodejs做文本数据处理实现详解

    2024-05-13 10:04:06

  • python学习之编写查询ip程序

    2023-11-09 18:52:29

  • 详解如何运行vue项目

    2024-05-13 09:09:47

  • 用 JS 来控制 target 链接属性

    2007-10-08 12:59:00

  • pytorch中的 .view()函数的用法介绍

    2022-10-15 19:50:17

  • Python海象运算符超详细讲解

    2023-08-04 17:26:19

  • ASP幻灯片

    2009-09-04 18:05:00

  • 关于Oracle listener日志解析利器的使用方法

    2024-01-13 21:36:59
    • asp之家 网络编程 m.aspxhome.com