friend_ship的博客

本文介绍了位运算在前端权限管理中的高效应用。通过定义基于2的幂次方的权限枚举，利用位运算的与、或、异或等操作实现权限的添加、移除和验证。在Vue3框架中，结合Pinia进行全局权限状态管理，并实现了自定义指令和组件来控制元素权限。这种方案具有高性能、低内存占用和良好扩展性，一个32位整数可表示32种权限状态，适合复杂的细粒度权限控制场景。

递归是函数自己调用自己并设置终止条件的编程技巧。前端开发中常用于处理树形结构（如菜单导航）、深拷贝对象等场景。递归实现需要满足两个关键条件：必须设置终止条件防止无限循环，以及每次调用要缩小问题规模。典型应用包括遍历树形数据、反转二叉树、实现深拷贝等。通过合理运用递归，可以简洁高效地解决嵌套结构问题，但需注意控制递归深度以避免性能问题。递归就像俄罗斯套娃，一层层处理直到满足终止条件。

金额字段要求只能输入两位且直接进行截断，该需求涉及JavaScript数字精度问题。

Map的特点及使用场景；Map 和 Object 有什么区别？哪些情况下 Object 性能优于 Map？

内部函数有权利访问外部作用域的变量outerVal，而外部函数的变量已经被内部函数绑定。

Number、String、Boolean、Undefined、Null、BigInt和Symbol。引用类型（也被称为对象类型）包括Object、Array、Function，以及更复杂的用户定义类型。3.instanceof 是一个运算符，帮助我们确定一个对象是否“属于”某个类或者构造函数。2.typeof是一个操作符，是语言的一个内置特性：用来判断基本类型。1.基本类型与引用类型。

RxJS的合并操作符，concat，merge，zip三个操作符。

this的指向大致可以分为以下4种：作为对象的方法调用。作为普通函数调用。构造器调用。Function.prototype.call 或 Function.prototype.apply调用。

RxJS的运行就是Observable和Observer之间的互动游戏。 Observable就是“可以被观察的对象”，即“可被观察者”，而Observer就是‘观察者’，连接两者的桥梁就是Observable对象的函数subscribe。

JavaScript不算一个纯粹意义上的函数式编程语言，但是JavaScript中的函数有第一公民的身份，因为函数本身就是一个对象，可以被赋值给一个变量，可以作为参数传递，由此可以很方便地应用函数式编程的许多思想。RxJS兼具函数式和响应式两种编程方式的特点

ECMAScript6新增了对象解构语法，可以在一条语句中使用嵌套数据实现一个或多个赋值操作。简单地说，对象解构就是使用与对象匹配的结构来实现对象属性赋值。

数据结构——栈（Stack）

postcss与postcss-pxtorem将px转为rem的使用

JavaScript通过队列和双端队列实现击鼓传花游戏

数组浅复制的实现方式

JavaScript位运算会将数值转换为32位有符号整型再计算。常用位运算符包括：与(&)同1为1；或(|)有1为1；非(~)取反；异或(^)不同为1；左移(<<)右补0；右移(>>)左补0。以5和1为例：5&1=1，5|1=5，~5=-6，5^1=4，5<<1=10，5>>1=2。非运算规律为~N=-(N+1)。位运算需注意符号位处理。

在package.json文件中经常会见到类似^0.1.0，~0.1.0，0.1.0和>=之类的限定符的版本号。

递归与尾递归的对比与原理

事件节流与防抖，及节流防抖的结合

首先，条件判断到底是该用if-else还是switch，似乎是所有编程语言都存在的讨论。// if语句：if ( val == 0) { // 对于0的相关处理} else if(val == 1) { // 对于1的相关处理} else if( val == 2) { // 对于2的相关处理} else { // 对于其他情况的相关处理}// switch语句：switch(val) { case 0: // 对于0的相关

文件格式 MIME文件类型 docx application/vnd.openxmlformats-officedocument.wordprocessingml.document doc application/msword xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

场景：当数组数据中status状态类型较多时，只需要其中某几个状态，需要通过状态值返回仅需要的数据时。如：status：状态值为2，4，6是需要进行展示的示例代码如下：const showData = [2,4,6]; // 状态值需要进行展示/*** res 为返回的原始数据* showData.includes(item.status) 返回需要进行展示数据；如被过滤掉的数据较少时，可以采用取反操作*/const modalData = res.filter(item =>

示例代码如下：const num = "2,3,4";const numArr = num ? num.split(',').map(t=> +t) : []当num为""时('').split(',').map(t=> +t); // [0]**当num为数字字符串时，一定要判断是否为空

通常情况下，我们拿到的字符串数据为json格式时,需要按要求进行转换，示例代码如下：const obj = "{\"firstStr\":\"我是第一个字符串\",\"secondStr\":\"我是第二个字符串\"}"Object.values(JSON.parse(obj) || '{}').join(";")// "我是第一个字符串;我是第二个字符串"具体执行过程：...

当数组需要转换为字符串时，两个方法都可以。第一种：toString() 方法可把数组转换为字符串，并返回结果。语法：arrayObject.toString()说明：当数组用于字符串环境时，js会调用这个方法将数组自从转换为字符串。但是在某些情况下，需要显式的调用该方法。 let arr = [1, 2, 3, 4] console.log(arr.toString()) // 1,2,3,4第二种： join()方法用于把数组中的所有元素放入一个字符串。元素通过指定分隔符进行分割

以一个三维数组[1, 2, [3, 4, [5, 6, 7]]]为例，实现扁平化：第一种方式：递归let arr = [1, 2, [3, 4, [5, 6, 7]]]function flattern(arr) { var res = []; arr.map(item => { if (Array.isArray(item)) { res = res.concat(flattern(item)) } else {

在js中字符串截取常用的三个函数：第一个 substring() 方法用于提取字符串介于两个指定下标之间的字符。语法： stringObjec.substring(start, stop)参数介绍 参数 描述 start 必需。一个非负的整数，表示截取字符串的开始位置。 stop 可选。一个非负的整数，表示截取到某个字符串的前一个字符；如果省略该参数，表示截取到字符串结尾。 let str = "hello world";co...

JS中，数据类型分为基本数据类型和引用数据类型，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用来说，它在栈内存中仅仅存储来一个引用，而真正的数据存储在堆内存中。一、基本数据类型var a = 1;var b = a;b = 3;console.log(a); //1console.log(b); // 3可以发现对于基本数据类型，我们将一个基本类型的值赋予a变量，接着将a的值赋予变量b；然后我们修改b，可以看到b被修改了，而a的值没有被修改，两个变量都使用的是独立数据。

1.setTimeout 中的thislet timeout = setTimeout(function(){ console.log(this); // window对象})let timeout = setTimeout(() => { console.log(this); // window对象})2.普通函数中的thisfunction Demo() { console.log(this) // window对象}Demo()//

with语句被用于在访问一个对象的属性或方法时避免重复使用指定对象引用。通过下面的js代码，展示说明：var date_time = new Date();with(date_time){ let a = getMonth() + 1; console.log(getYear() + '年' + a + '月' + getDate() + '日')}下面的代码是不使用with的写法：var date_time = new Date();let a = date_ti

一、未声明/意外的全局变量let a = 'ceshi';function test() { b = 'aaa'; // b成为一个全局变量，不会被回收} test()解决方法： 在js开头添加 'use strict';二、遗忘的定时器(setTimeout/setInterval)let someData = getData()setInteval(function() { let node = document.getElementById('node'

分析下面代码的执行顺序：function sleep(duration) { return new Promise(function(resolve, reject) { console.log('222') setTimeout(resolve, duration) })}console.log('111')sleep(2000).then(() => console.log('333'))这是一段非常常用的封装方法。分析代码执行

对async/await的理解：async/await的运行时基础是Promise，async函数必定返回Promise，我们把所有返回Promise的函数都可以认为是异步函数。async函数是一种特殊语法，特征是function函数之前加上async关键字，这就定义了一个async函数，我们可以在其中使用await来等待一个Promise返回结果。下面是一个红绿灯效果为例的代码，要求圆形div按照绿色3秒，黄色1秒，红色2秒循环改变背景色<!DOCTYPE html>&lt

定义：提供一个不同的接口，充当中间转换功能。作用：解决两个对象间的接口不兼容的问题。使用适配器模式后，原本由于接口不兼容不能工作的两个对象可以一起工作。生活的例子：iPhone7之后的耳机接口从3.5mm圆孔接口更改成为了苹果专属的接口。那么以前的圆孔耳机就需要一个转换器（适配器），才能在新买的iPhone上听歌儿。前端开发框架 vue computed属性，ES6类提供一个新的满足需求的方法，都是是适配器模式的实现场景。vue computed 属性，适配器模式实现方式：<!D

数组转变为字符串拼接，如下：let arr = ['aaa','bbb'];let str = ' ';if(typeof(arr) === 'object') { str = arr.join('/')}字符串转变为数组,如下：let str = 'aaa,bbb';let arr = [];arr = str.split(',')

port正则表达式：/^(([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))$/vue form表单对port端口号验证，代码如下：<template> <div> <el-form v-model="form" :rules="rules" ref="form"> <el-form-item label="端口号" prop="port">

IP正则表达式：/^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/vue form表单，代码如下：<template> <div> <el-form v-model="form" :rules="rules" ref="form"> <el-form-item label="IP地址" prop=".

let arr = []; try { arr.forEach(item => { if(item=='') { foreach.break = new Error("StopIteration"); } }) } catch (e) { if (e...

获取今天及以前的日期：return time.getTime() > Date.now() - 8.64e6;获取今天之后的日期(不能获取今天的)：return time.getTime() <Date.now() - 8.64e6;获取今天及以后的日期：return time.getTime() < Date.now() - 8.64e7;获取今天之前...

存储字符串：sessionStorage.setItem('key', value)获取字符串：sessionStorage.getItem('key')存储对象： user为用户对象let obj = JSON.stringfy(user);sessionStorage.setItem('user', [obj])获取对象中的参数：如：idlet id = JSON.pa...