day02JS-程序流程控制

于 2024-08-19 19:19:15 发布
阅读量179 收藏 4
点赞数 14
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kwj258036/article/details/141173869
版权

1. 基础调试代码

1.1 控制台打印

可以一次性输出多个值：

console.log(要输出的内容);

console.log(fun,10,100);

输出一个对象或者一个值的详细信息：

console.dir(要详细输出的内容);

console.dir(fun);

1.2 弹窗

alert(); 是在浏览器窗口中弹出一个提示框，提示框中输出指定的信息。提示框,如果点击是确定，返回值就是true,如果点击的是取消，返回值就是false。
var obj={name:"lili"};
alert(obj); 

confirm();相对于alert来说，给用户提供了确定和取消两种选择
var res=confirm("你准备好了吗？");
console.log(res);

prompt();带输入框的提示框： 返回值，如果点击的是确定，返回的就是你输入的内容，如果点击是取消是null。
var res2=prompt("你是男孩还是女孩？");
console.log(res2);

1.3 页面输出

document.write("哈哈")

2. 堆（heap）栈（stack）内存

        浏览器加载页面，运行代码的时候。每打开一个页面，就会从计算机的内存条中分配出两块内存：堆内存（heap）和栈内存（stack）。

  1. 堆内存（heap）：主要存放引用数据类型的值，对象存储的就是键值对，如果是函数，把整个函数当成字符串进行存储。

  2. 栈内存（stack）：给代码提供可执行的环境；存储基本数据类型的值。

思考题：

var a=12;
var b=a;
console.log(b);
var obj1={"name":"lili","age":12};
var obj2=obj1;
obj2.age=18;
console.log(obj1.age);

3. 代码自上往下执行 （之前还有一个变量提升阶段，会在后面的课程中进行讲解）

基本数据类型：存在栈内存中， 按值操作。

引用数据类型的值比较复杂，存在堆内存中，按引用地址的操作。

4. 赋值操作的三步曲：

  • 先创建值。

  • 再创建变量。

  • 最后把创建的变量和值关联在一起。

练习题:

var a={
	n:12
}

var b=a;
b={
	n:13
}

console.log(a.n); //12

------------------------
    
var obj={
    n:10,
    b:obj.n*10
}
console.log(obj.b);//报错,因为obj还没有创建出来是无法访问他的属性的

3. 在JS中用来检测数据类型的四种方式

  • typeof

  • instanceof

  • constructor

  • Object.prototype.toString.call()

4. typeof 运算符详解

typeof 首先返回的是一个字符串，它返回的类型。

  • 'number'

  • 'string'

  • 'boolean'

  • 'undefined'

  • 'object'

  • 'function'

特点：

  1. typeof null 的结果是 "object"（这个是浏览器的BUG：所有的值在计算中都已二进制编码存储浏览器中把前三位是000的当做对象，而null的二进制前三位就是000，所以被识别为对象。

  2. typeof 普通对象/数组对象/正则对象... 结果都是"object"，这样就无法基于typeof区分是普通对象还是数组对象等了。

  3. 两个以上的typeof 结果都是“string”。

typeof 12  ===> "number"
typeof "zhufeng" ====> 'string'
typeof false   ===>'boolean'
typeof true ====>  'boolean'
typeof null ====> 'object'
typeof undefined ====>'undefined'
typeof [1,2] =====>"object"
typeof function(){} ===>"function"
typeof [] =====>"object"
typeof typeof [] ====> 'string'
typeof typeof typeof typeof typeof [] ====> 'string'

5.条件语句（实现分支结构）

5.1 单向分支 if

if (表达式) {     
  code... 
}

5.2 双向分支 if...else

if (表达式) {     
  code... 
} else {     
  code... 
}

5.3 多向分支 if... else if

if (表达式) {    
  code... 
} else if (表达式) {     
  code... 
} else if (表达式) {     
  code... 
} else {     
  code... 
}

5.4 多向分支 switch...case

        一个变量在不同值情况下的不同操作，我们可以改写为 switch case 判断。（他只能应用于等于什么值做什么事情，不能用户大于或者小于啥值做啥）。

