ES6 函数

引言:

函数在任何语言中偶读很重要,java里面的函数通常叫做方法,其实是一个东西,使用函数可以简化更多的代码,代码结构看着更加清晰。今天我们来学学ES6语法中,函数有什么变化。

虽然现在的有比ES6更高的版本,但是主流一般都是ES6。es6中的函数相对于之前的版本提升了很多,相对来说在某些特定条件下,用新的函数很方便,也更简洁,功能性更加强大。

1.带参数默认值的函数。

我们都知道js是弱类型语言,不知道你有没有试过,或者学到过,js的函数声明过后,在调用这个函数的时候可以忽略这个函数所带的参数,就是说,声明的这个函数原本是带有参数的,但是呢,我在调用的时候是不需要传参的,这样也不会报错,而那些参数会有一个默认的值。来看看代码。

function testParameter(parameter1,parameter2){
console.log(parameter1);
console.log(parameter2);
}
testParameter();

这个是可以运行的,不会报错的,结果是什么呢?两个都是undefined。这就是弱类型语言的特点之一,与java不同,java会强制要求你输入参数。

一般来说,我们在实际项目中,如果有这种用法的话,这些参数都是有用的也就是需要参数有一个默认值。在es6之前,如果没有传参数,而且这个参数又是需要用到的,需要一个默认值,我们都需要自己判断这个参数是不是undefined,然后给这个参数设置默认值。这样自己写代码就比较麻烦。因此在es6的时候,函数可以这样声明,给函数的参数设置一个默认值。

function defaultParameter(parameter1,parameter2=30){
console.log(parameter1);
console.log(parameter2);
}
defaultParameter();

这样我们就给parameter2设置了一个默认的值为30,parameter1还是为undefined,虽然这种函数调用可以不传参数,我建议这个时候,这个没有设置默认值的参数还是尽量要传。参数的类型可以是任意类型,可以是字符串,数字,函数,对象,都可以设置一个默认的值。

还有一种情况,

如下:

function defaultParameter1(parameter1="这是第一个参数",parameter2){
return parameter1+parameter2;
} console.log(defaultParameter1());

这段代码打印出来的是“这是第一个参数undefined”,然后我们传一个参数。

function defaultParameter1(parameter1="这是第一个参数",parameter2){
return parameter1+parameter2;
} console.log(defaultParameter1(20));

你猜现在的结果是什么?你可能会说"20undefined",但是结果真不是这个,结果是"NaN",为什么?,仔细的同学就发现了,我们传的是一个20,而不是“20”,这个数字20和undefined相加的结果就成了NaN。当我们传“20”的时候,答案就是“20undefined”,但是我想说的是,如果这时我不想传第一个值怎么办,我想穿第二个值。往下看。

function defaultParameter1(parameter1="这是第一个参数",parameter2){
return parameter1+parameter2;
} console.log(defaultParameter1(undefined,"这是第二个参数"));

把第一个参数设置成undefined就行了,并且只有设置成undefined才能使用默认的第一个参数,然后顺利给第二个值设置参数值。

2.参数默认值为表达式的函数。

前面说了带有默认值参数的函数,这节就为你带来,参数是表达式

来来来看代码

function expression(name,address=getStr()){
console.log(name+address);
}
function getStr(){
return "全栈学习笔记!"
}
expression("wx search");

这样也是可行的,结果你懂的,哈哈,如果你觉得能学到不少知识,就试试这个结果,精彩美文每天为你推送!

这里其实有一个有趣的,看下面;

function expression(name,address=name){
console.log(name+address);
}
function getStr(){
return "全栈学习笔记!"
}
expression("全栈学习笔记");

这样也是可以的,结果就是会打印出来两个“全栈学习笔记”,然后看看这个

function expression(name=address,address){
console.log(name+address);
}
function getStr(){
return "全栈学习笔记!"
}
expression(undefined,"全栈学习笔记");

我们将这个接收表达式的参数放在前面,就是相当于上面哪一种情况反过来,这样是不行的哦!

这一期的函数知识就分享到这,下一期将继续分享函数这一块的知识!如果你发现文中有什么错误或者对我有什么建议可以私信我哦!

