ES6中的函数(箭头函数)

tech2022-07-04  261

ES6中的函数

函数参数的扩展默认值的临时性死区:不定参数的使用 箭头函数应用场景

函数参数的扩展

默认参数: 在 ES5 语法中,为函数形参指定默认值的写法:

function foo (bar) { bar = bar || 'abc'; console.log(bar) } foo('xyz')

使用 ES6 的语法为函数形参指定默认值

function foo (bar='abc') { console.log(bar) } foo('xyz') //xyz foo() //abc

在ES6中默认值的写法是写在形参中:(默认值参数可以是:字符串、数字、数组、或者对象、或函数都可以。)

补充: 只有在未传递参数,或者参数为 undefined 时,才会使用默认参数,null 值被认为是有效的值传递。

function test(a = 1,b = 2){ return a + b } test(undefined,10) //11 test(null,10) //10

默认值的临时性死区:

跟let和const一样默认参数也是有临时性死区 当a初始化的时候,b还未定义,(也就是说当a想用b的值得时候,b还未定义)所以第一个参数对于b来说是临时性死区

function test( a = b, b ){ console.log(a+b); } test( undefined, 2 )//Uncaught ReferenceError: b is not defined

不定参数的使用

所谓的不定参数就是参数不确定是多少个,一般形参会使用展开(或扩展)运算符来表示。 形如,…变量名,由…加上一个具名参数标识符组成。具名参数只能放在参数组的最后,并且有且只有一个不定参数

//例一 function test1(...arr){ console.log(arr); } test1({name:"wang",age:20})//[{name:"wang",age:20}] //例二 function test2(...arr){ console.log(arr); } test2(1,2,3)//[1,2,3] //例三:...arr必须放在所有参数的最后 function test3(a,b,...arr){ console.log(a,b,arr); } test3(1,2,3,4)//1 2 [3,4]

箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是:

参数 => 函数体

// 1. 形式一: var foo = function () { return 'Hello World!'; }; // 如果箭头函数没有参数或者有多个参数,则必须加上小括号。箭头后面的表达式的结果会被作为函数的返回值。 var foo = () => { return 'Hello World!'; } // 2. 形式二: var foo = function (greeting) { return greeting; } // 如果形参的数量为 1,则可以省略小括号。 var foo = greeting => { return greeting; } // 4. 形式三: var foo = function (a, b) { return a > b ? a : b; } // 如果函数的执行体比较简单(直接量或表达式),可以省略大括号,箭头后面的直接量或表达式会被自动作为返回值。 var foo = (a, b) => a > b ? a : b; //当箭头函数要返回对象的时候,为了区分于代码块,要用 () 将对象包裹起来 // 报错 var f = (id,name) => {id: id, name: name}; f(6,2); // SyntaxError: Unexpected token : // 不报错 var f = (id,name) => ({id: id, name: name}); f(6,2); // {id: 6, name: 2} 箭头函数中没有this,arguments,new.target,如果要强行使用,则指向外层函数对应的this,argument,new.target箭头函数没有原型,所有说占用空间非常小,不能当成构造函数来使用,也就是不能使用 new 命令,否则会报错不可以改变this的绑定不支持重复命名参数

应用场景

临时使用的函数,并不会刻意的去调用事件处理函数异步处理函数this需要指向外层的函数时候对象的属性不要去用箭头函数,除非是特别的需求数组方法的时候,保证代码的简洁
最新回复(0)