JavaScript
关注
分享
扫一扫
JavaScript
小丁冲鸭！
你若盛开，鲜花自来。
展开
-
在nodejs项目中引入babel，支持使用import和export
前言由于nodejs环境采用的是CommonJS的模块化规范，使用require引入模块，module.exports导出模块，但使用有点不习惯，所以引入babel转义支持，通过babel进行编译，支持impirt和export以及一些es6、es7的新语法。一、安装npm --save-dev install babel-cli二、创建.babelrc文件在根目录下创建.babelrc文件{ "presets": [ "es2015", ".原创 2022-03-21 16:03:21 · 2513 阅读 · 0 评论 -
call、bind、apply的简易实现
前言：这三个都是函数的api，用于改变this的指向，使一个对象能调用另一个不属于自己的方法，核心思想就是通过改变方法中数据的this指向，借用别人的方法。一、call通过隐式绑定的方法实现，因为执行obj1.getName.myCall(obj)，则myCall中的this就是指向obj1.getName的，再将方法添加到想使用的对象上即可。Function.prototype.myCall = function (context = window, ...args) { i.原创 2021-05-23 12:25:55 · 297 阅读 · 0 评论 -
js滑动后吸顶实现
效果：法一：addEventListener监听滚动，当滚动上去的高度scrollTop 大于 吸顶部分距离页面顶部的距离offsetTop时，添加一个类，类里边用fixed布局，top设置成0；当又滚动下来，在将该类名移除即可，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl.原创 2021-05-20 23:09:57 · 1777 阅读 · 1 评论 -
Object.assign()的简单实现
一、Object.assign()介绍1.定义：Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。 ——MDN2.语法Object.assign(target, ...sources)target：目标对象sources：源对象，可以任意多个返回值：一定是对象二、原理及实现1.分析特点：（1）第一个参数不能是null或undefined（不太清楚为什么）（2）返回值一定是对象，所以不管...原创 2021-05-12 16:13:26 · 362 阅读 · 0 评论 -
二叉树的前序、中序、后序遍历方式
一、二叉树二叉树（binary tree）是指树中节点的度不大于2的有序树，其节点有左右子树之分。满二叉树：如果一棵二叉树只有度为0的节点和度为2的节点，并且度为0的节点在同一层上，则这棵二叉树为满二叉树。完全二叉树：叶子节点只能出现在最下层和次下层，且最下层的叶子节点集中在树的左部。二、二叉树的生成function NodeTree (value) { this.value = value; this.left = null; this.right = n原创 2021-04-27 11:09:14 · 331 阅读 · 0 评论 -
js之对象的合并
let aWithOverrides = { ...a, x: 1, y: 2 };let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };let x = 1, y = 2, aWithOverrides = { ...a, x, y };let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });原创 2021-01-14 17:31:07 · 2546 阅读 · 1 评论 -
给定两个端点色值，根据数值大小用js设置色值
前言：最近项目中遇到这样一个场景，就是画的散点图根据数值大小，颜色不同，当然这个用echarts中的visualMap视觉映射组件就能实现了，效果如图所示，只需要设置两个端点色值，很方便也很简单。但是如果想获取图中所有的散点的色值呢？我仔细看了echarts的API，只看到点击某点时能拿到一个对象，对象中有color属性，但是这也只是点击一次获取一个色值呀，后来我又想到一个办法（虽然不太优雅......），就是直接根据值的大小去获取颜色。代码： function rgbToHex(r..原创 2020-08-06 09:14:06 · 1882 阅读 · 1 评论 -
js中的那些数组方法简介（不包含ES6新增）
一、操作方法1、concat()拼接（原数组不变）将传入的参数拼接到原数组副本后边2、splice()（原数组改变）返回由原数组删除的项组成的数组删除：第一个参数为要删除的起始位置，第二个参数为要删除的项数 插入：第一参数开始插入的位置，第二参数为0，之后的参数为插入的项 替换：第一参数开始替换的位置，第二参数为1，之后为替换的项3、slice()截取（原数组不变）返回由原数组截取的项组成的数组二、位置方法1、indexOf()从前往后查找（注意是全等）返回位置..原创 2020-07-31 09:35:59 · 1086 阅读 · 0 评论 -
js之判断数据是否为空
前言：在讲正文之前，我想首先在这里提一下js的几种数据类型。在js中数据一共分为两大类，分别是基本数据类型和引用类型——Object。基本数据类型：Underdined Null Boolean Number String引用类型(Object)：对于基本类型而言，判断变量是否为空数据就很简单了，let a = '';let b = 0;let c = underfined;let d = null;let e = false；...原创 2020-07-23 10:10:46 · 11711 阅读 · 1 评论 -
foreach()中return初探
一、forEach()中的return与for循环中的return一样吗？下面是一个小实践的例子：let arr = ['1','2','3','4'];arr.forEach((item) => { console.log("foreach",item); if (item === '2') { return ; }});for (let i = 0; i < 4; i++) { console.log("arr",arr[i]原创 2020-11-18 16:27:03 · 32556 阅读 · 3 评论 -
如何给el-table表格的指定单元格设置颜色
一、需求及效果图最近的项目中，遇到给表格中指定单元格设置字体颜色，使用的是el-table做的，控制单元格字体颜色，每一行的最大值设置成绿色，最小值设置成红色，效果如下：二、方法及代码使用的是控件内的 cell-style 方法，方法详见element-ui，代码如下：<!-- HTML代码 --><el-table :data="populationComparisonTableData" border width= '952' ...原创 2020-11-18 14:50:08 · 11011 阅读 · 2 评论 -
Dom的javascript原生操作总结
1、创建节点document.createElement(标签名)// 创建了一个p标签的新节点let new = document.createElement('p');2、插入节点在parent内的最后插入节点，若我们插入的js节点已经存在于当前的dom树，则这个节点首先会从原先的位置删除，再插入到新的位置// 将child插入到parent节点内的最后一个let ...原创 2020-01-16 16:29:47 · 768 阅读 · 0 评论 -
js之继承实现方法
js的继承方式有很多，本文主要介绍以下几种：构造函数继承、原型链继承、组合继承、es6中的class继承这四种。一、构造函数继承构造函数一般命名时首字母大写，用来区分于普通函数，内部使用的this对象来指向即将要生成的实例对象，使用New来生成实例对象。// 这是一个构造函数function Animal(name) { this.name = name; this.s...原创 2020-01-02 18:46:29 · 649 阅读 · 0 评论 -
JavaScript之创建函数参数数量可变且未知
这个问题其实考察的是arguments对象，函数参数实际上是被保存在一个被称为arguments的类似于数组的对象当中。MDN中是这样说的：arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。arguments对象不是一个Array。它类似于Array，但除了l...原创 2020-01-02 17:28:17 · 1047 阅读 · 0 评论 -
闭包的那些事儿
一、什么是闭包闭包是一个能够访问其他函数作用域的函数。通俗的说就是，如果一个函数能访问其他函数作用域中的变量，那么这个函数就叫做闭包。注意：若一个函数在另一个函数的内部，这个内部函数一定是闭包，不管这个内部函数是以怎样的形式存在于外层函数中的。下面举几个例子：例一，在一个函数中又定义了一个函数function father () { function son () ...原创 2019-11-19 15:02:07 · 477 阅读 · 0 评论 -
性能优化之节流和防抖
一、节流函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。函数实现：// func是用户传入需要防抖的函数// wait是等待时间const throttle = (func,wait) => { // 上一次执行该函数的时间 let lastTime = 0 return function(...args) { /...原创 2019-11-18 16:17:12 · 427 阅读 · 0 评论 -
浅谈Event Loop(事件循环)
前言Java 是一门单线程语言，即同一时间只能执行一个任务，即代码执行是同步并且阻塞的。当一个任务在执行时，其他任务都要排队等待。但只能同步执行肯定是不行的，所以 有了来实现异步的函数，Event Loop 就是为了确保异步代码可以在同步代码执行后继续执行的。一、Event Loop（事件循环）HTML标准中是这样解释的：为了协调事件（event），用户交互（user int...原创 2019-11-13 20:10:50 · 1228 阅读 · 0 评论 -
浅谈深浅拷贝
今天突然接到某巴的面试电话，和面试官聊了半个小时，问了我深浅拷贝、promise、vue和react的数据绑定、element的实现原理，以后的规划等等。当时回答的深浅拷贝被我说反了（苦笑），虽然复习的时候看过，但是没有完全的理解，所以趁热打铁，赶紧学习总结下。一、JS的数据类型要想学习深浅拷贝，首先需要了解，在javascript中有两种数据类型，分别是基本数据类型（Number、...原创 2019-11-07 17:59:59 · 684 阅读 · 0 评论 -
回调函数（Callback）
什么是回调函数？顾名思义，回调函数就是回头再调用它。回调函数其实就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调。下面是一个回调函数的简单例子：//定义主函数，回调函数作为参数function Main(callback) { callback(); console.log('我是主函数'...原创 2019-11-07 08:58:19 · 1423 阅读 · 0 评论 -
generator（生成器）
廖雪峰老师的讲解转载 2019-11-06 21:31:47 · 1551 阅读 · 0 评论 -
同步、异步、回调执行顺序之经典闭包setTimeout分析
同步、异步、回调执行顺序之经典闭包setTimeout分析转载 2019-11-06 09:26:49 · 282 阅读 · 0 评论 -
对两个有序数组，合并后重新排序js实现
题目描述：例如有两个排好序的数组：[1,2,3,4,6,9,11][2,4,6,8,12,19,33,45]结果：[1,2,2,3,4,4,6,6,8,9,11,12,19,33,45]实现方法其实不止一种，在这里我只想分享一种我想到的最优的方法，时间复杂度O( n+m )，空间复杂度O（n+m）利用两个数组已经排好序这个条件，设置两个指针，分别指向两个数组 当其中...原创 2019-11-05 21:28:06 · 2735 阅读 · 0 评论 -
JavaScript事件冒泡和事件代理（委托）
一、什么是事件冒泡？冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。、看了之后可能你还不理解，那么请看下面代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="...原创 2019-10-31 21:47:37 · 437 阅读 · 0 评论 -
typeof 和 instanceof
相同点：在JavaScript 中 ，typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型不同点：typeof 定义和用法：返回值是一个字符串，用来说明变量的数据类型 一般只能返回如下几个结果："number"、"string"、"boolean"、"object"、"function" 和 "undefined" 对于 Array，Null，Ob...原创 2019-10-30 09:28:28 · 345 阅读 · 0 评论 -
js中的new()到底做了些什么？
在调用new的过程中会发生以下几件事：1、创建一个新对象let obj = {}; 2、新对象的_proto_属性指向构造函数的原型对象obj.__proto__ = Base.prototype;3、将构造函数的作用域赋值给新对象。（也所以this对象指向新对象）Base.call(obj);4、执行构造函数内部的代码，将属性添加给person中的this对...原创 2019-10-29 21:02:00 · 2343 阅读 · 0 评论 -
var、let 及 const 区别
var相信大家都清楚，随着ES6规范的出现，新增了let和const来定义变量，那么他们三个有什么区别呢？一、变量提升console.log(a); // undefinedconsole.log(b); // ReferenceError: b is not definedvar a = 1;let b = 2; //const同从上述代码中我们可以发现，虽然变量a还没有...原创 2019-10-28 17:35:25 · 303 阅读 · 0 评论 -
javascript学习之原型与原型链
javascript学习之原型与原型链转载 2019-10-27 16:59:56 · 264 阅读 · 0 评论 -
前端面试题之针对setTimeout问题的解决办法
for (var i = 1; i <= 5; i++) { setTimeout(function timer() { console.log(i) }, i * 1000)}这篇文章中，我默认大家都知道上边这段代码的打印结果是5个6，不懂得朋友可以参考这篇博客。那怎样让他打印0，1，2，3，4，5呢？ 下面是我所知道的几种方法。一、闭包定义：函数 A ...原创 2019-10-27 15:20:07 · 1154 阅读 · 0 评论 -
一文搞懂this的指向问题
this常见的应用场景function foo() { console.log(this.a)}var a = 1foo()const obj = { a: 2, foo: foo}obj.foo()const c = new foo()分析对于直接调用foo()来说，不管foo函数被放在了什么地方，this一定是window 对于ob...原创 2019-10-26 17:44:01 · 350 阅读 · 0 评论 -
javascript中的不同类型之间的四则远算
笔试时经常会考到不同类型的值加减法问题，每次都很头大，于是抽空总结一下，如有问题请私戳哦~~加法运算中其中一方为字符串，那么就会把另一方也转换为字符串 加法运算没有字符串时，那么会将它转换为数字，不能转换时为NAN 减法运算中，都会转换成数字，不能转换时为NAN但是第二条，我不是很理解到底该怎么转，下边是列举的一些常见情况，不全面勿喷哦~ 数字与字符串相加结果是字符串 ...原创 2019-10-26 15:41:21 · 309 阅读 · 0 评论