JavaScript
关注
分享
扫一扫
LPLIFE
学习接受学习
展开
-
不规则多维数组转成一维数组
输入：[2, [2, 8, 34343, 2, [3, 2, 78]], [1, 2]]输出：[ 2, 2, 8, 34343, 2, 3, 2, 78, 1, 2 ]function dealData (arr) { if (Object.prototype.toString.call(arr) !== '[object Array]') { return; } return `${arr}`.split(',').map(Number);}let arr = [2, [2,原创 2021-07-15 18:27:23 · 206 阅读 · 0 评论 -
h5压缩图片并上传到oss
需求背景：h5上传图片到oss，并返回图片的链接参考资料：阿里云ossmultipartUpload api图片纯前端JS压缩的实现注意：以下不包括业务代码，纯个人处理的oss上传封装，替换成自己的临时凭证的接口即可使用const OSS = require('ali-oss');/** * * @param {图片base64位地址} url * @returns */const loadImage = function (url) { return new Promise((原创 2021-06-23 10:45:05 · 894 阅读 · 1 评论 -
vant上拉加载、下拉刷新
<!-- * @Descripttion: 上拉加载、下拉刷新 参考：https://youzan.github.io/vant/#/zh-CN/list * @version: * @Author: peri.lu * @Date: 2021-06-01 * @LastEditors: peri.lu * @LastEditTime: 2021-06-01--><template> <div class="shop-list-all"> &l原创 2021-06-01 12:23:10 · 361 阅读 · 1 评论 -
‘geolocation‘ in navigator 失效
原因：该操作是异步，解决方式：navigator.permissions.query({ name: "geolocation" }).then((res) => { // granted：成功 denied：失败 if (res.state === "granted") { }});原创 2021-05-13 17:11:22 · 700 阅读 · 0 评论 -
reduce的用法
概念数组的一个方法，使用reduce可以针对数组处理很多比较复杂、抽象的操作，更简化逻辑，一步到位。语法array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)；1.accumulator 必需。初始值, 或者计算结束后的返回值。2.currentValue 必需。当前元素3.currentIndex 可选。当前元素的索引4.array可选。当前元素所属的数组对象。5.initi原创 2021-01-26 23:08:34 · 1082 阅读 · 1 评论 -
等分截取字符串
/** * 等分截取字符串，输入：splitWords('12345',2) 输出 ['12','34',5] * @param {string} str * @param {number} num */export function splitWords(str, num) { if ( Object.prototype.toString.call(str) !== '[object String]' && Object.prototype原创 2020-12-25 15:09:11 · 267 阅读 · 0 评论 -
一道题你能够看出来多少知识点
这道题考了原型链、作用域、变量提升，函数声明与函数表达式、this指向等function Foo() { getName = function () { console.log(1); }; return this;}Foo.getName = function () { console.log(2);};Foo.prototype.getName = function () { console.log(3);};getName = fu原创 2020-12-08 22:53:29 · 194 阅读 · 0 评论 -
几道基础机考题
原生html、JavaScript、css实现表格（考察JavaScript基本操作），如下图：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document&.原创 2020-10-11 18:55:28 · 199 阅读 · 1 评论 -
ios中获取不到音频的时间，一直是NAN
duration 属性：返回当前音频/视频的长度，以秒计。如果未设置音频/视频，则返回 NaN (Not-a-Number)。场景： 需要获取音频的时间，Android环境正常，ios有些机子正常，有些不行。排查发现，ios上没等音频load出来就去读取了，做兼容处理，监听音频加载完后再去读取时长。let audioDom = document.getElementById(audioId), duration;audioDom.addEventListener('canplay', ().原创 2020-09-10 21:58:14 · 1363 阅读 · 0 评论 -
我经常会用到的DOM操作
增加、创建、修改document.createElement(nodename) ：创建一个新的标签节点document.createTextNode(text)： 创建新的文本内容node.appendChild(node)：向一个节点尾部插入一个新的节点node.insertBefore(newnode,existingnode)：向一个节点首部插入一个新的节点document.createAttribute(attributename)删除parentNode.removeChil原创 2020-09-07 14:19:41 · 239 阅读 · 0 评论 -
如何进行代码重构?
作为一个程序员，大部分时候，如果不是一个人承包整个项目，那么有1/3的时间在写代码，1/3的时间在看别人写的代码，剩下的1/3的时间在摸鱼。那么如何提高摸鱼的时间？看别人写代码十分头疼，分分钟想骂人，自己却又写得龙飞凤舞，接下来，来看看如何进行代码重构，来提升一下自己的大神气质。提炼函数程序猿大部分时间都在与函数打交道，我们都希望看到前前前同事写的函数代码具有这样特点：良好的命名：比如用户登录，写成ada(){}如果不写注释，还需要去看代码到底封装了神马东西，是不是想骂gou？写成userLo原创 2020-08-12 22:16:15 · 1232 阅读 · 0 评论 -
JavaScript的执行机制
async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('async2');}console.log('script start');setTimeout(function () { console.log('setTimeout1');},原创 2020-07-05 16:52:55 · 233 阅读 · 0 评论 -
(10).add(10).subscribe(2).add(10)
题目 ： 实现(10).add(10).subscribe(2).add(10)，输出28提示： add是加法 subscribe代表减法console.log((10).add(10).subscribe(2).add(10)); //=>28考点：原型链JavaScript的Number对象方法valueOfNumber.prototype.add = function (a) { let value = this.valueOf() // valueOf返回一个 Numbe原创 2020-07-02 01:19:46 · 506 阅读 · 0 评论 -
this、call和apply
thisJavaScript的this总是指向一个对象，具体指向哪一个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。我们需要判断到底this.key,到底输出哪一个值，就需要明白this指向哪里.this指向，分为四种1. 作为对象的方法使用：作为对象的方法被调用时，this指向该对象let obj = { a: 1, getA: function () { console.log(this.a); }};obj.getA原创 2020-06-21 17:11:19 · 298 阅读 · 0 评论 -
使用JavaScript实现一个new
JavaScript的函数既可以作为普通函数被调用，也可以作为构造函数被调用。我们使用new运算符来调用函数时，此时的函数就是一个构造器。使用new运算符来创建对象的过程：实际上就是先去克隆Object.prototype对象,再进行一些其他额外操作的过程。首先：创建一个普通函数(使用它来当做构造函数)function person(name) { this.name = name;}2.在它的原型上创建一个方法person.prototype.getName = func.原创 2020-06-21 12:08:52 · 385 阅读 · 2 评论 -
JavaScript的浅拷贝和深拷贝
JavaScript中会用到深拷贝和浅拷贝的情况：使引用类型的使用互不影响。简单了解一下基本类型和引用类型的区别：基本数据类型和引用类型的区别基本数据类型： String，Boolean，Number，Undefined，Null；占用空间固定，保存在栈中。不管是进行赋值、浅拷贝、深拷贝都仅仅是把值赋值给对方，相互之间不受影响。如：let a = 12; //=>undefine...原创 2020-03-29 01:15:49 · 242 阅读 · 0 评论 -
JavaScript中的原型
原型：每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型链：原型对象也有可能拥有原型，并从中继承方法和属性，一层一层、依此类推，这种关系常被称为原型链（prototype chain）,它解释了为何一个对象会拥有定义在其他对象中的属性和方法。继承的属性和方法来源：定义在Object的构造函数之上的propotype属性上，而非对象实例本身。对象实例和它的构造器之间建立...原创 2019-12-22 20:37:28 · 220 阅读 · 0 评论 -
vue中进入页面，滚动到锚点位置
需求场景：比如一个页面导航有蔬菜、水果、肉类，通过改变链接去跳转到蔬菜、水果、肉类所在的位置。方法一：使用<a>标签我一开始使用<a>标签的锚点触发，发现<a>标签无法通过手动直接改变链接hash去跳到指定锚点（运营会这样操作），那么是否可以进入页面后直接自动触发这个<a>标签事件, 但是默认是禁止了<a>标签点击事件自动触发，...原创 2019-12-11 11:05:30 · 3314 阅读 · 0 评论 -
css高度从0 到auto过渡
最近朋友问了这样的问题：css高度从0 到auto过渡，上拉或者收起主要利用scrollHeight：scrollHeighttransition：transitionmaxHeight：maxHeight应用场景：点击收起、下拉 然后进行过渡，开发中应该经常会遇到这样的需求直接上代码：<!DOCTYPE html><html lang="zh-cn">...原创 2019-12-06 18:09:35 · 1297 阅读 · 0 评论 -
函数的节流
应用场景： 连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候会崩溃。如：IE中使用onresize事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件就会连续触发。在onresize事件处理程序内部如果尝试进行DOM操作，其高频率的更改可能会导致浏览器崩溃，为了避免这个问题，可以使用定时器对该函数进行节流。浏览器页面滚动（scroll）鼠标移动（mousemove）...原创 2019-10-27 22:45:04 · 277 阅读 · 0 评论 -
mouseover和mouseenter两个事件的区别
又来打个酱油.mouseover(鼠标覆盖)mouseenter(鼠标进入)二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)共同点:当二者都没有子元素时,二者的行为是...原创 2018-05-24 17:01:07 · 14425 阅读 · 1 评论 -
本地调试获取IPv4地址
需求背景开发移动端的时候时常需要本地调试，公司的ip地址经常变动，每天调试程序时，总需要cmd、ipconfig（一直重复这样的操作）为了节省时间，使用了nodejs的os(操作系统来获取IPv4地址)。首先引入：const os = require('os');接着，获取ip地址，ip地址等等信息是放在网络接口列表中的：let network = os.networ...原创 2019-08-15 18:22:25 · 1447 阅读 · 0 评论 -
获取DOM节点的一些常用的Document对象方法
取得DOM节点的一些Document对象方法：querySelector()querySelectorAll()getElementById()getElementsByClassName()getElementsByTagName()querySelector：接收一个CSS选择符，返回与盖模式匹配的第一个元素，如果没有找到匹配的元素，返回null。//取得body元素v...原创 2019-08-20 23:49:16 · 1448 阅读 · 0 评论 -
JavaScript的Array类型包含的方法
栈方法（push()和pop()），只对数组尾部操作push():可以接收任意数量的参数，把他们逐个添加到数组末尾，并返回修改后数组的长度。pop():从数组末尾移除最后一项，减少数组的length值，然后返回被推出栈的元素如下图:队列方法（shift()、unshift()），只对数组首部操作shift()：移除数组中的第一个项并返回该项，同时数组长度减1unsh...原创 2019-07-21 17:08:15 · 2412 阅读 · 0 评论 -
Can't resolve 'element-ui/lib/style.css'
查找依赖包，发现element-ui/lib中并没有发现style.css文件，但是在使用的时候总是隐式加载了style.css文件，导致编译报错解决方式：把全局引入更换为局部引入借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先安装：npm install babel-plugin-component -D然后，...原创 2019-07-29 10:08:20 · 5240 阅读 · 0 评论 -
RegExp类型
ECMAScript通过RegExp类型来支持正则表达式。定义正则表达式的方式：字面量：var expression = /pattern / flags；使用RegExp构造函数：接收两个参数：一个时要匹配的字符串模式，另一个是可选的标志字符串。/* * 匹配第一个"bat"或"cat"，不区分大小写 */var pattern1 = /[bc]at/i;/*...原创 2019-07-23 16:58:17 · 282 阅读 · 0 评论 -
对scrollTo的一些看法
通常会涉及到这样的交互：1. 用户下拉浏览当前页面的内容2. 然后从页面上的链接跳转到其他的页面上，3. 用户操作返回在返回的时候，往往会停留在初始浏览的位置。想要返回时停留在页面顶部，可以这样实现： window.scrollTo(0, 0);作用：把内容滚动到指定的坐标。语法：scrollTo(xpos,ypos)参数 描述 xpos ...原创 2019-07-01 11:44:34 · 566 阅读 · 0 评论 -
JavaScript高级程序第二章script元素
红宝书值得多读几遍。<script>元素作用：向HTML页面中插入JavaScript的主要方法，就是使用<script>元素。它的属性：async：可选。表示应该立即下载脚本，但不应该妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。 charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，...原创 2019-07-01 00:25:32 · 306 阅读 · 0 评论 -
ReferenceError和TypeError的区别
ReferenceErrors: 引用错误。JavaScript无法找到尝试访问的值的引用时，抛出ReferenceErrors。TypeError：类型错误。 能够找到变量，对象用来表示值的类型非预期类型时发生的错误。...原创 2019-08-28 19:24:11 · 957 阅读 · 0 评论 -
在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组
无聊刷个小题：在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组function append(arr, item) { return arr.concat(item);}原创 2019-09-24 23:47:38 · 331 阅读 · 0 评论 -
vue路由传参刷新报错
传参方式改为：this.$router.push({ path: "/result", query: { resultData:encodeURIComponent(JSON.stringify(res.data)) } });解析： this.resultData =JSON.parse(decodeURIComponent(this.$route.que...原创 2019-10-11 10:55:18 · 756 阅读 · 0 评论 -
给定字符串 str，检查其是否包含 连续3个数字
题目描述给定字符串 str，检查其是否包含连续3个数字1、如果包含，返回最新出现的 3 个数字的字符串2、如果不包含，返回 false示例1输入'9876543'输出987function captureThreeNumbers(str) { if (str.match(/([0-9]){3}/g)==null){ return f...原创 2019-09-29 10:29:23 · 4694 阅读 · 1 评论 -
给定字符串 str，检查其是否包含连续重复的字母（a-zA-Z），包含返回 true，否则返回 false
题目描述给定字符串 str，检查其是否包含连续重复的字母（a-zA-Z），包含返回 true，否则返回 false示例1输入'rattler'输出true使用正则表达式：function containsRepeatingLetter(str) { if (str.match(/([a-z]|[A-Z])(\1+)+/g)==null){ ...原创 2019-09-28 12:19:37 · 3679 阅读 · 0 评论 -
为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组
A基础题示例1输入[1, 2, 3, 4]输出[1, 4, 9, 16]function square(arr) {return arr.map(item =>{ return item*item})}原创 2019-09-25 17:46:39 · 932 阅读 · 0 评论 -
找出数组 arr 中重复出现过的元素
1.function duplicates(arr) { let a = {}; for (let i = 0; i < arr.length;i++) { if(!a[arr[i]]){ a[arr[i]] = 1; }else { a[arr[i]] ++; } ...原创 2019-09-25 17:32:14 · 748 阅读 · 0 评论 -
统计数组 arr 中值等于 item 的元素出现的次数
借助对象属性明不可重复特点：function count(arr, item) { let a = {}; for(let i =0 ;i < arr.length; i++) { if(!a[arr[i]]){ a[arr[i]] = 1; }else { a[arr[i]] ++; ...原创 2019-09-25 11:34:53 · 468 阅读 · 0 评论 -
在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组
主要知识点：会返回新数组（或其他类型）concat()、slice()、reverse()、toString()、join()直接对数组进行修改splice()、pop()、push()、sort()、unshift()、sort()1 .slice()、concat()function insert(arr, item, index) { return ar...原创 2019-09-25 11:22:21 · 678 阅读 · 0 评论 -
删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组
使用 JavaScript的Array对象：function truncate(arr) { return arr.slice(0,arr.length-1)}原创 2019-09-25 00:30:30 · 1364 阅读 · 0 评论 -
JavaScript如何使句子的标点符号单独占一行
这个标题可能说的不太明确，原谅词穷。看图：一个竖排的句子,正常渲染出来是这样的：实际上想要的效果：实现方法：使用replace、正则表达式vue中： <li v-for="(item, index) in data" :key="index"> {{item.replace(/[,，\.。]/,...原创 2019-07-04 16:54:30 · 853 阅读 · 0 评论 -
JavaScript高级程序第四章变量、作用域和内存问题
第三章有看了，不过就不搬上来了，太多了。纯概念，不过理解了，写代码起来也舒服。ECMAScript变量：基本类型值：简单的数据段包括：Undefined、Null、String、Number、Boolean这五种基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值。引用类型值：可能由多个值构成的对象引用类型的值：保存在内存中的对象。JavaScript不允...原创 2019-07-09 22:42:47 · 212 阅读 · 0 评论