ECMAScript6 入门 函数的扩展
为函数参数设定默认值
function log(x, y = 'World') {
console.log(x, y);
} log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello 注意:参数变量是默认声明的,所以不能用let或const再次声明
使用参数默认值时,函数不能有同名参数
// 不报错
function foo(x, x, y) {
// ...
} // 报错
function foo(x, x, y = 1) {
// ...
}
// SyntaxError: Duplicate parameter name not allowed in this context 参数默认值不是传值的,而是每次都重新计算默认值表达式的值。
也就是说,参数默认值是惰性求值的(可以与vue框架计算属性进行联想理解)
let x = 99;
function foo(p = x + 1) {
console.log(p);
} foo() // 100
//参数P的默认值是x+1,每次调用函数foo,都会重新计算x+1
x = 100;
foo() // 101
与解构赋值结合默认值使用
// 写法一
//参数设置了默认值,但是解构对象设置了默认值
function m1({x = 0, y = 0} = {}) {
return [x, y];
} // 写法二
//参数设置了默认值,但是解构对象本身没有设置默认值
function m2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
参数默认值的位置:最好将带默认值的参数设为函数的最后面,如果不是在最后面,是不能省略的
// 例一
function f(x = 1, y) {
return [x, y];
} f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 报错
f(undefined, 1) // [1, 1] // 例二
function f(x, y = 5, z) {
return [x, y, z];
} f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]
参数length的属性:指定了默认值的参数,函数的length属性返回的是没有指定默认值的参数的个数,
这是因为length
属性的含义是,该函数预期传入的参数个数。
某个参数指定默认值以后,预期传入的参数个数就不包括这个参数了
函数的length属性不包含rest参数
作用域:一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。
等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的
//似乎和for循环的循环条件和循环体相同,都是不同的作用域,函数调用时,函数体内部的局部变量影响不了默认值变量
//例子1 体现了设置默认值出现单独作用域
var x = 1; function f(x, y = x) {
console.log(y);//y在作用域范围内寻找x,找到了值2,就不会在寻找
} f(2) // //例子2 体现了作用域链
let x = 1; function f(y = x) {
let x = 2;//y在作用域找,x本身没有定义,所以沿着作用域去上层找
console.log(y);
} f() // //例子3
function f(y = x) {
let x = 2;
console.log(y); //两个不同的作用域,所以会报错
} f() // ReferenceError: x is not defined //例子4 如果x是一个函数,也遵循着同样的道理
var x = 1; function foo(x = x) {
// ... //参数x = x形成一个单独作用域。实际执行的是let x = x 暂时性死区,在声明之前使用变量
} foo() // ReferenceError: x is not defined
var x = 1;
function foo(x, y = function() { x = 2; }) { //此时x变量的值都是1
var x = 3; //这个变量x与上面那个变量x不再同一个作用域,所以他们不是同一个变量
y(); //执行y()以后,foo函数体内的变量x不会改变,改变的只有foo参数部分的变量
console.log(x); //如果去除var = 3,那么打印的值就是2.因为匿名函数里面的x与第一个参数的x是同一个作用域,所以是同一个变量
}
foo() // 3
x // 1
rest参数
//rest 参数(形式为...变量名),将多余的参数组合成一个数组,rest是一个真正的数组
//tip arguments是个类数组转换: Array.prototype.slice.call(arguments).sort();
rest参数后面不允许在出现其他的参数
function A(num,...rest){
console.log(rest)
}
A(1,2,3) rest = [2,3]
function add(...values) {
let sum = 0;
console.log(values.length)
//for (var val of values) {
// sum += val;
//}
//
//return sum;
} add(2, 5, 3)
name属性:返回函数的名称如果将一个匿名函数赋值给一个变量,ES5 的name
属性,
会返回空字符串,而 ES6 的name
属性会返回实际的函数名
箭头函数
var f = v => v; // 等同于
var f = function (v) {
return v;
}; 1:箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分
var f = () => 5;
// 等同于
var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
}; 2:如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回
var sum = (num1, num2) => { return num1 + num2; } 3:如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错 会将{}里面当做一个代码块去执行,所以报错
// 报错
let getTempItem = id => { id: id, name: "Temp" }; // 不报错
let getTempItem = id => ({ id: id, name: "Temp" }); 4:箭头函数只有一行语句,且不需要返回值
let fn = () => void doesNotReturn(); 注意点:
1:函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
2:不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误
3:可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
4:不可以使用yield命令,因此箭头函数不能用作 Generator 函数 5:尾部调用指的是函数最后一步是return 一个执行函数
ECMAScript6 入门 函数的扩展的更多相关文章
- ES6入门——函数的扩展
1.函数参数的默认值 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法.现在ES6可以为函数的参数添加默认值,简洁了许多. ES5 function show(a,b){ b = b ...
- 《ECMAScript6入门》笔记——Generator函数
今天在看<ECMAScript6入门>的第17章——Generator函数的语法.理解起来还是有点费劲,几段代码看了很多遍.总算有点点理解了. 示例代码如下:(摘自阮一峰<ECMAS ...
- ES6入门之函数的扩展
函数js原有的: 属性:arguments[].caller(调用该函数的引用,注意与callee分别开,callee指的是调用函数本身经常在递归中出现).length(形参个数).prototype ...
- ES6_入门(6)_函数的扩展
// 2017/7/22 /*ES6函数的扩展*/ //ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; ...
- ES6新特性3:函数的扩展
本文摘自ECMAScript6入门,转载请注明出处. 一.函数参数默认值 1. ES6允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') ...
- ES6学习笔记(6)----函数的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 函数的扩展 函数的默认值 : ES6可以为函数指定默认值 (1)指定默认值的两种方式 a.函数参 ...
- ES6 - Note3:数组、对象与函数的扩展
一.数组的扩展,ES6在数组扩展了一些API,以实现更多的功能 1.Array.from:可以将类数组和可遍历的数据结构转换成真正的数组,如下所示 var a = { '0':1,'1':1,leng ...
- 编译器对C++ 11变参模板(Variadic Template)的函数包扩展实现的差异
编译器对C++ 11变参模板(Variadic Template)的函数包扩展实现的差异 题目挺绕口的.C++ 11的好东西不算太多,但变参模板(Variadic Template)肯定是其中耀眼的一 ...
- Python入门-函数的使用到程序的公布安装
Python入门-函数的使用到Python的公布安装 本文主要适合有一定编程经验,至少掌握一门编程语言的人查看. 文中样例大多都是简单到认识英文单词就能看懂的水平,主要讲的是Python的总体使用方法 ...
随机推荐
- NSLayoutConstraint 使用详解 VFL使用介绍
注意 使用前必须先取消所有的你想设置View 的 Autoresizing 属性 因为 Autoresizing Layout不能共存 系统默认是 Autoresizing for v in su ...
- javaScript遍历对象、数组总结
javaScript遍历对象总结 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性). var obj = {'0':'a ...
- 2。创建第一个angular应用,已经开发前的一些配置
现在我们开始新建一个angular5的脚手架 . 到想要建项目的目录下.比如我的 在 D:\JsProjects 进入cmd或者powershell cd 进入该文件夹下 然后开始新建,ng ne ...
- 【python】控制台输出颜色
来源:http://www.cnblogs.com/yinjia/p/5559702.html 在开发项目过程中,为了方便调试代码,经常会向stdout中输出一些日志,默认的这些日志就直接显示在了终端 ...
- 网络扫描信息收集基于(Windows)
1.首先说明一下一款网络扫描工具,在之前的博客中我曾简要的写过关于Advance IP Scanner使用方法,最近要写网络扫描的工具,所以对这款工具做一个详细的功能细节上的介绍. 如下图 在输入框 ...
- CF 833B
互测题T3... 首先有个dp是非常好想的: 设dp[i][j]为前j个数分成i组的最大得分,则易得:dp[i][j]=max{dp[i-1][k-1]+num[k][j]},其中,num[k][j] ...
- Nginx详解二十六:Nginx架构篇之性能优化
一.性能优化考虑点 1.当前系统结构瓶颈 通过压力测试观察指标.日志检测.性能分析 2.了解业务模式 接口业务类型.系统层次化结构 3.性能与安全 二.ab接口压力测试工具 1.安装:yum -y i ...
- Jmeter测试demo
复制代码,保存为.jmx文件 需要安装插件: JMeterPlugins-ExtrasLibs E:\软件\apache-jmeter-3.0\lib\ext <?xml version=&qu ...
- JS实现简单的观察者模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- hdu 5183(Hash处理区间问题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5183 题意:给出一个n个元素的数组,现在要求判断 a1-a2+a3-a4+.....+/-an 中是否 ...