![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 90
爱在你心中
欢迎来到我的 CSDN 个人博客!我是一名热爱编程和技术分享的前端开发者,擅长于使用 JavaScript、CSS 和 HTML 等技术构建高质量的 Web 应用程序。在我的博客中,你将会发现一系列有关于前端开发的文章,包括最新的前端技术、最佳实践、以及我在实践中遇到的挑战和解决方案。我致力于将复杂的技术概念转化为易于理解的语言,让读者能够轻松地掌握并应用这些知识。此外,我也会分享一些个人成长和职业发展的经验,希望能够为读者提供一些有价值的参考。
我的博客将会定期更新,如果你对前端开发、Web 技术和编程感兴趣,欢迎订阅我的博客,与我一起探索前端开发的无限可能!
展开
-
74最新提案
本章介绍一些尚未进入标准、但很有希望的最新提案。原创 2023-08-19 08:00:00 · 169 阅读 · 0 评论 -
76参考链接
ES6 的专著,本书的许多代码实例来自该书Colin Toh,: ES6 的一些“轻量级”的特性介绍Ryan Dao,: ES6 新语法点的罗列: Traceur 文档列出的一些 ES6 例子: 关于 ES6 新增语法的综合介绍,有很多例子: ES6 语法点的综合介绍Toby Ho,: ES6 最佳实践kangax,: ES6 小测试: ES7 新增语法点介绍: 如何读懂 ES6 规格。原创 2023-08-23 08:00:00 · 85 阅读 · 0 评论 -
75装饰器
装饰器(Decorator)用来增强 JavaScript 类(class)的功能,许多面向对象的语言都有这种语法,目前有一个提案将其引入了 ECMAScript。装饰器是一种函数,写成@ + 函数名,可以用来装饰四种类型的值。类类的属性类的方法属性存取器(accessor)下面的例子是装饰器放在类名和类方法名之前,大家可以感受一下写法。原创 2023-08-24 08:00:00 · 75 阅读 · 0 评论 -
73ArrayBuffer
对象代表储存二进制数据的一段内存,它不能直接读写,只能通过视图(TypedArray视图和DataView视图)来读写,视图的作用是以指定格式解读二进制数据。也是一个构造函数,可以分配一段可以存放数据的连续内存区域。上面代码生成了一段 32 字节的内存区域,每个字节的值默认都是 0。可以看到,构造函数的参数是所需要的内存大小(单位字节)。为了读写这段内容,需要为它指定视图。DataView视图的创建,需要提供对象实例作为参数。上面代码对一段 32 字节的内存,建立DataView。原创 2023-08-22 08:00:00 · 135 阅读 · 0 评论 -
72异步遍历器
注意,普通的 async 函数返回的是一个 Promise 对象,而异步 Generator 函数返回的是一个异步 Iterator 对象。这就是说,异步遍历器与同步遍历器最终行为是一致的,只是会先返回 Promise 对象,作为中介。就像 Generator 函数返回一个同步遍历器对象一样,异步 Generator 函数的作用,是返回一个异步遍历器对象。属性的返回值是一个 Promise 对象,用来放置异步操作。,前一个处理同步遍历器,后一个处理异步遍历器,可以看到两个版本的写法基本上是一致的。原创 2023-08-21 08:00:00 · 79 阅读 · 0 评论 -
71读懂 ECMAScript 规格
规格文件是计算机语言的官方标准,详细描述语法规则和实现方法。一般来说,没有必要阅读规格,除非你要写编译器。因为规格写得非常抽象和精炼,又缺乏实例,不容易理解,而且对于解决实际的应用问题,帮助不大。但是,如果你遇到疑难的语法问题,实在找不到答案,这时可以去查看规格文件,了解语言标准是怎么说的。规格是解决问题的“最后一招”。这对 JavaScript 语言很有必要。因为它的使用场景复杂,语法规则不统一,例外很多,各种运行环境的行为不一致,导致奇怪的语法问题层出不穷,任何语法书都不可能囊括所有情况。原创 2023-08-20 08:00:00 · 96 阅读 · 0 评论 -
70编程风格
本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的、易于阅读和维护的代码。多家公司和组织已经公开了它们的风格规范,下面的内容主要参考了公司的 JavaScript 风格规范。原创 2023-08-18 08:00:00 · 75 阅读 · 0 评论 -
69Module 的加载实现
JavaScript 现在有两种模块。一种是 ES6 模块,简称 ESM;另一种是 CommonJS 模块,简称 CJS。CommonJS 模块是 Node.js 专用的,与 ES6 模块不兼容。语法上面,两者最明显的差异是,CommonJS 模块使用require()和,ES6 模块使用import和export。它们采用不同的加载方案。从 Node.js v13.2 版本开始,Node.js 已经默认打开了 ES6 模块支持。Node.js 要求 ES6 模块采用.mjs后缀文件名。原创 2023-08-17 08:00:00 · 68 阅读 · 0 评论 -
68Module 的语法
历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。原创 2023-08-16 08:00:00 · 47 阅读 · 0 评论 -
67Class 的基本语法
并不是语言本身的特性,这是各大厂商具体实现时添加的私有属性,虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性,但依旧不建议在生产中使用该属性,避免对环境产生依赖。上面代码中,箭头函数位于构造函数内部,它的定义生效的时候,是在构造函数执行的时候。另外,不管在类的内部或外部,读取一个不存在的私有属性,也都会报错。但是,这种命名是不保险的,在类的外部,还是可以调用到这个方法。这种新写法的好处是,所有实例对象自身的属性都定义在类的头部,看上去比较整齐,一眼就能看出这个类有哪些实例属性。原创 2023-08-15 08:00:00 · 108 阅读 · 0 评论 -
66Class 的基本语法
并不是语言本身的特性,这是各大厂商具体实现时添加的私有属性,虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性,但依旧不建议在生产中使用该属性,避免对环境产生依赖。上面代码中,箭头函数位于构造函数内部,它的定义生效的时候,是在构造函数执行的时候。另外,不管在类的内部或外部,读取一个不存在的私有属性,也都会报错。但是,这种命名是不保险的,在类的外部,还是可以调用到这个方法。这种新写法的好处是,所有实例对象自身的属性都定义在类的头部,看上去比较整齐,一眼就能看出这个类有哪些实例属性。原创 2023-08-14 08:00:00 · 65 阅读 · 1 评论 -
65async 函数
这种写法比较麻烦,等于要求模块的使用者遵守一个额外的使用协议,按照特殊的方法使用这个模块。,还默认输出一个 Promise 对象(async 函数立即执行后,返回一个 Promise 对象),从这个对象判断异步操作是否结束。也就是说,模块的使用者完全不用关心,依赖模块的内部有没有异步操作,正常加载即可。这个写法的问题在于,必须有一个任务运行器,自动执行 Generator 函数,上面代码的。命令有点像,交出代码的执行权给其他的模块加载,等异步操作完成后,再拿回执行权,继续向下执行。原创 2023-08-13 08:00:00 · 119 阅读 · 0 评论 -
64Generator 函数的异步应用
异步编程对 JavaScript 语言太重要。JavaScript 语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可。本章主要介绍 Generator 函数如何完成异步操作。原创 2023-08-12 08:00:00 · 100 阅读 · 0 评论 -
【Markdown入门及使用】
你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:撤销:Ctrl/Command + Z重做:Ctrl/Command + Y加粗:Ctrl/Command + B斜体:Ctrl/Command + I标题:Ctrl/Command + S原创 2023-08-05 21:00:53 · 186 阅读 · 0 评论 -
63Generator 函数的语法
Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。本章详细介绍 Generator 函数的语法和 API,它的异步编程应用请看《Generator 函数的异步应用》一章。Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。原创 2023-08-11 08:00:00 · 79 阅读 · 0 评论 -
62Iterator 和 for...of 循环
本质上,遍历器是一种线性处理,对于任何非线性的数据结构,部署遍历器接口,就等于部署一种线性转换。其次,Set 结构遍历时,返回的是一个值,而 Map 结构遍历时,返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值。由于 Iterator 只是把接口规格加到数据结构之上,所以,遍历器与它所遍历的那个数据结构,实际上是分开的,完全可以写出没有对应数据结构的遍历器对象,或者说用遍历器对象模拟出数据结构。由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了遍历器接口。原创 2023-08-10 08:00:00 · 60 阅读 · 0 评论 -
61Promise 对象
到了那个时候,Promise 的运行已经结束了,所以这个错误是在 Promise 函数体外抛出的,会冒泡到最外层,成了未捕获的错误。对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。事件的监听函数有两个参数,第一个是错误对象,第二个是报错的 Promise 实例,它可以用来了解发生错误的环境信息。原创 2023-08-09 08:00:00 · 77 阅读 · 0 评论 -
60Reflect
Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。(1) 将Object对象的一些明显属于语言内部的方法(比如),放到Reflect对象上。现阶段,某些方法同时在Object和Reflect对象上部署,未来的新方法将只部署在Reflect对象上。也就是说,从Reflect对象上可以拿到语言内部的方法。(2) 修改某些Object方法的返回结果,让其变得更合理。比如,在无法定义属性时,会抛出一个错误,而则会返回false。原创 2023-08-08 08:00:00 · 67 阅读 · 0 评论 -
59Proxy
Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。} , {`);`);} });${} , {`);`);} });} , {`);`);原创 2023-08-07 08:00:00 · 79 阅读 · 0 评论 -
58Set 和 Map 数据结构
其次,WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。这就解决了同名属性碰撞(clash)的问题,我们扩展别人的库的时候,如果使用对象作为键名,就不用担心自己的属性与原作者的属性同名。也就是说,上面的 DOM 节点对象除了 WeakMap 的弱引用外,其他位置对该对象的引用一旦消除,该对象占用的内存就会被垃圾回收机制释放。原创 2023-08-06 08:00:00 · 156 阅读 · 0 评论 -
57Symbol
ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。原创 2023-08-05 08:00:00 · 100 阅读 · 0 评论 -
56运算符的扩展
本章介绍 ES6 后续标准添加的一些运算符。原创 2023-08-04 08:00:00 · 74 阅读 · 0 评论 -
55对象的新增方法
本章介绍 Object 对象的新增方法。原创 2023-08-03 08:00:00 · 60 阅读 · 0 评论 -
54对象的扩展
对象(object)是 JavaScript 最重要的数据结构。ES6 对它进行了重大升级,本章介绍数据结构本身的改变,下一章介绍Object对象的新增方法。原创 2023-08-02 08:00:00 · 79 阅读 · 0 评论 -
53数组的扩展
如果是不稳定的,就不行。是一个 Generator 函数,执行后返回的是一个遍历器对象,对这个遍历器对象执行扩展运算符,就会将内部遍历得到的值,转为一个数组。这实际上意味着,只要有一个原始的数据结构,你就可以先对它的值进行处理,然后转成规范的数组结构,进而就可以使用数量众多的数组方法。排序稳定性(stable sorting)是排序算法的重要属性,指的是排序关键字相同的项目,排序前后的顺序不变。上面是这四个新方法对应的原有方法,含义和用法完全一样,唯一不同的是不会改变原数组,而是返回原数组操作后的拷贝。原创 2023-08-01 08:00:00 · 62 阅读 · 0 评论 -
一学习指导
知乎. https://www.zhihu.com/question/19713563.(2) JavaScript 教程 | 菜鸟教程. https://www.runoob.com/js/js-tutorial.html.(4) JavaScript 教程 | 菜鸟教程. https://www.runoob.com/js/js-tutorial.html.(1) JavaScript 用法 | 菜鸟教程. https://www.runoob.com/js/js-howto.html.原创 2023-07-31 08:48:00 · 80 阅读 · 0 评论 -
52:函数的扩展
尾调用(Tail Call)是函数式编程的一个重要概念,本身非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数。上面代码中,函数f的最后一步是调用函数g,这就叫尾调用。以下三种情况,都不属于尾调用。// 情况一 function f(x) {return y;} // 情况二 function f(x) {} // 情况三 function f(x) {g(x);上面代码中,情况一是调用函数g之后,还有赋值操作,所以不属于尾调用,即使语义完全一样。原创 2023-07-30 08:00:00 · 102 阅读 · 0 评论 -
51:数值的扩展
JavaScript 所有数字都保存成 64 位浮点数,这给数值的表示带来了两大限制。一是数值的精度只能到 53 个二进制位(相当于 16 个十进制位),大于这个范围的整数,JavaScript 是无法精确表示,这使得 JavaScript 不适合进行科学和金融方面的精确计算。二是大于或等于2的1024次方的数值,JavaScript 无法表示,会返回Infinity。原创 2023-07-29 08:00:00 · 123 阅读 · 0 评论 -
50:正则的扩展
正则表达式使用圆括号进行组匹配。上面代码中,正则表达式里面有三组圆括号。使用exec方法,就可以将这三组匹配结果提取出来。// 31组匹配的一个问题是,每一组的匹配含义不容易看出来,而且只能用数字序号(比如)引用,要是组的顺序变了,引用的时候就必须修改序号。ES2018 引入了具名组匹配(Named Capture Groups),允许为每一个组匹配指定一个名字,既便于阅读代码,又便于引用。// "31"原创 2023-07-28 08:00:00 · 74 阅读 · 0 评论 -
49:字符串的新增方法
本章介绍字符串对象的新增方法。原创 2023-07-27 08:00:00 · 151 阅读 · 0 评论 -
48:字符串的扩展
本章介绍 ES6 对字符串的改造和增强,下一章介绍字符串对象的新增方法。原创 2023-07-26 08:00:00 · 70 阅读 · 0 评论 -
45:ECMAScript 6 简介
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。原创 2023-07-23 08:00:00 · 307 阅读 · 0 评论 -
46:let 和 const 命令
这样的设计带来了几个很大的问题,首先是没法在编译时就报出变量未声明的错误,只有运行时才能知道(因为全局变量可能是顶层对象的属性创造的,而属性的创造是动态的);这样的错误在 ES5 是很常见的,现在有了这种规定,避免此类错误就很容易了。总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数,因此上面两种情况实际都能运行,不会报错。原创 2023-07-24 08:00:00 · 43 阅读 · 0 评论 -
47:变量的解构赋值
解构不仅可以用于数组,还可以用于对象。let {对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。let {baz } = {上面代码的第一个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined。如果解构失败,变量的值等于undefined。原创 2023-07-25 08:00:00 · 37 阅读 · 0 评论 -
44:Three.js - 下
cubeTexture 的实现往往需要6张图片来完成,而使用RGBELoader这个扩展我们可以仅仅加载一个hdr文件就可以完成等同的功能,而且这类的素材会更容易获取。能跟我们环境相关的材质处理金属以外,最常见的就还有玻璃。envMap 环境材料 ,取值为一个环境贴图,表示物体的表面的内容会结合当前的所在的周边环境(倒影反射等)PointLight 点光源,由一个点开始沿着这个点的各个方向发散的光 ( 灯泡发出的光 )要使用的6张图片threejs官方的例子的目录下有提供,可以直接使用。原创 2023-07-22 08:00:00 · 451 阅读 · 0 评论 -
43:Three.js - 中
相机,类似于眼睛,用于在3D舞台中,放置在不同的位置,实现通过不同的角度观察物体。查看 Three.js 的文档,可以看到 Camera 是一个抽象类,一般不直接使用,其他类型的 Camera 实现了这个抽象类。有以下的几种相机此处以透视相机()和正交相机()作为主要重点。原创 2023-07-21 08:00:00 · 1227 阅读 · 0 评论 -
41:canvas - 下
ctx.rotate(弧度值)ctx.save()ctx.createLinearGradient(起点x坐标, 起点y坐标, 终点x坐标, 终点y坐标)gd.drawImage(图片对象, x, y)原创 2023-07-19 08:00:00 · 69 阅读 · 0 评论 -
40:canvas - 上
canvas 是 HTML5 新增的一个标签,表示画布canvas 也是 HTML5 的画布技术,可以通过编码的方式在画布上描绘图像原创 2023-07-18 08:00:00 · 92 阅读 · 0 评论 -
35:登录验证和文件上传
登录验证和文件上传是Web应用程序中常见的功能之一。下面是关于登录验证和文件上传的一些要点:登录验证:登录验证是确保用户身份合法性和保护用户数据安全的重要步骤。文件上传:文件上传允许用户将文件从客户端上传到服务器端。综上所述,登录验证和文件上传是构建安全和功能丰富的Web应用程序的重要组成部分。通过合适的登录验证和文件上传机制,可以确保用户身份的合法性和保护用户上传文件的安全性。原创 2023-07-17 08:00:00 · 140 阅读 · 0 评论 -
34:MongoDB
MongoDB 是一个基于分布式文件存储的数据库管理系统。由 C++ 语言编写,是一个开源数据库系统。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。MongoDB 将数据存储为一个文档,数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档,数组及文档数组。原创 2023-07-16 08:00:00 · 41 阅读 · 0 评论