当前位置: 首页 > news >正文

一文掌握 React 开发中的 JavaScript 基础知识

在这里插入图片描述
前端开发中JavaScript是基石。在 React 开发中掌握掌握基础的 JavaScript 方法将有助于编写出更加高效、可维护的 React 应用程序。

在 React 开发中使用 ES6 语法可以带来更简洁、可读性更强、功能更丰富,以及更好性能和社区支持等诸多好处。这有助于提高开发效率,并构建出更加优秀的 React 应用程序。

原生JavaScript基础

  1. 数组方法:
// map()
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]// filter()
const words = ['apple', 'banana', 'cherry', 'date'];
const fruitsWithA = words.filter(word => word.includes('a'));
console.log(fruitsWithA); // ['apple', 'banana', 'date']// reduce()
const scores = [80, 85, 90, 92];
const totalScore = scores.reduce((acc, score) => acc + score, 0);
console.log(totalScore); // 347
  1. 字符串方法:
// split()/join()
const sentence = 'The quick brown fox jumps over the lazy dog.';
const words = sentence.split(' ');
console.log(words); // ['The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog.']
const newSentence = words.join('-');
console.log(newSentence); // 'The-quick-brown-fox-jumps-over-the-lazy-dog.'// substring()/substr()
const longString = 'This is a long string with some information.';
const shortString = longString.substring(10, 20);
console.log(shortString); // 'long strin'
  1. 对象方法:
// Object.keys()/Object.values()/Object.entries()
const person = { name: 'John Doe', age: 30, email: 'john.doe@example.com' };
const keys = Object.keys(person);
console.log(keys); // ['name', 'age', 'email']
const values = Object.values(person);
console.log(values); // ['John Doe', 30, 'john.doe@example.com']
const entries = Object.entries(person);
console.log(entries); // [['name', 'John Doe'], ['age', 30], ['email', 'john.doe@example.com']]// Object.assign()
const base = { id: 1, name: 'John' };
const extended = Object.assign({}, base, { email: 'john@example.com' });
console.log(extended); // { id: 1, name: 'John', email: 'john@example.com' }
  1. 函数方法:
// call()/apply()
function greet(greeting, name) {console.log(`${greeting}, ${name}!`);
}greet.call(null, 'Hello', 'John'); // Hello, John!
greet.apply(null, ['Hi', 'Jane']); // Hi, Jane!// bind()
const boundGreet = greet.bind(null, 'Howdy');
boundGreet('Alice'); // Howdy, Alice!
  1. 其他常用方法:
// console.log()/console.error()
console.log('This is a log message');
console.error('This is an error message');// setTimeout()/setInterval()
setTimeout(() => {console.log('This message will be logged after 2 seconds');
}, 2000);let count = 0;
const interval = setInterval(() => {console.log(`This message will be logged every second. Count: ${count}`);count++;
}, 1000);// Clear the interval after 5 seconds
setTimeout(() => {clearInterval(interval);console.log('Interval cleared');
}, 5000);

在 React 开发中如使用基础的 JavaScript 方法

  1. 数组方法:
// map()
const items = ['item1', 'item2', 'item3'];
return (<ul>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul>
);// filter()
const users = [{ id: 1, name: 'John', age: 30 },{ id: 2, name: 'Jane', age: 25 },{ id: 3, name: 'Bob', age: 40 }
];
const adults = users.filter(user => user.age >= 18);// reduce()
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 15
  1. 字符串方法:
// split()/join()
const name = 'John Doe';
const nameParts = name.split(' ');
console.log(nameParts); // Output: ['John', 'Doe']
const formattedName = nameParts.join(', '); // 'Doe, John'// substring()/substr()
const longText = 'This is a long text with some information.';
const shortText = longText.substring(0, 10); // 'This is a '
  1. 对象方法:
// Object.keys()/Object.values()/Object.entries()
const user = { id: 1, name: 'John', email: 'john@example.com' };
const keys = Object.keys(user); // ['id', 'name', 'email']
const values = Object.values(user); // [1, 'John', 'john@example.com']
const entries = Object.entries(user); // [[id, 1], [name, 'John'], [email, 'john@example.com']]// Object.assign()
const baseProps = { id: 1, name: 'John' };
const extendedProps = { ...baseProps, email: 'john@example.com' };
  1. 函数方法:
// call()/apply()
class Button extends React.Component {handleClick = function(e) {console.log(this.props.label);}.bind(this);render() {return <button onClick={this.handleClick}>{this.props.label}</button>;}
}// bind()
class Button extends React.Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this);}handleClick(e) {console.log(this.props.label);}render() {return <button onClick={this.handleClick}>{this.props.label}</button>;}
}
  1. 其他常用方法:
