箭头函数

箭头函数:将原来函数的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. FPGA最全科普总结

    FPGA最全科普总结   FPGA 是可以先购买再设计的"万能"芯片.FPGA (Field Programmable Gate Array)现场可编程门阵列,是在硅片上预先设计实 ...

  2. 深入 Go 中各个高性能 JSON 解析库

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com/archives/535 其实本来我是没打算去看 JSON 库的性能问题的,但是最近我对 ...

  3. 深入理解java虚拟机笔记Chapter7

    虚拟机类的加载机制 概述 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类的加载机制. 类加载的时机 J ...

  4. 工作流Activiti框架中的LDAP组件使用详解!实现对工作流目录信息的分布式访问及访问控制

    Activiti集成LDAP简介 企业在LDAP系统中保存了用户和群组信息,Activiti提供了一种解决方案,通过简单的配置就可以让activit连接LDAP 用法 要想在项目中集成LDAP,需要在 ...

  5. AgileConfig轻量级配置中心1.3.0发布,支持多用户权限控制

    AgileConfig 当初是设计给我自己用的一个工具,所以只设置了一道管理员密码,没有用户的概念.但是很多同学在使用过后都提出了需要多用户支持的建议.整个团队或者整个公司都使用同一个密码来管理非常的 ...

  6. Zookeeper 分布式锁 (图解+秒懂+史上最全)

    文章很长,而且持续更新,建议收藏起来,慢慢读! 高并发 发烧友社群:疯狂创客圈(总入口) 奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : 极致经典 + 社群大片好评 < Java 高并发 三 ...

  7. Oracle几大后台进程

    pmon,smon,dbwr,lgwr,reco,ckpt.六大核心进程.无论哪个进程出现故障,都会导致数据库实例崩溃.如果杀掉某个进程,在ALERT LOG中会发现各种错误. MMAN(Memory ...

  8. Vue指令实现原理

    前言 自定义指令是vue中使用频率仅次于组件,其包含bind.inserted.update.componentUpdated.unbind五个生命周期钩子.本文将对vue指令的工作原理进行相应介绍, ...

  9. 安装nodejs版本模块报错notsup Unsupported platform for n

    使用npm install -g n报错 如果出现npm ERR! notsup Unsupported platform for n@6.7.0: wanted {"os":&q ...

  10. MVC,MVVM模式的理解

    基本上,我们的产品就是通过接口从数据库中读取数据,然后将数据经过处理展示到用户看到的视图上.当然我们还可以从视图上读取用户的输入,然后通过接口写入到数据库.但是,如何将数据展示到视图上,又如何将用户的 ...