ES6函数参数
function sum(x,y){
return x + y
}
console.log(sum(4,5)) // 9
let sum = function(x,y){
return x + y
}
console.log(sum(4,5)) // 9
对于上面的两种方式，主要区别在于let 关键字声明函数的时候，不存在变量提升的问题（ps:具体可以参考小编的第一篇文章，关键字let和var的区别）
二、es6中的箭头函数：主要就是把function去掉，在参数和函数体之间用箭头分割
let sum = (x,y) => {
return x+y
}
console.log(sum(3,4)) // 7
对于函数体只有一行代码的时候，上面代码可以简化为以下代码
let sum = (x,y) => x + y
对于返回值，可以省略return关键字并用圆括号扩起来
function addStr(str1,str2){
return str1+str2
}
const addStr = (str1,str2) => (str1+str2)
// 以上两个函数功能是一样的，只是箭头函数在箭头右侧，省略了关键字return，并且在外面添加圆括号
三、箭头函数和普通函数之间的区别
1、this指向定义时所在的对象，而不是调用时所在的对象(箭头函数中没有this,this指向的是父级的this)
<html>
<body>
<button id="btn">点我</button>
<script>
let oBtn = document.querySelector("#btn")
oBtn.addEventListener("click",function(){
console.log(this) // <button id="btn">点我</button>
})
</script>
</body>
</html>
<html>
<body>
<button id="btn">点我</button>
<script>
let oBtn = document.querySelector("#btn")
oBtn.addEventListener("click",function(){
setTimeout(function(){
// call apply bind改变this指向
console.log(this) // Window
},1000) })
</script>
</body>
</html>
通过bind改变this指向
<html>
<body>
<button id="btn">点我</button>
<script>
let oBtn = document.querySelector("#btn")
oBtn.addEventListener("click",function(){
setTimeout(function(){
console.log(this) // <button id="btn">点我</button>
}.bind(this),1000)
})
</script>
</body>
</html>
箭头函数中的this指向
<html>
<body>
<button id="btn">点我</button>
<script>
let oBtn = document.querySelector("#btn")
oBtn.addEventListener("click",function(){
setTimeout(() => {
console.log(this) // <button id="btn">点我</button>
},1000)
})
</script>
</body>
</html>
2、不可以作为构造函数
function People(name,age){
console.log(this) // People{}
this.name = name
this.age = age
}
let p1 = People("lilei",34)
console.log(p1) // People{name:"lilei",age:34}
let People = (name,age) => {
this.name = name
this.age = age
}
let p1 = People("lilei",34)
console.log(p1) // 报错 People is not a constrator
3、不可以使用arguments对象
let foo = function(){
console.log(arguments)
}
console.log(foo(1,2,3)) // Arguments[1,2,3]
let foo = () => {
console.log(arguments)
}
console.log(foo(1,2,3)) // Arguments is not defined
箭头函数兼容类似es5中arguments对象：通过rest参数
let foo = (...args) => {
console.log(args)
}
console.log(foo(1,2,3)) // [1,2,3]
ES6函数参数的更多相关文章
- ES6 函数参数的默认值
基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法. function log(x,y){ y = y||'world'; console.log(x,y); } log('k ...
- ES6函数参数默认值作用域的模拟原理实现与个人的一些推测
一.函数参数默认值中模糊的独立作用域 我在ES6入门学习函数拓展这一篇博客中有记录,当函数的参数使用默认值时,参数会在初始化过程中产生一个独立的作用域,初始化完成作用域会消失:如果不使用参数默认值,不 ...
- ES6——函数-参数
函数的参数: 1.参数扩展/数组展开 1)收集(剩余的)参数 function show(a,b,...args){} // 三点运算符 *Rest ...
- ES6 函数参数的解构赋值
function add([x, y]){ return x + y; } add([1, 2]); // 3
- ES6学习 --函数参数默认值与解构赋值默认值
1. ES6的解构ES6中引入了解构赋值的操作,其作用是:将值从数组Array或属性从对象Object提取到不同的变量中 即分为两种情况:从数组Array中解构,以及从对象Object中解构 ①.从数 ...
- ES6之函数参数
ES6中对于函数参数主要增加了以下内容: 1.参数的扩展/数组的展开: 2.默认参数. 什么是参数的扩展? 看下面代码: <!DOCTYPE html> <html lang=&qu ...
- ES6 学习笔记之三 函数参数默认值
定义函数时为参数指定默认值的能力,是现代动态编程语言的标配.在ES6出现之前,JavaScript是没有这种能力的,框架为了实现参数默认值,用了很多技巧. ES6 的默认参数值功能,与其他语言的语法类 ...
- ES6—带默认值的函数参数及其作用域
在学习ES6函数一章时,发现了一个有意思的现象,原文描述如下: 这段话主要state了3个事实: ①函数参数有默认值时,会在声明初始化阶段形成一个单独的作用域 ②这个作用域在初始化结束后消失 ③没默认 ...
- ES6 - 函数扩展（函数参数默认值）
函数参数默认值 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); ...
随机推荐
- Linux中编写Shell脚本
目录 Shell Shell脚本的执行 Shell脚本编写规范 Shell 中的变量 变量的算术运算 双小括号 (()) 数值运算命令的用法 let 运算命令的用法 expr 命令的用法 br 命令 ...
- POJ2044 深搜+剪枝（云彩下雨）
题意: 有一个城镇,是4*4的大小的,然后你控制一块云彩,2*2的,你每天可以有9种走的方法,上下左右,或者不动,走的时候可以走1或者2步,云彩所在的地方肯定会下雨,然后给你做多365天 ...
- Windows认证体系解读
目录 Windows认证方式 Windows本地认证 NTLM认证方式(工作组环境中) wiresharek抓包NTLMv2,使用Hashcat爆破 NTLM认证方式(域环境中) Kerberos认证 ...
- 每天一道面试题LeetCode 80--删除排序数组中的重复项 II(python实现)
LeetCode 80--删除排序数组中的重复项 II 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输 ...
- C++ Socket 简单封装
以下代码一部分来自于<网络多人游戏架构与编程>, 其它的都是我瞎写的. 备忘. 一个简单的Socket封装,没有做什么高级的操作(比如IO完成端口等等). 1 #pragma once 2 ...
- Yii2访问gii模块403
出现问题 访问Yii2的gii模块没有权限,403 找到原因 在Yii2-gii源码文件中(vendor/yiisoft/yii2-gii/src/Module.php)可以看到有一个配置项$allo ...
- Java GUI入门手册-AWT篇
Java GUI入门手册: AWT是基本的GUI设计工具,重点学习其中的布局格式以及事件监听事件. 首先创建一个窗口,我们先分析Frame类中的方法: 通过上图,可以看出frame是由构造方法的重载: ...
- web&HTML
内容索引 1. web概念概述 2. HTML web概念概述 * JavaWeb: * 使用Java语言开发基于互联网的项目 * 软件架构: 1. C/S: Client/Server 客户端/服务 ...
- BUAA软件工程_结对编程
1.写在前面 项目 内容 所属课程 2020春季计算机学院软件工程(罗杰 任健) (北航) 作业要求 结对项目作业 课程目标 培养软件开发能力 本作业对实现目标的具体作用 培养结对编程开发项目的能力 ...
- Pytorch_Part5_迭代训练
VisualPytorch beta发布了! 功能概述:通过可视化拖拽网络层方式搭建模型,可选择不同数据集.损失函数.优化器生成可运行pytorch代码 扩展功能:1. 模型搭建支持模块的嵌套:2. ...