箭头函数

箭头函数:将原来函数的function关键字和函数名都删掉,并使用”=>”连接参数列表和函数体。

箭头函数语法:

(参数1,参数2)=>{

函数体

}

注意点:

  • 当参数有且只有一个,括号可以省略。没有参数或多个参数时,括号不能省略。
  • 如果函数体有且只有一个表达式时,可以省略花括号。

箭头函数使用实例:

window.onload = ()=>{
console.log('网页加载完成')
}

参数只有一个时,省略掉括号。函数体只有一个表达式,花括号也省略。如:

let arr=[1,2,3,4]
arr.forEach((item)=>
console.log('item',item)
)

this指向问题

1、在全局环境下,this始终指向全局对象,无论是否严格模式。

2、普通函数内部的this分严格模式和非严格模式。

  • 严格模式下this为undefined。
  • 非严格模式下,this指向全局对象window。

3、箭头函数的 this 是上下文的this。

箭头函数相当于匿名函数,并且简化了函数定义,但箭头函数和匿名函数有个明显的差异,箭头函数内部的this是词法作用域,上下文的this值作为自己的this值。

  • Call()、apply()、bind()方法对于箭头函数只是传入参数,对它的this毫无影响。
  • 考虑到this是词法层面上的,严格模式中与this相关的规则都将被忽略。

放在setTimeout中的两个箭头函数返回的this举例。

function Person(name,age){
this.name = name;
this.age = age;
setTimeout(()=>{
console.log('this',this) //Person {name: "倩倩", age: 18}
},100)
}
let p = new Person('倩倩',18)
setTimeout(()=>{
console.log("this",this)//Window {window: Window, self: Window, document: document, name: "", location: Location, …}
},1000)

函数参数的默认值

在ES6之前,不能直接为函数的参数指定默认值,只能采取变通措施。

实例:普通函数给参数设置默认值

function sum(a,b){
a = a | 12;
b = b | 5;
return a+b
}
console.log('相加等于',sum())// 17

ES6允许函数参数设置默认值,即直接写在参数定义的后面。如

function sum(a=12,b=5){
return a+b
}
console.log('相加等于',sum())

ES6默认参数优点:

  • 简洁,适用于参数多的时候,方便设置默认值。
  • 阅读代码的人可以看出哪些参数是可以省略的,不用查看函数体或文档。
  • 有利于代码的优化,即使未来版本拿掉这个参数,以前代码也可以运行,还有参数变量是默认声明的,不能在函数体内部再进行声明。

与结构赋值结合使用

function add({x=1,y=2}={}){
return x+y
}
console.log('相加等于',add({x:2})) // 相加等于 4

ES6函数不定参数和展开运算符

不定参数:
语法:...
类型:数组
作用:指定多个各自独立的参数,通过整合后的数组来访问。
限制:

  • 最多只能声明一个
  • 只能放在参数末尾

实例:简单应用

function show( a, ...args){
console.log('a',a)
console.log('args',...args)
}
show(1,2,3)

展开运算符:

语法:...
作用:指定数组或对象,将他们打散后作为各自独立的参数。

实例:使用展开运算符展开数组。

let arr = ['a','b','c']
let arr2 = []
arr2.push(...arr)
console.log('arr2',arr2)

实例:使用展开运算符展开对象。

let person = {
name :'倩倩',
age:18
}
let worker = {
...person,
job:"打杂"
}
console.log('worker',worker)//{name:'倩倩',age:18,job:'打杂'}
												

