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 相关文章推荐
Dojo 学习要点
Sep 03 Javascript
input按钮的事件处理大全
Dec 10 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
JS & JQuery 动态添加 select option
Jun 08 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
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
?繁体转换的class
2006/10/09 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
javascript回调函数详解
2018/02/06 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
自己使用总结Python程序代码片段
2015/06/02 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
"引用"与多态的关系
2013/02/01 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
兰兰过桥教学反思
2014/02/08 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
质量整改通知单
2015/04/21 职场文书