JavaScript
一些基础的JavaScript
33子~
一个立志成为前端工程师的柿子
展开
-
VUE-毫无关系的组件之间通信
**背景:**比如想要实现这样一个效果,当点击侧边菜单的时候,在顶部导航栏展示侧边菜单被选中的菜单名。侧边菜单和顶部导航分别是两个组件。两个毫无关系的组件。实现:eventBus- 发布订阅模式写一个eventBus.js文件import Vue from 'vue';export default new Vue();在需要通信的组件中分别引入这个文件// navimport eventBus from '@utils/eventBus';// menuimport even原创 2021-05-08 18:14:52 · 1285 阅读 · 1 评论 -
JS-判断对象是否为空对象
1、将json对象转化为json字符串,再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");console.log(b); // true2、for in循环判断var obj = {};var b = function() { for(var key in obj) { return false; } return true;}console.log(b()); // true3、jQuer原创 2021-04-28 10:34:36 · 58 阅读 · 0 评论 -
JS-array.flat()
才知道的一个非常方便的ES6的一个数组扁平化的方法首先看下浏览器的支持程度:还算友好~let arr1 = [1, 2, [3, 4]];arr1.flat(); // [1, 2, 3, 4] let arr2 = [1, 2, [3, 4, [5, 6]]];arr2.flat();// [1, 2, 3, 4, [5, 6]] let arr3 = [1, 2, [3, 4, [5, 6]]];arr3.flat(2);// [1, 2, 3, 4, 5, 6] .原创 2021-03-28 18:53:17 · 243 阅读 · 0 评论 -
JavaScript-解决0.1+0.2!==0.3
背景:我一直都只是知道0.1+0.2 !== 0.3但是怎么解决呢?我仅仅停留在了what and why。今天正好有时间,来看看how?我们都知道JS是采用标准64位双精度浮点数来存储数字。JS中的有一个安全数2^53,这并不代表js只能存储那么点大的数字,超出范围也是可以的,只是精度可能会出现问题。这个精度出现问题肯定是不符合我们预期的。因为JS是采用标准64位双精度浮点数来存储数字,所以你知道了0.1+0.2 !== 0.3。那么我们如何解决这种现象呢??es6中的Number.EPSI原创 2021-03-09 20:46:50 · 189 阅读 · 2 评论 -
JS-array.at
哈喽,大家好,我是贼漂亮~今天聊聊这个数组新方法array.at!!!这里有官方描述,可以瞅瞅 MDN描述语法: arr.at(index)参数: index可以为正数、负数,-1就会返回最后一个元素大家都知道,当我们想要返回数组中某一个元素的时候我们一般会这么写:const arr = ['one','two','three'];console.log(arr[0]) // 'one'通过数组中括号,在中括号中输入元素的下标来取这个元素,但是当我们想要取最后一个元素的时候,只能通过.原创 2021-02-09 10:58:00 · 840 阅读 · 3 评论 -
JS-Js异步编程四种方法
学而不思则罔原创 2020-10-30 10:58:30 · 318 阅读 · 0 评论 -
JS-js最大值
今天碰到一个bug,提示服务端错误,最后排查排查原来是后端传过来的数字已经超过16位了,搜索了一番才了解到原来javaScript有个最大值。javaScript最大值为2的53次方===9007199254740992。如果超过这个值,那么js会出现不精确的问题。这个值为16位。...原创 2020-11-12 14:18:14 · 776 阅读 · 0 评论 -
JS-时间戳
时间戳转化为正常时间最近遇到一个需求,但是后端传过来的时间是时间戳,需要自行转化下~在线转化工具时间戳分为两种,13位是毫秒,10位是秒__initData(time) { const date = new Date(time)// 时间戳为10位需*1000,时间戳为13位的话不需乘1000(time * 1000) var Y = date.getFullYear() + '-' var M = (date.getMonth() + 1 < 10 ? '0' + (date原创 2020-11-12 14:28:53 · 392 阅读 · 0 评论 -
JS-转为正数
情景:后端传过来的是个负数,前端不可以直接展示负数,需要转化下如下:原创 2020-11-12 14:43:21 · 662 阅读 · 0 评论 -
JS-ES2020链判断运算符(?.)和Null判断运算符(??)
ES2020引入"链判断运算符"(?.)const firstName = message?.body?.user?.firstName || 'default';const fooValue = myForm.querySelector('input[name=foo]')?.value直接在链式调用的时候判断,左侧的对象是否为null或undefined。如果是的,就不在往下运算,而是返回undefined。链判断运算符三种用法:obj?.prop // 对象属性obj?.[expr]原创 2020-11-12 14:22:29 · 1821 阅读 · 0 评论 -
JS-获取URL问号后面参数
实现思路:先找出?和#的索引,获取?和#后面值,再对问号(或者#)后面详细的值进行处理。看下面例子:let url = 'http://lss.lss.com?name=lss&age=22#lss';let url = 'http://lss.lss.com?name=lss&age=22#lss'; let qIndex = url.indexOf('...原创 2020-03-15 18:12:47 · 5042 阅读 · 0 评论 -
JS-图片的懒加载
懒加载主要是为了优化页面渲染,是前端性能优化的重要方法。主要是通过图片或数据的延时加载,加快页面渲染的速度,让第一次打开页面的速度变快,只有滑动到某个区域,才加载到真实的图片,这样也节省了用户的流量,哈哈。实现思路:把所有需要延迟加载的图片用一个盒子包起来,设置宽高和默认占位图。开始让所有的image的src为空,把真实的图片地址放到一个自定义属性当中,让开始所有的image隐藏。等待其...原创 2020-03-10 18:02:31 · 132 阅读 · 0 评论 -
JS-数组去重
方法一思路:创建一个空数组,循环原数组中的每一项,在添加到空数组中。在每次添加的时候验证新数组中是否包含当前遍历到的数组,若不包含则添加(数组中indexOf,lastIndexOf,includes在ie6,7,8不兼容)let ary = [1, 2, 3, 2, 1, 3, 2, 1, 2, 3, 2, 1]; let ary1 = []; ary.for...原创 2020-03-15 18:44:01 · 101 阅读 · 0 评论 -
JS-原生js模拟红绿灯
<div class="container"> <div class="red"></div> <div class="green off"></div> <div class="yellow off"></div> </div>let...原创 2020-03-22 15:03:23 · 477 阅读 · 0 评论 -
JS-继承的实现方式
文章目录原型继承call继承寄生组合继承es6中class原型继承通过prototype把子类的原型绑到父类的实例上,子类就可以调用父类的公有属性和方法、私有的属性和方法。但是这种方式实现继承,无论父类中公有的属性和方法还是私有的属性和方法,都会变成子类公有的属性和方法,这样子类就可以重写父类的属性和方法,也有影响父类的其他实例。function Parent(x){ this.x = x...原创 2020-03-04 20:37:26 · 121 阅读 · 0 评论 -
JS-防抖和节流
文章目录防抖节流小结防抖首先,先来说以下它的概念:在事件被触发几秒后再执行回调函数,如果在这几秒内又被触发,则重新计时。也就是可以理解为,本应该触发好多的事件,但是我们只允许它在规定时间内触发一次。节流规定一个时间,在这个时间内,只能有一次触发事件的回调函数执行,如果在同一个时间内某事件被触发多次,只有一次能生效。面试官就考我了,比如鼠标点击事件,当在这个规定的时间之内,我点击了很多次鼠...原创 2020-03-05 13:33:33 · 146 阅读 · 2 评论 -
JS-promise
Promise是一种用于解决异步问题的思路、方案,简单说是个容器,里面存的是某个未来会结束的结果。是一个对象,可以获取异步操作的消息。有三种状态,pending resolved rejected ,状态变了就不能修改了。在js里面,经常用异步的是ajax,比如sucess:一个回调,error一个回调。但是如果一次请求需要多个接口的时候就产生了回调地狱,promise可以用then来处理,它可...原创 2020-03-05 18:53:35 · 125 阅读 · 0 评论 -
JS-面向对象
文章目录对于面向对象你是怎么理解的呢?类的封装类的多态类的继承对于面向对象你是怎么理解的呢?其实我觉得面向对象编程其实就是一种编程思想,js本身也是基于面向对象编程思想来构建的,js有很多内置类,我们都是通过new 一个实例来进行各种处理,像vue框架,他也是基于面向对象编程来构建的,它在开发过程中就是通过new 不同的实例然后来进行开发。归根到底,其实我觉得面向对象编程就是可以理解为就是类的...原创 2020-03-05 10:52:44 · 111 阅读 · 0 评论 -
JS-手写实现call,apply,bind
call,apply,bind都是用来改变this指向的call:通过一个一个传参,返回的是函数的执行结果apply:以一个数组的形式传参,返回的也是函数的执行结果bind:通过一个一个传参,返回的是一个函数,首要手动调用。call方法首先,我们知道call是用来改变this指向的,它可以给一个函数一个指定的this值,并且可以传参数。 let a = { v...原创 2020-03-07 15:33:49 · 197 阅读 · 0 评论