![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
Akimoto Hiroshi
这个作者很懒,什么都没留下…
展开
-
形参默认值问题
js参数占位的问题null与undefined原创 2023-02-04 11:31:59 · 1037 阅读 · 1 评论 -
vue2基本响应式实现----如何让数组也变成响应式的
之前的代码有个问题,就是操作数组数据的时候,不会触发setlet data = { name: 'dean', age: 30, level1: { level2: { level3_1: { level4: { value: 'anna' } }, level3_2: { level4: { value: 'jing' } }原创 2022-03-15 23:51:45 · 3515 阅读 · 0 评论 -
vue2基本响应式实现
let data = { name: 'dean', age: 30, level1: { level2: { level3_1: { level4: { value: 'anna' } }, level3_2: { level4: { value: 'jing' } } } }}observe(data)funct原创 2022-03-15 22:55:32 · 1133 阅读 · 0 评论 -
javascript object取值问题
如果是不确定的key,比如此处的property就是一个变量,那么obj.property就是undefined应该用obj[property]取值是可以取到值的原创 2021-12-09 11:29:07 · 1026 阅读 · 0 评论 -
Echarts 图例legend基本配置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>柱状图的基本实现和常.原创 2021-10-02 11:13:54 · 1845 阅读 · 0 评论 -
Echarts tooltip配置
echarts配置,和title同一级别,配置tooltip:1.触发时机triggertooltip: { trigger: 'item'}如果把item改为axis:tooltip: { trigger: 'axis'}2.触发条件triggerOn比如设置鼠标点击时候才触发tooltip: { trigger: 'item', triggerOn: 'click'}3.提示内容格式化formattertooltip: { trigger: 'ite原创 2021-10-02 10:32:06 · 3955 阅读 · 0 评论 -
Echarts图表指南之柱状图常用效果
先画一个基本的图表:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-10-02 09:48:57 · 1091 阅读 · 0 评论 -
js基础复习之对象动态键名
如果我想通过读取变量key的值给obj设置一个键为name的属性呢?错误写法1:正确写法:原创 2021-09-14 22:06:49 · 1281 阅读 · 0 评论 -
js原生绑定事件的3种方式
原创 2021-09-09 22:46:34 · 316 阅读 · 0 评论 -
JS复习类相关知识
我们把Person类折起来,再创建一个Student类继承Person类:我们在Student类中没有写构造器,这也行吗?是可以的,子类直接用了父类的构造器如果我们想给Student类加一个参数,这样写就接收不到了。为了解决这个问题(子类想拥有自己独有的一些属性),我们就要在子类中写构造器并且调用super方法:注意: super必须放在最前面我们再看一下,Student类上面有没有自己的方法,那它的实例能不能调用父类Person的方法?...原创 2021-09-09 15:15:35 · 75 阅读 · 0 评论 -
Vue2.X响应式原理
在Vue2.X 响应式中使用到了 defineProperty进行数据劫持,所以我们对它必须有一定的了解,那么我们先来了解它的使用方法, 这里我们来使用 defineProperty来模拟 Vue 中的 data<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge".原创 2021-08-01 17:15:18 · 114 阅读 · 0 评论 -
websocket简单示例
安装ws:原创 2021-07-21 15:08:11 · 301 阅读 · 1 评论 -
vue侦听器使用以及lodash防抖应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>侦听器使用</title></head><body> <div id="app"> <p原创 2021-07-16 16:10:03 · 182 阅读 · 0 评论 -
js原生实现瀑布流图片以及滚动加载更多图片
原理分析:代码实现原创 2021-07-15 21:26:21 · 283 阅读 · 0 评论 -
js数组的every和some方法
上需求:原创 2021-07-15 17:10:54 · 88 阅读 · 0 评论 -
Map的使用
我们先来看一个现象:上面代码的意思就是,一个``对象调用toString方法的时候,会被转化为"[object Object]"我们再来看一个现象:ES5中, 对象的结构是键值对, 如果键传入的是非字符串, 比如传入一个对象,或者数组,就会隐式调用它的toString方法var obj1 = { name: 'dean'}var obj2 = { name: 'amanda'}var obj3 = { [obj1]: '11', [obj2]: '22'}con原创 2021-07-15 17:01:03 · 292 阅读 · 0 评论 -
js优化代码之使用对象字面量代替switch语句
需求:基于颜色打印水果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script ty原创 2021-07-14 22:51:04 · 273 阅读 · 0 评论 -
jsES6对象解构之提前退出和提前返回
需求:代码可以这样改进:注意:这样写是错误的,会报错因为如果不写({type, name, gender} = {})的话,如果调用printAnimalsDetails方法不传入任何参数,那么左边{type, name, gender}解构就是对于undefined的解构,会报错,所以要给传入printAnimalsDetails方法设置一个默认参数{},一个空对象,这样在解构这里就不会报错了,相当于兜底...原创 2021-07-14 22:27:47 · 224 阅读 · 0 评论 -
array.includes代替大量的或逻辑运算
array.includes代替大量的或逻辑运算原创 2021-07-14 22:05:21 · 165 阅读 · 0 评论 -
js原型链继承 构造函数继承 组合继承 的优缺点和解决方案
原型链继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>继承</title></head><body> <script type="text/jav原创 2021-07-14 15:05:11 · 270 阅读 · 0 评论 -
js基础复习之 原型链的继承和缺点
加上这行代码:我们发现虽然__proto__改过来了,但是 constructor还没有改过来,所以还需要继续改造:原型链继承的缺点:原创 2021-07-13 22:16:29 · 623 阅读 · 0 评论 -
js基础复习之 call apply 和bind
call: 只能单独传入参数apply: 可以传入数组应用1: 将伪数组转化为 数组伪数组有哪些: arguments, 获取的DOM元素,和含有length属性的对象:使用Array.prototype.slice.call转化为数组:注意: slice方法不适用于IE8以下的浏览器, 会报错考虑到兼容性,我们可以自己封装一个方法listToArray:<!DOCTYPE html><html lang="en"><head> <原创 2021-07-13 16:56:09 · 86 阅读 · 0 评论 -
js基础复习-数组的reduce方法实现求和 扁平化 统计元素出现次数 去重
reduce数组求和求积reduce数组扁平化reduce统计数组每个元素出现次数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>reduce方法使用</title><.原创 2021-07-13 15:19:27 · 259 阅读 · 0 评论 -
js基础复习之数组扁平化处理的5种常用方法
方法四: reduce结合递归const flatten = arr => { return arr.reduce((pre, cur) => { return pre.concat(Array.isArray(cur) ? flatten(cur) : cur) }, [])}console.log(flatten(arr))方法五: 递归const result = []const fn = arr => { for (let i = 0; i.原创 2021-07-12 18:54:38 · 65 阅读 · 0 评论 -
js 发布订阅模式应用场景 自己手写一个简易的发布订阅模块
我们先写一个简单的发布订阅:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>发布订阅模式</title></head><body> <script .原创 2021-07-11 22:28:31 · 667 阅读 · 1 评论 -
js策略模式及应用-表单验证
可以这样写:var pS = function() {}pS.prototype.calculate = function(salary) { return salary * 4}var pA = function() {}pA.prototype.calculate = function(salary) { return salary * 3}var pB = function() {}pB.prototype.calculate = function(salary) {...原创 2021-07-11 09:18:39 · 204 阅读 · 1 评论 -
es6实现单例模式 class类 静态方法
es6的 class类 又被叫做es5 构造函数的语法糖先看看es5怎么用构造函数实现类:function Person(name, gender) { this.name = name this.gender = gender}Person.prototype.say = function() { console.log('I am the say function inside Person')}let person1 = new Person('Dean', 'mal.原创 2021-07-10 17:09:12 · 752 阅读 · 1 评论 -
js闭包 单例模式的应用 以及代码优化
需求: 实现一个登录的弹框方案1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单例模式</title></head><body> <button原创 2021-07-10 14:31:03 · 141 阅读 · 2 评论 -
js基础复习-闭包的应用: 单例模式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>闭包应用-单例模式&l原创 2021-07-08 22:40:34 · 83 阅读 · 0 评论 -
js基础复习-箭头函数this
敲黑板!! 箭头函数没有自己的this,所以不能当成构造函数!原创 2021-07-04 19:42:08 · 86 阅读 · 0 评论 -
js基础复习-预编译
此时,预编译阶段结束,开始js的解释执行 逐行执行原创 2021-07-04 12:46:03 · 72 阅读 · 0 评论 -
JavaScript 计算指定月份有多少天
写项目日历的时候,需要用 js 计算指定月份一共有多少天一、原理分析要想得到某月有多少天,只需要获取到当月最后一天的日期就行了围绕这一思路,灵活调用 setMonth(),getMonth(),setDate(),getDate(),计算出所需日期function getMonthLength(date) { let d = new Date(date) // 将日期设置为下月一号 d.setMonth(d.getMonth()+1) d.setDate('1') // 获取本月原创 2021-05-31 16:50:29 · 500 阅读 · 1 评论 -
什么时候用```promise```什么时候用```async```和```await```
function fn() { var a = 10}fn()console.log(a);因为作用域问题,这样的方式是拿不到a的值的!我们可以改成这样:var temp = nullfunction fn() { var a = 10 temp = a}fn()console.log(temp);可以取到值了!但是如果是异步数据呢?var temp = nullfunction fn() { setTimeout(() => { va原创 2021-03-21 23:44:00 · 1322 阅读 · 3 评论 -
js基础复习10-ES5数组方法 forEach filter some复习
ES5新增的方法:1.forEach()方法返回值是undefined,并且函数体里面return false是不会终止循环的2. filter方法filter方法返回一个新的数组 ,函数体中遇到return false不会终止循环3.some()方法函数体里面return false会终止循环,返回true或者false3.3.3....原创 2021-03-18 19:45:11 · 75 阅读 · 0 评论 -
js基础复习9-ES6类的本质
回顾上一节,我们知道ES6之前是通过构造函数+ 原型实现面向对象编程,构造函数有如下特点:1.构造函数有原型对象属性prototype2.构造函数的原型对象属性prototype里面有constructor指向构造函数本身3.构造函数可以通过原型对象添加方法4.构造函数的实例对象有__proto__对象原型指向构造函数的原型对象prototype类的本质是一个函数,我们也可以简单的认为类就是构造函数的另一种写法1.类也有原型对象属性prototype2.类的原型对象属性prototype里面原创 2021-03-18 14:22:53 · 214 阅读 · 0 评论 -
js基础复习8-call方法简单使用以及javascript继承
首先回忆一下call方法的作用,它可以调用一个方法,并且第一个参数可以指定方法内部this的值:我们来看一下结果:我们发现第一次单独调用fn()的时候,this打印出来的是global,因为我们在node环境下运行的,在浏览器端运行代码这里this就指向window第二次我们使用call方法调用fn的时候,由于我们在call方法的第一个参数那里传入了一个obj,所以fn()方法内部的this指向了这个obj,所以打印出来的this就是这个obj我们看一下同样的代码在浏览器里是什么结果:cal原创 2021-03-18 13:32:55 · 249 阅读 · 0 评论 -
js基础复习7-原型对象用途-利用原型对象扩展内置对象方法
我们先看一下数组的原型对象上面有些什么东西:console.log(Array.prototype)这些都是数组提供的方法,但是没有求和方法,我们可以利用原型对象扩展内置对象方法,比如增加一个数组求和方法:<!DOCTYPE html><html><head> <title></title></head><body> <script type="text/javascript"> con原创 2021-03-18 09:53:20 · 182 阅读 · 0 评论 -
js基础复习6-原型对象中的this
<!DOCTYPE html><html><head> <title></title></head><body> <script type="text/javascript"> function Rabbit (name, color) { this.name = name this.color = color } var that Rabbit.prototype.e原创 2021-03-18 09:34:36 · 341 阅读 · 0 评论 -
js基础复习5-原型链与js的成员查找机制
原创 2021-03-18 09:22:30 · 100 阅读 · 0 评论 -
js基础复习4-构造函数 实例 原型对象三者之间的关系
原创 2021-03-18 01:11:32 · 84 阅读 · 0 评论