자바스크립트에는 내장 객체가 있습니다. 내장 객체는 JS 언어와 함께 제공되는 객체입니다. 일반적인 객체로는 String 객체, Array 객체, Date 객체, Boolean 객체, Number 객체, Math 객체, RegExp 객체, Global 객체 등이 있습니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
JavaScript의 개체는 사용자 정의 개체, 내장 개체 및 브라우저 개체의 세 가지 유형으로 나뉩니다.
처음 두 개체는 JS의 기본 콘텐츠이며 ECMAScript에 속하며 세 번째 브라우저 개체는 JS
에 고유합니다. 내장 객체는 JS 언어에 포함된 객체를 말합니다 이러한 객체는 개발자가 사용하며 일반적으로 사용되거나 가장 기본적이고 필요한 기능(속성 및 메서드)을 제공합니다
내장 객체의 가장 큰 장점은 개발
JavaScript는 Math, Date, Array, String 등과 같은 여러 내장 개체를 제공합니다.
String 개체: 문자열 작업을 위한 속성과 메서드를 제공하는 String 개체입니다.
Array 객체: 배열 객체로, 배열 작업을 위한 속성과 메서드를 제공합니다.
날짜 객체: 시스템의 날짜 및 시간 정보를 얻을 수 있는 날짜 및 시간 객체입니다.
Boolean 객체: Boolean 객체, Boolean 변수는 Boolean 객체입니다. (사용 가능한 속성 및 메서드 없음)
Number 객체: 숫자 객체. 숫자변수는 숫자 객체입니다.
Math 객체: 수학적 연산에 대한 속성과 메서드를 제공하는 수학적 객체입니다. 수학 객체
// Math数学对象 不是一个构造函数，所以我们不需要 new来调用 而是直接使用里面的属性和方法即可 console.log(Math.PI); //一个属性 圆周率 console.log(Math.max(1, 2, 99)); //99 console.log(Math.max(-1, -12)); //-1 console.log(Math.max(1, 99, '数学对象')); //NaN console.log(Math.max()); //-Infinity사례: 자신을 캡슐화하세요 수학 object
var myMath = { PI: 3.141592653, max: function() { var max = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } return max; }, min: function() { var min = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (arguments[i] < min) { min = arguments[i]; } } return min; } } console.log(myMath.PI); console.log(myMath.max(1, 5, 9)); console.log(myMath.min(1, 5, 9));- 1Math 개요 Math 개체는 생성자가 아니며 수학 상수 및 함수의 속성과 메서드를 갖습니다. 수학 관련 연산(절대값 찾기, 반올림, 최대값 등)은 Math의 멤버를 사용할 수 있습니다.
Math.PI //圆周率 Math.floor() //向下取整 Math.ceil() //向上取整 Math.round() //四舍五入版 就近取整 注意-3,5 结果是 -3 Math.abs() //绝对值 Math.max()/Math.min() //求最大和最小值
// 1.绝对值方法 console.log(Math.abs(1)); //1 console.log(Math.abs(-1)); //1 console.log(Math.abs('-1')); //隐式转换 会把字符串型 -1 转换为数字型 console.log(Math.abs('wode')); //NaN // 2.三个取整方法 // (1)Math.floor() 地板 向下取整 往最小了取整 console.log(Math.floor(1.1)); //1 console.log(Math.floor(1.9)); //1 // (2)Math.ceil() ceil 天花板 向上取整 往最大了取整 console.log(Math.ceil(1.1)); //2 console.log(Math.ceil(1.9)); //2 // (3)Math.round() 四舍五入 其他数字都是四舍五入，但是 .5特殊，它往大了取 console.log(Math.round(1.1)); //1 console.log(Math.round(1.5)); //2 console.log(Math.round(1.9)); //2 console.log(Math.round(-1.1)); //-1 console.log(Math.round(-1.5)); //这个结果是 -12 난수법random()//1. Math对象随机数方法 random() 返回一个随机的小数 0 =< x < 1 //2.这个方法里面不跟参数 // 3.代码验证 console.log(Math.random()); // 4.我们想要得到两个数之间的随机整数 并且包含这两个数 // return Math.floor(Math.random() * (max - min + 1)) + min; function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } console.log(getRandom(1, 10)); // 5.随机点名 var arr = ['张三', '李四', '王五', '赵六', '张三疯'] // console.log(arr[0]); // console.log(arr[getRandom(0, 4)]); console.log(arr[getRandom(0, arr.length - 1)]);사례: 숫자 추측 게임
프로그램은 1에서 10 사이의 숫자를 무작위로 생성하고 사용자가 숫자를 입력할 수 있도록 합니다. 1. 숫자, 숫자가 크면 계속 추측하세요.
2. 숫자가 작으면 계속 추측하세요.
3. 추측이 정확하다는 메시지를 표시하고 프로그램을 종료합니다. // 1.随机生成一个1~10的整数，我们需要用到Math.random()方法
// 2.需要一直猜到正确为止，所以一直循环
// 3.用while循环合适更简单
// 4.核心算法：使用if else if 多分支语句来判断大于，小于，等于
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 10);
while (true) { //死循环
var num = prompt('你来猜，输入1~10之间的一个数字');
if (num > random) {
alert('猜大了');
} else if (num < random) {
alert('猜小了');
} else {
alert('猜对了');
break;
}
}// 要求用户猜1~50之间的一个数字 但是只有10次猜的机会
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 50);
var i = 0;
while (i < 10) { //死循环
var num = prompt('你来猜，输入1~50之间的一个数字');
if (num > random) {
alert('猜大了');
} else if (num < random) {
alert('猜小了');
} else {
alert('猜对了');
break; //退出整个循环结束程序
}
i++;
}
if (i = 10) {
alert('全部猜错了');
}Date 개체
1Date 개요
Date 개체는 Math 개체와 다르므로 사용하기 전에 인스턴스화해야 합니다. Date 인스턴스. 날짜와 Time을 처리하는 데 사용됩니다
2Date() 메소드 사용법
1. 현재 시간을 얻으려면 Date() 생성자의 매개변수를 인스턴스화해야 합니다. 대괄호로 묶으면 매개변수의 시간이 반환됩니다. 예를 들어 날짜 형식 문자열은 '2019-5-1'이며 new Date('2019-5-1') 또는 new Date('2019/5)로 쓸 수 있습니다. /1')var now = new Date(); console.log(now);
3 날짜 형식 2019-8-8 8:8:8 형식으로 날짜를 입력하고 싶은데 어떻게 해야 하나요?
- Method name
- Description
- Code
getFullYears()
현재 연도 가져오기
dObj .getFullYears()
getMonth()현재 월(0-11)을 가져옵니다
| dObj.getDate( ) | getDay() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| dObj.getDay() | getHours() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| dObj.getHours() | getMinutes() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| dObj.getMinutes() | getSeconds() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| dObj.getSeconds() | // 格式化日期 年月日
var date = new Date();
console.log(date.getFullYear()); //返回当前日期的年 2020
console.log(date.getMonth() + 1); //月份 返回的月份小1个月 记得月份 +1
console.log(date.getUTCDate()); //返回的是几号
console.log(date.getDay()); //6 周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
// 写一个 2020年 5月 23日 星期六
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
// 格式化日期 时分秒
var date = new Date();
console.log(date.getHours()); //时
console.log(date.getMinutes()); //分
console.log(date.getSeconds()); //秒
// 要求封装一个函数返回当前的时分秒 格式是 08:08:08
function getTimer() {
var time = new Date();
var h = date.getHours();
h = h < 10 ? '0' + h : h;
var m = date.getMinutes();
m = m < 10 ? '0' + m : m;
var s = date.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTimer());4获取日期的总的毫秒形式 Date对象是基于1970年1月1日（世界标准时间）起的毫秒数 我们经常利用总的毫秒数来计算时间，因为它更精确 // 获取Date总的毫秒数(时间戳) 不是当前时间的毫秒数 而是距离1970年1月1日过了多少毫秒数
// 1.通过 valueOf() getTime()
var date = new Date();
console.log(date.valueOf()); //就是 我们现在时间 距离1970.1.1 总的毫秒数
console.log(date.getTime());
// 2.简单的写法(最常用的写法)
var date1 = +new Date(); //+new Date() 返回的就是总的毫秒数
console.log(date1);
// 3.H5 新增的 获得总的毫秒数
console.log(Date.now());案例：倒计时效果 // 倒计时效果
// 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的
// 2.用时间戳来做，用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数
// 3.把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒)
// 转换公式如下：
// d = parseInt(总秒数 / 60 / 60 / 24); //计算天数
// h = parseInt(总秒数 / 60 / 60 % 24); //计算小时
// m = parseInt(总秒数 / 60 % 60); //计算分数
// s = parseInt(总秒数 % 60); //计算当前秒数
function countDown(time) {
var nowTime = +new Date(); //返回的是当前时间总的毫秒数
var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //times是剩余时间总的秒数
var d = parseInt(times / 60 / 60 / 24); //天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24); //小
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60); //分
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60); //当前秒数
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2020-5-24 00:00:00'));
var date = new Date();
console.log(date);数组对象 1数组对象的创建 创建数组对象的两种方式
// 创建数组的两种方式
// 1.利用数组字面量
var arr = [1, 2, 3];
console.log(arr);
// 2.利用new Array()
// var arr1 = new Array(); //创建了一个空的数组
// var arr1 = new Array(2); //这个2 表示 数组的长度为 2 里面有两个空的数组元素
var arr1 = new Array(2, 3); //等价于[2,3] 这样写表示 里面有2个数组元素 是2和3
console.log(arr1);2检测是否为数组 // 翻转数组
function reverse(arr) {
// if (arr instanceof Array) {
if (Array.isArray(arr)) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
} else {
return 'error 这个参数要求必须是数组格式[1,2,3]'
}
}
console.log(reverse([1, 2, 3]));
console.log(reverse(1, 2, 3)); //[]
// 检测是否为数组
// (1)instanceof 运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
// (2)Array.isArray(参数); H5新增的方法 IE9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));3添加删除数组元素的方法
// 添加删除数组元素的方法
// 1.push() 在我们数组的末尾 添加一个或者多个数组元素 push 推
var arr = [1, 2, 3];
// arr.push(4, 'white');
console.log(arr.push(4, 'white')); //5 数组长度
console.log(arr);
// (1)push 是可以给数组追加新的元素
// (2)push() 参数直接写 数组元素就可以了
// (3)push完毕之后，返回的结果是 新数组的长度
// (4)原数组也会发生变化
//2.unshift 在我们数组的开头 添加一个或者多个数组元素
console.log(arr.unshift('red', 'green')); //7
console.log(arr);
// (1)unshift 是可以给数组前面追加新的元素
// (2)unshift() 参数直接写 数组元素就可以了
// (3)unshift完毕之后，返回的结果是 新数组的长度
// (4)原数组也会发生变化
// 3.pop() 它可以删除数组的最后一个元素
console.log(arr.pop()); //white
console.log(arr);
// (1)pop 是可以删除数组的最后一个元素 一次只能删除一个元素
// (2)pop() 没有参数
// (3)pop完毕之后，返回的结果是 删除的那个元素
// (4)原数组也会发生变化
// 4.shift() 它可以删除数组的第一个元素
console.log(arr.shift()); //red
console.log(arr);
// (1)shift 是可以删除数组的第一个元素 一次只能删除一个元素
// (2)shift() 没有参数
// (3)shift完毕之后，返回的结果是 删除的那个元素
// (4)原数组也会发生变化案例：筛选数组 // 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800],要求吧数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
// newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}
console.log(newArr);4数组排序
// 数组排序
// 1.翻转数组
var arr = ['red', 'white', 'blue'];
arr.reverse();
console.log(arr);
// 2.数组排序(冒泡排序)
var arr1 = [2, 5, 77, 4, 7, 11, 1];
arr1.sort(function(a, b) {
// return a - b;//升序的顺序排列
return b - a; //降序的顺序排列
});
console.log(arr1);5数组索引方法
// 返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找
//它只返回第一个满足条件的索引号
// 它如果在该数组里面找不到元素，则返回的是 -1
var arr = ['red', 'green', 'blue', 'white', 'bule'];
console.log(arr.indexOf('blue')); //2
console.log(arr.indexOf('black')); //-1
// 返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
var arr = ['red', 'green', 'blue', 'white', 'blue'];
console.log(arr.lastIndexOf('blue')); //4案例：数组去重 // 数组去重['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素
// 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重
// 2.核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加
// 3.我们怎么知道该元素没有存在？利用 新数组.indexOf(数组元素) 如果返回是 -1 就说明 新数组里面没有该元素
// 封装一个 去重的函数 unique 独一无二的
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
var demo1 = unique(['red', 'blue', 'blue'])
console.log(demo);
console.log(demo1);6数组转换为字符串
// 数组转换为字符串
// 1.toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); //1,2,3
// 2.join(分隔符)
var arr1 = ['green', 'blue', 'red'];
console.log(arr1.join()); //green,blue,red
console.log(arr1.join('-')); //green-blue-red
console.log(arr1.join('&')); //green&blue&red
slice（）和 splice（）目的基本相同 字符串对象 1基本包装类型 为了方便操作基本数据类型，JavaScript还提供了上特殊的引用类型：String、Number和Boolean。 基本包装类型就是把简单数据类型包装称为复杂数据类型，这样基本数据类型就有了属性和方法。 // 基本包装类型
var str = 'andy';
console.log(str.length);
// 对象 才有 属性和方法 复杂数据类型才有 属性和方法
// 简单数据类型为什么会有length属性？
// 基本包装类型：就是把简单的数据类型 包装称为了 复杂数据类型
// (1)把简单数据类型包装为复杂数据类型
var temp = new String('andy');
// (2)把临时变量的值 给str
str = temp;
// (3)销毁这个临时变量
temp = null;2字符串的不可变 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。 // 字符串的不可变性
var str = 'andy';
console.log(str);
str = 'red';
console.log(str);
// 当重新给 str 赋值的时候，常量 'andy'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
// 因为我们字符串的不可变 所以不要大量的拼接字符串
var str = '';
for (var i = 1; i <= 100000000; i++) {
str += i;
}
console.log(str);//这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间3根据字符返回位置 字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。
// 字符串对象 根据字符返回位置 str.indexOf('要查找的字符',[起始的位置])
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春', 3)); //从索引号是 3 的位置开始往后查找案例：返回字符位置 // 查找字符串 'abcoefoxyozzopp'中所有o出现的位置以及次数
// 核心算法：先查找第一个o出现的位置
// 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
// 因为 indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加 1，从而继续查找
var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
// console.log(index);
while (index !== -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是' + num);// ['red', 'blue', 'red', 'green', 'pink', 'red'],求red出现的位置和次数
var str = ['red', 'blue', 'red', 'green', 'pink', 'red'];
var index = str.indexOf('red');
var num = 0;
// console.log(index);
while (index !== -1) {
console.log(index);
num++;
index = str.indexOf('red', index + 1);
}
console.log('red出现的次数是' + num);4根据位置返回字符
// 根据位置返回字符
// 1.charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3)); //y
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
// 2.charCodeAt(index) 返回相应索引号的字符ASCII值 目的：判断用户按下了哪个键
console.log(str.charCodeAt(0)); //97(a的ASCII码是97)
// 3.str[index] H5 新增的
console.log(str[0]); //a案例：返回字符位置 // 有一个对象 来判断是否有该属性 对象['属性名']
var o = {
age: 18
}
if (o['age']) {
console.log('里面有该属性');
} else {
console.log('没有该属性');
}
// 判断一个字符串 'abcoefoxyozzopp'中出现次数最多的字符，并统计其次数
// o.a = 1
// 0.b = 1
// 0.c = 1
// o.o = 4
// 核心算法：利用charAt() 遍历这个字符串
// 把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
// 遍历对象，得到最大值和该字符
var str = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i); //chars 是字符串的每一个字符
if (o[chars]) { //o[chars]得到的是属性值
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);// 2.遍历对象
var max = 0;
var ch = '';
for (var k in o) {
// k 得到的是 属性名
// o[k] 得到的是属性值
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log(max); //4
console.log('最多的字符是' + ch); //最多的字符是o5字符串操作方法
// 字符串操作方法
// 1.concat('字符串1','字符串2'....)
var str='andy';
console.log(str.concat('red'));
//2. substr('截取的起始位置','截取几个字符');
var str1='改革春风吹满地';
console.log(str1.substr(2,2)); //第一个2 是索引号的 2 从第几个开始 第二个2 是取几个字符// 1.替换字符 replace('被替换的字符','替换为的字符') 它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a', 'b'));
// 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
str1 = str1.replace('o', '*');
}
console.log(str1);
// 2.字符转换为数组 split('分隔符') join 把数组转换为字符串
var str2 = 'red,pink,blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));
【相关推荐：javascript学习教程】 |
위 내용은 자바스크립트에 내장 객체가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
HTML 및 React : 마크 업과 구성 요소의 관계Apr 12, 2025 am 12:03 AMHTML과 React의 관계는 프론트 엔드 개발의 핵심이며, 현대 웹 애플리케이션의 사용자 인터페이스를 공동으로 구축합니다. 1) HTML은 컨텐츠 구조와 의미를 정의하고 React는 구성 요소화를 통해 동적 인터페이스를 구축합니다. 2) 부품은 JSX 구문을 사용하여 HTML을 포함하여 지능형 렌더링을 달성합니다. 3) 구성 요소 수명주기는 상태 및 속성에 따라 HTML 렌더링 및 업데이트를 동적으로 관리합니다. 4) 구성 요소를 사용하여 HTML 구조를 최적화하고 유지 관리 가능성을 향상시킵니다. 5) 성능 최적화에는 불필요한 렌더링을 피하고 주요 속성 사용 및 구성 요소 단일 책임을 유지하는 것이 포함됩니다.
반응 및 프론트 엔드 : 대화 형 경험 구축Apr 11, 2025 am 12:02 AMReact는 대화식 프론트 엔드 경험을 구축하는 데 선호되는 도구입니다. 1) 반응은 구성 요소화 및 가상 DOM을 통해 UI 개발을 단순화합니다. 2) 구성 요소는 기능 구성 요소 및 클래스 구성 요소로 나뉩니다. 기능 구성 요소는 더 간단하고 클래스 구성 요소는 더 많은 수명주기 방법을 제공합니다. 3) RECT의 작동 원리는 가상 DOM 및 조정 알고리즘에 의존하여 성능을 향상시킵니다. 4) 주 경영진은 usestate 또는 this.state를 사용하며 ComponentDidMount와 같은 수명주기 방법은 특정 논리에 사용됩니다. 5) 기본 사용에는 구성 요소 생성 및 상태 관리가 포함되며 고급 사용량은 사용자 정의 후크 및 성능 최적화가 포함됩니다. 6) 일반적인 오류에는 부적절한 상태 업데이트 및 성능 문제, 디버깅 기술은 ReactDevTools 사용 및 우수
반응 및 프론트 엔드 스택 : 도구 및 기술Apr 10, 2025 am 09:34 AMReact는 핵심 구성 요소 및 상태 관리 기능을 갖춘 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리입니다. 1) 구성 요소화 및 상태 관리를 통해 UI 개발을 단순화합니다. 2) 작업 원칙에는 화해 및 렌더링이 포함되며 최적화는 React.Memo 및 Usememo를 통해 구현할 수 있습니다. 3) 기본 사용법은 구성 요소를 작성하고 렌더링하는 것입니다. 고급 사용법에는 후크 및 컨텍스트를 사용하는 것이 포함됩니다. 4) 부적절한 상태 업데이트와 같은 일반적인 오류는 ReactDevTools를 사용하여 디버그 할 수 있습니다. 5) 성능 최적화에는 React.Memo, 가상화 목록 및 코드플릿을 사용하는 것이 포함되며 코드를 읽을 수 있고 유지 관리 가능하게 유지하는 것이 가장 좋습니다.
HTML에서 React의 역할 : 사용자 경험 향상Apr 09, 2025 am 12:11 AMReact는 JSX와 HTML을 결합하여 사용자 경험을 향상시킵니다. 1) JSX는 개발을보다 직관적으로 만들기 위해 HTML을 포함시킨다. 2) 가상 DOM 메커니즘은 성능을 최적화하고 DOM 운영을 줄입니다. 3) 유지 보수성을 향상시키기위한 구성 요소 기반 관리 UI. 4) 상태 관리 및 이벤트 처리는 상호 작용을 향상시킵니다.
반응 구성 요소 : HTML에서 재사용 가능한 요소 생성Apr 08, 2025 pm 05:53 PM반응 구성 요소는 함수 또는 클래스로 정의 할 수 있으며 UI 로직을 캡슐화하고 소품을 통해 입력 데이터를 수락합니다. 1) 구성 요소 정의 : 기능 또는 클래스를 사용하여 반응 요소를 반환합니다. 2) 렌더링 구성 요소 : 반응 호출 렌더 메소드 또는 기능 구성 요소를 실행합니다. 3) 멀티플렉싱 구성 요소 : 소품을 통해 데이터를 전달하여 복잡한 UI를 구축합니다. 구성 요소의 수명주기 접근 방식을 통해 다른 단계에서 논리를 실행하여 개발 효율성 및 코드 유지 관리 가능성을 향상시킬 수 있습니다.
엄격한 모드 목적을 반응합니다Apr 02, 2025 pm 05:51 PMReact Strict Mode는 추가 점검 및 경고를 활성화하여 React 응용 프로그램의 잠재적 문제를 강조하는 개발 도구입니다. 레거시 코드, 안전하지 않은 라이프 사이클 및 부작용을 식별하여 현대 반응 관행을 장려합니다.
파편 사용량을 반응합니다Apr 02, 2025 pm 05:50 PM반응 단편은 추가 DOM 노드없이 어린이를 그룹화하고 구조, 성능 및 접근성을 향상시킬 수 있습니다. 효율적인 목록 렌더링을위한 키를 지원합니다.
조정 과정에 반응합니다Apr 02, 2025 pm 05:49 PM이 기사에서는 React의 조정 프로세스가 DOM을 효율적으로 업데이트하는 방법에 대해 자세히 설명합니다. 주요 단계에는 조정 트리거, 가상 DOM 생성, 차이 알고리즘 사용 및 최소 DOM 업데이트 적용이 포함됩니다. Perfo도 다룹니다
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
