高先生的猫

在项目开发中需要js实现千位分隔符来分割一个整数，比如我想将数字 1234567 显示为“1,234,567”。我该怎么实现呢？方法一、利用循环实现思路是将数字转换为字符数组，再循环整个数组， 每三位添加一个分隔逗号，最后再合并成字符串。function numberWithCommas(x) { x = x.toString(); var pattern = /(-?\d+)(\d{3})/; while (pattern.test(x)) x = x

IOC/DI谈到依赖注入，必须先理解 IOC 与 DI。IOC，全称 Inversion Of Control，控制反转是面向对象编程的一种设计思想，主要用来降低代码之间的耦合度。 DI，全称 Dependency Injection，依赖注入是 IOC 的具体实现。是指对象通过外部的注入，避免对象内部自身实现外部依赖的实例化过程。IOC 控制反转的设计模式可以大幅度地降低了程序的耦合性。而 装饰器在 VSCode 的控制反转设计模式里，其主要作用是实现 DI 依赖注入的功能和精简部分重复的写法

一般的方法此处也不列举了，还是有很多的，如双层循环判断是否相等，或新建数组比较再push等等，需要注意的是，使用splice方法移除元素时，有可能会导致数组塌陷问题，需要处理一下本文中介绍了多种数组去重的方法，使用了较多的高阶方法及API，并给出相应解释及语法，还有其他多种组合调用方式，原理逻辑其实都差不多，其中for循环可以与forEach方法相互转换，因此此处便不再一一列举，大家如果有更好的算法，可以留言给我，虚心请教！！给定一个数组 [1,2,2,4,null,null,'3','abc',3,

第 1 - 10 题第 1 题：（滴滴、饿了么）写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？解析：第 1 题第 2 题：['1', '2', '3'].map(parseInt) what & why ?解析：第 2 题第 3 题：（挖财）什么是防抖和节流？有什么区别？如何实现？解析：第 3 题第 4 题：介绍下 Set、Map、WeakSet 和 WeakMap 的区别？解析：第 4 题第 5 题：介绍...

这里列举一下数组去重的方法这里我们先随机生成一个10000项的数组，通过不同方法的对数组进行去重，来比较一下速度。首先生成数组function product(){ var arr=[] for(var i=0;i<10000;i++){ var a=randomNum() arr.push(a) } return arr } function ra

一、null是一个特殊值，但我们常常误解它，将它和undefined搞混。在下列场景中应该使用null。1.用来初始化一个变量，这个变量可能赋值为一个对象。2.用来和一个已经初始化的变量比较，这个变量可以是也可以不是一个对象。3.当函数的参数期望是对象时，用作参数的传入。4.当函数的返回值期望是对象时，用作返回值传出。还有以下一些场景不应当使用null1.不要使用null来检测是否传入了某个参数。2.不要用null来检测一个未初始化的变量。这里有一些示例代码：二、und.

有4种方式可以在html中引入css。分别为：内联方式、嵌入方式、链接方式、导入方式，其中链接方式使用link引入，导入方式使用import引入。css中link和import的区别：两者都是外部引用CSS的方式，但是存在一定的区别：区别1：link是Xhtml标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。区别3：link是XHT...

防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟//防抖debounce代码：function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { // 每当用户输入的时候把前一

刷题是我们提高自己技术的一种好方法。下面的问题很有挑战性和“指导性”。如果你知道该怎样回答，那意味着自己的水平很好，但是如果你发现自己答错了，并能够搞清楚为什么错，我认为那会更好！1. 数组排序比较看以下数组，在各种排序操作后都下输出什么？const arr1 = ['a', 'b', 'c'];const arr2 = ['b', 'c', 'a'];console.log( arr1.sort() === arr1, arr2.sort() == arr2, arr.

编码标准可以帮助以下方面：保持代码一致 易于阅读和理解 易于维护下面的编码标准是我对上述几点有帮助的看法。1. 比较时使用 === 代替 ==这很重要，因为JavaScript是一种动态语言，因此使用==可能会给您带来意想不到的结果，因为它允许类型不同。Fail：if(val==2)Pass：if(val===2)2. 永远不要使用 var，使用 let 来代替使用 let 将有助于避免 JavaScript 中各种 var 引起的作用域问题。F...

if 判断的优化JavaScript条件语句在我们平时的开发中是不可避免要用到的，但是很多时候我们的代码写的并不好，一连串的if-else或者多重嵌套判断都会使得代码很臃肿，下面举例进行优化。需求：现在有 4 个产品，分别是手机、电脑、电视机、游戏机，当然每个产品显示的价格不一样。1、最简单的方法：if 判断let commodity = { phone: '手机', computer: '电脑', television: '电视', gameBoy: '游戏机',...

一、前言今天上掘金查看热门文章，发现一篇好文 ★前端 100 问：能搞懂 80% 的请把简历给我 ★ ，此文包含100个前端面试问题，仔细阅读完所有题目后，顿感身中数刀无法呼吸，留下了没有技术的泪水，只好回炉重塑 ~文章第16题：谈谈你对TCP三次握手和四次挥手的理解？ 这是前端面试频率特别高的一个题目，接下来我们学习一下TCP的三次握手和四次挥手二、为什么会有TCP/IP协议计算机使用者意识到，计算机只是单兵作战并不会发挥太大的作用。只有把它们联合起来，电脑才会发挥出它最大的潜力。于是人们

如果您符合高级开发人员的资格，其工作涉及JavaScript，那么在编码面试中很有可能会被问到棘手的问题。遵循这个建议:“熟能生巧”。深入有规律地学习JavaScript将提高您的编码能力，并且可以提高您的面试技巧。在这篇文章中，你会发现7个乍一看很简单但很棘手的JavaScript面试问题。虽然一开始这些问题看起来是随意的，但是它们试图与JavaScript的重要概念挂钩。所以你最好在下次面试前练习一下！1. 意外全局变量Question以下代码段中用于运算typeof a..

无论你是React、Angular、Vue.js，还是原生JavaScript开发者，你的代码都有可能成为黑客眼中的猎物。作为一个前端开发者，我们可能更加关注性能、SEO、UI/UX，往往会忽视安全问题。当你了解了大型框架是如何让你对xss攻击保持开放态度时，也许你会感觉到很意外。例如，React中的dangerouslySetInnerHTML或者Angular中的bypassSecurityTrust都是一些高危操作。我们需要记住，就安全而言，前端现在和后端、DevOps一样承担着相同的职责

基本类型值有：undefined，NUll，Boolean，Number和String，这些类型分别在内存中占有固定的大小空间，他们的值保存在栈空间，我们通过按值来访问的。（1）值类型：数值、布尔值、null、undefined。（2）引用类型：对象、数组、函数。如果赋值的是引用类型的值，则必须在堆内存中为这个值分配空间。由于这种值的大小不固定（对象有很多属性和方法），因此不能把他们保存到栈内存中。但内存地址大小是固定的，因此可以将内存地址保存在栈内存中。<script type="t

手机端页面的做法：媒体查询media<style>/* 注意：400px后面不要有 “ ; ” */ @media (max-width: 400px){ /* 0 ~400 */ body{ background: red; } }</style>说明：如果宽度满足0~400px之间，body就会变红。PS：media可写多个。效果.gif 两者都要满足 @media ( 条件1 ) and

1.使用高性能 DNSCDN 服务本身并不具备域名解析功能，而是依托于 DNS 智能解析功能，由 DNS 根据用户所在地、所用线路进行智能分配最合适的 CDN 服务节点，然后把缓存在该服务节点的静态缓存内容返回给用户。如果域名转换为IP这一过程可用性低且延迟高，那么肯定会对 CDN 性能产生不良影响。另外，请确保在DNS记录上使用较高的TTL（生存时间），以便解析器可以长时间缓存记录。2.将源点移到CDN附近保持CDN与源之间的等待时间短暂，是CDN应对缓...

函数柯里化详解在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。经典面试题:// 实现一个add方法，使计算结果能够满足如下预期：add(1)(2)(3) = 6;add(1, 2, 3)(.

大多数计算机语言，有且仅有一个表示“无”的值，比如：C 语言的 NULL，Java 语言的 null，Python 语言的 None，Ruby 语言的 nil。但是在 JavaScript 中却同时存在undefined和null，这主要是由于历史原因，感兴趣的可以查一下。二者的主要用法区别如下：undefined变量被声明了，但没有赋值时，就等于undefined调用函数时，应该提供的参数没有提供，该参数等于undefined对象没有赋值的属性，该属性的值为undef...

应用于被拖拽元素的事件（起飞的战机）ondrag 应用于拖拽元素，整个拖拽过程都会调用--持续触发 ondragstart 应用于拖拽元素，当拖拽开始时调用 ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用 ondragend 应用于拖拽元素，当拖拽结束时调用应用于目标元素的事件（战机降落的机场）ondragenter 应用于目标元素，当拖拽元素进入时调用 ondragover 应用于目标元素，当停留在目标元素上时调用 --持续触发 ondrop 应用于目标元素，当在目标

前言对于互联网产品来说，第一印象就是应用的启动速度。虽然启动足够快时用户不会有很大的感知，但是如果慢就会被发现就会被挑战，总结来说，快就是应该的。而应用的启动速度优化，又可以分成首次启动速度优化和二次启动速度优化。对于不同的类型，对应的优化方案也是截然不同的。要如何确定优化方向以及优先级呢，这就要从具体的业务场景出发。业务场景但凡不谈业务场景就直接谈优化都是不够专业的。本次优化实践主要是依托在微保的车险业务。众所周知，车险一般都是一年期的保险。因此车险用户的访问频次非常低，一年一次。

基本数据类型 number string boolean null undefined Symbol Symbol是es6新增的基本数据类型，可以用来表示唯一性，使用时候不需要new，直接声明即可let a = Symbol()即可，由于声明的变量具有唯一性，所以Symbol()里面可以传入对参数的描述：let a = Symbol('this is a') let sbl = Symbol() let sbl2 = Symbol()

你可能不知道的5个setTimeout冷知识作为一名合格的程序员，想必大家对 setTimeout 并不陌生。它就是一个定时器，可以指定一个函数在多少毫秒后执行；它会返回一个定时器的编号，可以通过 clearTimeout 手动清除这个定时器。在这里我不会重复介绍 setTimeout 是一个宏任务，是 JavaScript 执行异步函数的方法，也不会用它来实现一个符合 Promises/A+ 规范的 Promise。因为这些都太基础、太简单了！今天我要介绍的可能是你还不知道的setTimeout.

<div :style="imgWD(item.crown)" class="img-detail"> <image resize='stretch' class="itemPhoto" :src="imgUrl + item.photoName"></image></div>computed:{ imgWD(o){ return function(o){ return { widt.

dispatch: 含有异步操作存储：this.$store.dispatch('initUserInfo',friend);取值：this.$store.getters.userInfo;commit:同步操作存储：this.$store.commit('initUserInfo',friend);取值：this.$store.state.userInfo;

这两天去面试的两个小伙伴都遇到了一个问题，面试官问到你用jQuery的时候有没有用过target和currentTarget？他们的区别是什么？他们都是一脸懵，平时练习也没有用过currentTarget啊？其实currentTarget这个属性很是鸡肋，其实我们平时也用不到，下面我们通过两个例子说明平时我们为什么用不到：举个例子： <ul> <li>按钮1</li> <li>按钮2</li> <li&g

今天告诉大家一个好用的编辑器Markdown，他是一种纯文本格式的标记语言。通过简单的标记语法，它可以使普通文本内容具有一定的格式。今后老大让你写文档就可以用它，下面就是一些编写格式：一、标题标题其实和HTML中的h系列很像，想要设置为标题的文字前面加#来表示一个#是一级标题，二个#是二级标题，以此类推。支持六级标题。注：标准语法一般在#后跟个空格再写文字，示例：# 这是一级标题## 这是二级标题### 这是三级标题#### 这是四级标题##### 这是五级标题#####

一、mysql常用语法1、创建数据库如果需要设置排序规则需要在后面加上DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci用于设置数据库默认utf8_general_ci的排列规则`create database dbName2、建表建表首先确定主键，字段个数create table tableName(字段 int primary key,字段 数据类型)3、增（insert）插入数据，执行该语句最常出错的有 1、字段和值的个

刚学习前端的同学，在学到++运算符的时候，都是一脸的懵var k = 10;console.log(k++ + ++k + k++) //34var i = 10;console.log(++i + i++ + ++i) //35console.log(i++ + ++i + i++) //43way???为什么？为什么？为什么？下面我们一步一步的来看：1、 var i = 10;2 、i++; //等价于i=i+13 、console.log(i); //11++可以与输出

说起js中的with关键字，很多小伙伴们的第一印象可能就是with关键字的作用在于改变作用域，然后最关键的一点是不推荐使用with关键字。听到不推荐with关键字后，我们很多人都会忽略掉with关键字，认为不要去管它用它就可以了。但是有时候，我们在看一些代码或者面试题的时候，其中会有with关键字的相关问题，很多坑是你没接触过的，所以还是有必要说说with这一个关键字。with的基本用法with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调

问题：为什么js 3>2>1 为false，1<2<3为true？首先，我们需要知道，在js中 0 == false和1 == true是正确的。因此在分析3>2>1时，我们可以将其分为两步，首先是3>2返回是true，也就等价于1。所以1>1结果自然是false了。同理，1<2是true，等价于1，1<3也是true。在可以考虑，3<2<1的情况呢，3<2是false，也就是0，0<1自然就是true了

react和vue有哪些不同，说说你对这两个框架的看法1、React严格上只针对MVC的view层,Vue则是完全的MVVM模式。2、虚拟 DOM不一样 vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而React,每当应用的状态被改变时,全部组件都会重新渲染。3、组件写法不一样 React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件

如何解决Vue 数组/对象更新 视图不更新的情况由于js的限制，Vue 不能检测以上数组的变动，以及对象的添加/删除，很多人会因为像上面这样操作，出现视图没有更新的问题。解决方式:1、this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)this.$set(this.arr, 0, "OBKoro1"); // 改变数组this.$set(this.obj, "c", "OBKoro1"); // 改变对象2、数组原生方法触发视图更新:Vue可以

<div v-if=""></div><div v-show=""></div>v-if 和 v-show 在页面都展示为显示隐藏，但二者有本质的区别。v-if当值为 true时，显示div ，当值为false时，该元素消失，代码也会消失，相当于将代码删除了，当在为true时，页面会重新渲染div;v-show控制的隐藏出现，只是将css属性设为了display：none 或block;v-if有更高的切换消耗，不适合做频繁的切换.

vue编程式的导航跳转传参的方式有哪些？// 命名的路由router.push({ name: 'user', params: { userId: '123' }})// 带查询参数，变成 /register?plan=privaterouter.push({ path: 'register', query: { plan: 'private' }})

vue的路由hash模式 和 history模式 区别1.直观区别：hash模式url带#号，history模式不带#号。2.深层区别：hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，把这个页面分享到第三方的app里，有的app里面url是

computed适用于计算已有的值并必然返回一个值watch更加适用于监听某一个值的变化并做对应的操作

说出至少vue5个常用指令?v-htmlv-textv-forv-showv-ifv-bindv-onv-cloakv-model

vue 为什么采用Virtual DOM？ 创建真实DOM的代价高：真实的 DOM 节点 node 实现的属性很多，而 vnode 仅仅实现一些必要的属性，相比起来，创建一个 vnode 的成本比较低。 触发多次浏览器重绘及回流：使用 vnode ，相当于加了一个缓冲，让一次数据变动所带来的所有 node 变化，先在 vnode 中进行修改，然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改，以减少浏览器的重绘及回流。 虚拟dom由于本质是一个js对象，

JSONP是一种非正式传输协议，允许用户传递一个callback给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。当GET请求从后台页面返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用后台页面中的一个callback函数。实质不同ajax的核心是通过xmlHttpRequest获取非本页内容jsonp的核心是动态添加script标签调用服务器提供的js脚本json.