标签 Javascript 下的文章 - 韩小韩博客

2023-08-11

变相跳出forEach循环 {callout color="#ef4d93"}众所周知，forEach循环是无法中途跳出循环的，有点同学说不是可以通过抛出错误跳出循环吗？是的。抛出异常是广为流传的一种方法，结果是我们想要，但是你看代码，哪个正常人会这样写代码？是非forEach不用吗？还是其他的循环关键字不配呢。{/callout}forEach抛出异常跳出循环const list = [1, 2, 3, 4, 5, "a", "b", "c", "d", "e"]; try { list.forEach((itm) => { if (itm === "c") { throw new Error("exit"); } console.log(itm); }); } catch (e) { // console.log(e); }splice变相跳出循环const list = [1, 2, 3, 4, 5, "a", "b", "c", "d", "e"]; Object.assign(list).forEach((itm, idx, arr) => { if (itm == "c") { arr.splice(idx, arr.length - idx); } console.log(itm); });

2023年08月11日
8,206 阅读
0 评论
2 点赞

2023-03-24

手撸call apply bind {callout color="#f0ad4e"}如果自己去实现call apply bind，看上去挺复杂，写起来其实就几行代码因为call和apply一样，只是传参不一样，所以我就只写一个call{/callout}实现call（其实只有2行代码）/* 随便定义一个对象，待会将函数内的this指向指向倒这个对象 */ const obj = { name: '我是需要被绑定改变this指向的对象' } /* 需要改变this指向的函数，没有使用call时，this指向window */ function fn(arg) { console.log('fn---------', this); console.log('fn---------', arg); } /* * * 重写call方法 * target 需要把this改变到哪个目标 * args 传递进来的参数 */ Function.prototype.call = function (target, ...args) { /* 这里的this就指向上面的fn函数 */ console.log(this); /* 随便定义一个变量，用于在目标对象里存fn函数，这里使用symbol更好 */ target['sb250'] = this /* 这样target目标上就有个sb250的属性，并且属性值就是fn函数 */ console.log(target); /* 调用这个sb250，并把参数传入进去就实现this改变了 */ target['sb250'](args) /* 防止给target上多出多余没用的参数，在将sb250删除掉 */ delete target['sb250'] } fn.call(obj, '我是傻逼')实现bind因为bind的调用方式，是返回一个新函数，在调用一次，例如：fn.bind(null)(options)，所以需要用到高阶函数/* 随便定义一个对象，待会将函数内的this指向指向倒这个对象 */ const obj = { name: '我是需要被绑定改变this指向的对象' } /* 需要改变this指向的函数，没有使用call时，this指向window */ function fn(arg) { console.log('fn---------', this); console.log('fn---------', arg); } /* * * 重写call方法 * target 需要把this改变到哪个目标 * args 传递进来的参数 */ Function.prototype.bind = function (target) { target['sb250'] = this /* 这里使用高阶函数接收参数 */ return (...args) => { target['sb250'](args) delete target['sb250'] } } fn.bind(obj)('我是大傻逼！！！')

2023年03月24日
2,817 阅读
4 评论
0 点赞

2023-03-06

class中函数的this指向定义一个基础的类class Person { constructor(name = '杜恒') { this.name = name } speak() { console.log(this); } }将上面的类实例出一个对象p，并调用p的speak方法const p = new Person() p.speak() // Person {name: "杜恒"}{callout color="#f0ad4e"}上面的打印结果显示由类构造出的实例对象，因此this会指向由类构造出的实例对象{/callout}尝试将p实例对象身上的speak方法赋值给另一个变量进行调用const test = p.speak test() // undefined打印undefind，因此上面的方法可以改写成如下const test = function () { "use strict" console.log(this); } test() // undefined{callout color="#ef4db4"}由此可以得出，在class中，定义的方法，class会默认在函数体内开启严格模式，严格控制this的指向{/callout}

2023年03月06日
2,906 阅读
0 评论
1 点赞

2023-01-08

记录部分安卓手机 input type="file"的onchange不能触发问题今天写了一个文件上传，发现在部分安卓手机上触发不了onchange事件，代码如下：<input type="file" id="input" /> <script> // 在部分安卓手机不触发 input.onchange = () => { alert(123) } </script>经过不断测试后发现，在标签上补上accept="image/*"后可解决该问题，修复后的代码如下：<input type="file" accept="image/*" id="input" /> <script> input.onchange = () => { alert(123) } </script>

2023年01月08日
600 阅读
0 评论
0 点赞

2022-12-26

JS压缩图片并保留图片元信息 {callout color="#f0ad4e"}JS实现图片压缩比较简单，但是图片经过压缩后，压缩后的图片的元信息（拍摄时间、设备、地点）等会丢失掉，如果在特殊场景中需要使用这些元信息的话，就会出现问题了，因此需要将未压缩前的图片元信息填充至压缩后的图片中，以下是实现代码{/callout}// 封装一个获取变量的数据类型函数 const getType = (data: unknown): string => { const toStingResult = Object.prototype.toString.call(data); const type = toStingResult.replace(/^\[object (\w+)\]$/, "$1"); return type.toLowerCase(); }; // 封装一个将 Base64 的字符串转换成 Blob 流的函数 const dataURLtoBlob = (dataURL: string): Blob | null => { const dataType = getType(dataURL); if (dataType !== "string") return null; const arr = dataURL.split(","); if (!arr[0] || !arr[1]) return null; const code = window.atob(arr[1]); const mimeExpRes = arr[0].match(/:(.*?);/); if (!mimeExpRes) return null; let len = code.length; const mime = mimeExpRes[1]; if (!mime) return null; const ia = new Uint8Array(len); while (len--) ia[len] = code.charCodeAt(len); return new Blob([ia], { type: mime }); }; // 利用规律编码格式把里面的标记以及值等分割开来，传原图片的 ArrayBuffer 进来 const getSegments = (arrayBuffer: ArrayBuffer): number[][] => { if (!arrayBuffer.byteLength) return []; let head = 0; let length, endPoint, seg; const segments = []; const arr = [].slice.call(new Uint8Array(arrayBuffer), 0); while (1) { if (arr[head] === 0xff && arr[head + 1] === 0xda) break; if (arr[head] === 0xff && arr[head + 1] === 0xd8) { head += 2; } else { length = arr[head + 2] * 256 + arr[head + 3]; endPoint = head + length + 2; seg = arr.slice(head, endPoint); head = endPoint; segments.push(seg); } if (head > arr.length) break; } return segments; }; // 传入上面 getSegments 的返回值，取出EXIF图片元信息 const getEXIF = (segments: number[][]): Array<number> => { if (!segments.length) return []; let seg: Array<number> = []; for (let i = 0; i < segments.length; i++) { const item = segments[i]; if (item[0] === 0xff && item[1] === 0xe1) { seg = seg.concat(item); } } return seg; }; // 将 getEXIF 获取的元信息，插入到压缩后的图片的 Blob 中，传压缩图片后的 Blob 流 const insertEXIF = (blob: Blob, exif: number[]): Promise<Blob> => { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = () => { const arr = [].slice.call(new Uint8Array(fileReader.result as ArrayBuffer), 0); if (arr[2] !== 0xff || arr[3] !== 0xe0) { return reject(new Error("Couldn't find APP0 marker from blob data")); } const length = arr[4] * 256 + arr[5]; const newImage = [0xff, 0xd8].concat(exif, arr.slice(4 + length)); const uint8Array = new Uint8Array(newImage); const newBlob = new Blob([uint8Array], { type: "image/jpeg" }); resolve(newBlob); }; fileReader.readAsArrayBuffer(blob); }); }; // 压缩图片逻辑 const compressImage = (file: File, quality: number): Promise<Blob | null> => { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = () => { const img = new Image(); img.src = fileReader.result as string; img.onload = () => { const { width, height } = img; const canvas = window.document.createElement("canvas"); const ctx = <CanvasRenderingContext2D>canvas.getContext("2d"); canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); const fileData = canvas.toDataURL("image/jpeg", quality); const fileBlob = dataURLtoBlob(fileData); resolve(fileBlob); }; img.onerror = (err) => reject(err); }; fileReader.onerror = (err) => reject(err); fileReader.readAsDataURL(file); }); }; /** * @description: 完整的压缩图片，最终对外暴露的函数 * @param {File} file * @param {number} quality 0 - 1 * @return {Promise<File>} */ export default (file: File, quality = 0.5): Promise<File> => { return new Promise((resolve, reject) => { const dataType = getType(file); if (dataType !== "file") return reject(new Error(`Expected parameter type is file, You passed in ${dataType}`)); if (file.type.indexOf("image") === -1) return resolve(file); // 压缩图片 compressImage(file, quality) .then((compressdBlob) => { if (!compressdBlob) return resolve(file); const fileReader = new FileReader(); fileReader.onload = () => { // 获取图片元信息 const segments = getSegments(fileReader.result as ArrayBuffer); const exif = getEXIF(segments); // 没有元数据的时候, 直接抛出压缩后的图片 if (!exif.length) return resolve(new File([compressdBlob], file.name, { type: file.type, lastModified: file.lastModified })); // 有元数据的时候, 将元信息合并到压缩图片里 insertEXIF(compressdBlob, exif) .then((newBlob) => resolve(new File([newBlob], file.name, { type: file.type, lastModified: file.lastModified }))) .catch(() => resolve(file)); }; fileReader.onerror = () => resolve(file); fileReader.readAsArrayBuffer(file); }) .catch(() => resolve(file)); }); };

2022年12月26日
1,408 阅读
0 评论
0 点赞

2022-10-12

原型继承和 Class 继承⾸先先来讲下 class ，其实在 JS 中并不存在类， class 只是语法糖，本质还是函数class Person {} Person instanceof Function // true组合继承function Parent(value) { this.val = value } Parent.prototype.getValue = function() { console.log(this.val) } function Child(value) { Parent.call(this, value) } Child.prototype = new Parent() const child = new Child(1) child.getValue() // 1 child instanceof Parent // true{callout color="#684def"}以上继承的⽅式核⼼是在⼦类的构造函数中通过 Parent.call(this) 继承⽗类的属性，然后改变⼦类的原型为 new Parent() 来继承⽗类的函数。这种继承⽅式优点在于构造函数可以传参，不会与⽗类引⽤属性共享，可以复⽤⽗类的函数，但是也存在⼀个缺点就是在继承⽗类函数的时候调⽤了⽗类构造函数，导致⼦类的原型上多了不需要的⽗类属性，存在内存上的浪费{/callout}寄⽣组合继承{callout color="#4defb9"}这种继承⽅式对组合继承进⾏了优化，组合继承缺点在于继承⽗类函数时调⽤了构造函数，我们只需要优化掉这点就⾏了{/callout}function Parent(value) { this.val = value } Parent.prototype.getValue = function() { console.log(this.val) } function Child(value) { Parent.call(this, value) } Child.prototype = Object.create(Parent.prototype, { constructor: { value: Child, enumerable: false, writable: true, configurable: true } }) const child = new Child(1) child.getValue() // 1 child instanceof Parent // trueclass继承class Parent { constructor(value) { this.val = value } getValue() { console.log(this.val) } } class Child extends Parent { constructor(value) { super(value) this.val = value } } let child = new Child(1) child.getValue() // 1 child instanceof Parent // true

2022年10月12日
455 阅读
0 评论
0 点赞

2022-09-01

最实用的JavaScript一行代码 {message type="info" content="前些年的段子里，总有一些主考官的思想格局打不开，抛出这样的问题：让我在10秒钟内记住你。于是就有了，被打耳光的，被亲的，被扒衣服的，摔手机的······但作为程序员，要怎么用代码震惊的别人呢？Talk is cheap, show me the code!很简单：用简单的逻辑和尽可能少的代码行来解决一个复杂的问题。随着 ES6 箭头函数的引入，可以创建看起来优雅而简单的单行代码。在今天的文章中，我将与你一起来学习 11 个罕见但功能强大的单行代码。现在，准备好，让我们开始吧！"/}文字复制到剪贴板const copyText = async (text) => await navigator.clipboard.writeText(text) copyText('单行代码前端世界'){callout color="#f0ad4e"}Clipboard API 它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。{/callout}获取字符串中的字符数const characterCount = (str, char) => str.split(char).length - 1{callout color="#f0ad4e"}获取字符数是一个有用的实用程序，在许多情况下都很有用，我们可以使用它来获取空格数和随后的单词数，或者这可用于获取字符串中某个分隔符的计数。这个想法很简单，我们使用传递的参数 char 拆分字符串并获取返回数组的长度。由于每次将字符串拆分，都会比拆分器多一个；所以减去 1，我们有一个 characterCount 单行。{/callout}检查对象是否为空const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object{callout color="#f0ad4e"}检查对象的空性实际上比看起来要困难得多，即使对象为空，每次检查对象是否等于 {} 也会返回 false。幸运的是，下面的单行代码正是我们想要的。在这一行中，我们检查对象的键长度是否等于 0，以及传递的参数是否为实际对象。{/callout}等待一段时间再执行const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));{callout color="#f0ad4e"}在这一行中，我们将通过一些异步编程来弄脏我们的代码。这个想法很简单，在运行代码时，如果你想等待一定的时间，这里是等待单行在等待单行中，我们创建一个承诺并在给定的时间后使用 setTimeout 函数解决它。{/callout}获取两个日期之间的日差const daysBetween = (date1, date2) => Math.ceil(Math.abs(date1 - date2) / (1000 * 60 * 60 * 24)){callout color="#f0ad4e"}在开发 Web 应用程序时，日期通常是实现起来最令人困惑的部分，因为有许多概念很容易被误算。这是一个强大的单线计算两个日期之间的天差。但还有更多事情要做，正如我所做的那样，你可以创建自己的单线来计算月、年差异等。这种单线背后的逻辑很容易理解。当两个日期相减时，返回值是以毫秒为单位的差值，要将毫秒转换为天，我们必须将其除以毫秒、秒、分钟和小时。{/callout}检查设备上的触摸支持const touchSupported = () => ('ontouchstart' in window || DocumentTouch && document instanceof DocumentTouch){callout color="#f0ad4e"}随着可以连接到互联网的设备越来越多，创建响应式网站的必要性也在增加。20 年前，开发者应该考虑网站的桌面版本，但今天超过 50% 的网络流量来自触摸移动设备。因此，基于设备的触控支持采取一些行动是一个非常重要的概念。在这一行中，我们正在检查文档是否支持 touchstart 事件。{/callout}在元素后插入 HTML 字符串const insertHTMLAfter = (html, el) => el.insertAdjacentHTML('afterend', html){callout color="#f0ad4e"}开发 Web 应用程序时，使用 JavaScript 更新 DOM 是一件很常见的事情。有一些基本的方法可以完成工作，但是，当情况变得复杂时，就很难克服。这是一个在 HTML 元素之后立即注入 HTML 字符串的单行代码。经过几分钟的思考和谷歌搜索，我相信你可以找到这个单线的以前版本。{/callout}随机排列数组const shuffle = arr => arr.sort(() => 0.5 - Math.random()){callout color="#f0ad4e"}在开发中打乱一组数据是一个常见的情况，你可以随时遇到，不幸的是，JavaScript 中没有内置数组的 shuffle 方法。但是，这里有一个你可以每天使用的 shuffle one-liner它利用数组的排序方法，在数组的前一个元素之前或之后随机排序。{/callout}获取随机布尔值const getRandomBoolean = () => Math.random() >= 0.5{callout color="#f0ad4e"}在开发时，尤其是在写游戏代码时，有时，我们会想随机采取行动。在这些情况下，下面的单行代码非常方便。上面的单行代码有 50/50 的机会返回真或假。因为生成的随机数大于0.5的概率等于变小的概率。然而，例如，如果你想得到一个概率为 70% 的随机布尔值，那么你可以简单地将 0.5 更改为 0.7 等等。{/callout}计算数组的平均值const average = (arr) => arr.reduce((a, b) => a + b) / arr.length{callout color="#f0ad4e"}可以使用多种方法计算数组的平均值。但逻辑对所有人都是一样的，我们必须得到数组及其长度的总和；然后，通过除法给出平均值。在平均单行中，我们使用 reduce 来获取一行中数组的总和，而不是使用循环。然后，我们将它除以数组长度，这是一个数组的平均值。{/callout}查询某天是否为工作日const isWeekday = (date) => date.getDay() % 6 !== 0; isWeekday(new Date(2023, 02, 01)) // true{callout color="#f0ad4e"}我们自己写日历组件时经常会用到，判断某个日期是否为工作日；周一至周五为工作日:{/callout}转换华氏/摄氏// 将华氏温度转换为摄氏温度 const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9; fahrenheitToCelsius(50); // 10 // 将摄氏温度转华氏温度 const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32; celsiusToFahrenheit(100) // 212{callout color="#f0ad4e"}处理温度有时会晕头转向。这两个函数则能帮助大家将华氏温度转换为摄氏温度，以及将摄氏温度转换为华氏温度。{/callout}每隔4个空1格美团卷码[..."088896520132"].reduce((res, itm, idx) => (res += idx % 4 === 1 ? `${itm} `: itm),''); // 08 8896 5201 32检查当前选项卡是否在后台const isTabActive = () => !document.hidden; isTabActive() // true|false检查设备类型const judgeDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'PC'; judgeDeviceType() // PC | Mobile{message type="info" content="END"/}

2022年09月01日
1,743 阅读
6 评论
5 点赞

2022-07-06

2022年07月06日
1,109 阅读
7 评论
2 点赞