Table of contents
1. The difference between let, var, and const
4 this when apply/call is called
Fourth, the remainder function
1. The difference between let, var, and const
let
Keywords are used to declare block-level variables.
-- The feature is that the {} declaration has block-level scope, and the var variable does not have this feature.
-- Prevent loop variables from programming global variables.
-- The let keyword has no variable hoisting.
-- The let keyword has the characteristics of a temporary dead zone. {declare before use}
const
Declare a constant, which is a quantity whose value (memory address) cannot change.
The object itself is mutable, so attributes can be added, but the address cannot be changed
the difference
Variables declared with var are scoped within the function where the statement is located, and there is variable promotion
- Variables declared using let have the scope of the code block where the statement is located, and there is no variable promotion
- Use const to declare a constant, and the value of the constant cannot be modified in the code that appears later
- Using let , the const declared variable does not attribute to the top-level object and returns undefined .
Second, deconstruction
1 array destructuring
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
let[a,...c] = [1,2,3];//Combining operators can expand arrays or merge arrays
console.log(c);//[2, 3]
console.log(...c);//2 3
let [x,y='2'] = ['a',undefined];
console.log(y);//If not defined, the default value can be used
Explanation: ES6 internally uses the strict equality operator (===) to determine whether a position has a value. Therefore, only when an array member is strictly equal to undefined, the default value will take effect.
2 object deconstruction
Deconstruct according to key
let person = {name:"Xiaoshuai",age:18};
let {name,age,height} = person;
console.log(name);//Xiaoshuai
console.log(age);//18
console.log(height);//undefined
Explanation: Object destructuring differs from arrays in one important way. The elements of the array are arranged in order, and the value of the variable is determined by its position; while the properties of the object have no order, and the variable must have the same name as the property to get the correct value, otherwise the failure of deconstruction is undefined.
let { realname: myname,height=173 } = { realname: '张三', age: 18};
console.log(Myname);//Zhang San
console.log(Myage)//18
console.log(realname)//realname is not defined
console.log(height)//Supports the default value when the attribute does not exist
Explanation: The internal mechanism of object deconstruction assignment is to find the property with the same name first, and then assign it to the corresponding variable. It is the latter that is actually assigned, not the former.
.3 String deconstruction
let [a,b,c] = "hello";
console.log(a);//h
console.log(b);//e
console.log(c);//l
Third, the arrow function
1 basic grammar
//Original js writing method
function myFun(k,v){
return k + v;
}
//es6 writing
const myFun1 = (k,v) => {
return k+v;
}
2 ellipsis
If the formal parameter or code block has only one sentence, it can be abbreviated as follows:
Const myFun = (k) => {return k+1;} Shorthand:
Const myFun = k => k +1;
3 this in object method
If the function is invoked as a method of an object, this points to the superior object, that is, the object that invoked the method.
const person = {
name: "Zhang San",
age:18,
say:function(){
console.log(this.name);// Zhang San's this at this time is the object of person
}
}
person.say();
4 this when apply/call is called
myfun1();//The object is Windows
myfun1.call(person1);//The object is changed to person1
Explanation: The difference between the two, myfun.call(person,18,29); myfun.apply(person,[18,29]);
5 this in the arrow function
The arrow function does not bind the this keyword. The this in the arrow function points to the context this where the function is defined.
The this in the arrow function points to the location where it is defined (declared), which can be simply understood as defining whoever this points to in the scope of the arrow function, it points to whom.
const obj = { name: 'Zhang San'}
function fn () {
console.log(this);//this points to the obj object
return () => {
console.log(this);//this points to the location where the arrow function is defined, then this arrow function is defined in fn, and this fn points to the obj object, so this this also points to the obj object
}
}
const resFn = fn.call(obj); //{ name: 'Zhang San'}
resFn();//{ name: 'Zhang San'}
一：全局作用域下this指向
1:普通函数
function global(){
console.log(this);//window
}
global();
2：箭头函数
const global = ()=>{
console.log(this);//window
}
global();
二：对象里面的this指向
1:普通函数
const Person = {realname:"张三",age:19,
say:function(){
console.log(this.realname);//当前的对象 "张三"
}
}
Person.say();
2:箭头函数
const Person = {realname:"张三",age:19,
say:()=>{
console.log(this);//window
}
}
Person.say();
三：构造函数的this指向
1:普通函数
function Person(realname,age){
this.realname = realname;
this.age = age;
this.say = function(){
console.log(this);
}
}
const P1 = new Person("张三",19);
P1.say();
const P2 = new Person("李四",19);
P2.say.call(P1);//原来李四，现在是张三 call和apply改变this指向，区别传输参数的区别
2:箭头函数
function Person(realname,age){
this.realname = realname;
this.age = age;
this.say = ()=>{
console.log(this);
}
}
const P1 = new Person("张三",19);
P1.say();
const P2 = new Person("李四",19);
P2.say.call(P1);//不能改变箭头函数的this指向
总结：普通函数与箭头函数this的区别
1：普通的函数this与调用者有关，调用者是谁就是谁;
2：箭头函数的this与当时定义的上下文的this有关，this是静态的一旦定义了就无法改变
8 Arrow function application
Exercise 1 : Change the button text after clicking the button for 2s: the button is clicked, change the text after clicking the button: the click is canceled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 点击按钮 2s后显示：文字被点击，在点击出现文字：点击被取消。 -->
<!-- （附加：点击10次后提示“今日点击次数已上限，按钮变成灰色”） -->
<body>
<button>点击</button>
<script>
let bth = document.querySelector("button")
let flag = false
let num=0
bth.addEventListener("click", function () {
flag = !flag
num++
if(num>10){
this.innerHTML="今日点击次数已上限"
this.disabled=true
this.style.backgroundColor="grey"
return false
}
time1=setTimeout(() => {
if (flag) {
// console.log(this);
this.innerHTML="文字被点击"
}
else{
this.innerHTML="点击被取消"
}
}, 100);
})
</script>
</body>
</html>Fourth, the remainder function
The remaining parameter syntax allows us to express an indeterminate number of parameters as an array, indeterminate in the way the parameters are defined, which is convenient for declaring a function without knowing the parameters.
1:rest参数
function demo(...nums){
console.log(nums);//数组
console.log(...nums);//解构数组
}
demo(1,2,3);
2:rest参数 对象
function connect({username,...info}){
console.log(username);
console.log(info);
}
connect(
{username:"root",password:"123456",port:"3306"}
)
3:输出数组
const arr = [1,2,3];
console.log(...arr);
4:合并两个数组
const arr1 = [1,2,3];
const arr2 = [4,5,6];
console.log([...arr1,...arr2]);
5:将类数组转为数组
const liNode = document.querySelectorAll("li");
console.log(typeof [...liNode]);
const arr1 = [1,2,3];
const arr2 = [...arr1];//复制数组
arr1[0] = 10;
console.log(arr2);
6:剩余参数必须放入最后(rest参数) 不然报错
function demo(a,b,...nums){
console.log(nums);//数组
}
demo(1,2,3,4,5);