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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
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环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
react-router中的属性详解
2017/06/01 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
python k-近邻算法实例分享
2014/06/11 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python中有帮助函数吗
2020/06/19 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
90后毕业生的求职信范文
2013/09/21 职场文书
环保建议书500字
2014/05/14 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
2014年科室工作总结
2014/11/20 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS