ES6新增语法——函数和参数

Posted 前端知识搬运工

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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())// 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新增语法——函数和参数的主要内容,如果未能解决你的问题,请参考以下文章

ES6新增语法 + 内置对象扩展 + 箭头函数

es6新增--变量定义与变量类型

Es6新增语法梳理

ES6新的特性有哪些?

es6 有哪些拓展

ES6新特性箭头函数语法以及与ES5普通函数的不同