zoukankan      html  css  js  c++  java
  • ES6语法:函数新特性(一)

    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,"全栈学习笔记");
    

    我们将这个接收表达式的参数放在前面,就是相当于上面哪一种情况反过来,这样是不行的哦!
    这一期的函数知识就分享到这,下一期将继续分享函数这一块的知识!如果你发现文中有什么错误或者对我有什么建议可以私信我哦!

  • 相关阅读:
    浏览器基础知识点及常考面试题
    java设计模式之综述
    maven的基本原理和使用
    maven的介绍和安装
    Spring整合Struts2的方法
    Spring整合Hibernate的方法
    Spring中的事务管理
    Spring中的JDBC操作
    基于XML配置的Sping AOP详解
    基于注解的Sping AOP详解
  • 原文地址:https://www.cnblogs.com/swzx-1213/p/12628164.html
Copyright © 2011-2022 走看看