switch (值) {
    case 可能的值: code....; break;
    //=>每一种情况结束都要设置break（以供当此条件成立并处理完事情后，通知代码不在向下执行）
    case 可能的值: code....; break;
    //每一种case情况都是基于 === 进行比较的（严格比较，需要保证数据类型的一致）
    case 可能的值: code....; break;
    case 可能的值: code....; break;
    default: code....; //=>等价于else，而且最后一个判断结束无需设置break
}
var num = 6;
switch (num) {
  case 5:
    num++;
    break;
  case 6:
    num--;
  // break;
  case 7:
    num--
  // break;
  default:
    num = 0;
}
console.log(num);

注意！！！

        如果忘记写break，无论你是否满足case的要求，都会往下执行一直到遇到breake或者default结束。

 5.5 分支结构嵌套

if (表达式) {
    if (表达式) {
        code....
    }
    code ...
} else {
    code...
}

6. 循环语句（实现循环结构）

6.1 while 循环

while (循环条件) {
    code...
}

6.2 do...while循环

do {
    code...
} while (循环条件)

6.3 for 循环

for (循环变量; 循环条件; 循环变量变化) {
    code ...
}

//循环输出 0-10
for (var i = 0; i <= 10; i ++) {
    console.log(i)
}

6.4 跳转语句

  • break语句结束整个循环。

  • continue语句结束当前循环。

  • return语句返回函数值（后面看）。

for(var i=0;i<10;i++){
       if(i<5){
          i++;//
          continue;
       }
       if(i>7){
          i+=2;
          break;
       }
       i+=1;
}
console.log(i);//10
-------------------------------

for(var i=1;i<=10;i+=2){
       if(i<=5){
          i++;//
          continue;
       }else{
          i-=2;
          break;
       }
       i--;
       console.log(i);
       
}
console.log(i);//5
-------------------------------

for (var i = 0; i < 10; i++) {
    console.log(i);
    break;
}
console.log(i);//0

6.5 i++和++i的理解

++在前，正常运算。

++在后，先赋值，后+1。

var i = 5;
var b=i++;
console.log(b);//5
<script>
	var a = 15, //16 17
		b = 25,//24 23 22 21
		c = 10,//9 8 7 6
		d = 6;//7 8
			//    15	25	 9	   7     24    8
	var resultA = a++ + b-- + --c + ++d + b-- + --c; //88
			//    16    23    7     8     22    6
	var resultB = a++ + b-- + --c + ++d + b-- + --c; //82
	document.write(resultA)
	document.write(`<br>`)
	document.write(resultB)
</script>

6.6 三元运算

语法：条件表达式 ? 条件成立执行的语句 ：条件不成立执行的语句

var num=5
if(num>=5){
   num++
}else{
   num--
}

改写成三元运算符
num>=5?num++:num--

特殊情况：条件成立，我想做一件事情，不成立我什么都不做，可以用 undefined / null /void 0来做占位符。

var num=5;
num>=5?num++:undefinde;
num>=5?num++:null;
num>=5?num++:void 0;

 多条语句：如果条件成立之后，想同时执行多条语句，我们可以用“小括号”把执行语句包起来，并且语句与语句之间用“逗号”进行分割。

var num=5;
var a=3;
num>=5?(num++,a--):null;

练习：

<script>
	var num = 12;
	let num2 = num > 0 ? (num < 10 ? num++ : num--) : (num == 0 ? (num++, num / 10) : null)
	document.write(num2);
</script>

7. 条件判断里面的相互转换规则

7.1 ==和===

  • ==先将不同的类型转换成相同的类型，在进行比较，如果值相等，就相等。

  • ===值和数据类型相等才相等。

注意特殊的！！！！

对象和对象比较看引用地址 。

对象和字符串，先将对象转为字符串，再比较。

