Arrow functions can be said to be one of the highlights of ES6. Using arrow functions can simplify the coding process and make the code more concise
This article is exclusively created by Qianfeng front-end teacher. It mainly introduces the relevant information about the arrow function in ES6. The example code in the article is very detailed. If you find it helpful, you can [Follow] and continue to follow up~
ES6 defines variables
We now know that defining (declaring) a variable uses var
Two more ways of defining (declaring) variables were added in ES6: let and const
Let declares variables: Variables declared with let are also called variables
Const declares variables: the variable declared with const is called yield
The difference between let and const
assignment at declaration
You can not assign a value when declaring a variable with let
You must assign a value when declaring a variable with const
value modification
Variables declared with let can be modified arbitrarily
Variables declared with const cannot be modified, that is to say, once declared, they are not allowed to be modified
But for objects declared with const, the values of the properties inside the object can be modified
<script>
//注意：这里的代码不能整体运行。需要单独运行。这里是为了整体做比较
// let 和 const 的区别
// 1. 声明时赋值
let n
console.log(n) //undefined
n = 200
console.log(n) //200
// 不能定义常量不赋值 会报错
const n2
// 2. 值的修改
let n = 100
console.log(n) //100
n = 'hello world'
console.log(n) //hello world
const str = '我是定义时候就写好的内容'
console.log(str)
// 当你试图修改一个 const 定义的常量 直接报错
str = 'hello world'
</script>
The difference between let/const and var
pre-parsing
○var will be pre-parsed, you can use it first and then define it
○let/const will not be pre-parsed, it must be defined before use
variable name
○The variable defined by var can have the same name, but the second one is meaningless
○let/const does not allow defining variables with the same name in the same scope
block scope
var has no block scope
let/const has block scope
Block-level scope Any {} that can write code segments will limit the scope of use of variables
if() {}
for () {}
<script>
// 注意：代码不能整体运行需要分开运行，为了对比需要
//let/const 和 var 的区别
// 1. 预解析
console.log(n) //undefined
var n = 100
// Uncaught ReferenceError: Cannot access 'n2' before initialization
//未捕获引用错误：在初始化之前无法访问“n2”
console.log(n2)
let n2 = 200
console.log(n3) // Uncaught ReferenceError: Cannot access 'n3' before initi
const n3 = 300
// // 2. 变量重名
var n = 100
var n = 200
console.log(n)
//Uncaught SyntaxError: Identifier 'n1' has already been declared
//未捕获的语法错误：标识符“n1”已声明
let n1 = 100
let n1 = 200 //会报错
const n2 = 200
const n2 = 300 //会报错
// 3. 块级作用域
if (true) {
var n = 100
console.log(n) //100
}
console.log(n) // 100
if (true) {
let n = 200
console.log(n) //200
}
console.log(n) //Uncaught ReferenceError: n is not defined
const n = 400
if (true) {
const n = 300
console.log(n) //300
}
console.log(n) //400
</script>
Case - Tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 320px;
display: flex;
flex-direction:
column; margin: 50px auto;
border: 3px solid #333;
}
.box > ul {
height: 60px;
display: flex;
}
.box > ul > li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #fff;
background-color: skyblue;
cursor: pointer;
}
.box > ul > li.active {
background-color: orange;
}
.box > ol {
flex: 1;
position: relative;
}
.box > ol > li {
width: 100%;
height: 100%;
background-color: purple;
font-size: 50px;
color: #fff;
position: absolute;
left: 0;
top: 0;
display: none;
}
.box > ol > li.active {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script>
/*
案例 - 选项卡
*/
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
for (let j = 0; j < btns.length; j++) {
btns[j].classList.remove('active')
boxs[j].classList.remove('active')
}
btns[i].classList.add('active')
boxs[i].classList.add('active')
}
}
/*
</script>
</body>
</html>
ES6 arrow functions
Arrow functions are a new way of defining functions in ES6 syntax. Arrow functions can only be used to define function expressions, so arrow functions are also anonymous functions
When you assign a function as a value to another, it is called a function expression
The way declarative functions are defined is that arrow functions cannot be defined
function fn() {} is a declarative function and cannot be used to define an arrow function
语法：() => {}
Write formal parameters in ()
Write code snippets in {}
Features of arrow functions
Parentheses can be omitted
When you have only one formal parameter, you don't need to write parentheses
If you have no or two or more formal parameters, you must write parentheses
<script>
let fn1 = () => {
console.log('我是 fn1 函数, 我没有形参')
}
fn1()
// 一个形参, 可以不写小括号
let fn2 = a => {
console.log('我是 fn2 函数, 有一个参数', a)
}
fn2(10)
// 两个形参, 必须写小括号
let fn3 = (a, b) => {
console.log('我是 fn3 函数, 有两个参数', a, b)
}
fn3(100, 200)
</script>
●Braces can be omitted
○When the code has only one sentence, you can omit the curly braces, and the result of this sentence will be returned automatically, otherwise, you must write curly braces
<script>
let fn1 = (a, b) => a + b
let res = fn1(10, 20)
console.log(res) //30
var arr = [1, 2, 3, 4, 5, 6, 7]
//演变过程
// var res = arr.filter(function (item) { return item % 2 })
// var res = arr.filter((item) => { return item % 2 })
// var res = arr.filter(item => { return item % 2 })
var res1 = arr.filter(item => item % 2)
console.log(res1) //[1, 3, 5, 7]
</script>
There are no arguments in arrow functions
Arrow functions do not have arguments inherently. no set of all arguments
<script>
//普通函数
let fn1 = function() {
console.log(arguments)//会拿到传递的实参
}
fn1(10, 20, 30, 40, 50)
//箭头函数
let fn2 = () => {
console.log(arguments)//会报错
}
fn2(10, 20, 30)
</script>
● There is no this in the arrow function
○ this in the arrow function points to the outer scope
○That is, who is the function this written outside the arrow function, and who is this inside the arrow function
<script>
var obj = {
name: '我是 obj 对象',
f: function() {
console.log('f : ', this) //Object
},
f2: () => {
// 这里没有 this, 用的是 外部的 this
console.log('f2 : ', this) //Window
}
}
obj.f()
obj.f2()
</script>
This is the end of this article on the explanation of ES6 defining variables and arrow functions
For more information about ES6, you can continue to pay attention to us. Technical issues are welcome to exchange and discuss together~