当前位置:网站首页>JS knowledge points-01
JS knowledge points-01
2022-07-05 15:20:00 【Shepherd Wolf】
var let const difference
1. var Declaration upgrade ( Assignment does not raise ), The scope is within the function where the statement is located , Variables with the same name can be declared repeatedly ;
2. let There is no claim to promote , The scope is within the code block where the statement is located , Variables with the same name cannot be declared repeatedly , Modifiable variable value ;
3. const There is no claim to promote , The scope is within the code block where the statement is located , Variables with the same name cannot be declared repeatedly , The value of the variable cannot be modified ;
Variable Promotion :
Scope :
Determine whether it's an array or an object
Object.prototype.toString.call(a)
a instanceof xxx ( Return value : Boolean value ) You can determine whether it is an array , But you can't judge whether it's an array or an object :
typeof a ( Return value : character string ) , It is also impossible to judge whether it is an array or an object :
Array.isArray(a) You can determine whether it is an array :
Closure
Functions that can read internal variables of other functions . in other words , Function as a Inner function of b By the function a When an external variable is referenced , You create a closure .
characteristic :
1. Make it possible for external access to function internal variables ;
2. Local variables are resident in memory ;
3. You can avoid using global variables , Prevent contamination of global variables ;
4. Memory leaks can occur ( There's a block of memory that's been occupied for a long time , Without being released )
// As return value
function create () {
var a = 100
return function fn () {
console.log(a)
}
}
var a = 200
create()() // 100
// As a parameter
function create2 (fn) {
var a = 100
return fn()
}
var a = 200
function fn () {
console.log(a)
}
create2(fn) // 200
Closures and garbage collection mechanisms - Shepherd Wolf - Blog Garden Closure means having access Of local variables in the scope of other functions A function stay JS in , The scope of a variable belongs to the scope of a function , The scope will be cleaned up after the function is executed 、 Memory is also reclaimed , But because the closure is based on the sub function inside a function , because https://www.cnblogs.com/edwardwzw/p/11754101.html
hasOwnProperty
hasOwnProperty() Used to detect whether the attribute is the object's own attribute , return true/false
let obj = {
name:'edward',
age:18,
eat:{
eatname:' meat ',
water:{
watername:' Nutrition Express '
}
}
}
console.log(obj.eat.hasOwnProperty('watername')) //false
console.log(obj.eat.water.hasOwnProperty('watername')) //true
Deep copy
1. JSON.parse(JSON.stringify(obj))
2.
function deepClone (source) {
const targetObj = source.constructor === Array ? [] : {}
for (let key in source) {
if (source.hasOwnProperty(key)) {
if (source[key] && typeof source[key] === 'object') { // Reference data type
targetObj[key] = deepClone(source[key])
} else { // Basic data type
targetObj[key] = source[key]
}
}
}
return targetObj
}
apply call bind
var name = ' Xiao Wang ', age = 18
var obj = {
name: ' Xiao Ming ',
objAge: this.age,
myFun: function (a,b) {
console.log(this.name, this.age, a, b)
}
}
var obj1 = {
name: 'xiao li',
age: 6
}
var obj2 = {
name: 'edward',
age: 9
}
obj.myFun.apply(obj1, ['aaa', 'bbb']) // xiao li 6 aaa bbb
obj.myFun.call(obj2, 'aaa', 'bbb') // edward 9 aaa bbb
obj.myFun.bind(obj1, 'ccc', 'ddd')() // xiao li 6 ccc ddd
The event loop (Event Loop)
js It's a single threaded scripting language , At the same time , Can only do the same thing , To coordinate events 、 User interaction 、 Script 、UI Rendering and network processing , Prevent the main thread from blocking ,Event Loop The plan came into being ...
js When the engine compiles the code :
When encountering synchronous code, it is directly put into the execution stack ,
Encountered an asynchronous code , It will not wait for the return result of asynchronous code , Instead, it hangs in the task queue
When all synchronization tasks in the execution stack are completed , The main thread is idle , You will find out whether there are tasks in the task queue . If there is , Then the main thread will take out the events in the first place , And put the callback corresponding to this event into the execution stack , then : When encountering synchronization code ... When asynchronous code is encountered ...
So again and again , This creates an infinite cycle . This is the process called “ The event loop (Event Loop)” Why .
In each round, micro tasks are performed first , Then execute the macro task .( If a round of micro tasks contains macro tasks , Put the macro task at the end of the current macro task list )
Asynchronous task It is divided into Macro task (macrotask) And Micro task (microtask)
Micro task :Promise async/await process.nextTick
Macro task :setTimeout setInterval Dom event Ajax request
Execution order : Micro task -> Dom Rendering -> Macro task
If we use alert The incident interrupted js, Will find :alert('promise then') Time page dom Did not start rendering , Turn off the alert after ,dom Render completed , then alert('setTimeout')
Draw a triangle
<!DOCTYPE html>
<html lang="en">
<head>
<title> triangle ( Arrow right )</title>
<style>
.t1 {
width: 0;
height: 0;
border-left: 20px solid red;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
}
</style>
</head>
<body>
<div class="t1"></div>
</body>
</html>
边栏推荐
- Huiyuan, 30, is going to have a new owner
- B站做短视频,学抖音死,学YouTube生?
- Bugku cyberpunk
- [recruitment position] Software Engineer (full stack) - public safety direction
- Talk about your understanding of microservices (PHP interview theory question)
- Dark horse programmer - software testing -10 stage 2-linux and database -44-57 why learn database, description of database classification relational database, description of Navicat operation data, de
- 【jvm】运算指令
- Install PHP extension spoole
- [recruitment position] infrastructure software developer
- 亿咖通科技通过ISO27001与ISO21434安全管理体系认证
猜你喜欢
lv_font_conv离线转换
I include of spring and Autumn
Interview shock 62: what are the precautions for group by?
Au - delà du PARM! La maîtrise de l'Université de Pékin propose diverse pour actualiser complètement le classement du raisonnement du NLP
CPU design related notes
729. My schedule I: "simulation" & "line segment tree (dynamic open point) &" block + bit operation (bucket Division) "
Bugku's Eval
Misc Basic test method and knowledge points of CTF
MySQL之CRUD
机器学习笔记 - 灰狼优化
随机推荐
Talk about your understanding of microservices (PHP interview theory question)
CPU design practice - Chapter 4 practical task 2 using blocking technology to solve conflicts caused by related problems
超越PaLM!北大碩士提出DiVeRSe,全面刷新NLP推理排行榜
Huawei Hubble incarnation hard technology IPO harvester
ionic cordova项目修改插件
Surpass palm! Peking University Master proposed diverse to comprehensively refresh the NLP reasoning ranking
Easyocr character recognition
sql server学习笔记
Ctfshow web entry explosion
The difference between SQL Server char nchar varchar and nvarchar
Hongmeng system -- Analysis from the perspective of business
Garbage collection mechanism of PHP (theoretical questions of PHP interview)
Creation and use of thymeleaf template
漫画:程序员不是修电脑的!
I spring web upload
The elimination strategy of redis
Machine learning notes - gray wolf optimization
Stm32+bh1750 photosensitive sensor obtains light intensity
B站做短视频,学抖音死,学YouTube生?
Detailed explanation of usememo, memo, useref and other relevant hooks