乐趣区

关于es6:ES6新增语法二函数和参数

jiezi

箭头函数

箭头函数：将原来函数的 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:'打杂'}
退出移动版