ES6新增语法(二)——函数和参数的更多相关文章

  1. ECMAScript简介以及es6新增语法

    ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...

  2. ES6教程-字符串,函数的参数,了解函数的arguments对象,js面向对象,设计模式-单例模式,解构赋值

    前言 主要讲解了ES6对字符串的拓展,包括includes,startsWith和endsWith,另外增加了字符串模板. Start includes()是否包含 startsWith()以什么开头 ...

  3. ES6新增语法和内置对象(let,const, Array/String/Set 扩展方法(解构赋值,箭头函数,剩余参数))

    1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...

  4. 面向对象编程-终结篇 es6新增语法

    各位,各位,终于把js完成了一个段落了,这次的章节一过我还没确定下面要学的内容可能是vue也可能是前后端交互,但无论是哪个都挺兴奋的,因为面临着终于可以做点看得过去的大点的案例项目了,先憋住激动地情绪 ...

  5. 从零开始学 Web 之 ES6(四)ES6基础语法二

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. ES6新语法(二)

    1.解构         在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量.         解构:自动解析数组或对象中的值,并赋值给指定的变量.. ...

  7. 【ES6新增语法详述】

    目录 1. 变量的定义 let const 2. 模版字符串 3. 数据解构 4. 函数扩展 设置默认值 箭头函数 5. 类的定义 class 6. 对象的单体模式 "@ ES6新增了关于变 ...

  8. 如何在ES5与ES6环境下处理函数默认参数

    函数默认值是一个很提高鲁棒性的东西(就是让程序更健壮)MDN关于函数默认参数的描述:函数默认参数允许在没有值或undefined被传入时使用默认形参. ES5 使用逻辑或||来实现 众所周知,在ES5 ...

  9. ES6新增语法(一)——let、const、var的区别

    ES6简介 ES6是ECMAScript 6.0的简称,是javascript语言的下一代标准,已经在2015年6月正式发布上线.目的就是为了统一javascript的语法标准,可以用来开发大型应用程 ...

随机推荐

  1. 可视化反投射:坍塌尺寸的概率恢复:ICCV9论文解读

    可视化反投射:坍塌尺寸的概率恢复:ICCV9论文解读 Visual Deprojection: Probabilistic Recovery of Collapsed Dimensions 论文链接: ...

  2. VB 老旧版本维护系列---兜兜转转有点晕:从服务器通过URL不中转保存的下载

    从服务器通过URL不中转保存的下载 首先引用System.dll 然后新开一个页面,空的,在后台Page_Load方法里写   Dim docPath As String ="" ...

  3. 重新整理 mysql 基础篇————— 事务隔离级别[四]

    前言 简单介绍一下事务隔离的基本 正文 Read Uncommitted(未提交读) 这个就是读未提交.就是说在事务未提交的时候,其他事务也可以读取到未提交的数据. 这里举一个例子,还是前一篇的例子. ...

  4. 九、配置Tomcat集群

    配置Tomcat集群所需服务器三台:192.168.1.5(调度服务器).192.168.1.10(WEB1),192.168.1.20(WEB2) 1.调度服务器设置 [root@proxy ~]# ...

  5. 【Android编程】Java利用apktool编写Metasploit恶意后门注入工具

    /声明:本文作者Kali_MG1937 csdn博客id:ALDYS4 QQ:3496925334 未经许可禁止转载!/ 注意,本文为作者从CSDN搬迁至此的文章 注意!此文章虽然 未被 作者标记到 ...

  6. 【NX二次开发】Block UI 绘图区

    属性说明 常规         类型 描述     BlockID     String 控件ID     Enable     Logical 是否可操作     Group     Logical ...

  7. 【NX二次开发】Block UI 文本颜色/字体/宽度

    属性说明 常规     类型 描述     BlockID     String 控件ID     Enable     Logical 是否可操作     Group     Logical 是否分 ...

  8. OpenCV随笔

    创建一个窗口#zeros(shape,dtype=float,order='C')#shape:形状,dtype:数据类型,可选参数,默认numpy.float64img = np.zeros((50 ...

  9. HTTP头部POST表单详解

    2 POST /hello/checkUser.html?opt=xxx HTTP/1.1 方法的声明,Get,Post,Delete等 3 Accept: */* 4 Referer: http:/ ...

  10. 循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

    在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情 ...