ES6函数第一篇:参数篇
目录
1.默认参数
2.剩余参数
3.展开运算符
1.默认参数
(1)使用
在书写型参数,直接给形参进行赋值的值成为默认值,如此,在调用函数时,如果没有给对应的参数赋值(即它的值为undefined),则会自动使用默认值
(2)对arguments的影响
只要给函数加上参数默认值,该函数会自动变成严格模式下的规则,即arguments和形参脱离
(3)暂时性死区的问题
形参和ES6中的 let / const 声明一样,具有作用域,并且根据参数声明的顺序,存在暂时性死区
【例1-1-1】不设置默认参数时,传参不够时的情况
//若没有默认值,如果传参不够,返回NaN
function sum(a, b, c) {return a + b + c;
}
console.log(sum(1));
console.log(sum(1, 2, 3));
【结果】
【例1-1-2】设置默认值后,不传参或者传undefined的参数使用默认值
//设置默认值
function sum1(a, b = 1, c = 1) {return a + b + c;
}
console.log(sum1(1, 2, 3));
console.log(sum1(1, undefined, 3));
console.log(sum1(1));
【结果】
【例1-1-3】练习:在页面的容器中添加文本内容。因为一般情况改变的只有内容,因此可以给容器设置默认值
<div id="container"></div>
function addText(name = 'div', container = document.getElementById('container'), text = '') {const ele = document.createElement(name);ele.innerText = text;container.appendChild(ele);
}
addText(undefined, undefined, '桃花扇');
addText('p', undefined, '抹香鲸');
【结果】
【例1-2】改变形参不会改变arguments
function test(a, b = 1) {console.log('arguements', arguments[0], arguments[1]);console.log('a:', a, 'b:', b);a = 3;console.log('重新赋值a后的arguements', arguments[0], arguments[1]);console.log('重新赋值a后的a:', a, 'b:', b);
}
test(1, 2)
【结果】可见形参与arguments没有映射关系
【例1-3】暂时性死区的问题
该例纯粹是为了说明默认参数的暂时性死区的问题,没有什么实际意义,一般不会使用某个形参给另一个形参赋值
首先,当作默认值的形参a给b赋值,此时a的初始化值为1,因此打印结果图1-3-1
function test(a, b = a) {console.log('a =',a,',','b =', b);
}
test(1)
【结果】
对比下例,开始传参,a取默认值b,此时b在暂时性死区,还未初始化,则报错结果如图1-3-2
function test(a = b, b) {console.log('a =', a, ',', 'b =', b);
}
test(undefined, 1)
【结果】
2.剩余参数
(1)arguments的缺陷
1) 如果和形参配合使用,容易导致混乱
2) 从语义上,使用arguments获取参数,由于形参缺失,无法从函数定义上理解函数的真实意图
(2)语法
function (...形参名) {函数体}
(3)注意
1) 一个函数,只能出现一个剩余参数
2) 一个函数,如果有剩余参数,剩余参数必须是最后一个参数
【例2-1】剩余参数举例
function sum(...args) {//args收集了所有的参数,形成一个数组let sum = 0;// console.log(args);for (let i = 0; i < args.length; i++) {sum += args[i];}return sum;
}
console.log(sum());
console.log(sum(1));
console.log(sum(1,2));
console.log(sum(1,2,3,));
console.log(sum(1,2,3,4));
【结果】
function test(a, b, c, ...args) {console.log(args);
}
test(1, 2, 3, 44, 5, 3, 221, 45);
【结果】
【例2-2】若剩余参数不是最后一个参数
function test(a, ...args, b) {console.log(args);
}
test(1, 2, 3, 44, 5, 3, 221, 45);
【结果】
3.展开运算符
(1)语法:...要展开的东西
(2)展开数组
(3)展开对象
【例3-1】
function test(...args) {console.log(args);console.log(...args);
}
test(12,434,3246,7634);
【结果】当args把剩余变量收集起来后,构成了一个数组,可以通过展开运算符将它们拆分
【例3-2】展开对象
const obj = {name: 'jwh',age: 18,
}
const obj1 = {...obj,//也可以对obj中的属性进行覆盖name: 'zdw'
}
console.log(obj);
console.log(obj1);
【结果】
ES6函数第一篇:参数篇相关推荐
- reshape函数第一个参数-1是什么意思
比如一个数组[1,2,3,4,5] shape是(5,) reshape(-1,1)的结果是: [[1] [2] [3] [4] [5]] 是一个一行5行1列的二维数组,shape为(5,1) ...
- hive substr函数_数据分析工具篇——HQL函数及逻辑
本篇文章我们梳理一下hive常用的函数,对于hive而言,常用的函数并不是特别多,往往记住关键几个,就可以解决80%的问题,这也是大家喜欢hive的原因,那么,常用的函数有哪些呢? 时间函数 1)时间 ...
- python 笔记 之 函数中默认参数的影响
2019独角兽企业重金招聘Python工程师标准>>> # 声明一个函数,第一个参数是整型,第二个参数是list类型, # l 有一个默认值,默认值为[]空列表def f(x,l=[ ...
- C++11多线程第三篇:线程传参详解,detach()大坑,成员函数做线程参数
文章目录 3.1 传递临时对象作为线程参数 3.1.1 要避免的陷阱(解释1) 3.1.2 要避免的陷阱(解释2) 3.1.3 总结 3.2 临时对象作为线程参数进一步详解 3.2.1 线程id概念 ...
- ES6系列教程第三篇--Generator 详解
一.什么是Generator 函数 先看下面的Generator函数, function* helloGenerator() {console.log("this is generator& ...
- 学习OpenCV——BOW特征提取函数(特征点篇)
没日没夜的改论文生活终于要告一段落了,比起改论文,学OpenCV就是一件幸福的事情.OpenCV的发展越来越完善了,已经可以直接使用BOW函数来进行对象分类了. 简单的通过特征点分类的方法: ...
- ASP.NET自定义控件组件开发 第一章 第二篇 接着待续
ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 很感谢大家给我的第一篇ASP.NET控件开发的支持!在写这些之前,我也看了一些例 ...
- ES6(二)——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用 在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...
- 重温《数据库系统概论》【第一篇 基础篇】【第3章 关系数据库标准语言SQL】
本篇内容为中国人民大学教授王珊.萨师煊的<数据库系统概论>自学课程的复习笔记,学习视频源于小破站(传送门),对应视频P16-P27,属教材"[第一篇 基础篇]"的&qu ...
最新文章
- 聊聊flink的NetworkEnvironmentConfiguration
- 基于Xml 的IOC 容器-载入<property>元素
- Mysql5换成Mysql8之后报错java.lang.ClassNotFoundException: com.mysql.jdbc.driver的问题解决
- linux系统组成以及运行模式
- 运用CSS3制作3D盒子骰子
- 剑指offer 面试63题
- python之读取和写入文件
- 基于html+css房地产销售系统设计与实现-计算机毕业设计源码+LW文档
- ArduPilot简介
- Redis-desktop-manager显示黑屏
- python求二项式系数的几种方法及性能对比
- C语言--实现状态机
- 【matlab】GMSK高斯最小频移键控
- linux 原子类型变量,linux 原子变量 - osc_m4jd02jn的个人空间 - OSCHINA - 中文开源技术交流社区...
- [Nikon D80]适马微距
- HttpWatch功能详细介绍
- android增量编译,GitHub - brok1n/androidBsdiffUpdate: Android增量更新项目源代码。带C源程序以及ndk编译好的so包。可以直接导出使用。...
- android五层系统架构,Android系统的五层架构、Dalvik与ART、最后有个奇怪的问题请教orz...
- CF-Educational Codeforces Round 44 (Rated for Div. 2)-D-Sand Fortress
- 35岁程序员:从焦虑到适应
热门文章
- C++ 类和对象(三):构造函数补充、匿名对象、友元、内部类、类的static与const
- 费解 | 为什么很多程序员工作时都戴耳机?
- 为什么 Go 模块在下游服务抖动恢复后,CPU 占用无法恢复
- MySQL高级之查询优化(索引失效)
- 腾讯2020校园招聘----覆盖
- 基于LZ77算法的文件压缩收尾
- 音视频技术开发周刊 | 197
- LiveVideoStack线上分享第四季(三):在线教育的音视频架构设计及弱网对抗技术...
- 微服务架构日志集中化 安装 EFK (Fluentd ElasticSearch Kibana) 采集nginx日志
- 深度学习时代的目标检测算法综述