当前位置: 首页 > 编程笔记 >

ES6箭头函数和扩展实例分析

司健柏
2023-03-14
本文向大家介绍ES6箭头函数和扩展实例分析,包括了ES6箭头函数和扩展实例分析的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了ES6箭头函数和扩展。分享给大家供大家参考,具体如下:

1.默认值

在ES6中给我们增加了默认值的操作相关代码如下:

function add(a,b=1){
  return a+b;
}
console.log(add(1));

可以看到现在只需要传递一个参数也是可以正常运行的。

输出结果为:2。

2.主动抛出错误

ES6中我们直接用throw new Error( xxxx ),就可以抛出错误。

function add(a,b=1){
  if(a == 0){
    throw new Error('This is error')
  }
   return a+b;
}
console.log(add(0));

在控制台可看到异常为:

3.函数中的严谨模式

我们在ES5中就经常使用严谨模式来进行编程,但是必须写在代码最上边,相当于全局使用。在ES6中我们可以写在函数体中,相当于针对函数来使用。例如:

function add(a,b=1){
  'use strict'
  if(a == 0){
    throw new Error('This is error');
  }
   return a+b;
}
console.log(add(1));

上边的代码如果运行的话,你会发现浏览器控制台报错,这个错误的原因就是如果你使用了默认值,再使用严谨模式的话,就会有冲突,所以我们要取消默认值的操作,这时候你在运行就正常了。

function add(a,b){
  'use strict'
  if(a == 0){
    throw new Error('This is error');
  }
   return a+b;
}
console.log(add(1,2));

结果为3。

4.获得需要传递的参数个数

 ES6为我们提供了得到参数的方法(xxx.length).我们用上边的代码看一下需要传递的参数个数。

function add(a,b){
  'use strict'
  if(a == 0){
    throw new Error('This is error');
  }
   return a+b;
}
console.log(add.length);//2

这时控制台打印出了2,但是如果我们去掉严谨模式,并给第二个参数加上默认值的话,如下:

function add(a,b=1){

  if(a == 0){
    throw new Error('This is error');
  }
  return a+b;
}
console.log(add.length);//1

这时控制台打印出了1。

总结:它得到的是必须传入的参数

5.箭头函数

在箭头函数中,方法体内如果是两句话,那就需要在方法体外边加上{}括号

var add =(a,b=1) => {
  console.log('hello world')
  return a+b;
};
console.log(add(1));//2

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

 类似资料:
  • 新的“胖箭头”符号还可以用更简单的方式来定义匿名函数。 请看下面的例子: console.log(x); incrementedItems.push(x+1); }); 计算一个表达式并返回值的函数可以被定义更简单: 下面代码与上面几乎等价: incrementedItems = items.map(function (x) { return x+1; 让我们在 验

  • 本文向大家介绍ES6中的箭头函数实例详解,包括了ES6中的箭头函数实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了ES6中的箭头函数。分享给大家供大家参考,具体如下: 语法 我们先来看看箭头函数的语法: param 是参数,根据参数个数不同,分这几种情况: 示例 我们再来看看一些示例,看看在ES5中的函数怎么通过ES6中的箭头函数来替代吧: 当然,也可以定义多个参数: 当然=>后面

  • 主要内容:1.语法变化,2.带参数的箭头函数,3.带有默认参数的箭头函数,4.带有Rest参数的箭头函数,5.无括号的箭头函数,6.箭头函数的优点ES6中引入了箭头(Arrow)函数,它提供了一种更准确的JavaScript编写方法。 它们让我们能够编写较小的函数语法。 箭头函数的代码更具可读性和结构性。 箭头函数是匿名函数(没有名称且未与标识符绑定的函数)。 它们不返回任何值,并且可以在不使用关键字的情况下进行声明。 箭头函数不能用作构造函数。 箭头函数中的上下文是按词汇或静态方式定义的。 它

  • 问题内容: class App extends Component { constructor(props) { … } 在类中声明的两种函数 (onChange和onSubmit) 之间有什么区别?如果我将其声明为ES6类方法,但在 const url中 引用this.sate时出现错误,但是将其更改为arrow函数可以解决此问题。 我想知道两种情况下如何正确处理“ this” 另外,我该如何做

  • 问题内容: 我是React的新手,正在尝试了解语法。 我正在React 15环境中进行开发(使用react-starterify模板),并且一直在使用下面的VERSION 2中的语法,但是,我在Facebook的React页面上发现的大多数示例和教程都是VERSION 1。这两个,何时应在另一个之上使用? 版本1 版本2 问题答案: 第二个代码是 无状态功能组件, 并且是用于将组件定义为的函数的新

  • 本文向大家介绍ES6箭头函数的特性?相关面试题,主要包含被问及ES6箭头函数的特性?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: ES6 增加了箭头函数,基本语法为 let func = value => value; 相当于 let func = function (value) { return value; }; 箭头函数与普通函数的区别在于: 1、箭头函数没有this,所以需要通