Blog
Blog copied to clipboard
mqyqingfeng
冴羽写博客的地方，预计写四个系列：JavaScript深入系列、JavaScript专题系列、ES6系列、React系列。
## 前言 2 月份发布的 Chrome 80 版本中默认屏蔽了第三方的 Cookie，在灰度期间，就导致了阿里系的很多应用都产生了问题，为此还专门成立了小组，推动各 BU 进行改造，目前阿里系基本已经改造完成。所有的前端团队估计都收到过通知，也着实加深了一把大家对于 Cookie 的理解，所以很可能就此出个面试题，而即便不是面试题，当问到 HTTP 相关内容的时候，不妨也扯到这件事情来，一能表明你对前端时事的跟进，二还能借此引申到前端安全方面的内容，为你的面试加分。 所以本文就给大家介绍一下浏览器的 Cookie 以及这个"火热"的 SameSite 属性。 ## HTTP 一般我们都会说 “HTTP 是一个无状态的协议”，不过要注意这里的 HTTP 其实是指 HTTP 1.x，而所谓无状态协议，简单的理解就是即使同一个客户端连续两次发送请求给服务器，服务器也识别不出这是同一个客户端发送的请求，这导致的问题就比如你加了一个商品到购物车中，但因为识别不出是同一个客户端，你刷新下页面就没有了…… ## Cookie...
## 基础用法 ```js let message = `Hello World`; console.log(message); ``` 如果你碰巧要在字符串中使用反撇号，你可以使用反斜杠转义： ```js let message = `Hello \` World`; console.log(message); ``` 值得一提的是，在模板字符串中，空格、缩进、换行都会被保留： ```js let message = ` 1 2 `; console.log(message);...
## 前言 数组去重方法老生常谈，既然是常谈，我也来谈谈。 ## 双层循环 也许我们首先想到的是使用 indexOf 来循环判断一遍，但在这个方法之前，让我们先看看最原始的方法： ```js var array = [1, 1, '1', '1']; function unique(array) { // res用来存储结果 var res = []; for (var i = 0,...
## 前言 最近我发起了[「冴羽答读者问」](https://www.yuque.com/yayu/ask/dzng83)活动，如果你也有想要提问的问题，欢迎留言，我会按照顺序依此回答。 ## 正文 因为有同学让我帮忙写封情书，所以我最近在看朱生豪写给他爱人宋清如的情书，其中有这样一句： > 要是有人问你，你愿意做快乐的猪呢，还是愿意做苦恼的哲学家？你就回答：我愿意做快乐的哲学家，这样可以显出你的聪明。 还有一个提问，当你手上拿着一杯水，接下来你要做什么？ 答案很简单，**做你自己该做的事情，和水没关。** 对于这个提问的回答，其实我也是一样的。“如果有机会，你会选择脱产学习吗？”，脱离现实的题目，也不用进入这个设定进行回答，反正也没有什么参考意义，这个机会真出现的时候，情况往往是复杂的，你之前想的再齐全，真到了选择的时候，你还是可能做出截然不同的选择，最后喊上一句，真香。 在我看来，这个机会，就是我手里的这杯水，我如果不渴，为什么要喝水？该干什么你就干什么。 我相信很多同学面对这个问题，都会选择脱产学习。如果是一个穿越的故事背景，比如你回到了你大一刚入学的时候，说真的，都已经预知未来了，我还学习干什么，无限种可能，光是想想，都能写成万字爽文。如果是父母支持，读研深造的故事背景，那我不一定愿意，尽管大学生活让人向往，但我要考试呀，我还是要学习一堆我觉得可能没什么用的东西，然后准备考试，可能还要给导师打工，我不是很想做。我真正想做的是，自由的学习我想学习的内容，然后结束后，一鸣惊人，从此走上人生巅峰之类的。 你看，在脱产这个选择下，我想过的都是爽番的生活。 而站在不选择脱产的角度来看的话，多是出于现实的角度考虑。我也有些朋友天马行空说是要花钱考研，说真的，在互联网行业中，其实学历的影响并不大，从本科提到硕士，收益并不高，主要是图个自由散漫的生活状态、贪恋校园年轻帅气的师兄学长，本质上还是逃避心理。 真想对工作有用，就下班回到家里，充电学习工作上用到的技能，但很不巧，这些技能在大学往往并不教授，还是要靠自学。至于找对象，这个理由我觉得是成立的，你可以因此去脱产学习，我支持。 可是人生真的会有这样的机会，让你能够脱产学习吗？ 大概率是不会主动出现的，但也许我们可以主动创造出来。如果成家了，抛家弃子，一心搞梦想，《月亮与六便士》的翻版。没成家的，工作攒几年积蓄，然后离职过个自由的生活。想学习？想学什么学什么，想运动，办了卡可以天天去。可是我们真的会这么自律吗？ 其实想一想我们过往的寒暑假，有几次是真的好好学习度过的呢？那不就是我们自由生活的缩影吗？也许前几天还能自律，后几天就开始散漫，散漫久了，又开始想学习，就这样反复横跳，很可能也做不出什么。所以才感叹，有些人真的很厉害，为了梦想，拼尽全力。你以为你差的是一个梦想，但你的思想觉悟却可能已经差了一大截。 其实我们人生中还会遇到很多这种两难的选择，是考研还是工作？是学后端还是前端？是接受还是拒绝？是分手还是继续？等等 我认为两难选择中，真正难的并不是问题本身，而是有问题的这个人，当然很多时候，这个人就是我自己。人并不是一个绝对理性的生物，人是很容易被各种情绪压的不能动弹。我们很可能遇到过这种情况，当有好友向我们咨询问题的时候，你发现，不管你给他什么建议，他都能找到很好的理由来解释为什么这个方法不行。 有的时候我觉得这种人就是在作，左右都不行，然后还逼逼赖赖，就在这里不做决定，耽搁生命，让事情越来越糟糕。不过转念一想，我们很多时候不也是这样的吗？ **真正让我们无法做出正确决定的是我们的恐惧。基本上所有的恐惧都是害怕会失去某些东西。** 要突破这种左右为难的困境其实也很简单，那就是遵循内心的声音，还有就是坦然接受两个选择的任何一个，或者两个都不选。这一点之所以重要，是因为处在两难的境地中，你往往会相信你就只有两个选择，再没有第三条路可以选。什么样的选择是最好的，答案就在心中，可我们听不到，是因为恐惧、焦虑、压力等已经扰乱了我们的思想。如果我们愿意两个选择中选择一个，或都不选的话，我们就能得到平静、平息恐惧，并听到自己内心的声音。两难的境地会让人既排斥现有的选择，同时又不肯放弃它们。这也就是让我们陷入困境的原因。 无论做出什么样的选择，有一件事是确定的，那就是跟随着自己的心去做的事，不管造成多大的骚动，都将会为每个人带来好的影响。所以每一次左右为难的处境，你都可以理解为考验你追寻自我的决心。 但还要记得一件事情，那就是：**拖延做决定是最差的决定！** 每个人都害怕受伤，为了避免让自己受伤，也为了避免让他人受伤（当然往往这是个借口），人总是拖到不得不做决定的时候才做决定，最后到了不得不决定的时候，于人于己都是更大的伤害，于是又懊恼过往的时光怎么不早早做出决定，但下次同样的问题出现时又是同样的行为模式，人总是这样不长教训，可笑而又无奈。 有的时候我们即便不断地听到那个内心的声音，我们还是会把它掩盖，用其他事物转移自己的注意力，我们还会寄希望于寻找所谓的真理，希望能够降维解决当下的难题，然后自己就会有做出决定的勇气，怀着这样一种不切实际的幻想投入所谓的行动，虽然在其他方面真的有所长进，实际上也只是不断地缓解自己拖延决定的痛苦而已。 你说有什么解决方法吗？没有。你不张开嘴，说出那句话，你不做出那个小小的行动，一切都是于事无补，一切都不会有大的改变，一切的想法都只是镜花水月。 我们常说人生只有一次，我们常说开心快乐就好，我们希望这样的想法能给自己勇气，人们常以为勇气就是有了它你就不恐惧的东西，但勇气从来都不是无知者无畏，而是当你还未开始就已知道自己会输，可你依然要去做，而且无论如何都要把它坚持到底。引用《存在的勇气》：...
## 先看效果 先来个思考题： ```js // 下面这一句会打印什么呢？ [+[][0] + []][0][1] ``` 我们直接看效果：  如果觉得打印一个字母不过瘾的话，打印一句话呢？ ```js // 注意，在Chrome浏览器中打印 [[][0] + []][0][5]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][8]+[[[] ==...
## 前言 TypeScript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。 本篇整理自 TypeScript Handbook 中 「[More on Functions](https://www.typescriptlang.org/docs/handbook/2/functions.html)」 章节。 本文并不严格按照原文翻译，对部分内容也做了解释补充。 ## 正文 函数是任何应用的基础组成部分，无论它是局部函数（local functions），还是从其他模块导入的函数，亦或是类中的方法。当然，函数也是值 (values)，而且像其他值一样，TypeScript 有很多种方式用来描述，函数可以以怎样的方式被调用。让我们来学习一下如何书写描述函数的类型（types）。 ## 函数类型表达式（Function Type Expressions） 最简单描述一个函数的方式是使用**函数类型表达式（function type expression）。**它的写法有点类似于箭头函数： ```typescript function greeter(fn: (a:...
## 乱序 乱序的意思就是将数组打乱。 嗯，没有了，直接看代码吧。 ## Math.random 一个经常会遇见的写法是使用 Math.random()： ```js var values = [1, 2, 3, 4, 5]; values.sort(function(){ return Math.random() - 0.5; }); console.log(values) ``` `Math.random() - 0.5` 随机得到一个正数、负数或是 0，如果是正数则降序排列，如果是负数则升序排列，如果是...
## 前言 最近我发起了[「冴羽答读者问」](https://www.yuque.com/yayu/ask/dzng83)活动，如果你也有想要提问的问题，欢迎留言，我会按照顺序依此回答。 ## 正文 什么是影响力呢？引用百度百科的解释： > 影响力是用一种别人所乐于接受的方式，改变他人的思想和行动的能力。 而我们想要在工作中打造的“影响力”，其实就是 1. 同事对自己的肯定（思想） 1. 愿意跟着自己一起行动（行动） 哪些东西会帮助打造自己的影响力呢？我认为有两部分：一个是专业能力，一个是个人魅力。 那什么是专业能力呢？引用百度百科的定义： > 专业能力是指人们从事其职业的多种能力的综合 就“前端开发”这个职业而言，其专业能力的体现莫过于： 1. 扎实的技术基础 1. 专业的技术输出 1. 优秀的工作成果 其中，“扎实的技术基础”是后两者的基础，但这“基础”不是说让大家抱着高程、犀牛书啃语言的语法，在我看来，如果你能独立完善的做好工作，其实技术基础就已经具备了。 而专业的技术输出中，写博客是一种，在团队进行分享是一种，日常交流中分享前沿也是一种，无论是哪种，最重要的是保持新知识的输入，以及勇敢发表自己的观点。这些输出都会带来专业度的提高。 而优秀的工作成果，相比其他方式，虽然很慢，但却是最有力证明自己专业能力的东西，毕竟一切都是结果说话。但这工作成果，并不是说你完成了什么，更重要的是，在他人预期之外，你完成了什么。项目成功了，你赋能项目、业务或者其他团队做了什么，项目失败了，你总结复盘，帮助团队其他人不要再犯同样的错误。虽然复盘改变不了结果，但你的态度和行为依然会正向影响很多人。 虽然我们在说，专业能力的体现，应该做到这三点，但并不意味着这些应该是我们的目标。 让我们首先思考下“工作”这件事情，我们通常认为工作就是将时间卖给老板，确实如此，但有的人在卖老板时间的同时，也换了自己能力和经验的增长。我想工作的主要目的应该还是投资自己的未来，挣钱只是其中一个结果。从这个角度再看这三点，我们完全没有必要为了打造影响力而刻意去做这些事情，以投资自己为主要目的，这些事情也只是一个结果而已，而影响力则是这些结果的产物。 以专业的技术输出为例，我们做输出，无论是团队分享还是日常交流，并不应该是为了打造影响力而分享，也不应该是为了帮助同事而分享。以团队分享为例，这种分享对大家的帮助其实有限，主讲人讲的好吗？大家真的认真听了吗？大家认真听完有去拓展学习和实践吗？最终的效果不可控也不可知。当然，团队分享还是有必要的，在我看来，主要是为了维持团队技术氛围以及作为个人展示的平台，当然这个另讲，只是说，分享的目的首先应该是为了帮助自己梳理，其次是帮助他人，写博客也是一样的道理。...
## 类数组对象 所谓的类数组对象: >拥有一个 length 属性和若干索引属性的对象 举个例子： ```js var array = ['name', 'age', 'sex']; var arrayLike = { 0: 'name', 1: 'age', 2: 'sex', length: 3 } ``` 即便如此，为什么叫做类数组对象呢？ 那让我们从读写、获取长度、遍历三个方面看看这两个对象。...
## 前言 TypeScript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。 本篇整理自 TypeScript Handbook 中 「[The Basics](https://www.typescriptlang.org/docs/handbook/2/basic-types.html)」 章节。 本文并不严格按照原文翻译，对部分内容也做了解释补充。 ## 正文 JavaScript 的每个值执行不同的操作时会有不同的行为。这听起来有点抽象，所以让我们举个例子，假设我们有一个名为 `message` 的变量，试想我们可以做哪些操作： ```typescript // Accessing the property 'toLowerCase' // on 'message' and then calling...
Metadata
Owner
Metadata
冴羽写博客的地方，预计写四个系列：JavaScript深入系列、JavaScript专题系列、ES6系列、React系列。