学习 React JS 之前需要了解的 JavaScript 基础知识

2025-05-28

学习 React JS 之前需要了解的 JavaScript 基础知识

反应JS

背景故事

如果你刚刚完成 JavaScript 在线课程或其他自学资源，开始接触你的第一个 JS 框架可能会感到害怕。我想鼓励你的是，作为初学者，我们都会有一些疑虑。但克服“我不认为我准备好了”或“不够聪明”的“恐惧/怀疑”是你必须经历的事情。编码是一个持续的旅程，随着新的编程语言或框架的创建而不断发展。如果你有机会参与一个使用你从未使用过的框架或技术的项目，不要急于拒绝。就说你不了解，但你愿意并且准备好学习它。至少我是这样做的。在接下来的三个月里，我将学习 React，为项目、团队做出贡献，并不断成长。

快乐的gif

让我们从原始的 JavaScript 基础开始

在学习 React JS 的过程中，我发现了一些在开始学习之前应该了解的内容。我将简要介绍这些功能，并添加一些有用的文档链接，以便你深入学习它们。以下是一些最常用的 ES6 或 ES7 语法：

  • Es6/ES7 类
  • 箭头函数
  • let 和 const
  • 进出口
  • 扩展和剩余运算符
  • 解构
  • 数组函数，尤其是 filter 和 map

使用 Let 和 Const 变量

以前var用于设置新变量，但随着 ES6 更新 let 和 const 的引入。
范围：var变量具有全局作用域或可访问性。这意味着当它们在函数外部声明时，它们可以在整个文件或窗口中访问。这可能很危险，因为您可能会在不知情的情况下更改它，从而导致很多错误。let并且const具有阻止范围。这意味着当它们在函数或任何代码块内部声明时，它们不能在函数外部访问。因此，您不能通过在函数外部操作或重新声明相同的变量来轻易破坏代码。
重新分配：Var 变量可以轻松地重新分配和更新，let 可以更新但不能重新分配，const 变量不能重新分配，它是常量（不会改变）。但是 const 数组内的值或 const 对象内的属性可以更改。


//Var can be re-assigned
var name = 'Jane Tracy 👩‍💻';
var name = 'Luke Wilsey 🎥';
console.log(name);
//output => Luke wilsey 🎥 

//var can be updated too
var name = 'Spencer 👩‍💻';
name = 'Tom🍄';
console.log(name);
//output => Tom🍄

//let can’t be re-assigned
let name = 'Jane Tracy 👩‍💻';
let name = 'Luke Wilsey 🎥 ';
console.log(name);
//output => Syntax error: the name has already been declared

// let can be updated
let name = 'Spencer 👩‍💻';
name = 'Tom🍄';
console.log(name);
//output => Tom🍄

//const can’t be re-assigned
const name = 'Jane Tracy 👩‍💻';
const name = 'Luke Wilsey 🎥 ';
console.log(name);
//output => Syntax error: the name has already been declared

//const object properties or array values can be changed
const friends = [{
    name: 'Bob 🥽',
    age: 22,
    hobby: 'golf🏌',
    music: 'rock 🎸'
  }

];

const result = friends.age = 23;
console.log(result);
//output => 23

// const object can't be re-assigned 
const friends = [{
    name: 'Bob 🥽',
    age: 22,
    hobby: 'golf🏌',
    music: 'rock 🎸'
  }

];

friends = [{
  name: 'Jane 🥽',
  age: 24,
  hobby: 'golf🏌',
  music: 'Pop 🎸'
}];

console.log(friends);
//output => Uncaught TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode

有关 const 的更多信息，请参阅W3Schools 的 const 部分

箭头函数

当我开始学习箭头函数时，我立刻就爱上了它。它们简洁明了，直奔主题。简单来说，箭头函数是一种用更短的语法编写函数的方法。它们也是在 ES6 更新中引入的。

  • 无参数的命名函数

//old function syntax 
function name() {
  console.log("Tracy 🚠");
}
name();

// arrow function
const name = () => {
  console.log("Tracy 🚠");
};
name();
//or you can even make it shorter by removing writing

const name = () => console.log("Tracy 🚠");
name();
Enter fullscreen mode Exit fullscreen mode

带参数的命名函数

function add(a, b) {
  return a + b;
}
console.log(add(3, 5));

//arrow function
const add = (a, b) => {
  return a + b;
};
console.log(add(3, 5));

//you can also shorten if it returns one thing
const add = (a, b) => a + b;
console.log(add(3, 5));
Enter fullscreen mode Exit fullscreen mode
  • 只有一个参数时不使用括号
//Using template literals to avoid the old concatenation
const series = favorite => console.log(`I love watching ${favorite}`);
series("The office");
Enter fullscreen mode Exit fullscreen mode

注意：箭头函数在现代框架中被广泛使用，如果你能熟练掌握它们会更好。想要深入了解，可以查看MDN 上的箭头函数

ES6 类

类是另一种函数类型，它由class关键字声明，可用于创建新对象。类包含属性和方法。constructor method用于初始化由类本身创建的对象，我们使用this关键字来引用当前类。

class GreatMovies {
  constructor(movie) {
    this.movie = "The Lord of the Rings 🎥";
  } 

  printMovie(){
    console.log(`My favorite movie is ${this.movie}`);
  };
}

//this creates an object by using new before the class name
const myMovies = new GreatMovies(); 
myMovies.printMovie();
//output => My favorite movie is The Lord of the Rings 🎥
Enter fullscreen mode Exit fullscreen mode

类继承

我们extends在类中使用 super 来从另一个类继承属性。
在下面的示例中，GreatSeries 类从 GreatMovies 类继承了属性和方法。super 方法用于调用父类的构造函数。在我们的例子中，它将调用 GreatMovies 类的构造函数。

class GreatMovies {
  constructor(movie) {
    this.movie = movie;
  }

  printMovie() {
    return `My favorite movie is ${this.movie}`;
  }
}

class GreatSeries extends GreatMovies {
  constructor(movie, series) {
    super(movie);
    this.series = series;
  }

  printList() {
    return `${this.printMovie()}, now I am watching ${
      this.series
    } series today.`;
  }
}
const watchingList = new GreatSeries("The Social dilemma", "The Society");
console.log(watchingList.printList());
Enter fullscreen mode Exit fullscreen mode
ES7 类语法

ES7 类语法最大的好处就是无需编写构造函数或 super 方法。我们还可以使用箭头函数作为类方法。这对我来说，让代码编写更加轻松快捷。
让我们重新设计之前使用的类，并将其改为 ES7 语法。

class GreatMovies {
  movie = "The Social dilemma";

  printMovie = () => {
    console.log(`My favorite movie is ${this.movie}`);
  };
}

const myMovies = new GreatMovies();
myMovies.printMovie();
Enter fullscreen mode Exit fullscreen mode

es7语法

如何编写没有超级方法的扩展类

构造函数和超方法是在后台编写的，因此您不必编写它们。

class GreatMovies {
  movie = "The Social dilemma";

  printMovie = () => {
    console.log(`My favorite movie is ${this.movie}`);
  };
}

class GreatSeries extends GreatMovies {
  movie = "The Social dilemma 🎥 ";
  series = "The Society";

  printList = () => {
    return `My favorite movie is ${this.movie} and now I am watching ${this.series} series today 🍹.`;
  };
}

const watchingList = new GreatSeries();
console.log(watchingList);
console.log(watchingList.printList());
Enter fullscreen mode Exit fullscreen mode

有关类的更多信息，请查看MDN mozilla 文档

进出口

您可以将函数存储在一个 Javascript 文件中，然后通过导入该文件或特定函数将其导出以在另一个 Js 文件中使用它。

如何导出文件或某些函数
导出文件中的主要内容时，可以使用默认设置。一个文件只能导出一次。

const movieList = movie => `I enjoyed watching ${movie} movie`;

export default movieList;

//If the function is more than one
const movieList = movie => `I enjoyed watching ${movie} movie 💕 `;

const seriesList = series => `I enjoyed watching ${series} series 🍹 `;

export {movieList , seriesList as default};

//You can also export function individually => named export
export const movieList = (movie) => `I enjoyed watching ${movie} movie 💕 `;

export const seriesList = (series) => `I enjoyed watching ${series} series 🍹 `;
Enter fullscreen mode Exit fullscreen mode

如何导入文件

//How to import multiple functions individually
//uses the named export
import {movieList, seriesList} from './watching/mylist.js';

//how to import one function called movieList
//using the default export
import movieList from './watching/mylist.js';

//importing using an alias
import {movieList as MovieList} from "./watching/mylist.js";
Enter fullscreen mode Exit fullscreen mode

如果你想了解更多关于导入和导出的知识，可以关注以下资源：
Digital Ocean 的 Javascript 导入和
导出 Javascript 导入和导出信息

扩展和剩余运算符

我第一次听说这个运算符时，非常好奇，想知道为什么只有三个点就能如此强大、简单易用。对我来说，这三个点就像魔法一样，是一种安全地复制引用类型而不会出现任何问题的方法。
展开运算符和剩余运算符使用三个点（...）来初始化它。
展开运算符用于拆分数组的值并将其添加到另一个数组，或者拆分对象的属性并将其添加到另一个对象。

//In arrays
const jobs = ["teacher 👩‍🏫 ", "engineer 🧰", "developer 👩‍💻"];

const currentJobs = [
  ...jobs,
  "actor 🎥",
  "social media influencer 📴",
  "musician 🎻",
];

console.log(currentJobs);
//output => ["teacher 👩‍🏫 ", "engineer 🧰", "developer 👩‍💻", "actor 🎥", "social media influencer 📴", "musician 🎻"]

//In objects
const currentJob = {
  name: "Jane",
  job: "developer 👩‍💻",
};

console.log(currentJob);

const funJob = {
  ...currentJob,
  name: "Tracy",
  PartTimejob: "musician 🎻",
};

console.log(funJob);
//output => {name: "Tracy", job: "developer 👩‍💻", PartTimejob: "musician 🎻"}
Enter fullscreen mode Exit fullscreen mode

剩余运算符
该运算符用于表示函数中参数的无限数量。

const num = (...args) => {
  return args.map((arg) => arg / 2);
};
const result = num(40, 60, 80, 120, 200, 300);
console.log(result);

//output => [20, 30, 40, 60, 100, 150]

//example 2
const myFruits = (...fruits) => {
  return fruits.filter((fruit) => fruit !== "🍌");
};

const result = myFruits("🍎", "🥝", "🍌", "🍍", "🍉", "🍏");

console.log(result);
//output
["🍎", "🥝", "🍍", "🍉", "🍏"]
Enter fullscreen mode Exit fullscreen mode

解构

起初我以为解构和展开运算符的作用相同，但我错了。展开运算符复制数组的所有值或对象的所有属性，而解构复制存储在变量中的特定值或属性。
数组解构

const myFruits = ["🍎", "🥝", "🍌", "🍍", "🍉", "🍏"];
const [myFavorite, , , listFavorite] = myfruits;
console.log(myFavorite, listFavorite);
//output 
🍎 🍍
Enter fullscreen mode Exit fullscreen mode

对象解构

const { name, job } = { name: "Tracy", job: "musician 🎻" };
console.log(name, job);
//output 
Tracy musician 🎻
Enter fullscreen mode Exit fullscreen mode

数组函数

数组函数并非新鲜事物，但了解并练习它们仍然很重要。在 React 中，map 和 filter 方法在处理数据时很常用。有关它们的更多信息，请参阅MDN 文档，这是我学习 JS 数组函数的最佳资源。

过滤方法
过滤方法创建一个新的元素数组，该元素数组从传递的回调函数返回 true。

const friends =[
  {name: 'Jane', age: 23},
  {name: 'Bob', age: 22},
  {name: 'Tracy', age: 24},
  {name: 'Jack', age: 25},
  {name: 'Fred', age: 25}
];

const filterAge = friends.filter(friend => friend.age> 23);
console.log(filterAge);
//output 
 [
  {name: 'Tracy', age: 24},
  {name: 'Jack', age: 25},
  {name: 'Fred', age: 25}

 ]
Enter fullscreen mode Exit fullscreen mode

在上面的例子中，它仅返回 23 岁及以上的人员的对象。

Map 方法
Map 方法根据回调函数的结果创建一个新数组。回调函数会在数组的每个索引上调用。索引就是数组中的元素。我们来看一个例子。

const friends = [{
    name: 'Jane 🌟',
    age: 23
  },
  {
    name: 'Bob 🥽',
    age: 22
  },
  {
    name: 'Tracy 🏌',
    age: 24
  },
  {
    name: 'Jack 🎸',
    age: 25
  },
  {
    name: 'Fred 🤾',
    age: 25
  }
];
const mapNames = friends.map(friend => friend.name);
console.log(mapNames);

//output
["Jane 🌟", "Bob 🥽", "Tracy 🏌", "Jack 🎸", "Fred 🤾"]
Enter fullscreen mode Exit fullscreen mode
哪里可以免费学习 React


在 scrimba FreeCodeCamp react 和 redux 部分由 Bob ziroll 免费学习 react
在 Coursera 中使用 React 进行前端开发
由 PluralSight 的 Cory House 使用 react 和 flux 构建应用程序

综上所述

为了顺利过渡到 React，请先学习 JavaScript，不要急于完成课程或文档。花几周或几个月的时间来确保你理解了原生 JavaScript。三个月前，当我开始学习 JavaScript 时，我从未想过自己能把 JavaScript 解释得这么清楚。我有点自嘲，因为我以为要花一年左右的时间才能理解中级 JavaScript 🥺（嘿，别笑我😄）。希望本文能让你了解我所了解的主题。有关更多详细信息和深入了解，请查看MDN 文档。要了解 ES6、ES7、ES8、ES9，请参阅Madasamy M 撰写的《JavaScript 历史》一文。

如果你觉得这篇文章有用，请分享给你的同学或正在学习 JavaScript 并想学习 React.js 的初学者。你也可以请我喝杯咖啡。🙂

给我买杯咖啡

xo xo gif

文章来源：https://dev.to/tracycss/the-vanilla-javascript-basics-to-know-before-learning-react-js-53aj
Devto 翻译
PREV
为非设计师设计（第一部分）
NEXT
您希望拥有的 Tailwind CSS 资源。