console.log(""== 0);//""--->0 ==> true
console.log(null == undefined);//true
console.log(arr == arr2);//false
console.log(arr == arr3);//true
console.log(arr2 == arr3);//false
console.log([] == "");//true []---""
console.log({} == "");//false {}--"[object object]"
console.log([10] == “10");//true [10]---"10"
console.log([10，20] == “10 20");//false [10，20]---"10,20"

 7.2 ==和!=，===和!==

  1. 对象==数字类型的时候，都先转换为数字，再比较。

  2. 对象==字符串类型的时候，把对象转换为字符串，再进行比较。

  3. 对象==布尔数据类型的时候，都先转换为数字，在比较。

  4. 数字==字符串，都先转换数字类型，再比较。

  5. 数字==布尔，都先转换为数字类型，再比较。

  6. 字符串==布尔，都先转换为数字类型，再比较。

总结：对于不同的数据类型转换规律：

1）对象和字符串比较的时候，是对象先转为字符串然后再进行比较。

2）除了第一种，不同数据类型比较都是先转换为number数字，再进行比较。

特殊情况总结：

null == undefined true

nul l=== undefined false

null 和 undefined 和其它值永远不相等。

NaN 和其它值永不相等。

//			1 == 1	
console.log(1 == true);//true
//			1 == 0	
console.log(1 == false);//false
//			2 == 1
console.log(2 == true);//false
//			0 == 1	
console.log([] == true);//false
//			!真  == 真	同类型的比较
console.log(![] == true);//false
//同类型的比较，数组地址不一样
console.log([] == []);//false
console.log(1 != true);//false
console.log(null !== undefined);//true

8. 与或非

&&(与)：全为真，才为真。

||(或)：全为假，才为假。

// 逻辑短路
var a = 10,
	b = 20,
	c = 30;
if(--a > 5 || ++b > 20 || c-- > 20){
	console.log("通过")
}else{
	console.log("不通过")
}
console.log(a,b,c);

答案：通过，a=9,b=20,c=30
--------------------------------------
var a = 10,
	b = 20,
	c = 30;
if(--a > 5 && ++b < 20 && c-- > 20){
	console.log("通过")
}else{
	console.log("不通过")
}
console.log(a,b,c);
答案：不通过,，a=9,b=21,c=30

9. 相关知识铺垫

9.1 元素包含的常用属性

  • className: 存储的是字符串，代表当前元素的类名。

  • id： 存储的是字符串，代表当前元素的id名。

  • innerHTML：存储当前元素的所有内容，包含标签。

  • innerText：存储当前元素的文本内容。

  • style：存贮当前元素的所有行内样式。

  • onclick：点击事件属性。

  • onmouseover：鼠标滑过事件。

  • onmouseout：鼠标离开事件。

9.2 通过id 获取一个元素

通过id 获取一个元素：document.getElementById("id名字")

<div id="box1">box1</div>

<script>
   var Obox1=document.getElementById("box1");
   console.log(Obox1)
</script>

9.3 通过标签名去获取一类标签

通过标签名去获取一类标签：[context].getElementsByTagName; 

var olis=document.getElementsByTagName("li"); // 获取文档中左右的li标签
var box1=document.getElementById("box1");
var lis=box1.getElementsByTagName("li");// 获取box1 下面所有的li元素

9.4 通过style属性去添加或者修改元素的样式

<div id="box1">box1</div>

<script>
   var Obox1=document.getElementById("box1");
       Obox1.style.backgroundColor="pink";
</script>

9.5 给元素添加类名

 var Obox1=document.getElementById("box1");
 Obox1.className="current";

10. 开关灯案例

<!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;
    }
    body{
        background:darkturquoise;
    }
    #main{
        width:300px;
        border:1px solid green;
        margin:0 auto;
    }
    #button{
        width:100%;
        height:50px;
        background:lightblue;
        text-align: center;
    }
    #imgbox{
        display:block;
    }
    </style>
</head>
<body>
    <div id="main">
        <button id="button">隐藏</button>
        
        <img id="imgbox" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577444372587&di=1684c649c2b1d4b1fdcd5910968c508b&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fpcdlc%2F1709%2F16%2Fc79%2F59427944_1505500668556.gif" alt="">
        
    </div>
</body>
</html>
<script>
/* 
  默认：图片是显示的，按钮的内容 隐藏
  点击按钮的时候，如果按钮原来是隐藏，
    + 按钮内容变成“显示”
    + 图片消失

  点击按钮的时候，如果按钮是显示，
    + 按钮内容变成“隐藏”
    + 图片显示
*/
var button=document.getElementById("button");
var oimg=document.getElementById("imgbox");
button.onclick=function(){
     var value=button.innerText;
     if(value=="隐藏"){
        button.innerHTML="显示";
        oimg.style.display="none";
     }else{
        button.innerHTML="隐藏";
        oimg.style.display="block";
     }
}
</script>

11. 案例之隔行变色

如果每隔三行实现一个变色，就是.main>li:nth-child(3n+1) .main>li:nth-child(3n+2) .main>li:nth-child(3n)12

<!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;
    }
    ul,ol{
        list-style: none;
    }
    body{
        background:lightseagreen;
    }
    .main{
        width:500px;
        /* border:1px solid #000; */
        margin:50px auto;
        color:#666;
    }
    .main>li{
        height:40px;
        line-height:40px;
        text-indent: 20px;
        

    }
    .main>li:nth-child(even){
         background:yellow;
    }
    .main>li:nth-child(odd){
        background:lightgreen;
    }
    .main>li:hover{
        background:lightblue;
    }
    </style>
</head>
<body>
    <ul class="main">
        <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
        <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
        <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
        <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
        <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
        <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
        <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
        <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
    </ul>
</body>
</html>

12. js实现奇偶行变色

分析：隔行变色的原理：

操作的元素：li ，

让 处于奇数的li 变一个颜色1

让 处于偶数行的li 变一个颜色2

12.1 方法一： 通过style行内属性来改变

<!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;
    }

    ul,
    ol {
      list-style: none;
    }

    body {
      background: lightseagreen;
    }

    #main {
      width: 500px;
      /* border:1px solid #000; */
      margin: 50px auto;
      color: #666;
    }

    #main>li {
      height: 40px;
      line-height: 40px;
      text-indent: 20px;

    }
  </style>
</head>

<body>
  <ul id="main">
    <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
    <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
    <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
    <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
    <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
    <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
    <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
    <li>走在前沿的专家级课程：微信小程序实战开发课程</li>
  </ul>
  <script>
    var omain = document.getElementById("main");
    console.log(omain)
    var lis = omain.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
      if (i % 2 != 0) {
        lis[i].style.backgroundColor = "yellow";
      } else {
        lis[i].style.backgroundColor = "pink";
      }
    }
  </script>
</body>
</html>

12.2 方法二：通过添加类名

 <style>
    .color1{
        background:lightsalmon;
    }
    .color2{
        background:yellow;
    }
 
 </style>
 
 for(var i=0;i<lis.length;i++){
         if(i%2!=0){
            lis[i].className="color1";
         }else{
            lis[i].className="color2";
         }
     }

全部用js实现，隔行变色，并且鼠标滑上去的时候，改变颜色，鼠标离开之后，还原原有的颜色

<!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;
    }
    li{
        height:30px;
        line-height: 30px;
    }
    </style>
</head>
<body>
    <ul class="main" id="main" style="background:blue">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>
<script>
/* 
 原理：获取到所有的li元素，如果这个li是偶数我们就让它是一个颜色，如果不是偶数就是另一个颜色

*/
var omain=document.getElementById("main");

var lis=omain.getElementsByTagName("li");

for(var i=0;i<lis.length;i++){
  if(i%2==0){
      lis[i].style.background="blue";
  }else{
      lis[i].style.background="yellow";
  }
  // 鼠标滑上li的时候，改变那个li的背景颜色
  lis[i].onmouseover=function(){
          // 把原有的颜色绑定上去
          this.bgColor=this.style.backgroundColor;
          this.style.background="lightpink";
  }
  // 鼠标离开的时候，恢复原有的颜色
  lis[i].onmouseout=function(){
        this.style.background=this.bgColor;
  }
}
</script>

13. 阿里引发的一道血案面试题

let a={
    n:1,
}
let b=a;
a.x=a={
    n:2
}
console.log(a.x);
console.log(b)

连等赋值：是按照从右向左

var a=b=20;
// 第一步：先创建一个值
// 第二步：b=20
// 第三步：var a=20；

傻虎贼头贼脑
关注
  • 14
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FE21-JS-DAY02-Demel-Mauritz
03-04
【标题】"FE21-JS-DAY02-Demel-Mauritz"指的是一个关于JavaScript的培训课程或研讨会，可能由Demel-Mauritz主持，面向FE21（可能是2021年的一个前端工程师培训项目）进行。这个主题暗示我们将深入探讨JavaScript语言...
30-day-of-javascript-day-1
03-04
- **控制流程**：理解条件语句（if/else）、循环（for, while）以及switch语句。 - **函数**：定义函数的语法，以及如何传递参数和返回值。 - **对象和数组**：创建和操作对象及数组，包括属性和方法的使用。 - **...
day08--程序流程控制
RecordStudy
01-16 235
判断str的值是字符串"js"还是"html"。。 switch( str ){ case 'js' :  alert( 'js' ); break;        //如果这行不加break，则会弹出js 、html。加了break会跳出循环 case 'html' :  alert( 'html' ); break; default :                      
js-day02-流程控制：运算符，语句，断点调试
weixin_47175934的博客
08-27 134
javaScript-基础-day02-流程控制运算符 1运算符（赋值，一元，比较，逻辑，运算符优先级）， 2语句（if语句，三元运算符，switch语句，循环语句，断点调试，while循环）
【云岚到家】-day02-2-客户管理-认证授权
bblb的博客
06-10 1224
【云岚到家】-day02-2-客户管理-认证授权
从0开始学习JavaScript--JavaScript 流程控制
晓晓的天空
11-18 462
JavaScript流程控制是编写清晰、结构化代码的基础。通过深入学习条件语句、循环结构、跳转语句等各类控制结构，能够更灵活地处理各种编程逻辑，提高代码的可读性和可维护性。条件语句允许根据不同的条件执行不同的代码块，而switch语句则为多重选择提供了更清晰的结构。循环结构是重复执行代码的利器，for循环和while循环分别适用于不同的场景，精确控制迭代次数。跳转语句则改变了代码执行的流程，breakcontinuereturn等关键字使得我们能够更灵活地控制程序的执行路径。
day03--JavaScript
qq_58478983的博客
08-14 890
js引用方式、输出语句、变量声明、数据类型、运算符、流程控制,js函数和常见事件，页面时间交互案例
JavaScript 入门基础 - 流程控制（四）
EXIxiaozhou的博客
01-01 2937
JavaScript 入门基础 - 流程控制（四）
03 day1--javascript笔记pink老师-基础知识 看这一篇就够了！
小女不才
08-30 3326
内容 链接 day1 基础知识大总结 链接 day2 基础知识之函数与作用域 链接 day3 基础知识之对象与内置对象 链接 day4 进阶之DOM技术 链接 day5 进阶之BOM技术 链接 day6 提高之面向对象 链接 day7 提高之ES6 链接 1 初识JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来...
Java项目-苍穹外卖-Day06-微信小程序开发
y_k_j_c的博客
08-26 1909
本篇主要是主要是wx小程序开发入门和HttpClient的使用介绍完成了苍穹外卖用户端的 微信登陆 和导入商品浏览功能代码（没写跟之前day04的类似）以个人形式注册不能开放支付功能的。
一文吃透JavaScript程序控制流与函数
不迁怒，不贰过。小知识，大智慧。
11-07 2981
一文帮你学会JavaScript中的程序控制流、函数以及异常处理的知识。程序控制流中主要介绍了顺序结构、分支结构和循环结构。欢迎品读！
CEF学习day3-cefsimple代码流程分析
qq_37202082的博客
06-18 971
CEF学习day1-下载编译CEF学习day2-cefsimple代码流程分析。
day02-js基础.zip
10-01
在"day02-js基础.zip"这个压缩包中，我们很显然会探索JavaScript的基础概念和语法，这对于任何想要从事前端开发或者对网页互动性有需求的人来说都是至关重要的。 JavaScript的起源可以追溯到1995年，由Netscape公司...
day02-js基础资料.zip
10-01
在"day02-js基础资料.zip"这个压缩包中，我们很可能会找到关于JavaScript基础知识的学习材料，包括变量、数据类型、控制结构、函数、对象、数组、字符串等核心概念的介绍。 1. **变量**：JavaScript中的变量是存储...
day02-js基础代码.zip
10-01
这个压缩包“day02-js基础代码.zip”很可能是包含了一些JavaScript基础教程或者练习代码的资料，旨在帮助初学者理解并掌握JS的基本概念和语法。 1. **变量和数据类型**： JavaScript 支持多种数据类型，包括基本...
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 298
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 382
【代码】springboot网上商品订单转手系统bootpf
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 354
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1012
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值