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

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: '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' };

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: '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]

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: 'john@example.com' };
console.log(updatedPerson); // { name: 'John', age: 30, email: 'john@example.com' }