老电影故事的博客

数组是js中最常用到的数据集合，其内置的方法也很多，熟练掌握这些方法，可以有效的提高我们的工作效率，也对我们的代码质量有很大影响。如果还有漏网之鱼，欢迎留言补充哈。一、创建数组1、使用数组字面量方法var arr1 = []; // 创建一个数组var arr2 = [20]; // 创建一个包含1项数据为20的数组var arr3 = ['lily','lucy','Tom']; // 创建一个包含3个字符串的数组2、使用Array构造函数无参构造var arr1 = n

要想更好的理解图片压缩，还是要把FileReader和canvas的一些api弄清楚，这样才会更加容易理解代码的逻辑，希望这篇文章能够帮助到各位大佬。

自ES6起，引入了一套新的ES6 Module规范，在语言标准层面实现了模块功能，而且实现得相当简单，有望成为浏览器和服务器通用的模块解决方案。运行在浏览器端的javaScript由于也缺少类似的规范，在ES6出来之前，前端也实现了一套相同的模块规范（例如：AMD），用来对前端模块进行管理。这是因为ES6模块是在严格模式下执行的，而在严格模式下，全局对象的this值是undefined。在CommonJS和ES6模块系统中，this的指向确实有一些差异，这涉及到模块中代码执行上下文的不同。

此次发布的新方法不仅适用于常规的数组对象。此次公布的新方法正是toSorted、toReversed、toSpliced 和 with 都能复制原始数组、变更副本再返回结果。with 函数所代表的复制方法，等同于使用方括号表示方来更改数组内的一个元素。除了复制之外，sort 函数还会引发一些意想不到的行为，toSorted 也继承了这种特点。· sort() 非破坏性版本：toSorted(compareFn)· reverse() 的非破坏性版本：toReversed()注意：注册的符号不可作为。

是一个现代浏览器提供的 API，用于监听元素与其祖先元素或顶层文档视窗(viewport)交叉的情况，即元素是否进入或离开视窗。它通常用于实现懒加载图片、监听滚动事件、触发动画效果等场景，可以显著提高性能和用户体验。

方法是 JavaScript 中的一个内置方法，用于在浏览器中打开一个新的窗口或标签页。需要注意的是，由于弹出窗口的滥用已经成为了一个安全问题，现代浏览器通常会默认阻止 window.open() 方法的调用，除非是在用户的交互下触发的。因此，在实际的开发中，我们需要谨慎使用这个方法，避免被浏览器误认为是恶意行为。

把webSocket接收到的数据用一个数组存起来，达到一定长度再统一渲染，可根据推送数据的速度适当调解数组长度限制，如果一段时间内改数组长度打不要渲染条件，就用定时器之间渲染。

遇到跨域问题的时候，到底是使用CORS来解决，还是使用代理呢？判断依据不是技术层面，而是你的生产环境。首先要关注的是生产环境里面到底是一种什么样的情况，到底有没有跨域，然后根据生产环境的情况，来决定开发环境到底使用什么样的方案。

【代码】浏览器窗口间的通信。

说实话，这个其实没啥好讲的，要说有复杂度的话，也主要是在后端。实现token无感刷新对于前端来说是一项十分常用的技术，其本质都是为了优化用户体验，当token过期时不需要用户调回登录页重新登录，而是当token失效时，进行拦截，发送刷新token的请求，获取最新的token进行覆盖，让用户感受不到token已过期。

这里就要说到JS构造函数返回值的问题了构造函数本不应该有返回值，实际返回的就是此构造函数的实例化对象js中构造函数可以有返回值，也可以没有，没有事和正常函数一样，返回实例化对象返回值是非引用类型，如基本类型（string, number, boolean, null, undefined）则与无返回值相同返回值是引用类型，则实际返回的是这个引用对象// String(‘foo’) 返回的是string类型，非引用类型，所以不会影响，因为构造函数没有属性，返回一个空对象。

requestAnimateFrame（RAF）动画帧，是一个做动画的API。如果想要一个动画流畅，就需要以60帧/s来更新视图，那么一次视图的更新就是16.67ms。想要达到上述目标，可以通过setTimeout定时器来手动控制频率。RAF可以自动实现60帧/s的更新，并且在页面隐藏在后台时，RAF会暂停动画，而setTimeout依然会执行。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的Websocket是一个持久化的协议。

上面的方法 如果在数组中添加了非数字属性就会出问题。：复制数据、函数入参、class构造函数。：保证原数据的完整性和独立性。

reduce是数组的方法，可以对数组中的每个元素依次执行一个回调函数，从左到右依次累积计算出一个最终的值。其中，callback：累积器，即上一次回调函数执行的返回值。：当前元素的值。index：当前元素的下标。array：原始数组。是可选的，表示累积器的初始值。reduce函数的执行过程如下：1、如果没有提供，则将数组的第一个元素作为累积器的初始值，否则将作为累积器的初始值。2、从数组的第二个元素开始，依次对数组中的每个元素执行回调函数。

decimal.jsdecimal.js是使用二进制来计算的，所以可以更好地实现格化式数学运算，对数字进行高精度处理；使用decimal类型处理数据可以保证数据计算更为精确，还可以节省储存空间。这里的精度是根据有效数字而不是小数位来指定的，并且所有计算都四舍五入到精度（类似于 Python 的十进制模块），而不仅仅是涉及除法的计算。

