默认参数:

1. 在 ES5 语法中,为函数形参指定默认值的写法:

写法一:
function foo (bar) {
bar = bar || 'abc';
console.log(bar)
}
foo('xyz') 写法二:
function foo (bar) {
if (typeof bar === 'undefined') {
bar = 'abc';
}
console.log(bar)
} foo('xyz');

2.  使用 ES6 的语法为函数形参指定默认值

    function post (url, data = {}, timeout = 5 * 1000) {
  console.log(arguments)
  console.log(url, data, timeout)
}
// post('xyz', {uname: 'zhangsan', upass: '123'}, 3000);
post('xyz', null, 3000);

注意事项:

  1> 除了为形参直接指定默认值以外,形参的默认值还可以是表达式,例如,timeout = 5 * 1000

  2> 在预编译阶段,形参表达式不会执行,只有在调用函数,并且没有为形参传递实参的情况下才执行

不定参数:

使用剩余操作符接收剩余的实参,这些实参会被保存到一个不定参数(args)中

function foo (...args) {
return args.reduce(function (previousValue, currentValue) {
console.log(previousValue, currentValue)
return previousValue += currentValue;
})
}
// 将上面的函数改成箭头函数的形式
var foo = (...args) => args.reduce((a, b) =>a += b)
console.log(foo(1, 32, 34, 5, 6))

箭头函数:

// 1. 形式一:
var foo = function () {
return 'Hello World!';
}; // 如果形参数量为 0,则必须加上小括号。箭头后面的表达式的结果会被作为函数的返回值。
var foo = () => {
return 'Hello World!';
} // 2. 形式二:
var foo = function (greeting) {
return greeting;
} // 如果形参的数量为 1,则可以省略小括号。
var foo = greeting => {
return greeting;
} // 3. 形式三:
var foo = function (firstName, lastName) {
return firstName + ' · ' + lastName;
} // 如果形参数量大于 1,则不能省略小括号。
var foo = (firstName, lastName) => {
return firstName + ' · ' + lastName;
} // 4. 形式四:
var foo = function (a, b) {
return a > b ? a : b;
} // 如果函数的执行体比较简单(直接量或表达式),可以省略大括号,箭头后面的直接量或表达式会被自动作为返回值。
var foo = (a, b) => a > b ? a : b; // 5. 形式五:
var foo = function (a, b) {
let max = a;
if (b > a) {
max = b;
}
return max;
} // 如果函数的执行体比较复杂,则不能省略大括号。
var foo = (a, b) => {
let max = a;
if (b > a) {
max = b;
}
return max;
}
console.log(foo('赵四', '尼古拉斯'))

箭头函数没有this指定:

// 普通函数作用域中的 this 已经被绑定成 window 对象,因此当我们放问 this 时,直接在当前作用域下就能访问的到。
var foo = function () {
console.log(this)
return 'Hello World!';
}; // 箭头函数的作用域中没有绑定 this,因此,当我们访问 this 时,会去上一层作用域中查找 this。
var bar = () => {
console.log(this)
return 'Hello World!';
}; // 示例,由于 sayName 箭头函数中没有绑定 this,因此我们访问 this 时,会去全局作用域中查找。
// 查找的结果是 this 指向 window,因此输出的 name 的值是 '猪猪侠' var name = '猪猪侠';
var obj = {
name: '煎饼侠',
sayName: function () {
// this = obj
return this.name;
}
}; console.log(obj.sayName())

箭头函数没有arguments绑定:

// 普通函数
var foo = function (greeting) {
console.log(arguments)
return greeting;
}; // 箭头函数中没有绑定 arguments 对象,因此下面的输入语句会报错:arguments is not defined
var bar = (greeting) => {
console.log(arguments)
return greeting;
}; console.log(foo('Hello World!'))
console.log(bar('你好世界!'))

箭头函数中不能手动绑定this:

// this 指向的对象
var obj = {
fullName: '沃尔玛'
}; // 1. 普通函数,可以使用 call() 方法改变函数中 this 的绑定
var foo = function (greeting) {
return this.fullName + '说:' + greeting;
};
console.log(foo.call(obj, 'Hello World!')) // 2. 箭头函数,不能使用 call() 方法改变函数中 this 的绑定,箭头函数中不能绑定 this。
var bar = (greeting) => {
return this.fullName + '说:' + greeting;
}; // 下面的代码不会报错,但是也不起作用
console.log(bar.call(obj, '你好世界!'))

函数--new.target:

// 1. ECMAScript 5 中判断构造函数是否通过 new 关键字调用的写法
function Person (fullName) {
if (this instanceof Person) {
this.fullName = fullName;
} else {
return new Person(fullName);
}
} let student = Person('八戒') // 2. ECMASript 6 引入一个 new.target 属性,当我们使用 new 操作符调用构造函数时,new.target 属性的值为构造函数,否则为 undefined
function Person (fullName) {
if (typeof new.target !== 'undefined') {
this.fullName = fullName;
} else {
throw new Error('必须通过 new 关键字来调用 Person。');
}
}
let student = new Person('八戒');
console.log(student) // 3. 除此之外,还可以检查 new.target 是否被某个特定构造函数所有调用。
// 例如,Person 构造函数中的 new.target 属性的值被限定为 Person
function Person (fullName, age) {
if (typeof new.target === Person) {
this.fullName = fullName;
this.age = age;
} else {
throw new Error('必须通过 new 关键字来调用 Person。');
}
} function Dog (fullName, age) {
Person.call(this, fullName, age)
} let dog = new Dog('HeHe', 3) console.log(dog) // 4. 不能在函数外部使用 new.target,否则会报错
function Person () {
console.log(new.target)
} // 下面代码会抛出错误:new.target expression is not allowed here
console.log(new.target) let student = new Person('悟净')

