ES6新增语法—函数和参数

箭头函数

箭头函数：将原来函数的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())

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)

新闻标题：ES6新增语法—函数和参数
本文来源：http://www.shufengxianlan.com/qtweb/news36/162436.html

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

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

猜你还喜欢下面的内容