JS 基本概念详细介绍


Posted in Javascript onOctober 16, 2021

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

1、JS的特点

1.1 多范式

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

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

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

1.2 解释

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

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

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

1.3单线程

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

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

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

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

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

while(true) {}

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

1.4 非阻塞

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

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

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

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

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

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

在检查输出时

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

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

1.5 高级

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

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

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

1.6 动态类型

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

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

Javascript 中,我们使用letconst分别声明变量或常量。\

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 的包装器,提供类型、接口和各种其他功能。

2、学习策略

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

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

3、基础知识

  • 变量和常量
  • 条件块(if-else
  • 循环(forwhileforEach
  • 开关盒(Switch Case
  • 方法(Functions

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

高级部分(最低要求)

  • 异步/等待
  • Promises
  • Javascript 中的类
  • Rest/Spread 语法
  • 数组/对象迭代器
  • 数组解构
  • 模块(导入、导出)

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

到此这篇关于JS 基本概念详细介绍的文章就介绍到这了,更多相关JS 基本概念内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
AJAX实现指定部分页面刷新效果
AJAX实现省市县三级联动效果
Oct 16 #Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 #Vue.js
JS中如何优雅的使用async await详解
Oct 05 #Javascript
js中Object.create实例用法详解
Oct 05 #Javascript
TypeScript中条件类型精读与实践记录
Oct 05 #Javascript
SSM VUE Axios详解
You might like
PHP与MySQL交互使用详解
2006/10/09 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
JS 表单验证大全
2011/11/23 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python避免死锁方法实例分析
2015/06/04 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python对列表的操作知识点详解
2019/08/20 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
打架检讨书500字
2014/01/29 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang
Python创建SQL数据库流程逐步讲解
2022/09/23 Python