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 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
webpack4简单入门实例
Sep 06 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 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中for循环语句的几种变型
2007/03/16 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
如何使用php实现评委评分器
2015/07/31 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
django修改models重建数据库的操作
2020/03/31 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
大学生工作自荐书
2014/06/16 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
不同意离婚代理词
2015/05/23 职场文书
公司联欢会主持词
2015/07/04 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers