入门级别的 JS 基本概念详细介绍

Posted 2021-12-17 海拥✘

🌊 作者主页：海拥
🌊 作者简介：🏆CSDN全栈领域优质创作者、🥇HDZ核心组成员、🥈蝉联C站周榜前十
🌊 粉丝福利：👉 粉丝群 👈每周送6-9本书，不定期送各种小礼品(搪瓷杯、抱枕、鼠标垫、马克杯等)

直接跳到末尾 去评论区领书

对于初学者来说，javascript 乍一看似乎很容易，因为它的类似于 C 的语法

但不管它的运行方式如何，对语言 (ESNext) 及其框架所做的不断变化可能会让初学者不知所措。

学习回报丰厚，因为 JS 几乎可以轻松完成你想做的任何事情。

• 想要构建一个 Web 应用程序？ 没问题。
• 想要构建 CLI 工具？ 没问题。
• 想要构建桌面应用程序？ 做起来比说的更容易

每天提供的越来越多的包和库表明 JS 在构建软件应用程序时是多么抽象。

然而，JS 似乎受到了很多人的讨厌，主要是因为与竞争对手相比它过于传统。任何可能错过 JS 理论方面的人都会感到困惑。

许多人在深入研究 Javascript 之前忽略了 Javascript 的理论方面。这些概念帮助我们了解构建 Javascript 应用程序时所采用的不同路径和模式。这些模式存在于 JS Land 的每个框架中，因此在学习语言本身之前了解这些概念很有意义。

JS的特点

(1) 多范式

Javascript 支持过程式、面向对象和事件驱动的函数式编程！掌握 JS 的面向对象编程风格是非常有益的。

面向对象编程可帮助程序员更轻松地可视化软件应用程序的组件。此外，学习 Typescript（Javascript with Types）可以让程序员轻松实现行业中最好的设计模式。这些设计模式用于以最有效的方式解决软件编程中遇到的最常见问题。

这种多功能性使 Javascript 非常平易近人且非常强大。

(2) 解释

Javascript 与 C/C++ 不同，它不是一次读取程序，而是逐行解释。这就是说 JS 会比 C/C++ 等编译语言慢。

警告： Javascript 因在运行时是一种极其被动的语言而臭名昭著，对错误进行故障排除非常困难。

不过随着时间和练习，你将学会如何流畅地运行。最常见的错误涉及你的变量返回NULL值。当此类问题确实出现时，请前往 Stack Overflow，因为我向你保证，无论错误多么离谱，你都不是第一个遇到错误的人。在你的项目进行开发时自由地使用console.log()也是一个好办法。这可以帮助您准确找出程序生命周期中的时刻，您的变量可能已经脱落。

(3) 单线程

Javascript 一次只能执行一项任务。它根据类型将不同的任务排队到不同的队列中。
在最抽象的意义上，Javascript 基本上会将同步任务和异步任务分组，并将它们分开排队。

同步任务是在遇到它们时立即处理的语句，即它们立即运行。这些任务包括日志语句、变量声明、条件检查等。

异步任务涉及可能需要可变时间来返回输出的任务。异步任务的一个示例可能是从 Web API 请求信息。

此外，Javascript 还有一个 Job Queue，用于处理名为 Promises 的 JS Feature。

通过右键单击此网页并点击检查选项卡，您实际上可以看到 Javascript 的单线程特性。接下来，转到刚刚打开的窗口上的控制台选项卡。输入以下代码并按回车键。\\

while(true) 

您现在可以观察到此页面完全没有响应。这是因为此页面上的 Javascript 现在正忙于运行我们上面执行的无限 while 循环。

(4) 非阻塞

我们之前已经讨论过异步任务。由于 JS 在单线程环境中运行，默认情况下，它不会进行等待！

异步代码块只有在所有同步代码块都执行完后才会执行，而不管代码在程序中的位置如何。

console.log("我是第一个语句")

setTimeout(()=> 
console.log("我是第二个语句")
,1000)

console.log("我是第三个语句")

这里console.log()将其中的语句记录到控制台，setTimeout()函数在一秒钟后运行第二条语句。

在检查输出时

我是第一个语句
我是第三个语句
我是第二个语句

我们可以看到第三条语句在第二条语句之前记录。这是因为 JS 处理同步和异步代码块的固有方法。

(5) 高级

JavaScript 是一种高级语言。高级语言可能只是意味着它们更接近人类所说的语言。高级语言能够提供更多功能来帮助程序员更好地表达他们正在尝试构建的内容。

Javascript 的这种高级特性有助于它最好地服务于 Web 的客户端部分。过去 JS 的一个主要限制是它只能在客户端提供服务，而不能像大多数服务器端语言那样进行文件操作。

然而，这已经改变了NodeJS，允许开发人员使用 Javascript 来构建后端服务器。因此，只需使用一种语言，软件开发人员就可以在服务器端和客户端进行操作。这导致全栈工程师变得突出。

(6) 动态类型

Javascript 也是一种动态类型语言。这意味着与需要为变量指定数据类型的 C 不同，我们可以type-inference在 Javascript 中使用来自动检测数据的类型，变量保存。\\

// 在 C 中变量必须有数据类型。 为了将数据类型从一种类型更改为另一种类型，我们需要使用类型转换
int a = 5;
char b = "a";
float c = 7.036;

在 Javascript 中，我们使用let和const分别声明变量或常量。\\

let a = 5
console.log(a) // 5
a = 'Hello World'
console.log(a) // Hello World

const b = 'JS 很酷' 
console.log(b) // JS 很酷

b = '我改变主意了'
console.log(b) // Error: const cannot be changed

虽然类型推断因其易于使用而看起来是一个加分点，但它立即成为需要类型安全作为功能的大型项目的一个骗局。

出于这个原因，较大的项目使用 TypeScript，它只是 Javascript 的包装器，提供类型、接口和各种其他功能。

学习策略

在 JS Land 中安顿下来需要一段时间，但我有一个简单的清单，Minimum Requirements用于学习 Express 或 ReactJS 等框架。

首先，不要急于学习这些框架。你需要花点时间掌握 Vanilla Javascript。

基础知识

1. 变量和常量
2. 条件块（if-else）
3. 循环（for、while、forEach）
4. 开关盒（Switch Case）
5. 方法（Functions）

这些是你必不可少的编程基础。

高级部分（最低要求）

1. 异步/等待
2. Promises
3. Javascript 中的类
4. Rest/Spread 语法
5. 数组/对象迭代器
6. 数组解构
7. 模块（导入、导出）

在构建项目时继续学习，很快你就会对语言有很强的掌握。

🥇 评论区抽粉丝送书啦

💌 欢迎大家在评论区提出意见和建议! (抽两位幸运儿送书，实物图如下)💌

《Vue.js全家桶零基础入门到进阶项目实战》

【内容简介】

Vue.js 是一套构建用户界面的渐进式框架，本书旨在帮助读者全面掌握 Vue.js 全家桶技术和单页面前后端分离项目开发，理解 MVVM 框架思想，让前端和后端开发人员快速精通 Vue.js 全家桶技术。
　　本书贯穿入门准备实操、基础核心案例、中级进阶实战、综合进阶项目进行讲解，循序渐进、环环相扣，通俗易懂，并分析为什么这样使用，让你知其所以然。包含的主要技术：NPM/CNPM、VS Code、Vue.js、 MVVM、Axios、Vue Router、webpack、ECMAScript 6、Vue Loader、Vue CLI、Element UI、Vuex、 Mock.js、Easy Mock、ECharts 、Promise、拦截器、组件通信、跨域问题、上线部署等。
　　本书适合有 html、CSS、JavaScript 基础的 Vue.js 零基础小白、前端开发人员、后端开发人员。同时，也适合以下人员阅读：在校生，需要掌握流行的新技术，做到与职场同步；在职人员，工作中需要学习使用Vue；有基础学员，需要系统、全面、高效使用 Vue 技术。

也有不想靠抽，想自己买的同学可以参考下面的链接

京东自营购买链接：

《Vue.js全家桶零基础入门到进阶项目实战》- 京东图书

当当自营购买链接：

《Vue.js全家桶零基础入门到进阶项目实战》- 当当图书

📣 注意：

大家点赞关注，三天后也就是 11月25日 从评论区留言的同学中抽取两位送书

🌊 面试题库：Java、Python、前端核心知识点大全和面试真题资料
🌊 电子图书：图灵程序丛书 300本、机械工业出版社6000册免费正版图书
🌊 办公用品：精品PPT模板几千套，简历模板一千多套
🌊 学习资料：2300套PHP建站源码，微信小程序入门资料

如果中奖了联系不上则视为放弃，可以从下方公众号里找到作者的联系方式，每周都会送6-9本书，后面送书力度还会加大，一年送几百上千本不是问题，回复【进群】领书不迷路，群内 每位成员 我都会送一本。回复【资源】可获取上面的资料👇🏻👇🏻👇🏻