ECMAScript6-函数的扩展

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量187 收藏
点赞数
分类专栏： 前端 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45969711/article/details/121252561
版权

系列文章目录

上一期我们学习了数值扩展的相关内容，这一期我们讲解函数的扩展相关知识。

目录

函数的扩展

  • 函数参数的默认值
  • 箭头函数
  • 箭头函数中this的理解
  • 箭头函数使⽤注意点

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

1、函数参数的默认值

  • ES6之前，不能直接为函数的参数指定默认值，只能采⽤变通的⽅法。
  • ES6允许为函数的参数设置默认值，即直接写在参数定义的后⾯。
  • 参数默认值的位置：
    1 通常情况下，定义了默认值的参数，应该是函数的尾参数。
    2因为这样⽐较容易看出来，到底省略了哪些参数。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    function f(name) {
      console.log(name);
    }
    f("xiaoqiao");//xiaoqiao
  </script>
</body>
</html>

当我们的函数的参数在传参的时候赋值了，则会按照传进来的参数进行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    function f(name) {
      console.log(name);
    }
    f();//undefined
  </script>
</body>
</html>

如果函数的参数未传，会默认赋值为undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    function f(name) {
        name=name||"lisi";
      console.log(name);//lisi
    }
    f();//undefined
  </script>
</body>
</html>

在我们对函数进行传参的时候，我们可以对函数的参数进行默认值的设置，当我们未对函数的参数设置的时候，我们的参数就会使用我们设置的初始值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    function f(name="lisi") {
      console.log(name);//lisi
    }
    f();//undefined
  </script>
</body>
</html>

这是我们的另一种写法，我们还可以在参数列表的时候就对参数进行赋值，作用和上面的那种一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    function f(x,y) {
      console.log(x+y);
    }
    f(10,20);//30
  </script>
</body>
</html>

当我们的函数有多个参数的时候，我们赋值的时候就需要注意了，当我们参数的默认值都设置的时候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    function f(x,y) {
        x=x||10;
        y=y||20;
      console.log(x+y);
    }
    f();//30
    f(10,20);//30
    f(10);//30
  </script>
</body>
</html>

当我们没对所有的参数进行默认值设置的时候，我们的参数设置时，就是从前面往后面进行设置，所以当我们的参数没有设置的时候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    function f(x=10,y) {
      console.log(x+y);
    }
    f(10,20);//30
    f(10);//NaN
    f();//NaN
  </script>
</body>
</html>

2、箭头函数

  • ES6允许使⽤“箭头”（=>）定义函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    function f(x) {
      return x;
    }
    console.log(f(100));//100

    var x=(x)=> {
        return x;
    }
    console.log(x(100));//100

    var x1=x=> {
        return x;
    }
    console.log(x1(100));//100
    var x2=x=>x
    console.log(x2(100));//100
  </script>
</body>
</html>

当我们对函数定义时，我们可以使用箭头函数来更方便的去定义函数，当函数的参数只有一个的时候小括号可以省略，当我们的函数体只有一行语句时花括号也能省略。

如果箭头函数不需要参数或需要多个参数，就使⽤⼀个圆括号代表参数部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    function f() {
      return 100;
    }
    console.log(f(100))//100
    
    var x=()=>100;
    console.log(x());
    
  </script>
</body>
</html>

当我们定义的函数没参数的时候，可以这样定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    function f(x,y) {
      return x+y;
    }
    console.log(f(100,200))//300

    var x=(x,y)=>x+y;
    console.log(x(100,200));//300

  </script>
</body>
</html>

当我们函数的参数有多个时，例如上述的代码所示

  • 如果箭头函数的代码块部分多于⼀条语句，就要使⽤⼤括号将它们括起来，并且使⽤return语句返 回。
  • 也就是说默认函数体没有⼤括号是⾃带隐式返回renturn的。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    var x=(x,y)=> {
        let sum=x+y;
        return sum;
    };
    console.log(x(100,200));//300

  </script>
</body>
</html>
  • 由于⼤括号被解释为代码块，所以如果箭头函数直接返回⼀个对象，必须在对象外⾯加上括号，否 则会报错。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    var x=(x,y)=> {
        let sum=x+y;
        let person={x:x,y:y,sum:sum};
        return person;
    };
    console.log(x(100,200));//300

    let getTempItem = id => ({ id: id, name:"Temp" });
    console.log(getTempItem(15))

  </script>
</body>
</html>

3、箭头函数中this的理解

