问答大黄：你知道js里面的forEach吗？小灰：晓得大黄：你知道如何终止forEach吗？小灰：???大黄：看来你并不知道，好了，今天的面试…小灰：==，我自然是知道的。小灰：巴拉巴拉…小灰：只是，需要用到这个操作的，一开始就不应该用forEach，那么，此问题有何实际场景？大黄：…好了，时间不多了，今天的面试就到这里，你回去等通知吧 参考资料面试官：你可以终止 forEach 吗？

百万特效师之炫酷的登录动画-001百万特效师系列，不多说，上效果 效果演示 实际效果地址 使用到的技术栈 React tailwindCSS animejs（也可以手写动画） 源码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250import './LoginAnimate.less'import anime from 'animejs/lib/anime.es.js'import { useRef } from 'react'const LoginAnimate: React.FC = () => { const containerRef = useRef<HTMLDivElement>(null) const animation = (type: number) => { console.log(containerRef.current?.clientWidth) const width = containerRef.current?.clientWidth || 0 // 隐藏登录 显示注册 if (type == 1) { anime({ targets: '.login-container-1 .box-sign-anime1', translateX: { value: width / 4, duration: 1000 }, opacity: { value: 0, delay: 300, duration: 300 }, easing: 'easeInOutQuad' ...

极客时间-从零打造音视频直播系统学习笔记WebRTC 1对1通话WebRTC处理过程 音视频采集我们使用 getUserMedia 方法进行音视频流对象的采集 12var promise = navigator.mediaDevices.getUserMedia(constraints); 其中constraints参数如下： 1234567891011121314const mediaStreamContrains = { video: { frameRate: {min: 20}, width: {min: 640, ideal: 1280}, height: {min: 360, ideal: 720}, aspectRatio: 16/9 }, audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true }};  Api和设备检测123456789101112131415161718192021//判断浏览器是否支持这些 APIif (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) { console.log("enumerateDevices() not supported."); return;}// 枚举 cameras and microphones.navigator.mediaDevices.enumerateDevices().then(function(deviceInfos) { //打印出每一个设备的信息 deviceInfos.forEach(function(deviceInfo) { console.log(deviceInfo.kind + ": " + deviceInfo.label + " id = " + deviceInfo.deviceId); });}).catch(function(err) { console.log(err.name + ": " + err.message);}); 用摄像头给自己拍照并保存首先获取视频流到video标签里面 123456789101112131415161718192021222324252627282930'use strict'//获取HTML页面中的video标签 var videoplay = document.querySelector('video#player');//播放视频流function gotMediaStream(stream ...

源码共读每周一起学源码 第七期 | validate-npm-package-name 检测 npm 包是否符合标准 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136'use strict'// 这个正则用于检验包名 是否是 scoped package namevar scopedPackagePattern = new RegExp('^(?:@([^/]+?)[/])?([^/]+?)$')// 一个第三方库 包含了一些特殊的关键字 字符串数组 例如http fs https等var builtins = require('builtins')// 跟上面这个库类似的功能var blacklist = [ 'node_modules', 'favicon.ico']// 导出一个函数名// name 传入检测的包名var validate = module.exports = function (name) { // 存放警告情况的数组 var warnings = [] // 存放错误情况的数组 var errors = [] // 以下是一系列用于判断包名是否合规的判断 // 前几个判断没通过直接就return出去了 // 不能是null if (name === null) { errors.push('name cannot be null') return done(warnings, errors) } // 不能是undefined if (name === undefined) { errors.push('name cannot be undefined') return done(warnings, errors) } // 必须是字符串 if (typeof name !== 'string') { errors.push('name must be a string') return done(warnings, errors) } // 长度不能为0 if (!name.length) { errors.push('name length must be greater than zero') } // 不能以.开头 if (name.match(/^\./)) { errors.push('name cannot start with a period')  ...

Promise定义(取自MDN) 一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。 简单来说就是Promise内部有三个状态，核心原理就是通过内部状态机利用状态和回调实现了异步功能。 一个Promise必然处于以下三种状态之一: 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。 已兑现（fulfilled）: 意味着操作成功完成。 已拒绝（rejected）: 意味着操作失败。 Promise支持链式调用 1234567891011121314const myPromise = (new Promise(myExecutorFunc)) .then(handleFulfilledA,handleRejectedA) .then(handleFulfilledB,handleRejectedB) .then(handleFulfilledC,handleRejectedC);// 或者，这样可能会更好...const myPromise = (new Promise(myExecutorFunc)) .then(handleFulfilledA) .then(handleFulfilledB) .then(handleFulfilledC) .catch(handleRejectedAny); Generator生成器对象是由一个 generator function 返回的,并且它符合可迭代协议和迭代器协议。 12345678function* gen() { yield 1; yield 2; yield 3;}let g = gen();// "Generator { }" 归属于ES6规范。其最大的作用就是暂停执行，借助于这个特性，就可以将异步写法改为同步写法。只需要yield Promise就可以实现同步写法。 async函数async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例， 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。 123async function name([param[, param[, ... param]]]) { statements } 归属于ES7规范。 其实质是Generator和Promise的语法糖，就是一个可以自行执行的generator 包裹了 一些Promise。 优雅处理async/await错误方法一12345678910111213141516171819202122/** * @param { Promise } 传进去的请求函数 * @param { Object= } errorExt - 拓展错误对象 * @return { Promise } 返回一个Promise */export function to( promise, errorExt) { retu ...

Vue2源码解析

Vue3 + vite2 + TS 实践项目初始化项目创建1234567891011# npm 6.xnpm create vite@latest my-vue-app --template vue# npm 7+, extra double-dash is needed:npm create vite@latest my-vue-app -- --template vue# yarnyarn create vite my-vue-app --template vue# pnpmpnpm create vite my-vue-app -- --template vue --template后面的参数可以添加的以下官方模板：| JavaScript | TypeScript || —— | —— || vanilla | vanilla-ts || vue | vue-ts || react | react-ts || preact | preact-ts || lit | lit-ts || svelte | svelte-ts | 组织结构调整123456789101112131415161718192021222324.├── LICENSE├── README.md├── index.html├── package.json├── public│ └── favicon.ico├── src│ ├── App.vue│ ├── api 请求Api│ ├── assets 资源目录│ ├── components 项目组件│ ├── constants 常量│ ├── env.d.ts 全局声明│ ├── main.ts 入口文件│ ├── pages│ ├── router│ ├── store│ ├── types│ └── utils├── test├── tsconfig.json├── tsconfig.node.json└── vite.config.ts

面试题js 基础问题】var、let、const 区别函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部 let、const 声明的变量、常量拥有块级作用域，var 声明的变量作用域是整个函数体 var 声明的全局变量是全局对象的属性（window 的属性），let 声明的全局变量不是 const 声明的数据类型不能再赋值，但是对象类型数据的属性和方法还是可以修改的。因为 const 指的是那个内存地址，而引用数据类型保存的是指向那个内存地址的指针 let、const 声明不存在提升、var 会提升到作用域顶部 let、const 不可重复声明，重复声明会报错 Object 相关的方法及使用还有属性箭头函数和普通函数的区别 箭头函数语法更简洁，箭头函数是匿名函数。普通函数定义需要 function 关键字。 箭头函数没有自己的 this，它会捕获自己在定义时（注意，是定义时，不是调用时）所处的外层执行环境的 this，并继承这个 this 值(它只会从自己的作用域链的上一层继承 this)。普通函数全局调用时指向 window 或者 global，作为对象的方法调用时指向这个对象。 箭头函数继承而来的 this 指向永远不变。apply、call、bind 无法改变指向但是也不报错。 箭头函数不能做构造函数使用因为它没有自己的 this 值。用 new 调用会报错。VM156:7 Uncaught TypeError: Fun is not a constructor 箭头函数没有自己的 arguments。不过可以用 rest 参数代替 arguments 对象，访问箭头函数的参数列表。rest 参数就是…。 1234let b = (...val) => { console.log(...val)}b(1, 2, 3) 箭头函数没有原型 prototype 箭头函数不能用作 Generator 函数，不能使用 yeild 关键字 Promise 相关Promise 有三种状态：pending(等待)、resolved(完成)、rejected(拒绝)其他 Promise 相关的在 notion js 进阶问题及手写题Vue 问题vue $nextTick 原理React 问题html&css 问题性能问题