前端开发中JavaScript是基石。在 React 开发中掌握掌握基础的 JavaScript 方法将有助于编写出更加高效、可维护的 React 应用程序。
在 React 开发中使用 ES6 语法可以带来更简洁、可读性更强、功能更丰富,以及更好性能和社区支持等诸多好处。这有助于提高开发效率,并构建出更加优秀的 React 应用程序。
原生JavaScript基础
- 数组方法:
// 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
- 字符串方法:
// 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'
- 对象方法:
// 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' }
- 函数方法:
// 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!
- 其他常用方法:
// 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 方法
- 数组方法:
// 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
- 字符串方法:
// 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 '
- 对象方法:
// 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' };
- 函数方法:
// 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>;
}
}
- 其他常用方法:
// 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 方法
- let/const:
let x = 5; // 块级作用域
const PI = 3.14159; // 不可重新赋值
- 箭头函数:
// 传统函数
const square = function(x) {
return x * x;
};
// 箭头函数
const square = (x) => {
return x * x;
};
// 简写
const square = x => x * x;
- 模板字面量:
const name = 'John';
const age = 30;
console.log(`My name is ${name} and I'm ${age} years old.`);
- 解构赋值:
const person = { name: 'John', age: 30, email: 'john@example.com' };
const { name, age } = person;
console.log(name, age); // 'John' 30
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first, second, rest); // 1 2 [3, 4, 5]
- 类:
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.'
- 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));
- async/await:
const fetchData = async () => {
try {
const response = await fetchData();
console.log(response.data);
} catch (error) {
console.error(error);
}
};
fetchData();
- 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' }