传统javaScript代码中this的使⽤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      //定义⼀个stu学⽣对象，内有：两个属性、⼀个⽅法。
      const stu = {
          name:"张三",
          likes:['吃饭','睡觉','敲代码'],
          printLikes:function(){
              //使⽤map遍历likes属性，并输出信息
              this.likes.map(function(like){
                  //此处的this代表的是window对象，⽽⾮stu对象
                  console.log(`${this.name} 喜欢 ${like}`);
              });
          }
      };
      stu.printLikes(); //使⽤stu对象调⽤⾃⼰的⽅法
      /* 输出结果：
       喜欢 吃饭
       喜欢 睡觉
       喜欢 敲代码
      */

  </script>
</body>
</html>

上⾯的输出this.name没有信息，如下进⾏修改就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      //定义⼀个stu学⽣对象，内有：两个属性、⼀个⽅法。
      const stu = {
          name:"张三",
          likes:['吃饭','睡觉','敲代码'],
          printLikes:function(){
              let self = this;
              //使⽤map遍历likes属性，并输出信息
              this.likes.map(function(like){
                  //此处的this代表的是window对象，⽽⾮stu对象
                  console.log(`${self.name} 喜欢 ${like}`);
              });
          }
      };
      stu.printLikes(); //使⽤stu对象调⽤⾃⼰的⽅法
      /* 输出结果：
       张三 喜欢 吃饭
       张三 喜欢 睡觉
       张三 喜欢 敲代码
      */

  </script>
</body>
</html>

使⽤箭头函数后的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      //定义⼀个stu学⽣对象，内有：两个属性、⼀个⽅法。
      const stu = {
          name:"张三",
          likes:['吃饭','睡觉','敲代码'],
          printLikes:function(){
              //使⽤map遍历likes属性，并输出信息
              this.likes.map(like => {
                  //箭头函数中没有⾃⼰的this，故此处this是继承⽗作⽤域的。
                  //⽽且是在定义的时候已指定，不会随着调⽤⽽改变。
                  console.log(`${this.name} 喜欢 ${like}`);
              });
          }
      };
      stu.printLikes(); //使⽤stu对象调⽤⾃⼰的⽅法
      /* 输出结果：
       张三 喜欢 吃饭
       张三 喜欢 睡觉
       张三 喜欢 敲代码
      */

  </script>
</body>
</html>

4、箭头函数使⽤注意点

  • 函数体内的this对象，就是定义时所在的对象，⽽不是使⽤时所在的对象。
  • 不可以当作构造函数，也就是说，不可以使⽤new命令，否则会抛出⼀个错误。
  • 当你真的需要this的时候，如为对象添加普通⽅法或事件绑定回调函数使⽤箭头函数，可能获取不
    到this。
    不可以使⽤arguments对象，该对象在函数体内不存在。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      //1.箭头函数不可以作为构造函数使⽤
      const Stu1 = (name,age)=>{
          this.name = name;
          this.age = age;
      }
      //要改成常规函数如下：
      const Stu2 = function(name,age){
          this.name = name;
          this.age = age;
      }
      //实例化
      //s = new Stu1("zhangsan",20);//报错：TypeError: Stu is not a constructor
      s = new Stu2("zhangsan",20); //正常
      console.log(s); //Stu2 {name: "zhangsan", age: 20}
      //定义Stu类
      const Stu = function(name,age){
          this.name = name;
          this.age = age;
      }
      s = new Stu("zhangsan",20); //正常实例化
      //为s原型对象添加⼀个getInfo⽅法，使⽤箭头函数，⾥⾯的this是window对象
      Stu.prototype.getInfo = ()=>{
          return `我叫${this.name}，今年${this.age}岁`;
      }
      //改成常规函数
      Stu.prototype.getInfo2 = function(){
          return `我叫${this.name}，今年${this.age}岁`;
      }
      console.log(s.getInfo()); //我叫，今年undefined岁
      console.log(s.getInfo2()); //我叫zhangsan，今年20岁

  </script>
</body>
</html>

上⾯四点中，第⼀点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

总结

本期我们讲解了函数的扩展的相关内容，下一期我们讲解数组的扩展。