// console.log()/console.error()
console.log('This is a log message');
console.error('This is an error message');// setTimeout()/setInterval()
componentDidMount() {this.timer = setInterval(() => {this.setState(prevState => ({ count: prevState.count + 1 }));}, 1000);
}componentWillUnmount() {clearInterval(this.timer);
}

常用的 ES6 方法

  1. let/const:
let x = 5; // 块级作用域
const PI = 3.14159; // 不可重新赋值
  1. 箭头函数:
// 传统函数
const square = function(x) {return x * x;
};// 箭头函数
const square = (x) => {return x * x;
};// 简写
const square = x => x * x;
  1. 模板字面量:
const name = 'John';
const age = 30;
console.log(`My name is ${name} and I'm ${age} years old.`);
  1. 解构赋值:
const person = { name: 'John', age: 30, email: 'john@example.com' };
const { name, age } = person;
console.log(name, age); // 'John' 30const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first, second, rest); // 1 2 [3, 4, 5]
  1. :
class Person {constructor(name, age) {this.name = name;this.age = age;}greet() {console.log(`Hello, my name is ${this.name}.`);}
}const john = new Person('John', 30);
john.greet(); // 'Hello, my name is John.'
  1. Promise:
const fetchData = () => {return new Promise((resolve, reject) => {// 模拟异步操作setTimeout(() => {resolve({ data: 'Hello, Promise!' });}, 2000);});
};fetchData().then(response => console.log(response.data)).catch(error => console.error(error));
  1. async/await:
const fetchData = async () => {try {const response = await fetchData();console.log(response.data);} catch (error) {console.error(error);}
};fetchData();
  1. Spread 运算符:
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const allNumbers = [...numbers1, ...numbers2];
console.log(allNumbers); // [1, 2, 3, 4, 5, 6]const person = { name: 'John', age: 30 };
const updatedPerson = { ...person, email: 'john@example.com' };
console.log(updatedPerson); // { name: 'John', age: 30, email: 'john@example.com' }

相关文章:

一文掌握 React 开发中的 JavaScript 基础知识

前端开发中JavaScript是基石。在 React 开发中掌握掌握基础的 JavaScript 方法将有助于编写出更加高效、可维护的 React 应用程序。 在 React 开发中使用 ES6 语法可以带来更简洁、可读性更强、功能更丰富,以及更好性能和社区支持等诸多好处。这有助于提高开发效率,并构建出更…...

读天才与算法:人脑与AI的数学思维笔记01_洛夫莱斯测试

1. 创造力 1.1. 创造力是一种原动力&#xff0c;它驱使人们产生新的、令人惊讶的、有价值的想法&#xff0c;并积极地将这些想法付诸实践 1.2. 创造出在表面上看似新的东西相对容易 1.3. 在遇到偶然间的创造性行为时&#xff0c;都会表现得异…...

嵌入式系统的时间保存问题,hwclock保存注意事项

几个要点 嵌入式板子要有RTC电路和钮扣电池。这个跟电脑主板一样。嵌入式系统要有相应的驱动。使用date设置时间 date -s "2024-04-11 10:33:26" 使用hwclock保存时间 嵌入式系统如何使用hwclock正确保存时间-CSDN博客...

jenkins(docker)安装及应用

jenkins Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具&#xff0c;起源于Hudson&#xff08;Hudson是商用的&#xff09;&#xff0c;主要用于持续、自动的构建/测试软件项目、监控外部任务的运行&#xff08;这个比较抽象&#xff0c;暂且写上&#xff0c;不做解…...

uni-app中,页面跳转前,进行拦截处理的方法

个人需求阐述&#xff1a; 当用户在页面A中&#xff0c;填写了内容之后&#xff0c;没有点击“保存/确定”&#xff0c;直接通过点击返回按钮或者手机的物理返回键直接返回时&#xff0c;需要给出一个二次确认的弹层&#xff0c;当用户点击确定离开之后&#xff0c;跳转到页面B…...

Jmeter参数化的 4 种方式用法总结

参数化就是用变量代替数据的过程&#xff0c;总结参数化的4种方式&#xff1a; 1、用户自定义变量 用户自定义变更有两种方法&#xff1a; &#xff08;1&#xff09;在测试计划面板中的用户定义的变量设置 说明&#xff1a;在此用户定义的变量对所有测试计划都会生效 &…...

华为OD机试 - 连续天数的最高利润额(Java 2024 C卷 100分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…...

C语言——内存函数的实现和模拟实现

1. memcpy 使用和模拟实现 void * memcpy ( void * destination, const void * source, size_t num ); 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 这个函数在遇到 \0 的时候并不会停下来。 如果source和destination有任何的重叠&am…...

如何优化邮箱Webhook API发送邮件的性能?

邮箱Webhook API发送邮件的流程&#xff1f;怎么用邮箱API发信&#xff1f; 高效、稳定的邮箱Webhook API发送邮件功能对于企业的日常运营至关重要。随着业务量的增长&#xff0c;如何优化邮箱Webhook API发送邮件的性能。AokSend将从多个方面探讨如何提升的效率。 邮箱Webho…...

OceanBase V4.X中常用的SQL(一)

整理了一些在OceanBase使用过程中常用的SQL语句&#xff0c;这些语句均适用于4.x版本&#xff0c;并将持续进行更新。后续还将分享一些V4.x版本常用的操作指南&#xff0c;以便更好地帮助大家使用OceanBase数据库。 集群信息 版本查看 show variables like version_comment; …...

代码随想录算法训练营第五十天|123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV

123.买卖股票的最佳时机III 这道题一下子就难度上来了&#xff0c;关键在于至多买卖两次&#xff0c;这意味着可以买卖一次&#xff0c;可以买卖两次&#xff0c;也可以不买卖。 视频讲解&#xff1a;https://www.bilibili.com/video/BV1WG411K7AR https://programmercarl.com…...

Composer安装与配置:简化PHP依赖管理的利器(包括加速镜像设置)

在现代的PHP开发中&#xff0c;我们经常会使用许多第三方库和工具来构建强大的应用程序。然而&#xff0c;手动管理这些依赖项可能会变得复杂和耗时。为了解决这个问题&#xff0c;Composer应运而生。Composer是一个PHP的依赖管理工具&#xff0c;它可以帮助我们轻松地安装、更…...

灯塔:抽象类和接口笔记

什么是构造方法 构造方法是一种特殊的方法&#xff0c;它是一个与类同名且没有返回值类型的方法。 构造方法的功能主要是完成对象的初始化。当类实例化一个对象时会自动调用构造方法&#xff0c;且构造方法和其他方法一样也可以重载 继承抽象类需要实现所有的抽象方法吗 继…...

mybatis 入门

MyBatis是一款持久层框架&#xff0c;免除了几乎所有的JDBC代码、参数及获取结果集工作。可以通过简单的XML或注解来配置和映射原始类型、接口和Java POJO为数据库中的记录。 1 无框架下的JDBC操作 1&#xff09;加载驱动&#xff1a;Class.forName(“com.mysql.cj.jdbc.Driv…...

Spring-AI-上下文记忆

引入依赖 pom文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/P…...

内存函数memcpy、mommove、memset、memcmp

目录 1、memcpy函数 memcpy函数的模拟实现 2、memmove函数 memmove函数的模拟实现 3、memset函数 4、memcmp函数 1、memcpy函数 描述&#xff1a; C 库函数 void *memcpy(void *str1, const void *str2, size_t n) 从存储区 str2 复制 n 个字节到存储区 str1。 声明&…...

symfony框架介绍

Symfony是一个功能强大的PHP框架,它提供了丰富的组件和工具来简化Web开发过程。以下是一些关于Symfony的主要特点: 可重用性: Symfony提供了一系列可重用的PHP组件,这些组件可以用于任何PHP应用程序中。灵活性: Symfony允许开发者根据项目需求灵活选择使用哪些组件,而不是强…...

【计算机毕业设计】游戏售卖网站——后附源码

&#x1f389;**欢迎来到琛哥的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 琛哥&#xff0c;一名来自世界500强的资深程序猿&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 琛哥在深度学习任务中展现出卓越的能力&a…...

LabVIEW电信号傅里叶分解合成实验

LabVIEW电信号傅里叶分解合成实验 电信号的分析与处理在科研和工业领域中起着越来越重要的作用。系统以LabVIEW软件为基础&#xff0c;开发了一个集电信号的傅里叶分解、合成、频率响应及频谱分析功能于一体的虚拟仿真实验系统。系统不仅能够模拟实际电路实验箱的全部功能&…...

Docker 学习笔记(六):挑战容器数据卷技术一文通,实战多个 MySQL 数据同步,能懂会用,初学必备

一、前言 记录时间 [2024-4-11] 系列文章简摘&#xff1a; Docker学习笔记&#xff08;二&#xff09;&#xff1a;在Linux中部署Docker&#xff08;Centos7下安装docker、环境配置&#xff0c;以及镜像简单使用&#xff09; Docker 学习笔记&#xff08;三&#xff09;&#x…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...