ES6新增语法(二)——函数和参数
2023-03-20 14:52:29 时间
箭头函数
箭头函数:将原来函数的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:'打杂'}
相关文章
- GET 与 POST
- 工信部回复网友:将在3-5年内逐步取消来电显示费用
- HTTP/1.1 的性能
- 升级iOS15.3有什么优缺点?
- HTTP 优缺点
- 手机严重卡顿,关机和重启到底哪个更好?这下终于知晓答案了
- HTTP 基本概念
- 果粉集体欢呼,iOS15.4终于解决最大痛点,但老用户却不开心了
- git相关
- iOS 15.4 测试版可以戴口罩解锁 iPhone
- pytest精髓__fixture
- iOS 15.4支持戴口罩解锁:苹果终于满足iPhone用户需求!
- 苹果发布 iOS 15.3正式版!Safari浏览器泄露隐私漏洞被修复
- Selenium自动化测试_实例
- TCP/UDP
- 三次握手,四次挥手
- 单播,组播,广播
- 自从用了这款播放器感觉之前的电影都白看了
- 在jira上创建测试计划,你的每一步都能有像手游奖惩系统一样的心流体验
- python-thread多线程通俗理解