如图所示，要搞一个这样的表格，列名可以修改，列可拖动排序。

Knuth洗牌(又名Fisher-Yates洗牌)是一种随机洗牌数组元素的算法。

前端的性能瓶颈那就是页面的卡顿，当然这种页面的卡顿包含了多种原因。例如HTTP请求过多导致数据加载变慢，下载的静态文件非常大导致页面加载时间很长，js中一些算法响应的时间过长等。很多前端工程师都花费很多的精力在dom渲染上来优化页面加载。

前端开发中经常需要获取页面还有屏幕的高度和宽度进行计算,此文即介绍如何用 JavaScript 获取这些尺寸。

作为前端开发工程师，你一定用过JSON.stringify，但你知道它的全部秘密吗？基本上，JSON.stringify 将对象转换为 JSON 字符串。同时，JSON.stringify 有如下规则：1、undefined、Function 和 Symbol 不是有效的 JSON 值。如果在转换过程中遇到任何此类值，它们要么被省略（当在对象中找到时），要么更改为 null（当在数组中找到时）。当传入像 JSON.stringify(function() {}) 或 JSON.stringify(und

关于promise、async/await的使用相信很多小伙伴都比较熟悉了，但是提到事件循环机制输出结果类似的题目，你敢说都会？试一试？console . log('D') }) // 最终结果👉: B A C Dconsole . log('D') }) // 最终结果👉: B C D A❓基本一样的代码为什么会出现差别，话不多说👇。

该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。根据其他元素的布局，元素可能无法完全滚动到顶部或底部。页面（容器）可滚动时才有用！

async函数在原型上有个符号，而且是知名符号,值是AsyncFunction。所以只要判断这个函数带不带这个知名符号。先观察普通函数和async函数的区别。

日常开发中，面对各种不同的需求，我们经常会用到以前开发过的一些工具函数，把这些工具函数收集起来，将大大提高我们的开发效率。

其实不仅window.open(“同源页面”)这种方式新开的页面会复制之前的sessionStorage，通过a标签新开的页面同样也会，原理相同，在这就不赘述了。

【代码】判断div是否有滚动条。

当sort()函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。JavaScript 数组经常会包含对象。比较函数的目的是定义另一种排序顺序。

它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。因此，任何有length属性的对象，都可以通过Array.from方法转为数组 和 可遍历的对象（ES6新增的数据结构 Set和Map）数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回 -1。Array.from()还支持第二个参数, 作用为类似于数组的map方法, 用来对每个元素进行处理然后放入返回的数组之中。

向Set加入值时，不会发生类型转换,它类似于精确相等运算符（===），主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。任何值(对象或者原始值) 都可以作为一个键或一个值。Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。Set本身是一个构造函数，用来生成Set数据结构。它类似于数组，但里面的成员是唯一的，不重复的。entries()：返回键值对的遍历器。keys()：返回键名的遍历器。

slice 删除splice 删除for 删除length 删除二、删除第一个元素shift 删除slice 删除splice 删除三、删除数组中某个指定下标的元素splice 删除for 删除注意：不可以使用 delete 方式删除数组中某个元素，此操作会造成稀疏数组，被删除的元素的为位置依然存在为empty，且数组的长度不变不可以使用 forEach 方法比对数组下标值，因为 forEach 在循环的时候是无序的

项目过程中，经常会遇到 JS 数组合并的情况，时常为这个纠结。这里整理一下。

对象的扩展运算符（…对象的第三个属性是一个string类型，nameAlias: ‘name’，映射 this.nameAlias 为 store.state.name的值， 和第一个属性的用法本质是一致的，不过这里映射出的计算属性的名称与 state 的子节点名称不同。对象的第四个属性是一个普通函数，普通函数和箭头函数的不同之处在于，普通函数中的this指向了vue实例，因为可以访问到当前组件的局部状态，比如this.tempcount。于是可以将组将内的计算属性和获取vuex状态的计算属性写在一起了。

【代码】JS对象数组根据对象的多个属性值去重。

不添加 join(‘’) 时，在 li标签中间多了一个逗号，这是因为当大括号中的值不是字符串时，会将其转为字符串，比如一个数组 [1, 2, 3] 就会被转为 1,2,3，逗号就是这样产生的。

我们通常都会去 new 一个Promise，什么东西可以new啊?是不是构造函数可以new， 通过控制台dir一下Promise通过上面的输出，你可以知道promise是一个构造函数Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。Promise对象有以下两个特点：（1）对象的状态不受外界影响。

普通函数： 谁调用，this就指向谁，如果没有调用者，this默认指向window箭头函数(es6)：箭头函数的this是父级作用域的(精解：箭头函数外如果还有一个函数包裹，那么这个this指向的就是外包裹函数。如果箭头函数外没有外包裹函数，那么this就指向window)//window我们直接在控制台打印this，会发现打印出来的是window对象，默认情况下，this指向window对象。

涉及的数据比较多，写一个过滤器，将所有的数据都过滤一下，挂载到全局，不需要每个页面引用了。创建一个js文件，实现数字千位分隔符。在 main.js 文件中引入。