javaScript知识储备

组成

  • ECMAScript(核心)

提供语法、变量等,遵循ECMA-262标准

  • DOM(文档对象模型)

提供操作HTML标签的API,遵循W3C规范

  • BOM(浏览器对象模型)

提供操作浏览器的API,window是BOM顶级对象,暂无规范

定义

  1. 解释型脚本语言

代码一边编译一边执行,区别于编译型语言(代码编译完毕才能执行)

  1. 弱语言类型

指某一个变量被定义类型,该变量可以根据环境变化自动进行转换,即具有隐式类型转换

  1. 单线程

通过轮转时间片模拟实现多线程,本质还是单线程

变量

命名规范

字母、下划线、数字、$符号

语义化、结构化

驼峰式

数字开头

关键字、保留字

数据类型

基本数据类型

  1. null

表示一个值被定义了,定义为“空值”

  1. undefined

表示根本不存在定义

  1. Boolean

布尔值

  1. Number

数值

  1. String

字符串

  1. Symbol

符号,ES6新增,表示独一无二的值

  1. BigInt

大数值,ES11新增,表示任意大的整数

const bigInt = 9007199254740991n
BigInt(9007199254740991) // 9007199254740991n
// 注意:当使用 BigInt 时,带小数的运算会被取整。BigInt 和 Number 不是严格相等的,但是宽松相等的。

引用数据类型

  1. Object

对象

  1. Array

数组

数组扩展内容

扁平化-多维数组转换一维数组

/**
* flat()
* @param {number} n 维度
* @return {array} 一维数组
**/
[1,2,[3,4]].flat(2) // [1,2,3,4]
[1,2,[3,4]].toString().split(';') // ['1','2','3','4']

合并

/**
* concat() 连接多个数组时效率低,返回新数组,不建议
* map() 使用较为复杂,不建议
* push.apply() 使用较为复杂,不建议
* for in 使用较为复杂,不建议
* ... 扩展运算符,返回新数组,建议
**/
const a1 = [1,2]
const a2 = [3,4]
a1.concat(a2) // [1,2,3,4]
[...a1,...a2] // [1,2,3,4]

去重

/**
* new Set() 利用新的数据结构元素不相同特性,建议
* 对象法:判断对象中是否存在key值,不建议
* 双循环对比:使用较为复杂,不建议
**/
[...new Set([1,1,2,3])] // [1,2,3]
// 注意:new Set()返回的是伪数组,可配合...或Array.from()转换成数组

排序

/**
* sort() 对于undefined 和 null 对象会有问题,但胜在简单易用
* 冒泡排序法
* 选择排序法
**/
[1,3,2,4].sort((a,b) => a-b) // [1,2,3,4]
// 注意:a-b 升序,b-a 降序

求和

/**
* reduce()
* @param {function} funtion 累加器函数
* @param {number} initialValue 初始值,可选
**/
[1,2,3,4].reduce((pre,cur) => { pre + cur }, 0) // 10
  1. Function

函数

数据类型判断方式

  1. typeof
/**
* @param {any} object 某个实例对象
* @return {string} type
**/
typeof(0) // 'number'
typeof(null) // 'object'
typeof(undefined) // 'undefined'

缺点:无法判断null、object、array,返回值都是object

  1. instanceof
/**
* @param {any} object 某个实例对象
* @param {prototype} constructor 某个构造函数
* @return {boolean} true/false
**/
[] instanceof Object // true
[] instanceof Array // true

缺点:无法判断array,可搭配用Array.isArray()判断数组类型

  1. Object.prototype.toString.call()
/**
* @param {any} object 某个实例对象
* @return {string} type
**/
Object.prototype.toString.call(1) // [object Number]
Object.prototype.toString.apply(undefined) // [object Undefined]

缺点:返回结果不能直接使用,需额外处理,搭配.slice(8,-1)即可

类型转换

  1. 显式转换

String()、Number()、parseInt()、toString()...

String(112)   // {string} '112'
Number('112') // {number} 112
  1. 隐式转换

+、-、*、/、== ...

+'1' === 1  // true
1 == true // true
true/5 // 0.2

附加内容:探讨 == 与 === 两者的异同点

/**
* 相同点:两者均可达到判断数据是否相等的效果
* 不同点:==仅判断数据是否相等,不会判断类型,存在隐式类型转换,===则会判断数据与类型是否都相等
**/
'1' == 1 // true
'1' === 1 // false

Event Loop

Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理

Task Queue

Task Queue即事件循环中的任务队列,任务队列中包含MacroTask、MicroTask两种任务。

MacroTask

macro task即宏任务:setTimeOut()、setInterval()...

MicroTask

micro task即微任务:Promise()、nextTick()...

运行机制

mainProcess -> [one] macroTask -> [all] microTask -> [one] macroTask ...

简单解释:每一次事件循环中,主进程先执行一个macroTask宏任务,macroTask宏任务执行完毕后,主进程便查询并执行microTask微任务,直至队列内microTask执行完毕,之后再执行一个macroTask,以此循环。

管中窥豹,microTask执行优先级是较高于macroTask的。

其他小知识点

  1. Promise的执行顺序问题

new Promise()是同步函数,会立即执行,而Promise.then()/.catch()才是异步任务。

  1. async/await语法糖执行问题

async函数是同步函数,语法糖会返回一个Promise对象,当函数执行时遇到await语法糖时,先立即执行await语句,执行完成并阻塞线程(跳出函数),等到then/catch返回再接着执行函数体内后续语句。

  1. setTimeOut不能精准定时执行问题

这就涉及到setTimeOut函数执行需满足的两个条件之一:主进程必须是空闲状态,这就意味着即便定时器时间到了,但由于主线程并未空闲,因此就不会立即执行回调。

javaScript知识储备的更多相关文章

  1. 【Vuejs】350- 学习 Vue 源码的必要知识储备

    前言 我最近在写 Vue 进阶的内容.在这个过程中,有些人问我看 Vue 源码需要有哪些准备吗?所以也就有了这篇计划之外的文章. 当你想学习 Vue 源码的时候,需要有扎实的 JavaScript 基 ...

  2. 【原文】前端程序员必须知道的高性能Javascript知识

    原文:前端程序员必须知道的高性能Javascript知识 想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...

  3. 《jQuery风暴》第2章 必须知道的JavaScript知识

    第2章 必须知道的JavaScript知识 JavaScript是jQuery应用的基础,掌握JavaScript这门语言是使用jQuery的基础条件.本章不会全面细致的讲解JavaScript的全部 ...

  4. Javascript知识——事件

    O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...

  5. Javascript知识四(DOM)

     [箴 10:4] 手懒的,要受贫穷:手勤的,却要富足. He becometh poor that dealeth with a slack hand: but the hand of the di ...

  6. 一个php技术栈后端猿的知识储备大纲

    <h1 align="center">Easy Tips</h1><p align="center"><a href= ...

  7. python网络爬虫,知识储备,简单爬虫的必知必会,【核心】

    知识储备,简单爬虫的必知必会,[核心] 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到桌 ...

  8. 剑指Offer——中国银行面试知识储备

    剑指Offer--中国银行面试知识储备+面试内容 事件介绍 时间:2016.11.23 08:30 地点:北京市海淀区永丰路299号南门(中国银行软件中心) 事件:中国银行面试(中英文面试) 注意事项 ...

  9. 想要开发自己的PHP框架需要那些知识储备?

    作者:安正超链接:https://www.zhihu.com/question/26635323/answer/33812516来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

随机推荐

  1. 深入刨析tomcat 之---第3篇 HTTP/1.1 长连接的实现原理

    writedby 张艳涛 长连接是HTTP/1.1的特征之一,1.1出现的原因是因为一个客户请求一个网页,这是一个http请求,这个网页中如果有图片,那么也会变为一个http请求,对于java客户端, ...

  2. 记录一次现网MySQL内存增长超限问题定位过程

    问题现象现网物理机内存近几日内爆涨使用率超过了90%,可用内存从250G,降低到20G以下,报告警.服务器使用情况来看,并没有什么异常.除了QPS缓慢增长外. MySQL内存分配结构 定位这个问题,先 ...

  3. SQL Server截取字符串(经纬度)

    DECLARE @var VARCHAR(50) SET @var ='116.404556|39.915156' 方式一: SELECT CASE WHEN ISNULL(@var,'') < ...

  4. Java数组02——三种初始化及内存分析

    内存分析 三种初始化 例子  package array; ​ public class ArrayDemon02 {     public static void main(String[] arg ...

  5. Vulhub-Mysql 身份认证绕过漏洞(CVE-2012-2122)

    前言 当连接MariaDB/MySQL时,输入的密码会与期望的正确密码比较,由于不正确的处理,会导致即便是memcmp()返回一个非零值,也会使MySQL认为两个密码是相同的.也就是说只要知道用户名, ...

  6. fiddler 之 返回数据乱码解决方法

    1.有时用fiddler抓包, 发现抓到的包, 发送数据和返回数据都是乱码, 怎么办?   直接上图  (这办法不是100%成功的) 方法一: 方法二:

  7. [TensorFlow2.0]-Fashion-MNIST本地数据集及fit_generator()的使用

    本人人工智能初学者,现在在学习TensorFlow2.0,对一些学习内容做一下笔记.笔记中,有些内容理解可能较为肤浅.有偏差等,各位在阅读时如有发现问题,请评论或者邮箱(右侧边栏有邮箱地址)提醒. 若 ...

  8. 4、关于numpy.random.seed()的使用说明

    定义:seed( ) 用于指定随机数生成时所用算法开始的整数值,如果使用相同的seed( )值,则每次生成的随即数都相同,如果不设置这个值,则系统根据时间来自己选择这个值,此时每次生成的随机数因时间差 ...

  9. Spring MVC+javamail实现邮件发送

    Spring MVC+javamail实现邮件发送 开启邮箱的POP3/SMTP服务(这里以QQ邮箱举例) 设置 --> 账户 -- > 开启POP3/STMP服务,然后得到一个授权码. ...

  10. 【死磕 Java 基础】— 我同事一个 select 分页语句查出来了 3000W 条数据

    大家好,我是大明哥,一个专注于[死磕 Java]系列创作的男人 个人网站:https://www.cmsblogs.com/.专注于 Java 优质系列文章分享,提供一站式 Java 学习资料 某天我 ...