「趣学前端」JavaScript标准库

简介: 用技术实现梦想,用梦想打开创意之门。今天分享前端JavaScript标准库的知识点。

背景

最近睡前习惯翻会书,重温了《JavaScript权威指南》这本书。这本书,文字小,内容多。两年了,我才翻到第十章。因为书太厚,平时都充当电脑支架。

JavaScript标准库

今天阅读的章节是JavaScript标准库,我开始以为是基础数据类型和内置方法的总结。看了介绍才发现是对一些重要但却没那么基础的API的归纳,把这些API看做是JavaScript的“标准库”。

包括JavaScript内置的、在浏览器和Node中对所有JavaScript程序都可用的类和函数。

我将整章读完,总结了几个有趣的功能,写出来分享给大家。


Set类的has()方法

集合的知识点就不过多介绍了,掘金应该会有很多优秀的介绍文章。章节里说

关于集合,最重要的是要知道它专门为成员测试做优化。

和集合的元素数量不会成反比,也就是大量元素数据下,has()方法也还是很快。而数组的includes()方法在做元素测试的时候,执行速度回和元素的数量成反比,所以我测试了一下。

模拟一个10万元素的数组,测试某个元素的存在,先来数组的includes()方法:

letlist=newArray(100000);
for (leti=0; i<list.length; i++) {
list[i] =i;
}
letres=list.includes(1000);
console.log(res);

执行结果:

has()方法

letlist=newArray(100000);
for (leti=0; i<list.length; i++) {
list[i] =i;
}
letsetList=newSet(list);
letsetRes=setList.has(1000);
console.log(setRes);

执行结果:

这个知识点不确定有啥用,但是好玩。

WeakMap和WeakSet

weakMap是弱映射,weakSet是弱集合。两个都没有size属性,所以大小可能随着对象被当做垃圾收集而随时改变。这也是两个类的用途,实现值与对象的关联而不导致内存泄漏。

WeakMap的使用场景,一个接受对象参数的函数,需要基于这个对象执行某些耗时操作,为了效率,会将计算后的结果缓存下来,方便之后使用,使用Map实现这个对象,会阻止其中的对象被当做垃圾回收,WeakMap可以避免这个问题。WeakSet的使用场景类似。

其实这个知识点对我来说有点模式,没有在项目中使用过。不过这个用法,我考虑了几秒,应该是有用的,先在笔记中记录下来。


有趣的控制台API

看到这个小节的时候我还在想,console还能玩出花?等翻页之后,发现整整两页的内容,原来console的API这么丰富。

console.table()

这个函数可以生成表列数据输出,对于需要产生摘要数据的Node程序尤其有用。(这里划个重点,后面学Node的时候没准用得上)

先看参数是对象的情况

let res = {

 name: '张三',

 age: 18,

};

console.table(res);

打印结果

再来看参数是对象数组,最好是一致的属性

let list = [

 {

   name: '张三',

   age: 18,

 },

 {

   name: '王五',

   age: 20,

 },

];

console.table(list);

打印结果


console.time()和console.timeEnd()

这两个连用效果更佳。

  • console.time():接收字符串参数,记录该字符串调用自身的时间,但是不会有输出。
  • console.timeEnd():接收字符串参数,如果该参数之前传给过console.time(),则输出该参数及经过的时间。

比如测试一个包含100个元素的数组的forEach执行时间:

let str = '测试forEach的执行时间';

console.time(str);

let list = new Array(100);

for (let i = 0; i < list.length; i++) {

 list[i] = i;

}

list.forEach(item => {

 console.log(item);

});

console.timeEnd(str);

打印结果


URL类

URL类可以解析URL,且允许修改URL,还可以处理不同的URL组件的转义和反转义。这个知识点还挺有用的,日常经过会遇到对URL进行处理获取参数或者转义的场景。

众多的属性中,有一个很很很有用,它就是searchParams。

searchParams

searchParams属性返回一个URLSearchParams对象,URLSearchParams对象具体获取、设置、添加、删除、和排序参数的属性。

let url = new URL('https://juejin.cn');

// 添加medium参数,参数值为banner

url.searchParams.append('medium', 'banner');

console.log(url.search); // => ?medium=banner

// 查询medium参数的值

let medium = url.searchParams.get('medium');

console.log(medium); // => banner

// 校验campaign参数是否存在

let campaignFlag = url.searchParams.has('campaign');

console.log(campaignFlag); // => false

// 添加campaign参数,参数值为reading

url.searchParams.append('campaign', 'reading');

// 对参数进行排序

url.searchParams.sort();

console.log(url.search); // => ?campaign=reading&medium=banner

总结

我发现我总是在不同的时间段反复爱上JavaScript,偶尔翻出来珍藏的技术书,都能或多或少的有点收获。

这次的宝藏图书《JavaScript权威指南》,也是一样,原来觉得枯燥的章节,最近读起来也很丝滑,比巧克力还丝滑。

今天也特别有收获的一天。

目录
相关文章
|
6月前
|
JavaScript 前端开发 Java
通义灵码 Rules 库合集来了,覆盖Java、TypeScript、Python、Go、JavaScript 等
通义灵码新上的外挂 Project Rules 获得了开发者的一致好评:最小成本适配我的开发风格、相当把团队经验沉淀下来,是个很好功能……
1248 103
|
6月前
|
JavaScript 前端开发 API
|
7月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
360 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
5月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
283 24
|
6月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
255 8
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
6550 24
|
8月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
292 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
232 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
11月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
177 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
945 14