当前位置：网站首页>JS note 1

JS note 1

2022-07-19 02:21:00 【Object not found】

When the width and height of the element are not set , How to achieve vertical center display ？

①flex Elastic layout

explain ： Parent element set width and height size , Child element does not set

<body><div><span> Subelement </span></div></body>

<style>

// The parent element adds elastic layout

div

{

display:flex;

width:80%;

height:500px;

flex-direction:row;// Set the direction of the spindle

justify-content:center;// Arrangement of neutron elements in the spindle

align-items:center;// Arrangement of neutron elements on the side axis

background:

}

div span

{

background:

}

</style>

② location +transform

<body><div><span> Subelement </span></div></body>

div

{

// When demonstrating, you can add the width and height of the parent element or only the height

width:80%;

height:500px;

position:relative;

background:

}

div span

{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

background:

}

③display:table and display:table-cell

Be careful ：

1.display:table-cell Will be float and position And other attribute damage effects

2.table-cell It refers to making label elements present in the form of table unit cells ,

vertical-align: Used to specify the vertical alignment of elements in rows or table cells

<body><div><span> Subelement </span></div></body>

div

{

// When demonstrating, you can add the width and height of the parent element or only the height

width:80%;

height:500px;

display:table;

}

div span

{

display:table-cell;

// Because the alignment of elements in the line needs to be horizontally and vertically centered

vertical-align:middle;

text-align:center;

}

④:before and display:inline-block

<body><div><span> Subelement </span></div></body>

div

{

// When demonstrating, you can add the width and height of the parent element or only the height

width:80%;

height:500px;

text-align:center;

}

div::before{

content:””;

height:100%;

vertical-align:middle;

display:inline-block;

}

div span

{

display:inline-block;

}

var、let、const The difference between

① Can be accessed across blocks , Not accessible across functions

Create and assign values when calling functions , Destroy after call

② If omitted var The operator , Means global variable

Be careful ： Defining global variables in a local scope is difficult to maintain , Not recommended

In strict mode , May throw ReferenceError

③var Support pre parsing , Variable Promotion （ The variable or function declaration is promoted to the top of the scope ）

④var The defined global variables can be attached to window object , Use window visit

① Can only be accessed at block scope , No cross block 、 Cross function access

② Cannot repeat declaration （ Redundant declaration ）, It can only be declared once

③ No variable promotion , When the syntax binding is not completed after creation （ Statement ）, Access will throw an exception ReferenceError, The time between the variable and being accessible is called a temporary deadband

④let Variables declared in the global scope do not become window Object properties

var name=”xx”;console.log(window.name);//xx

var age=18;console.log(window.age);//undefined

⑤for In the loop var、let Statement （ important , asynchronous ）

const

① Define constants , Must assign value after declaration （ No assignment error ）, It cannot be modified after definition （ Modify error reporting ）

When you declare an object , No error is reported when modifying the internal properties of the object

reason ： The value of basic data type is stored in stack memory , The application data type storage stack area is the address in the object heap , Modify object properties , Do not modify the address of the object stack , If you re assign a value to an object, an error will be reported

②for Not applicable in the cycle , Iterate over variables in the loop （ Variable self increasing ）

If you declare variables that will not be modified or create new variables for each iteration , for example ：for-in and for-of loop

	var	let	const
block	√	√（ Only in the block area ）	√（ Only in the block area ）
function	×	×	×
Statement	many times	once	once
Declare assignment separation	√（ In the local scope , Statement not var Represents a global variable , Not recommended ）	√	×（ Must assign value after declaration , Otherwise abnormal ）
Variable Promotion	√	×（ No syntax binding exception ）	×
Whether it is attached to window	√	×	×
for loop	Global variables , Externally callable , For the last result	local variable , Not callable	Same as let（ If the variable is not modified, you can use ）

stay for In circulation var、let Case study

for (var i = 0; i < 5; ++i) {

setTimeout(() => console.log(i), 0)

}

// answer 5、5、5、5、5

for (let i = 0; i < 5; ++i) {

setTimeout(() => console.log(i), 0)

}

// answer 0、1、2、3、4

reason ：for Use in loop setTimeout Asynchronous mechanism ,

①JS Single threaded environment

Single thread means that you can only do one thing at a time , All tasks are queued .

②JS The task is divided into ： Synchronous tasks and asynchronous tasks

Asynchronous task diagram

The specific steps are as follows ：

for Cycle synchronization task execution , Generate five timers （var Global variable , Traverse complete i=5）
After the synchronous task traverses and executes, the asynchronous task timer , Output 5 individual 5
and let Declared variable is not a global variable ,for The loop becomes a separate scope , The function is the same as that of closure forming block , So output 0-4

Add ：

①for(var i=0;i<5;i++)

{

setTimeout(function(){},console.log(i),i*1000,i);//0,1,2,3,4

}

For(var i=0;i<5;i++)

{

setTimeout(function(){console.log(i);}i*1000);

}

The problem involves console.log And console.log() difference

Use eval() Method , Find out console.log Is string , and console.log() No

eval(str), Take a string as an argument , If the return is a value, return the value , Otherwise return to undefined

console.log yes function Function name ,console.log() Is to synchronize tasks with for At the same time

and setTimeout() Will judge whether the first parameter is function, If it is an asynchronous task , It will not be treated as a string , therefore console.log(i) Will be treated as a string (setTimeout There is no callback function in ), Therefore, it is equivalent to for Execute the operation in cycle synchronization

Add if you want to output order , have access to let, however ES6 Only modern browsers are supported in , Consider compatibility and recommend closures

perhaps

① utilize setTimeout The third parameter , take i Pass as a parameter

for(var i=0;i<5;i++)

{

setTimeout(function(i)

{

console.log(i)

},1000,i)

}

② Use IIFE( Anonymous functions that execute immediately ) Closure

for(var i=0;i<5;i++)

{