我做开发那些年

在ES6（ECMAScript 2015）的众多特性中，Set和Map两种新数据结构的引入，为JavaScript开发者提供了更灵活、高效的数据存储与处理方式。它们弥补了传统数组与对象的局限性，在处理唯一值、复杂键值对场景时展现出独特优势。 今天我将从概念、特性、用法到实际应用，全面解析一下Set与Map。 Set：无重复值的集合Set是一种无序的集合，其核心特性是成员唯一——不会存储重复的值。这一特性使其在需要去重、判断存在性等场景中大放异彩。 基本特性与创建方式 创建Set：通过new Set()构造函数创建，可接收一个可迭代对象（如数组、字符串）作为初始数据。 核心属性：size用于获取集合中成员的数量（类似数组的length）。 12345678910// 空Setconst emptySet = new Set();// 从数组创建（自动去重）const numSet = new Set([1, 2, 2, 3]); console.log(numSet.size); // 输出：3（重复的2被移除）// 从字符串创建（字符串是可迭代对象）const strSet =...

以前写 JavaScript 函数，真的有不少麻烦事：参数默认值得手动判断、处理多个参数要靠 arguments 瞎折腾、this 指向还老让人晕头转向。ES6 算是把这些痛点都补上了，给函数加了好多实用扩展，写代码又快又不容易踩坑。下面用大白话+简单例子，把这些功能讲明白，新手也能一看就会～ 参数默认值：不用再写 “a || 1” 啦以前想给函数参数设默认值，得在函数里写一堆判断，又麻烦又容易出问题。ES6 直接允许在参数列表里写默认值，省事多了。 核心特点：要是没传参数，或者传了个 undefined，就自动用默认值。 对比示例：123456789101112131415// ES5 写法：得手动判断参数在不在function fn1(a, b) { a = a || 1; // 这里有个坑啊——要是你传个 a=0，它也会被改成 1 b = b === undefined ? 2 : b; return a + b;}// ES6 写法：直接在参数里设默认值，多直观function fn2(a = 1, b = 2) { return ...

引言ES6（ECMAScript 2015）作为 JavaScript 语言发展的里程碑版本，对原生Object进行了全方位的升级优化。这些扩展不仅简化了对象的创建与操作语法，还补充了此前缺失的核心功能（如原型操作、属性遍历、深度复制支持等），彻底改变了 JavaScript 开发者的编码习惯。本文将系统拆解 ES6 对象的六大核心扩展特性，结合实战代码示例，让每个特性的应用场景一目了然。 一、对象字面量的语法简化ES6 大幅简化了对象字面量的声明语法，减少冗余代码，提升可读性。 1.1 属性简写当对象属性名与变量名一致时，可省略冒号（:）和属性值，直接简写为属性名： 12345678910// ES5写法const name = "张三";const age = 28;const user = { name: name, age: age};// ES6简写const user = { name, age }; // 等价于ES5写法 1.2 方法简写对象方法声明可省略function关键字和冒号，直接使用方法名...

数组是 JavaScript 处理数据的核心结构，ES6（ECMAScript 2015）对数组的扩展，解决了传统操作的繁琐问题，让数据处理更高效。下面我们来结合实例，梳理 ES6 数组的核心扩展特性与用法。 一、语法层面的突破：扩展运算符扩展运算符（...）是 ES6 中最具代表性的语法糖之一，它将数组或类数组对象展开为独立的元素，彻底改变了数组拷贝、合并、参数传递等常见操作的实现方式。 1. 数组拷贝传统拷贝数组需借助slice()或concat()，ES6 中使用扩展运算符更为简洁直观，且支持深拷贝一维数组： 123456789101112131415// 浅拷贝一维数组const arr1 = [1, 2, 3];const arr2 = [...arr1]; // [1, 2, 3]arr2[0] = 100;console.log(arr1); // [1, 2, 3]（原数组不受影响）// 对比ES5写法const arr3 = arr1.slice();const arr4 = [].concat(arr1); 2. 数组合并无需再依赖concat()的链式调用...

很喜欢华裔哲学家、武术家李小龙先生的一句话：“清空你的杯子，方能再行注满。” 这句话用杯子比喻人的思想与知识 —— 当杯子被装满时，便再也容不下新的事物；唯有先将其倒空，才能持续注入新的知识，实现自我迭代与进步。​ 那些陈旧的知识、自认为有用的经验，以及曾经屡试不爽的方法，都是杯子里的 “水”。它们像一层厚厚的茧，既为我们提供了保护，也成了束缚成长的枷锁。​ “切图仔” 真的没有 “茧” 吗？这时候或许有人会问：“什么杯子、什么水的，和我一个切图仔又有什么关系？我天天写页面，从没见过什么‘茧’啊？”​ 并非没有茧，只是我们自己未曾察觉罢了。​ 开发者的 “螺丝困境”现在的互联网公司，岗位分工能细致到什么程度？细致到使用 Vue 和 React 两个框架开发，都要分成两个独立团队 —— 一个专职写 Vue，一个专职写 React。这对公司的管理与开发效率来说是好事，但对开发者的职业发展而言，未必如此。​ 要知道，一颗螺丝即便打磨得再光亮，终究只是颗螺丝，只能固定在专属的位置上。而这些 “螺丝” 之所以不自知，不过是仗着自己对 Vue 或 Reac 路径依赖有个概念大家或许都听说过 ...

程序员的职业路不算长，可不少人早早就遇到了 “天花板”：想提升没方向，想突破没抓手，这就是让人头疼的 “瓶颈期”。是什么让我们陷入这种困境？又该怎么走出来？咱们一点点说清楚。 摆烂心态在程序员不算长的职业生涯里，真正能实现能力跃升的黄金期，可能也就那么几年。但仅凭这几年积累的经验，在大厂“搬几年砖”解决户口问题，通常难度不大。 从入职一家公司到从“新人”熬成“老油条”，快则半年到一年，慢则两年。为什么不会更久？试想，要是两年都没给你涨工资，你还会在领导面前刻意扮演“奋斗逼”吗？ 于是，很多人就此进入“摆烂模式”。佛系的工作态度，自然没法带来个人能力和技术的提升——摆烂心态，正是造成个人能力瓶颈的一大关键原因。 基础不牢，地动山摇“这个世界就是个草台班子”，这句话你永远可以信。那些看似厉害的软件，说不定都是月薪几千块的外包（作者自己也曾是其中一员）写的；你可能想不到，一个简单的功能，会被写成十几个 if else 判断，或是三四层嵌套的 for 循环。 上班的本质是挣钱糊口，不是为了靠技术“装X”——反正最后把东西做出来不就行了？大多数人抱着这样的想法，其实没什么错。 可要是自己技...

做 Web 开发有些年头了，目前头发还算茂密，只是人已不再少年。​ 当年上班摸鱼都有负罪感的 “小油条”，如今也成了佛系的 “老油条”。​ 相似的业务代码写得越多，那种难以压抑的枯燥感就越强烈 —— 写这坨代码有什么用？像极了一个渣男，经历过一次次短暂的感情后，最终丢掉了最初初见佳人时的心动。​ 今天想简单聊聊个人能力提升那点事，以及自己是如何从 “小油条” 走到 “老油条” 这条路上的。​ 能力提升的两个关键期对于靠互联网开发谋生的程序员来说，我觉得有两个时期是个人能力提升的关键期。​ 初遇编程的 “热恋期”第一个关键期，自然是刚接触编程那会儿。对新事物的好奇，还有靠自己编程实现功能的喜悦，像磁石一样深深地吸引着你。 想起自己刚开始做 Web 开发时，常常因为一些问题折腾到凌晨三四点。分析问题、上网查解决方案、修改验证，一遍又一遍。没有因一次次失败而沮丧，只有对一次次接近成功的欣喜。现在回想起来，都忍不住夸自己一句 “好小子”。​ 独挑项目的 “破茧期”第二个关键期，是需要独自负责一个项目开发的时候。2021 年去北京出差时，当时 Web 开发还处于 “炼气期” 的我，直接被甲...