菜鸟一枚在这
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6 函数的扩展
ivenqin的博客
10-29 59
函数的扩展我们可以从三个方面来了解与认识： 参数的默认值 箭头函数 关于尾调用的优化 参数的默认值 在 ES6 之前，我们不能直接为函数的参数指定默认值，只能采用变通的方法。而 ES6 中允许我们直接为函数的参数设置默认值，通过等号 = 直接在小括号中给参数赋值。 示例： function log(name, age = 18) { console.log(name, age); } console.log('xkd'); // 输出: xkd console.log('summ
ECMAScript6笔记：函数的扩展
YuqiRealm.com
11-09 758
ECMAScript6笔记：函数的扩展
ECMAScript6(5)：函数的扩展
m0_70521456的博客
05-04 63
fun1({}); //‘A6’ fun1(); //TypeError, 因为无法解构 //但这样设计函数对使用函数的码农很不友好 //所以, 技巧: function fun2({a=1, b=5, c=‘A’}={}){ console.log(c + (a + b)); } fun2(); //‘A6’ 注意, 其实还有一种方法, 但不如这个好, 我们比较如下: //fun1 比 fun2 好, 不会产生以外的 undefined function fun1({a=1, b=5,
ECMAScript6学习笔记-数组扩展
gaiyaguang的博客
03-05 1517
1.扩展运算符 扩展运算符是三个点，将一个数组转为用逗号分割的参数序列。console.log(...[1, 2, 3]) // 1 2 3console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5[...document.querySelectorAll('div')] // [<div>, <div>, <div>]主要用于函数调用function add(x,
【笔记】ECMAScript 6-11
weixin_46319117的博客
08-29 174
ECMAScript 6-11ES6新特性二级目录 ES6新特性 1.let关键字 let关键字用来声明变量，使用let声明的变量有几个特点： 不允许重复声明 块儿级作用域 不存在变量提升 不影响作用域链 应用场景：以后声明变量使用 let 就对了 2.const关键字 const 关键字用来声明常量，const 声明有以下特点: 声明必须赋初始值 标识符一般为大写 不允许重复声明 值不允许修改 块儿级作用域 注意: 对象属性修改和数组元素变化不会发出 const 错误 应用场景：
ECMAScript6-Sample:ECMAScript6-样本
05-25
**ECMAScript6-Sample: ECMAScript6-样本** ECMAScript6，通常被称为ES6，是JavaScript语言的一个重大更新版本，它引入了大量的新特性，显著提升了开发者的编程效率和代码质量。这个名为"ECMAScript6-Sample"的样本...
ECMAScript6-Tutorial
06-10
**ECMAScript6（ES6）教程** ECMAScript6，也称为ES2015，是JavaScript语言的一个重大更新，引入了许多新特性和语法改进，旨在提高开发者的生产力和代码质量。本教程由Ruanyf撰写，始于2015年4月23日，覆盖了ES6的...
ECMAScript6函数剩余参数（Rest Parameters）
09-03
在ECMAScript6中，函数剩余参数（Rest Parameters）是一个非常重要的新特性，它允许开发者捕获函数调用时传入的多余参数。在传统的JavaScript中，`arguments`对象用于访问函数的所有参数，但`arguments`并不是一个...
ECMAScript规范-第三版_中文版.
04-09
ECMAScript 3的影响力深远，它的很多特性在后续的版本中得到了扩展和优化，比如ES5引入了严格模式和新的对象字面量语法，ES6（ES2015）带来了类、模块、箭头函数等重大变革。理解并掌握ES3的基本概念和机制，对于...
深度解析 ECMAScript 6
05-01
**ECMAScript 6（简称ES6）是JavaScript语言的一个重大升级版本，它引入了许多新的特性和语法糖，极大地提升了开发效率和代码的可读性。对于已经掌握基础JavaScript的开发者来说，理解并掌握ES6的新特性至关重要。**...
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1313
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 215
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 274
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 1035
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
JS混淆基本类型和原理
朴拙科技的博客
07-06 402
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
Vue 数据大屏适配
FitnessSnail的博客
07-02 269
不会因为在某一维度上缩放过大而导致元素在另一维度上超出视口。.dataScreen-content 盒子内容根据设计稿给的。（默认为 1920x1080）计算缩放比例，并。的缩放比例，那么元素可能会在某一维度上。，这在很多情况下是不希望发生的。的缩放比例的目的是为了保证。单位进行正常的布局就行。在水平和垂直方向上都。
vue3+ts项目中.env配置环境变量与情景配置
我愿化作繁星
07-03 868
就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。
文本超长省略的几种方式（vue）
csdnyp的博客
07-01 355
文本超长省略，el-tooltip
【VUE】 深入理解 Vue 动态路由：简介、实际开发场景与代码示例
九日的博客
07-04 324
在传统的路由配置中，我们需要在初始化 Vue 实例时定义所有的路由。但在实际应用中，特别是涉及权限管理、模块懒加载等场景，我们可能需要根据用户的权限或其它条件动态添加或修改路由。Vue Router 提供的动态路由功能正是为了解决这些问题。
ecmascript6入门 (阮一峰著)pdf
06-24
基础篇主要讲述了 ECMAScript 6 中的基础语法和常用特性，比如变量声明、箭头函数、模板字符串、解构赋值、参数默认值等等。进阶篇则进一步讲述了 ECMAScript 6 中的高级特性，如面向对象编程、模块化、异步编程、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值