没有编写过React就要了解的Javascript基础，为初学者全方位剖析！

2023-09-28 11:10:28

[译] 在你学习 React 之前必备的 JavaScript 基础

对于想要学习React的同学来说，具备扎实的JavaScript基础知识是必不可少的。这是一篇基础入门的文章，适合没有写过React或者刚刚才接触React并且对于ES6的语法不太了解的同学。

变量声明

在JavaScript中，可以使用let和const来声明变量。let声明的变量可以重新赋值，而const声明的变量则为常量，一旦声明就不可改变。

// 使用let声明一个变量
let x = 10;

// 重新赋值
x = 20;

// 使用const声明一个常量
const y = 10;

// 重新赋值（报错）
// y = 20;

箭头函数

箭头函数是一种简写形式的函数，它使用=>来代替function关键字。箭头函数可以省略函数体的大括号，并且可以省略return关键字。

// 普通函数
function sum(a, b) {
  return a + b;
}

// 箭头函数
const sum = (a, b) => a + b;

模块化开发

JavaScript支持模块化开发，可以使用export和import关键字来导出和导入模块。

// 定义一个模块
export const PI = 3.1415926;

// 导入模块
import { PI } from './math.js';

对象

对象是一种存储数据的复合数据类型，可以使用{}来定义对象。对象中的属性可以使用.来访问。

const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

console.log(person.name); // John Doe

数组

数组是一种存储数据的有序数据类型，可以使用[]来定义数组。数组中的元素可以使用索引来访问。

const numbers = [1, 2, 3, 4, 5];

console.log(numbers[2]); // 3

循环控制

JavaScript支持多种循环控制结构，包括for循环、while循环和do...while循环。

// for循环
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while循环
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// do...while循环
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

条件控制

JavaScript支持多种条件控制结构，包括if语句、else if语句和switch语句。

// if语句
if (age >= 18) {
  console.log('成年人');
} else {
  console.log('未成年人');
}

// else if语句
if (age >= 18) {
  console.log('成年人');
} else if (age >= 13) {
  console.log('青少年');
} else {
  console.log('儿童');
}

// switch语句
switch (age) {
  case 18:
    console.log('成年人');
    break;
  case 13:
    console.log('青少年');
    break;
  default:
    console.log('儿童');
    break;
}