每个开发者大概都有个小梦想——做一款属于自己的软件，被很多人用，要是还能赚点钱就更好了。可现实是，不少好想法哪怕做成了产品，最后也难免中途夭折。原因五花八门，运营恰恰是很多开发者的短板；更现实的是“收益”问题——纯靠“爱发电”的项目能走多远，其实谁也说不准。 我的小程序《豆豆证照工坊》上线半个多月后，我也遇上了这个难题。 上周微信团队发消息说，我的云环境欠费了。一开始我以为这东西是免费的，后来才搞明白：小程序上线前，云环境对开发者是免费的；可一旦正式上线，就得开始付费了。 登录后台一看，好家伙——两周的瑞幸咖啡钱直接没了，还没算那个每月19.9元的“穷鬼套餐”（基础版）。这哪儿是“爱发电”啊，分明是拿我的咖啡钱在发电。这下我不得不认真想了：软件得有收益，至少得能覆盖基础支出吧？ 纠结这事儿的时候，心里其实挺矛盾的。一方面，总希望自己花时间琢磨出来的产品，能被更多人喜欢、用上，还能帮到大家；可另一方面，“得靠收益支撑软件运行”的现实又摆在哪儿——每一次接口调用、图片处理、数据存储，都在消耗资源，总有人得为这些买单。 纠结了好一阵，最后还是选了“要钱不要脸”——开始考虑收费。 不过以...

最近后台收到好多朋友的留言，说刷到了我之前写的那篇关于证照制作小程序的文章（传送门），还跟着体验了小程序。 说实话，看到文章突然 “火” 起来的时候，我第一反应是惊讶，紧接着就是满满的感动 —— 原来认真分享的东西，真的能被这么多人看见和需要。 最意外的：被 “戳中” 的共鸣感一开始写这篇文章，只是想记录下自己用小程序拍证件照的惊喜体验。毕竟谁没经历过 “为了一张一寸照，请假跑照相馆，排队 1 小时、拍照 5 分钟，最后拿到的照片还不像自己” 的糟心时刻呢？ 没想到文章发出去后，评论区彻底 “炸” 了 —— 有朋友说 “我去, 好用啊 白花了25去照相馆换底色”，也有用户在小程序后台留言说“很好用，给老人办理证件的时候很方便”。看着这些留言，我突然明白：这篇文章能火，不是我写得有多好，而是它刚好戳中了大家对 “便捷生活工具” 的需求。原来我们都在期待：生活里那些琐碎的小事，能少一点麻烦，多一点省心。 最实在的：小程序被 “看见” 的喜悦文章爆火后，最直接的变化就是小程序的用户量涨得特别快。后台数据显示，文章发完的第二天，就涌入了将近200的用户，其中绝大多数都是来自咱们园子(博客...

在 JavaScript 的世界里，原型和原型链是绕不开的核心概念，它们构建了 JS 独特的继承机制，也让许多开发者既好奇又头疼。今天我们就从几个关键角度，一起揭开它们的神秘面纱。 基于类与基于原型：两种不同的编程范式在传统的面向对象编程语言中，比如 Java、C++，基于类（Class-based） 是主流的编程思想。在这种范式里，类就像是一个模具，它定义了对象所具有的属性和方法，而对象则是类的实例。我们必须先定义好类，然后通过new关键字来创建该类的对象，对象之间的关系是通过类的继承来确立的。 而 JavaScript 则不同，它采用的是基于原型（Prototype-based） 的编程范式。在这种模式下，并没有严格意义上的类的概念（虽然 ES6 引入了class语法，但这只是语法糖，底层依然是基于原型实现的）。对象可以直接从其他对象继承属性和方法，我们可以把原型看作是一个模板对象，新创建的对象会以这个模板为基础，共享它的属性和方法。 举个简单的例子，在基于类的编程中，我们先定义一个 “动物” 类，规定动物有 “名字” 属性和 “移动” 方法，然后 “猫” 类继承 “动物” ...