一文掌握 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

2. 字符串方法:

// 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'

3. 对象方法:

// Object.keys()/Object.values()/Object.entries()
const person = { name: 'John Doe', age: 30, email: '[e-mail]' };
const keys = Object.keys(person);
console.log(keys); // ['name', 'age', 'email']
const values = Object.values(person);
console.log(values); // ['John Doe', 30, '[e-mail]']
const entries = Object.entries(person);
console.log(entries); // [['name', 'John Doe'], ['age', 30], ['email', '[e-mail]']]// Object.assign()
const base = { id: 1, name: 'John' };
const extended = Object.assign({}, base, { email: '[e-mail]' });
console.log(extended); // { id: 1, name: 'John', email: '[e-mail]' }

4. 函数方法:

// 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!

5. 其他常用方法:

// 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

2. 字符串方法:

// 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 '

3. 对象方法:

// Object.keys()/Object.values()/Object.entries()
const user = { id: 1, name: 'John', email: '[e-mail]' };
const keys = Object.keys(user); // ['id', 'name', 'email']
const values = Object.values(user); // [1, 'John', '[e-mail]']
const entries = Object.entries(user); // [[id, 1], [name, 'John'], [email, '[e-mail]']]// Object.assign()
const baseProps = { id: 1, name: 'John' };
const extendedProps = { ...baseProps, email: '[e-mail]' };

4. 函数方法:

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

5. 其他常用方法:

// 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; // 不可重新赋值

2. 箭头函数:

// 传统函数
const square = function(x) {return x * x;
};// 箭头函数
const square = (x) => {return x * x;
};// 简写
const square = x => x * x;

3. 模板字面量:

const name = 'John';
const age = 30;
console.log(`My name is ${name} and I'm ${age} years old.`);

4. 解构赋值:

const person = { name: 'John', age: 30, email: '[e-mail]' };
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]

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.'

6. 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));

7. async/await:

const fetchData = async () => {try {const response = await fetchData();console.log(response.data);} catch (error) {console.error(error);}
};fetchData();

8. 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: '[e-mail]' };
console.log(updatedPerson); // { name: 'John', age: 30, email: '[e-mail]' }