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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 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
生成缩略图
2006/10/09 PHP
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
python读取各种文件数据方法解析
2018/12/29 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python连接mysql有哪些方法
2020/06/24 Python
python如何修改文件时间属性
2021/02/05 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
国富论读书笔记
2015/06/26 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
React Fragment介绍与使用详解
2021/11/11 Javascript
PyTorch中permute的使用方法
2022/04/26 Python