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 相关文章推荐
jQuery的强大选择器小结
Dec 27 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
Vue.js动态组件解析
Sep 09 Javascript
纯js实现倒计时功能
Jan 06 Javascript
vue.js实例todoList项目
Jul 07 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
在小程序中推送模板消息的实现方法
Jul 22 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
JS监听组合按键思路及实现过程
Apr 17 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中的外观模式facade pattern
2018/02/05 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
超清晰的document对象详解
2007/02/27 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
员工拾金不昧表扬信
2014/01/09 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
工作调动申请报告
2015/05/18 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
python区块链持久化和命令行接口实现简版
2022/05/25 Python