ES6新增语法—函数和参数

 箭头函数

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

为通化等地区用户提供了全套网页设计制作服务,及通化网站建设行业解决方案。主营业务为成都网站制作、网站建设、外贸网站建设、通化网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

箭头函数语法:

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

函数体

}

注意点:

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

箭头函数使用实例:

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

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

 
 
 
  1. let arr=[1,2,3,4] 
  2. arr.forEach((item)=> 
  3.  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举例。

 
 
 
  1. function Person(name,age){ 
  2.  this.name = name; 
  3.  this.age = age; 
  4.  setTimeout(()=>{ 
  5.   console.log('this',this) //Person {name: "倩倩", age: 18} 
  6.  },100) 
  7. let p = new Person('倩倩',18) 
  8. setTimeout(()=>{ 
  9.  console.log("this",this)//Window {window: Window, self: Window, document: document, name: "", location: Location, …} 
  10. },1000) 

函数参数的默认值

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

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

 
 
 
  1. function sum(a,b){ 
  2.  a = a | 12; 
  3.  b = b | 5; 
  4.  return a+b 
  5. console.log('相加等于',sum()) 

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

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

ES6默认参数优点:

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

与结构赋值结合使用

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

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

不定参数:

语法:...

类型:数组

作用:指定多个各自独立的参数,通过整合后的数组来访问。

限制:

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

实例:简单应用

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

展开运算符:

语法:...

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

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

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

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

 
 
 
  1. let person = { 
  2.  name :'倩倩', 
  3.  age:18 
  4. let worker = { 
  5.  ...person, 
  6.  job:"打杂" 
  7. console.log('worker',worker) 

当前文章:ES6新增语法—函数和参数
新闻来源:http://www.mswzjz.com/qtweb/news36/162436.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联