ECMAscrip新特性之函数的扩展
目录
- 1.函数参数的默认值
- 1.1函数参数指定默认值
- 1.2与解耦赋值配合使用
- 1.3函数参数的作用域
- 2.rest参数
- 3.箭头函数
- 3.1什么是箭头函数
- 3.2箭头函数的注意事项
- 4.函数的尾调用
1.函数参数的默认值
1.1函数参数指定默认值
在ECMAScript 2015中，允许为函数的参数添加默认值，将默认值直接写在参数的后面即可。
示例代码如下所示：
// 函数参数指定默认值
function fun(a = 1, b = 2) {
console.log(a + b);
}
fun() // 3
值得注意的是：参数变量是默认声明的，所以不能用let或const再次声明, 否则会抛出异常。
还有就是默认参数的位置都是在参数列表的最后面，否则会引发歧义，该省略的参数不能省略，
如下代码示例：
// 默认参数的位置应该是在最后面
function fun(a = 1, b) {
console.log(a, b);
}
// 调用函数，传递一个参数
fun(20); // 20 undefined
1.2与解耦赋值配合使用
参数默认值可以与解构赋值的默认值，结合起来使用。可以通过两种方式为其设置默认值。示例代码如下所示：
function fun([a, b = 5] = [3]) {
console.log(a, b);
}
fun() // 3 5
1.3函数参数的作用域
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域 。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。
示例代码如下所示：
let x = 5
function fun(y = x) {
x = 10
console.log(y);
}
fun() // 5
2.rest参数
ECMAScript 2015引入rest参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
示例代码如下所示：
// 使用 arguments 对象最传入的参数求出最大值
function max1() {
return Math.max.apply(null, arguments)
}
console.log(max1(1, 5, 6, 33, 65, 35, 15)); // 65
// 使用 rest 参数
function max2(...arg) {
return Math.max(...arg)
}
console.log(max2(1, 5, 6, 33, 65, 35, 15)); // 65
3.箭头函数
3.1什么是箭头函数
ECMAScript 2015新增了箭头函数(又称胖剪头函数), 相比函数表达式具有较短的语法并以词法的方式绑定this 。箭头函数在大多数情况下都是匿名的。
箭头函数的语法结构如下所示：
// 基本语法结构
(参数1, 参数2, ..., 参数N) => {函数声明}
(参数1, 参数2, ..., 参数N) => 表达式(单一)
// 相当于:(参数1, 参数2, ..., 参数N) => {return 表达式}
// 当只有一个参数时，小可号是可选的
(参数) => {函数声明}
// 或者
参数 => {函数声明}
// 没有参数应该写一对小括号
() => {函数声明}
// 可以配合 rest 参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1, 参数2, ..., 参数N = 默认值N) => {函数声明}
箭头函数也可以为其定义函数名，语法结构如下所示：
let funName = (参数1, 参数2, ..., 参数N) => {函数声明}
示例代码如下所示：
let sum = (a, b) => {
return a + b
}
console.log(sum(10, 20)); //30
3.2箭头函数的注意事项
箭头函数有几个使用注意点：
- 函数体内的
this对象，就是定义时所在的对象，而不是使用时所在的对象。
示例代码如下所示：
// ES5 写法
let fun1 = function () {
console.log(this.id);
}
// ES6 箭头函数写法
let fun2 = () => {
console.log(this.id);
}
let obj1 = {
id: 666,
fun: fun1
}
let obj2 = {
id: 666,
fun: fun2
}
obj1.fun() // 666
obj2.fun() // undefined
由代码我们可以看出，普通函数的this是调用时确定的，而我们的箭头函数的this是在定义时就确定了的。
- 不可以当作构造函数，也就是说，不可以使用
new命令，否则会抛出一个错误。 - 不可以使用
arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。
4.函数的尾调用
尾调用是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。
示例代码如下所示：
let x = (x) => {
return 2 * x
}
let y = function (y) {
return x(y)
}
console.log(y(20)); // 40
到此这篇关于ECMAscrip新特性之函数的扩展的文章就介绍到这了,更多相关ECMAscrip函数的扩展内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
ECMAScript6函数剩余参数（Rest Parameters）
我们知道JS函数内部有个arguments对象,可以拿到全部实参.现在ES6给我们带来了一个新的对象,可以拿到除开始参数外的参数,即剩余参数(废话好多 O(∩_∩)O~). 这个新的对象和arguments不一样,它是程序员自定义的一个普通标识符,只是需要在前面加上三个点:... function func(a, ...rest) { console.log(a) console.log(rest) } func(1) func(1, 2, 3, 4) 注意func的第二个参数rest,前面有三
-
ECMAScript6函数默认参数
语言更新时每一个新增的特性都是从千百万开发者需求里提取过来的,规范采用后能减少程序员的痛苦,带来便捷. 我们经常会这么写 function calc(x, y) { x = x || 0; y = y || 0; // to do with x, y // return x/y } 简单说就是x,y提供了一个默认值为0,不传时x, y以值0来运算.传了就以实际值计算. 又如定义一个ajax function ajax(url, async, dataType) { async = async !
-
ECMAScript中函数function类型
说起来ECMAScript中上面最有意思,我想那莫过于函数了,有意思的根源,则在于函数实际上是对象.每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定.函数通常是使用函数声明语法定义的,如下例子: 复制代码 代码如下: function sum(num1,num2) { return num1+num2; } 这与下面使用函数表达式定义函数的方式几乎相差无几. 复制代码 代码如
-
ECMAScript6新增值比较函数Object.is
在这之前我们比较值使用两等号 "==" 或 三等号"===", 三等号更加严格,只要比较两方类型不同立即返回false. 另外,有且只有一个值不和自己相等,它是NaN 现在ES6又加了一个Object.is,让比较运算的江湖更加混乱.多数情况下Object.is等价于"===",如下 1 === 1 // true Object.is(1, 1) // true 'a' === 'a' // true Object.is('a', 'a') //
-
ECMAScript6的新特性箭头函数（Arrow Function）详细介绍
箭头函数是ECMAScript 6最受关注的更新内容之一.它引入了一种用「箭头」(=>)来定义函数的新语法,它-它碉堡了~.箭头函数与传统的JavaScript函数主要区别在于以下几点:1.对 this 的关联.函数内置 this 的值,取决于箭头函数在哪儿定义,而非箭头函数执行的上下文环境.2.new 不可用.箭头函数不能使用 new 关键字来实例化对象,不然会报错.3.this 不可变.函数内置 this 不可变,在函数体内整个执行环境中为常量.4.没有arguments对象.更不能通过ar
-
ECMAscrip新特性之函数的扩展
目录 1.函数参数的默认值 1.1函数参数指定默认值 1.2与解耦赋值配合使用 1.3函数参数的作用域 2.rest参数 3.箭头函数 3.1什么是箭头函数 3.2箭头函数的注意事项 4.函数的尾调用 1.函数参数的默认值 1.1函数参数指定默认值 在ECMAScript 2015中,允许为函数的参数添加默认值,将默认值直接写在参数的后面即可. 示例代码如下所示: // 函数参数指定默认值 function fun(a = 1, b = 2) { console.log(a + b); } fu
-
ES6新特性之函数的扩展实例详解
本文实例讲述了ES6新特性之函数的扩展.分享给大家供大家参考,具体如下: 一.函数参数默认值 1. ES6允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello 这种写法有两个好处:首先,阅读代码的人,可以立刻意识
-
ES6新特性之字符串的扩展实例分析
本文实例讲述了ES6新特性之字符串的扩展.分享给大家供大家参考,具体如下: 一.ES5字符串函数 concat: 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf: 返回字符串中一个子串第一处出现的索引(从左到右搜索).如果没有匹配项,返回 -1 . charAt: 返回指定位置的字符. lastIndexOf: 返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 . match: 检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 nul
-
深入浅出ES6新特性之函数默认参数和箭头函数
1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值. 那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值: 这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了: 2.箭头函数 箭头函数用 => 符号来定义. 箭头函数相当于匿名函数,所以采用函数表达式的写法
-
ECMAscrip新特性函数介绍
目录 1.函数参数的默认值 1.1函数参数指定默认值 1.2与解耦赋值配合使用 1.3函数参数的作用域 2.rest参数 3.箭头函数 3.1什么是箭头函数 3.2箭头函数的注意事项 4.函数的尾调用 1.函数参数的默认值 1.1函数参数指定默认值 在ECMAScript 2015中,允许为函数的参数添加默认值,将默认值直接写在参数的后面即可. 示例代码如下所示: // 函数参数指定默认值 function fun(a = 1, b = 2) { console.log(a + b); } fu
-
PHP5的XML新特性
面向的读者 这篇文章的面向对象是所有对PHP5的XML新功能感兴趣的各个水平的PHP开发者.我们假定读者掌握XML的基本知识.然而,如果你已经在你的PHP当中使用了XML,那么这篇文章也会让你受益非浅. 介绍 在当今的互联网世界,XML已经不再是一个时髦词了,它已经被广泛的接受和规范的使用了.因此相对于PHP4,PHP5对于XML的支持更受到了重视.在PHP4中你面对的几乎都是非标准,API中断,内存泄漏以及其它不完全的功能.尽管有些不足已经在PHP4.3中得到改进,开发者们还是决定抛弃原有的代
-
JavaScript ECMAScript 6(ES2015~ES2022)所有新特性总结
目录 前言 ES2015(ES6) let.const关键字和块级作用域 函数的扩展 数值的扩展 字符串的扩展 数组的扩展 对象的扩展 类 模块化 解构赋值 Symbol Promise Iterator Generator Proxy和Reffect Set.Map.WeakSet.WeakMap ES2016(ES7) 指数运算符 Array.prototype.includes()方法 ES2017(ES8) async/await语法糖 Atomics对象 对象扩展 函数扩展 字符串扩展
-
C++14新特性的所有知识点全在这
前面程序喵介绍过C++11的新特性,在这里(),这篇文章介绍下C++14的新特性. 函数返回值类型推导 C++14对函数返回类型推导规则做了优化,先看一段代码: #include <iostream> using namespace std; auto func(int i) { return i; } int main() { cout << func(4) << endl; return 0; } 使用C++11编译: ~/test$ g++ test.cc -st
-
ES6新特性之数组、Math和扩展操作符用法示例
本文实例讲述了ES6新特性之数组.Math和扩展操作符用法.分享给大家供大家参考,具体如下: 一.Array Array对象增加了一些新的静态方法,Array原型上也增加了一些新方法. 1.Array.from 从类数组和可遍历对象中创建Array的实例 类数组对象包括:函数中的arguments.由document.getElementsByTagName()返回的nodeList对象.新增加的Map和Set数据结构. //in ES6中 类数组转换为数组的方法 let itemElement