JavaScript ES6的函数拓展


Posted in Javascript onJanuary 18, 2022

ES6函数拓展

函数的默认参数

之前的写法:

function count(x, y) {
    return x + y;
}
count(3);//因为只传递了参数x,y的默认值为undefined
//undefined + 3返回NaN

function count(x, y) {
    x = x || 0;
    y = y || 0;
    return x + y;
}
count(3);//3

function count(x, y) {
    x = x??0;
    y = y??0;
    return x + y;
}
count(3);//3

ES6写法:

ES6的写法简洁易读,能够让其他开发者快速了解参数类型,是否可省等信息,也不会对函数体代码造成过多负担,有利于后期优化重构

function count(x = 0, y = 0) {
    return x + y;
}
count(3);

注意事项:

1.使用默认参数,在函数体内不能重新命名同名变量

function count(x = 0, y = 0) {
    let x;//报错
    const y;//报错
}

参数默认值不是传值的,而是每次都重新计算默认表达式的值,也就是说参数默认值是惰性求值的

let num = 1;
function count(x = num + 1, y = 0) {
    return x;
}
count();//2

num = 99;
count();//100

参数也可以作为默认值,但是要注意顺序

正确示例:

function fn(x = 10, y = x) {
    console.log(x, y);
}
fn(20);//20 20
fn();//10 10

错误示例:

function fn(x = y, y = 10) {
    console.log(x, y);
}
fn();//报错

参数默认值为变量时,如果外部作用域有对应变量,那么这个参数就会指向外部变量(即参数的值等于外部变量的值)

let w = 10;
function fn(x = w) {
    let w = 20;
    return x;
}
fn();//10

注意:

//在()阶段,x已经赋值后,再改变w的值,也无法改变x的值
let w = 10;
function fn(x = 2) {
    w = 20;
    return x;
}
fn();//10

reset参数

ES6引入reset参数(形式为…变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了

reset参数搭配的变量是一个数组,该变量将多余的参数放入数组中

类似解构赋值,以后就不用call来使arguments调用数组方法了

function count(...values) {
    console.log(values);//[2, 5, 3]
    return values.reduce((acc,curr) => acc + curr);
}
add(2, 5, 3);//10

reset参数必须作为函数最后一个参数

function count(...value, a){}//报错

name属性

函数的name属性,返回该函数的函数名

function count(){}
console.log(count.name); //"count"

(new Function).name // "anonymous"

function foo() {};
foo.bind({}).name // "bound foo"

function foo() {};
foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound " // "bound "

(function(){}).name // ""

箭头函数

ES6中规定可以使用“箭头”(=>)定义函数

------------正常函数-------------
function count(x, y) {
    return x + y;
}
------------箭头函数-------------
let count =(x, y) => x + y;

函数体中可以直接书写表达式

let count = (x, y) => {
    y = 100;
    x = x * y;
    return x + y;
}
count(3, 4);//400

()中书写表达式,书写多个短语语句,最后一个“,”之后的值为返回值

let count = (x, y) => (x = 100, y = 10, x + y);
count(3, 4);//110

{}中书写多行语句

//报错 会将{}识别为函数体
let count = id => {id: id, name: "yunjin"};

//不会报错
let count = id => ({id: id, name: "yunjin"});

到此这篇关于JavaScript ES6的函数拓展的文章就介绍到这了,更多相关JavaScript ES6 函数 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 兼容firefox的一些问题
May 21 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
vuex存值与取值的实例
Nov 06 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 #Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 #Vue.js
html5调用摄像头截图功能
Jan 18 #Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 #Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 #Vue.js
浅谈JavaScript作用域
Dec 06 #Javascript
JavaScript流程控制(循环)
Dec 06 #Javascript
You might like
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
浅谈node的事件机制
2017/10/09 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python编程羊车门问题代码示例
2017/10/25 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
大学生创业策划书
2014/02/02 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
团队拓展训练感想
2015/08/07 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers