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 22 Javascript
jQuery 操作XML入门
Dec 25 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
javascriptvoid(0)含义以及与"#"的区别讲解
Jan 19 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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 include,include_once,require,require_once
2008/09/05 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python gdal安装与简单使用
2019/08/01 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
尼克松手表官网:Nixon手表
2019/03/17 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
商务英语广告词大全
2014/03/18 职场文书
小学教师培训方案
2014/06/09 职场文书
暑期培训班策划方案
2014/08/26 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
经营场所使用证明
2015/06/19 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS