JavaScript有哪些重点知识？全面梳理，全在这篇文章里，硬核干货分享

2023-03-20 02:04| 来源: 网络整理| 查看: 265

一、初识JavaScript1、JS的组成部分ECMAScript含义：指定JS的规范BOM含义：BOM === brower object model == 浏览器对象模型brower：浏览器；object：对象；model：模型DOM含义：DOM == document object model == 文档对象模型document：文档；2、js的书写位置行内式基本语法(1)：==基本元素==直接在标签元素内绑定单机事件即可（onclick）基本语法(2)：==超链接元素==给href绑定javscript语句；href="javascript: alert()"

内嵌式基本语法：js语句

外链式基本语法：

3、变量

通过var关键字来定义变量

以数字、字母、下划线或者$组成严格区分大小写不能以中文命名不能以数字开头不能以关键字和保留字命名小驼峰命名

==变量命名尽量语义化==

4、数据类型

数据类型分为：基本数据类型和引用数据类型(复杂数据类型)

基本数据类型分为：

数值类型字符串类型布尔类型nullundefined注意事项

1).js的内嵌式和外链式都需要将script标签元素写在body的最底部

2).只要script标签元素中含有src属性,那么这个表亲中间不允许有内容;

3).只要script带src属性,那么就是js的外链式使用方法

问题（1）~ script为什么要写在body的最底部

答：就是因为我们的脚本语言js，一旦有书写错误，那么会影响整个页面的加载，所以不建议放到结构（html）的上面

二、js的运算符运算符

运算符分为：算术运算符、比较运算符、赋值运算符、逻辑运算符、一元运算符

运算符

算术运算符，包含：+、-、*、/、%（分别是：加、减、乘、除、取余）

比较运算符，包含：>、=、全部打印出来 // ==. 年/月/日时:分:秒 // -2. toLocaleDateString() --> 只打印年月日 // ==. 年/月/日 // -3. toLocaleTimeString() ---> 只打印时间 // =. 时:分:秒 console.log( d.toLocaleString() ); console.log( d.toLocaleDateString() ); console.log( d.toLocaleTimeString() ); 十七、时间戳介绍

1970年1月1日到日期对象表述时间经过的毫秒数！

规则：固定日期就是1970年1月1日至今

扩展
时间戳的返回值
时间戳的返回值是：ms（毫秒）
时间戳的获取
当前系统时间的时间戳语法：Date.now()参数：没有参数返回值：返回当前时间的时间戳（ms）
当前日期对象的时间戳语法：d.getTime()参数：没有参数返回值：返回日起对象的时间戳（ms）
根据时间戳计算两个日期的差值
公式：t1 - t2t1 : 目标时间（时间戳）t2 : 系统时间（时间戳）
t1 - t2 大于0：就表示t1的时间在t2之后t1 - t2 小于0：就表示t1的时间在t2之前计算技巧
找到格式化的最大计时单位！谁是最大计时单位，就先转换谁！
// 1).转换为小时（首先转换最大计时单位） parseInt(reduce / 1000 / 60 / 60) // 2).转换为分钟 parseInt(reduce / 1000 / 60) % 60 // 3).转换为秒 parseInt(reduce / 1000) % 60
由上可以看到，先转换最大计时单位：”小时“；
然后转换分钟，分钟我们如果不取余，那么也会将小时的分钟数算上，所以需要取余。
秒也是如此。
所以：
首先确定最大计时单位！优先转换最大计时单位子单位，只需要 “取余上一层单位的参数即可”。分钟： % 60中这个60就是小时的参数；（1小时就是60分钟）十八、字符串渲染页面介绍
==详细看vscode代码“第二阶段~ day12”==
字符串渲染页面：
主要就是分析页面结构十九、Math对象随机数介绍
语法：Math.random()
随机数的范围是：0 ~ 1之间
其中：大于等于0 ，小于1；（也就是大于等于“范围最小数”，小于“范围最大数”）
扩展Math.random()得出的随机数是小数，要想得到随机整数，前面需要加parseInt随机整数范围：parseInt(Math.random())Math.random()得出的范围最大值就是：0.9999999所以说：0 ~1之间公式就是：0 attr，才可以使用 obj[attr] = obj1[attr]; }
5.深度拷贝的数据
被克隆的属性值是基本类型和函数就直接赋值就可以;这里引用类型只有函数是特例,直接赋值被克隆的属性值是数组/对象那么就需要继续深度拷贝;直至该属性值为基本类型就结束三十九、js闭包机制闭包是什么
闭包就是有权访问另一个函数作用域变量的函数
闭包的作用保护函数的私有变量不受外部干扰形成不被销毁的栈内存将上级作用域的引用保存下来，实现方法或属性的私有化闭包的作用（自我理解）
通过一系列的方法, 将函数内部的变量( 局部变量 )转换为全局变量
满足如下规则，即可形成闭包外部函数包裹内部函数;外部函数返回内部函数;( 暴露 )外部函数声明的变量在内部函数之中被引用;闭包的问题
因为闭包的目标就是让活动对象不被删除，那么大量不被删除的活动对象会让
程序的内存占用变大
解决闭包存在的问题把变量赋值为null即可我们一定要在使用变量之后，再给变量赋值为null
四十、js函数科里化介绍（1）
科里化函数就是可以逐步传入参数, 实现等待效果, 等到所有参数传递完成再去
进行函数调用的方式;
介绍（2）
函数的参数传递可以进行拆分传递的函数编程形式
科里化函数封装的思路科里化函数传入目标函数作为参数;科里化函数封装返回常规函数的科里化函数;我们判定当前调用科里化函数的时候传入了多少个参数;如果传入参数和目标参数相同，则调用目标函数，完成计算结果如果传入参数没有到达既定的参数数量，我们就继续返回函数;
代码function curry( fn ){ // 在内部使用闭包: // -. 在外部记录当前的参数传入了多少 // -. 记录当前的目标函数的参数数量 let args = []; let { length } = fn; // console.log( args,length ) function curry_fn( ...arg ){ // args = [...args,...arg]; args.push( ...arg ); // 如果args数量没有达到目标参数的数量, 那么我们返回当前的函数; // 如果传入参数和目标参数相同，则调用目标函数，完成计算结果 if( args.length {} )传入的参数(函数)没有返回值的情况返回值为新的Promise对象，这个Promise对象的状态和调用状态监听工具的Promise对象的状态一致；

传入的参数有返回值且返回值为Promise对象的情况返回值为参数之中返回的Promise对象;

注意事项关于状态监听工具之中的函数调用问题状态改变工具resolver和reject并不是直接调用监听工具之中的函数；而是由状态监听工具得到当前Promise对象的状态而调用的函数；

如果catch监听到了成功状态就会无效；只有为失败状态才会调用内部的函数；如果then不传递第二个参数, Promise对象状态改变为失败的时候会报错；工具的扩展介绍catch的介绍catch应该是then的补齐函数！catch其实是拆分了then函数的第二部分函数，明确语义，我们使用时候一定要使用“连缀”语法；

finallyfinally实际上是一个中间层！中间层存在的意义状态改变的时候都会执行的代码！把复用的代码提取到finally之中；fianlly 是无论成功还是失败都可以监听的工具finally 只有一个函数作为参数finally 无法获取状态改变时传入的数据

自我理解finally也就是 A --> B；由A状态变为B状态的时候，中间有一个转换的过程；（就是将A在逐渐的转换为B）那么这就是中间层（也就是finally），但是我们不能一直停留在中间层，最终实现的是一个B状态（由A转换过来的）；所以这就是为什么单独使用finally会出错，（跟红绿灯一样，一直是黄灯等待状态，交通就会出现阻塞，就会出现交通问题，程序也是一样的道理）；四、Promise对象传递数据和接收数据介绍传递数据由定义Promise对象内部的改变状态函数，发送数据【实参的格式】resolver( "hello" )

接收数据由状态监听的工具之中的作为参数的函数，获取到数据【形参的格式】function pSuccess(res)(){} 五、Promise对象_监听工具的连缀语法介绍

监听工具的连续使用

实战应用：使用Promise监听工具，都会使用连缀语法；不会单独使用then连缀语法的扩展介绍连缀语法的最终目标：实现监听结束catch作为监听失败状态的角色，同时也是监听结束的最后判断( 依据catch监听工具内部参数函数的返回Promise对象的状态判断 )【成功状态】：监听结束【失败状态】：监听不结束( 报错: Uncaught (in promise) undefined );

then内部函数返回Promise对象状态为成功，不会被catch监听到；返回失败状态，会被catch监听到使用（1）p .then( pSuccess ) .catch( pFailed ); 自我理解就是监听当前p对象的状态，如果此时p的状态为"失败状态"；那么第一步：走到then的时候，由于then是一个参数（默认为成功状态）；不符合继续往下走；那么第二步：走到catch，catch就会直接调用内部的函数；

使用（2）p .finally( pChangeState ) .then( pSuccess ) .catch( pFailed ); 自我理解只要对象p改变了状态，那么都会走finally，然后依据p的状态执行指定的工具六、Promise的关键字关键字async 和 await；【他俩是组合在一起使用的】有async没有await实现不了具体的功能有await没有async报错；

了解

async await 关键字是ES6的关键字，这个关键字是和Promise对象配套使用的关键字

async关键字介绍：定义函数用的关键字语法： async function foo(){}async创建的函数:在这个函数里面可以使用await关键字async定义的函数返回值是一个Promise对象

await关键字介绍：开启等待( 开启该Promise对象的异步程序 )语法：await Promise实例化对象注意：放在Promise对象之前使用的关键字await关键字必须放在async定义的函数之中使用，不能放在其他位置上使用，如果放在其他位置上使用会报错；await表示程序开启等待，什么时候Promise对象的状态变为成功，什么时候我们继续向下执行代码！await会让写法为同步的程序变成异步程序；await之后的程序全部都是异步程序；

返回值：await 绑定的Promise对象，返回值为：当前Promise对象状态改变时的数据【如果resolver状态没有传递数据，那么返回undefined】也就是await p：返回的值相当于形参；实参就是Promise对象内部resolver的实参值（resolver( "hello")）；

await可以处理Promise对象的错误状态吗可以，但是需要借助 try catch 语句不借助try catch语句报错；try{ await p }catch( e ){ console.log( e ) }注意事项async await关键字替代的是then部分的语法，不能替代new Promise部分的语法【async await更多关注的是使用，而不是创建Promise】async定义的函数返回一个Promise对象，默认的状态为成功状态；如果函数内部返回值一个Promise对象，那么状态不能为失败状态否则报错；因为async定义的函数内部由于await将程序变成了异步，函数的返回值, 会作为Promise对象的状态改变时传入的数据而存在；也就是说：await获取到的当前Promise对象状态改变时的数据，由async定义的函数返回的Promise对象接手

【本文地址】

公司简介

联系我们