ES6语法:函数新特性(一)的更多相关文章

  1. ES6语法的新特性

    ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也 ...

  2. 简单理解ECMAScript2015中的箭头函数新特性

    箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...

  3. ES6(函数新增特性)

    ES6(函数新增特性) 1.函数参数默认值 没有 y 时,默认就是world 有 y 时,输出值即可 (错误) (C有默认值,正确) 默认值后面不能再有没有默认值的变量 2.作用域 y 取其前面的 x ...

  4. ES6 主要的新特性

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  5. 深入浅出:了解JavaScript的ES6、ES7新特性

    参照阮一峰博客:http://es6.ruanyifeng.com/#README es6常见题:https://blog.csdn.net/qq_39207948/article/details/8 ...

  6. 前端笔记之ES678&Webpack&Babel(中)对象|字符串|数组的扩展&函数新特性&类

    一.对象的扩展 1.1对象属性名表达式 ES6可以在JSON中使用[]包裹一个key的名字.此时这个key将用表达式作为属性名(被当做变量求值),这个key值必须是字符串. var a = 'name ...

  7. ES6的十个新特性

    这里只讲 ES6比较突出的特性,因为只能挑出十个,所以其他特性请参考官方文档: /** * Created by zhangsong on 16/5/20. *///    ***********Nu ...

  8. ES6中常用新特性讲解

    1.不一样的变量声明:const和let ES6推荐使用let声明局部变量,相比之前的var(无论声明在何处,都会被视为声明在函数的最顶部) let和var声明的区别: var x = '全局变量'; ...

  9. 2.ES6引进的新特性——类Class

    为什么? ES6中引入了类,类在java/c++等面向对象的编程语言常见,JS引入类是为了在日后使用js开发大型的应用程序,类本质是语法糖(语法上更加人性化) 以前写一个类 function User ...

随机推荐

  1. Linux 环境 搭建Git 服务器,并且修改SSH端口使用

    1.环境配置说明 服务器 CentOS 7 + git(git version 1.8.3.1) 客户端 Windows10 + SourceTree 2.安装 Git 服务器端安装: sudo yu ...

  2. PAT-进制转换

    3.5-进制转换 对于一个P进制的数,如果要转换为Q进制的数,需要分为两步: ①将P进制数x转换为十进制数y 对于一个十进制数y=d1d2···dn,可以将其写为: y = d1 * 10n-1 + ...

  3. SQL基本操作总结

    1.SQL简介 结构化查询语言 (层次模型,网状模型,关系模型) 关系模型是目前的主流 (Oralce,mysql mssql ) SQL标准:ANSI (1992 1997 2002 ISO) 方言 ...

  4. iOS下的 Fixed BUG

    input 光标位置乱窜 固定式浮层内的输入框光标会发生偏移.即 fixed 定位的容器中输入框光标的位置显示不正确,没有正常地显示在输入框中,而是偏移到了输入框外面 可触发条件 页面body出现滚动 ...

  5. vue中的自定义分页插件组件

    介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章 首先在新建一个分页模块 在模块中引入相应的代码,(内有详细的注释) template中 <di ...

  6. JAVA有关位运算的全套梳理

    一.在计算机中数据是如何进行计算的? 1.1:java中的byte型数据取值范围 我们最开始学习java的时候知道,byte类型的数据占了8个bit位,每个位上或0或1,左边第一位表示符号位,符号位如 ...

  7. 第六章、Vue项目预热

    6-5. (1). (2).引入reset.css及border.css (3).解决手机点击延迟300ms的问题 a.安装 b.引入fastclick 6-2.项目的整体架构 src--->整 ...

  8. JavaScript对象(二)

    Part One:对象的三个特性 原型(prototype)  类(class) 可扩展性(extensible attribute) 1,b.isPrototypeOf(o)  //判断b是不是o的 ...

  9. vue-element-admin 模板 登录页面 post请求通过django的csrf认证,处理304错误

    经过一天的研究,终于把 vue-admin-template 模板的 post 请求 和django的api 弄通了 没有了那该死的304报错了 直接贴代码: 在main.js中 我直接给设置了一个 ...

  10. python学习基础之变量

    变量名只能包含字母.数字和下划线.变量名可以字母或下划线打头,但不能以数字打 头,例如,可将变量命名为message_1,但不能将其命名为1_message. 变量名不能包含空格,但可使用下划线来分隔 ...