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 相关文章推荐
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
webpack优化的深入理解
Dec 10 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 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中文汉字验证码
2007/04/08 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python实现五子棋小游戏
2020/03/25 Python
python爬虫中多线程的使用详解
2019/09/23 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
MYSQL支持事务吗
2013/08/09 面试题
2014年部门工作总结
2014/11/12 职场文书
户外活动总结
2015/02/04 职场文书
培训督导岗位职责
2015/04/10 职场文书
涨价通知怎么写
2015/04/23 职场文书
军训新闻稿范文
2015/07/17 职场文书