icktpxcls的博客

11 个 ES2022（ES13)中惊人的 JavaScript 新特性

作为一个从事IT培训行业多年的人，被问及最多的三个问题就是，前端和后端哪个更好学？前端和后端哪个就业前景好？哪个薪资更高？众所周知，最近几年互联网发展迅速，想要从事互联网的同学也越来越多。那对于新手来说，选择一个自己喜欢的方向非常重要。有兴趣才能坚持，坚持才能成功。Java和Web前端，是当前热门职业之中之二，两者在关注度和热度上不分伯仲，也经常被拿来比较。那么，Java和Web前端，IT新人该如何选择呢？从发展层面来说，Java作为一门老牌编程语言，在国内的发展已经非常完善，目前，大部分的企业都使用

JavaScript 扩展运算符简介ES6 提供了一个名为扩展运算符的新运算符，它由三个点 (…) 组成。扩展运算符允许我们扩展可迭代对象的元素，例如数组、映射或集合。例如：const odd = [1,3,5];const combined = [2,4,6, …odd];console.log(combined);输出：[ 2, 4, 6, 1, 3, 5 ]在此示例中，奇数数组前面的三个点 (…) 是展开运算符。扩展运算符 (…) 解包奇数数组的元素。请注意，ES6 还具有三个点 (…

ES5 提供了八进制（前缀 0）、十进制（无前缀）和十六进制 (0x) 的数字文字。ES6 增加了对二进制字面量的支持并改变了它表示八进制字面量的方式。八进制要在 ES5 中表示八进制文字，我们使用零前缀 (0) 后跟八进制数字序列（从 0 到 7）。例如：let a = 051;console.log(a); // 41如果八进制文字包含超出范围的数字，JavaScript 会忽略前导 0 并将八进制文字视为十进制，如下例所示：let b = 058; // invalid octalcon

1、数值排序 | 升序 [⇣⁰₉]const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b){return a-b;});之前：[40,100,1,5,25,10]之后：[1,5,10,25,40,100]说明：对于数字排序，必须创建一个 Comparator 实体或比较函数。在上面的代码片段中，这相当于const compare = function(a, b){return a-b;};排序结果是arr.sort(com

JavaScript const 关键字简介ES6 提供了一种使用 const 关键字声明常量的新方法。const 关键字创建对值的只读引用。const CONSTANT_NAME = value;按照惯例，常量标识符是大写的。与 let 关键字一样， const 关键字声明块作用域变量。但是，由 const 关键字声明的块范围变量不能重新分配。let 关键字声明的变量是可变的。这意味着我们可以随时更改它们的值，如以下示例所示：let a = 10;a = 20;a = a + 5;con

JavaScript let 关键字简介在 ES5 中，当我们使用 var 关键字声明一个变量时，变量的作用域要么是全局的，要么是局部的。如果在函数之外声明变量，则变量的范围是全局的。在函数内声明变量时，变量的作用域是局部的。ES6 提供了一种使用 let 关键字声明变量的新方法。let 关键字类似于 var 关键字，只是这些变量是块作用域的。例如：let variable_name;在 JavaScript 中，块用花括号 {} 表示，例如 if else、for、do while、while、t

CSS 是每个 Web 开发人员必备的样式表语言。 它允许我们设置网页样式并使其具有响应性。 此外，借助 flexbox 和 grid 等新的 CSS 功能，我们可以轻松地为我们的网页创建复杂的布局。CSS与所有其他不同的语言一样，CSS 也有自己可以使用的功能。 这些函数可以放置在您要放置属性值的位置。在某些情况下，它们可以伴随另一个值声明。 一些 CSS 函数甚至可以嵌套到其他函数中，让您一次完成许多事情。在本文中，我将与您分享一些作为 Web 开发人员应该知道的有用的 CSS 函数。 现在，让我

1、按强类型风格写代码js是弱类型的，但是写代码的时候不能太随意，写得太随意也体现了编码风格不好。下面分点说明：（1）定义变量的时候要指明类型，告诉JS解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法：var num,str,obj;声明了三个变量，但其实没什么用，因为解释器不知道它们是什么类型的，好的写法应该是这样的：var num =0,str =’’,obj =null;定义变量的时候就给他一个默认值，这样不仅方便了解释器，也方便了阅读代码的人，他会在心里有数——

当今IT行业盛行，从事IT行业人员越来越多，从前端到后端职业中，更多的人喜欢前端开发，因为前端入门简单，学习起来容易，并且现在市场需求逐渐加大，只要拥有好的技术，会深受企业亲睐！今天就为各位分享web前端起步阶段、提升阶段、成型阶段都应该学习哪些知识？如何去学习这些知识？起步阶段1、基本知识的掌握在梳理的知识架构中，按照分析的两个维度里最前置的、最浅显的部分，作为打基础的阶段，必须要在这个过程中更多投入到实践中去，通常做的多了、熟练了，就认为这部分知识和内容掌握了。2、常用工具的掌握对于常用工具的

使用CSS重置（reset）css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。*{ box-sizing:border-box; margin:0; padding:0 }使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它。继承盒模型让盒

在 ECMAScript5（简称 ES5）中，有三个循环。在 2015 年 6 月发布的 ECMAScript6（简称 ES6）中，新增了一种循环类型。他们是：forfor infor eachfor of今天，就让我们一起来看看这4个 for 循环。1、简单的for循环我们来看看最常见的写法：const arr = [1, 2, 3];for(let i = 0; i < arr.length; i++) {console.log(arr[i]);}当循环中数组的长度没有变化

JavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。既然我们不能强制的垃圾回收，那我们怎么知道它能正常工作？我们对它又了解多少呢？脚本执行在此过程中暂停它为不可访问的资源释放内存它是不确定的它不会一次检查整个内存，而是在多个周期中运行它是不可预测的，但它会在必要时执行这是否意味着无需担心资源和内存分配问题?当然不是。如果我们一不小心，可能会产生一些内存泄漏。什么是内存泄漏？内存泄漏是软件无法回收的已分配的内存块。

1、默认绑定默认绑定通常是指函数独立调用，不涉及其他绑定规则。非严格模式下，this指向window，严格模式下，this指向undefined。01、题目1.1：非严格模式var foo = 123;function print(){this.foo = 234;console.log(this); // windowconsole.log(foo); // 234}print();非严格模式，print()为默认绑定，this指向window，所以打印window和234。这个fo

1、Array.isArray()我们列表中的第一项是 JavaScript 中的 isArray 方法，它确定传递的输入是否为数组。语法：在下面的代码中， arr 将是我们要检查的输入，是否为数组。isArray() 函数的结果将是一个布尔值。Array.isArray(arr)示例：Array.isArray([1, ‘something’, true]);// trueArray.isArray({anything: 123});// falseArray.isArray(‘som

什么是“一流函数”？维基百科的定义：在计算机科学中，如果一种编程语言将函数视为一等公民，那么它就被称为具有一等函数。这意味着该语言支持将函数作为参数传递给其他函数，将它们作为其他函数的值返回，并将它们分配给变量或将它们存储在数据结构中。例如，在 JavaScript 中，我们可以将一个函数分配给一个变量。var sum = function(a, b) {return a + b;}var total = sum(10, 1);如果我们是第一次阅读，这个定义会有点混乱。然而，事实是我们在不知

1、空运算符如果左侧为空或未定义，则此运算符返回右侧值。const data= null ?? ‘data’;console.log(data);// expected output: “data”const data1 = 1 ?? 4;console.log(data1);// expected output: 1逻辑 OR (||) 运算符执行相同的操作，但是，当将 0 作为值传递时，它将视为 false，这使得它容易用于数字。function add(a, b) {val1 =

Q1：安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本/*cnpm website: https://npm.taobao.org/*/npm install -g cnpm --registry=https://registry.npm.taobao.org// cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些yarn 和 npm 改源大法//使用 nrm 模块 : www.npmjs.com/package/nrmnpm co

1、删除不必要的 return 语句：检查函数内部是否需要存在。可以简化为一行代码吗？如果是这样，JavaScript 允许使用隐式返回来简化代码。从下面检查代码。在那里，我删除了额外的变量声明 usersFound，让我可以选择删除未使用的 return 语句。// This function receives as arguments an array of objects,// [{ firstName: ‘Test’ }, { firstName: ‘Ignacio’ }, …]// Th

很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。01、手机机身码(IMEI)/^\d{15,17}$/02、必须带端口号的网址(或ip)/^((ht|f)tps?????/)?[\w-]+(.[\w-]+)+:\d{1,5}/?$/03、网址(url,支持端口和"?+参数"和"#+参数)/(((ht|f)tps?)????/)?[\w-]+(.

各种业务开发都离不开对数据的处理，然而遇到的很多数据都是不好处理的。这个时候就需要寻求搜索引擎的帮助。这种方法效率是非常低下的，而且根据作者的个性不能保证其对自己的口味。因此这篇文字包含了一份 js 常用业务函数手册，例如时间格式的处理、用的是哪个手机浏览器，手机号、邮箱的验证，以此来提高你的开发效率1、邮箱export const isEmail = (s) => {return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3

我们可能总是会遇到根据一个属性或多个属性值从数组或对象数组中删除项目的时候，今天让我们看看根据属性值从数组中删除或过滤项目有哪些不同的方法。1、POP“pop() 方法从数组中删除最后一个元素并返回该元素。这个方法改变了数组的长度。” （来源：MDN）数组：let arraypoptest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];let testpop = arraypoptest.pop();console.log(“array pop”, testpop,"-",

1、Line-height适用情景：单行文字（垂直居中）原理：将单行文字的行高设定后，文字会位于行高的垂直中间位置。html：Lorem ipsam.css：.example{width: 400px;background: #afddf3;line-height: 50px;}2、Line-height + inline-block原理：将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block。由于inline-block在

01、假值undefined、null、0、false、NaN、‘’都是假值。您可能已经知道这一点，但您是否知道空字符串也是假的？见下文：console.log(’’ == false); // trueconsole.log(’’ === false); // false02、Filter 函数您一定在数组上经常使用 filter 函数。如果您想过滤数组中的虚假值，这里有一个提示。只需在过滤器函数中提供布尔值即可。const arr = [1,4,undefined,null,9,NaN,1

Javascript现在已经演变成一种你可以做任何事情的语言。如今，我们创建了服务器端代码、前端代码、移动应用程序代码等等。这是我以前用于不同项目的一些很棒的JS库的列表。1、Nodemon地址：https://www.npmjs.com/package/nodemonNodemon 是一个可以实现服务器开发的库。任何更改后，它将自动保存，自动重新启动的服务器（或其他项目）。它知道何时保存前端文件（例如 CSS），如果你正在更新需要重新启动的后端文件，它只会在你需要时尝试重新启动。它易于安装并且

如何使用JavaScript验证email的正确性？今天这个内容将做一个小小的总结，希望对你有所帮助。方式一：简单验证对于想要以以下形式进行真正简单验证的人[email protected]正则表达式：/\S+@\S+.\S+/要防止匹配多个@ 符号（推荐使用）：/[\s@]+@[\s@]+.[\s@]+$/JavaScript 函数示例：function validateEmail(email) {var re = /[\s@]+@[\s@]+.[\s@]+$/;return re.te

一 、基础原型每个对象都包含一个原型属性（prototype），用于关联另一个对象，关联后就能使用那个对象的属性和方法，这其实就是JavaScript的原型式继承。操作原型有如下方法：（1）Object.create()根据指定的原型创建新对象，原型可以是nullconst parentObj = {add: function() {return this.a + this.b;}};const newObj = Object.create(parentObj, {a: {value

JavaScript 区分大小写JavaScript 中的所有内容，包括变量、函数名、类名和运算符都是区分大小写。这意味着counter和Counter变量是不同的。同样，你不能将instanceof用作函数的名称，因为它是一个关键字。但是，instanceOf是一个有效的函数名。标识符标识符是变量、函数、参数或类的名称。标识符由以下格式的一个或多个字符组成：第一个字符必须是字母（az 或 AZ）、下划线 ( _ ) 或美元符号 ()。其他字符可以是字母（az、AZ）、数字（0−9）、下划线（）和

1、在多条路线中使用一个组件这是开发人员遇到的一种非常常见的情况，即多个路由解析到同一个 Vue 组件。然而，问题在于 Vue 优化了你的应用程序并重用现有组件而不是创建新组件。因此，如果你尝试在使用相同组件的路由之间切换，则不会有任何改变。//路由器.jsconst routes = [{path: “/a”,component: MyComponent},path: “/b”,];要解决此问题，你需要在 元素上添加 :key 属性——这可能在你的 App.vue 文件中。这将帮助

对于一个学前端的同学来说js是所有学习的人来说必不可少的知识点，而且js学的好坏直接关系到一个人是否能真正学的怎么样。这不仅仅是我的知识体系，更是我时刻提醒自己的自检清单。下面我会把我的自检清单分享给大家，你可以按照清单上的知识检测自己还有哪些不足和提升，我也建议大家建自己的知识体系，这样工作或者学习甚至面试时，你能快速定位到知识清单中的点，如果你有哪些我没归纳到的点，欢迎在评论区告诉我。变量和类型1.JS规定了几种语言类型2.JS对象的底层数据结构是什么3.Symbol类型在实际开发中的应用、

1、在多条路线中使用一个组件这是开发人员遇到的一种非常常见的情况，即多个路由解析到同一个 Vue 组件。然而，问题在于 Vue 优化了你的应用程序并重用现有组件而不是创建新组件。因此，如果你尝试在使用相同组件的路由之间切换，则不会有任何改变。//路由器.jsconst routes = [{path: “/a”,component: MyComponent},path: “/b”,];要解决此问题，你需要在 元素上添加 :key 属性——这可能在你的 App.vue 文件中。这将帮助

JavaScript 有很多很酷的特性，但大多数初学者和中级开发人员都不知道。 今天，我挑选了 10 个 JavaScript 项目中使用的技巧。1、有条件地向对象添加属性我们可以使用扩展运算符 … 来有条件地向 JavaScript 对象快速添加属性。const condition = true;const person = {id: 1,name: ‘John Doe’,…(condition && { age: 16 }),};如果每个操作数的计算结果都为真， &am

一、async 和 await 的基本用法async是基于Promise的generator语法糖，以同步流程表达异步操作；async函数的特点：被async修饰过的函数调用，返回的是一个promise对象，对象的状态默认是 ‘完成状态 resolve’;async函数会根据当前状态自动调用并且返回值，无需手动调用resolve() 和 reject() 方法;然后使用函数对象.then()方法处理返回的结果值；await的特点：不能单独使用，需要和 async 一起使用;遇到await可以

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

一 回调函数异步编程的最基本方法，把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。优点：简单、容易理解和实现。缺点：多次调用会使代码结构混乱，形成回调地狱。function sleep(time, callback) {setTimeout(() => {// 一些逻辑代码callback();}, time);}二 事件监听异步任务的执行不取决于代码的执行顺序，而取决于某个事件是否发生。优点：易于理解，此外对于每个事件可以指定多个回调函数，

一、性能比2.x快1.2～2倍diff算法的优化在vue2中，虚拟dom是全量比较的。在vue3中，增加了静态标记PatchFlag。在创建vnode的时候，会根据vnode的内容是否可以变化，为其添加静态标记PatchFlag。diff的时候，只会比较有PatchFlag的节点。PatchFlag是有类型的，比如一个可变化文本节点，会将其添加PatchFlag枚举值为TEXT的静态标记。这样在diff的时候，只需比对文本内容。需要比对的内容更少了。PatchFlag还有动态class、动态style

爱创课堂小编从面试和日常工作两个方面来讨论这个问题面试方面有种说法叫，相信大家都听说过，那就是“面试造航母，工作拧螺丝”。抛开面试官想和你“技术pk”的可能性，我对这个的理解是，面试官是在心里面和你pk技术。开个玩笑，按小编的正解是尽可能了解你编程能力的极限，你的下限他们知道，但是你的上限也很重要。所以面试中有个一两道算法题不奇怪，不需要对算法有畏惧的心理.一般正常的算法题，面试官也不会出得非常难，因为非常难的算法题，面试官也不一定会，所以算法题常常控制在正常难度。还有一点就是,面试的时候，面试官往往

随着js的发展，目前共6种声明变量的方式，分别为var、let、const、function、class、import，下面分别阐述一下这六种方式。1 var在ES5阶段，用var定义变量，此阶段具有以下特点：没有块的概念，可以跨块访问，不能跨函数访问；存在变量提升。// 代码没报错，而是打印出来了undefined，侧面说明了val变量存在变量提升console.log(val); // undefinedvar val = 1;console.log(val); // 12 let在

JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们。就好像是变量声明和函数声明被提升了代码的顶部一样。sayHi() // Hi there!function sayHi() {console.log(‘Hi there!’)}name = ‘John Doe’console.log(name) // John Doevar name然而JavaScript并不会移动你的代码，所以JavaScript中“变量提升”并不是真正意义上的“提升”。JavaScript是单线程语

性能一直是前端老生常谈的一个话题，其中有一个性能问题就是我们会频繁的触发一些事件，例如mousemove、scroll、resize等，虽然浏览器已经对这些事件的触发做了一些优化，但是如果在很短的时间内频繁的触发仍然会影响性能，这个时候就需要今天的主角：防抖和节流，利用它们来进行优化，提高性能。一 防抖1 定义防抖就是将多次高频操作优化为只在最后一次执行（某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次）。通常的使用场景是：用户输入，只需在输入完成后做一次输入校验即可。2 实现防抖是将