ES6函数的个人总结的更多相关文章

  1. ES6函数扩展

    前面的话 函数是所有编程语言的重要组成部分,在ES6出现前,JS的函数语法一直没有太大的变化,从而遗留了很多问题和的做法,导致实现一些基本的功能经常要编写很多代码.ES6大力度地更新了函数特性,在ES ...

  2. 深入理解javascript函数系列第四篇——ES6函数扩展

    × 目录 [1]参数默认值 [2]rest参数 [3]扩展运算符[4]箭头函数 前面的话 ES6标准关于函数扩展部分,主要涉及以下四个方面:参数默认值.rest参数.扩展运算符和箭头函数 参数默认值 ...

  3. ES6函数剩余参数(Rest Parameters)

    我们知道JS函数内部有个arguments对象,可以拿到全部实参.现在ES6给我们带来了一个新的对象,可以拿到除开始参数外的参数,即剩余参数(废话好多 O(∩_∩)O~). 这个新的对象和argume ...

  4. ES6函数默认参数(Default Parameters)

    语言更新时每一个新增的特性都是从千百万开发者需求里提取过来的,规范采用后能减少程序员的痛苦,带来便捷. 我们经常会这么写 function calc(x, y) { x = x || 0; y = y ...

  5. es6函数的rest参数和拓展运算符(...)的解析

    es6的新特性对函数的功能新增加了rest参数和...的拓展运算符.这是两个什么东西呢? 先来看一个问题:如何获取一个函数除了定义的参数之外的其他参数?传统的做法是借助函数的arguments关键字来 ...

  6. ES6函数的拓展

    ES里面现在支持在函数的参数直接给参数赋一个默认值,ES6支持拓展运算符(...)三个英文的点,这个形式如function(...a)这个里面...a可以接受若干的值,这个拓展运算符也可以把若干的值转 ...

  7. ES6 函数的扩展1

    1. 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值. ES6允许为函数的参数设置默认值,即直接 ...

  8. ES6 函数的扩展3

    箭头函数 基本用法 ES6允许使用"箭头"(=>)定义函数 var f = v => v; 上面的箭头函数等同于: var f = function(v) { retu ...

  9. ES6 函数的扩展2

    8.2 rest参数 ES6引入rest参数(形式为"-变量名"),用于获取函数的多余参数,这样就不需要使用arguments对象了. arguments对象并没有数组的方法,re ...

  10. ES6 函数的扩展(1)

    1. 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值. ES6允许为函数的参数设置默认值,即直接 ...

随机推荐

  1. spring整合mybatis报.UnsatisfiedDependencyException错误

    tomcat启动报org.springframework.beans.factory.UnsatisfiedDependencyException:错误 org.springframework.bea ...

  2. Python使用队列实现Josephus问题

    Josephus问题,在这个古老的问题中,N个深陷绝境的人一致同意通过以下方式减少生存的人数.他们围坐一圈(位置记为0~N-1)并从第一个人报数,报到M的人会被杀死, 知道最后一个人留下来.传说中Jo ...

  3. C# vb .net实现颜色替换效果滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的颜色替换效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...

  4. IEnumerable,ICollection,IList,List的使用

    做C#的都知道:一类只能有一个继承类,但可以实现多个接口.这句话就告诉我们:IEnumerable,ICollection,IList,List区别了 首先我看看 IEnumerable:   // ...

  5. win add static arp

    win add static arp > arp -s "192.168.0.2" "00-0a-35-01-fe-c0" > arp -a | f ...

  6. 1.java小作业-计算1到100的整合-指定输入多少行输出就打印多少行-打印24小时60分钟每一分钟-重载基础练习-面向java编程初学者

    可能有和我一样刚开始学习java的小伙伴们, 可以或多或少了解一点别的语言知识,我就是中途转过来的, 明白一点,关键不在语言本身····· 所以面对初学者来说,基础要学好, 下面列举几个没什么难度的小 ...

  7. JAVA案例练习: 去除ArrayList中重复的字符串(字符串内容相同),去除重复的对象

    package com.yqw.list; import java.util.ArrayList;import java.util.Iterator; public class Demo_ArrayL ...

  8. Matlab建造者模式

    构建者模式又叫建造者模式(Builder),是将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示.创建者模式隐藏了复杂对象的创建过程,它把复杂对象的创建过程加以抽象,通过子类继 ...

  9. 2019-07-25 PDO

    PDO是什么? pdo是php数据对象,即php data object .使用pdo是为了让我们能够使用相同的代码连接不同的数据库.PDO扩展是以面向对象的方式来进行封装,也就是说,我们的PDO扩展 ...

  10. 学习笔记之编程珠玑 Programming Pearls

    Programming Pearls (2nd Edition): Jon Bentley: 0785342657883: Amazon.com: Books https://www.amazon.c ...