ES6 函数新特性

【ES6 函数扩展】

函数我觉得在任何一门语言中都非常的重要 , 可以简化代码 , 使代码结构更加清晰 , ES6 中也对函数进行了扩展 , 使函数使用起来非常的方便 , 简洁.

箭头函数

箭头函数应该是对原函数书写方式来了个改头换面 , 变化是非常大的 , 也很简洁.我们先来看个例子 , 说明它的用法 .

//箭头函数
var a = () => 1;   //没有参数时用得有括号,a相当于方法名 =>表示方法体
console.log(a());  //结果: 1

//普通函数
function c(){
   return 1;
}
console.log(c());  //结果: 1
-------------------------------------------------
//可以看到结果是相同的,这是个简单的用法.下面看看有参.
-------------------------------------------------
var a = b => b;   //一个参数可以无括号
console.log(a(2));  //结果: 2

function c(b){
   return b;
}
console.log(c(4));  //结果: 4
-------------------------------------------------
var a = (c,b) => a+b; //多个参数时也需要括号
console.log(a(1,1));  //结果: 2

function d(c,b){
   return a+b;
}
console.log(d(1,1));  //结果: 2
-------------------------------------------------
//以上都是一行代码并且有返回值,这时可以省略 {} ,下面看看多行代码时的用法.
-------------------------------------------------
var a = (i,j) => {      //返回普通值时
   let k = i+j+1;
   return k;
}
console.log(a(1,1)); //结果: 3
-------------------------------------------------  
//当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来   
-------------------------------------------------  
var f = (id, name) => ({
    id: id,
    name: name,
}); 
console.log(f(1,'张三')); //结果: {id: 1, name: "张三"}
//或者:
var f = (id, name) => {
    return ({id:id,name:name});
}
console.log(f(1,'张三')); //结果: {id: 1, name: "张三"}

相信看到这大家已经能发现两者一些区别了吧 , 还没完 , 这里需要注意的是 :

箭头函数没有 this 的绑定。如果箭头函数被非箭头函数包含，this 指向的是上一层非箭头函数的 this。如果没有被包含，则返回全局对象 ,并且也没有super、arguments 和 new.target 的绑定。

下面举个例子:

var a = () => {
    // 箭头函数里面没有 this 对象，
    // 此时的 this 是外层的 this 对象，则是 Window 
    console.log(this)
}
a(); //结果: 返回了Window对象

当然也不是所有的场合都适合箭头函数,它也有它自己合适的场景.比如数组的filter，reduce等操作也可以结合箭头函数。不合适的场景呢,比如需要动态 this 的时候 , 了解箭头函数之后得合理运用它自身的特点才能达到事半功倍的效果.

默认参数

顾名思义 , 也就是当你不给我个确切的数值时我就默认一个值 , 没有默认参数之前呢,可以用 || 或者加一些逻辑代码来实现默认参数值, ES6 的出现使这更为简洁明了.下面来看看.

function f(a , b=4){  //这里设置b的默认值为2
    console.log(a+","+b);
};
f(2,3);    //结果:2,3   
f(2,"");   //结果:3,
f(2);      //结果:2,4        
f(2,null); //结果:2,null     null被视为有效值

//这里需要注意 : 使用函数默认参数时，不允许有同名参数。如下:
//错误写法 ×
function f(a,a,b=17){
 console.log(a+","+b);
}
//报错 : SyntaxError: Duplicate parameter name not allowed in this context

还需要指出一点 : 函数参数默认值存在暂时性死区，在函数参数默认值表达式中，还未初始化赋值的参数值无法作为其他参数的默认值 , 也就是给的默认值必须是先初始化的。

默认值除了可以设置常量之外，还可以设置变量或者表达式

let test = function(){
    return 5 ;
}   
let f = function(a = 1=== true ,b=a,c=test()){
    return b+","+a+","+c;
}
console.log(f());  //结果: false,false,5

不定参数

不定参数是指传入参数的数量不确定。在参数名称前加上三个点 …a 即表示这是一个不定参数。不定参数是一个数组，包含之后所有的输入参数 ,这里和 Java 中的 a… 有异曲同工之处不过点是在后面,咱们来举个例子说明一下。

function f(...a){
    console.log(values.length);
    console.log(a);
}
f(1,2);      //2
f(1,2,3,4);  //4

注意点：需要注意的是，不定参数只能是最后一个参数 , 不定参数后不能再定义其他参数。

今天的分享到这就告一段落咯,之后还会继续更新，欢迎大家继续关注 ! .

参考菜鸟教程

原文地址：https://blog.csdn.net/AKALXH/article/details/105723966

ES6 函数 新特性

相关推荐