![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端综合
jifukui
这个作者很懒,什么都没留下…
展开
-
使用svg做折线图以及节点tooltips显示
最近的工作中准备做一个折线图去显示设备的当前温度变化,最开始准备使用echarts进行了相关的定制以及进行了压缩但是发现最小的大小还是300多K字节,由于我们的网页程序存储在flash上,flash的空间大小为2m其中还要留一半给固件程序升级使用,所以空间大小让我只能望洋兴叹,还要兼容老的一些浏览器不敢完全去使用canvas,所以只能使用svg,由于本人也是初次的使用svg还想实现echarts的一些功能和特效,最起码需要在鼠标悬浮在节点上时显示当前节点的信息,也浏览了很多人的做法,感觉没太明白...原创 2020-09-14 22:29:28 · 993 阅读 · 0 评论 -
JavaScript数组构造from函数
之前我们讲解了数组的填充方法fill函数,fill函数是对当前的数组进行填充且返回值为当前的数组对象,from和fill相类似也可以对数组进行填充,但是和fill不同的是form的返回值是一个新的数组对象且不会修改原始数组。form函数也可以接收3个参数第一个参数是需要根据进行构造的对象,第二个参数是一个方法返回值为新数组的值,第三个参数为第二个参数的this对象。构造规则:当只有参数1的时候根据传入的对象是否具有length属性进行处理,没有此属性直接返回一个空的数组,如果有此属性...原创 2020-09-07 22:25:33 · 433 阅读 · 0 评论 -
JavaScript数组填充fill函数
大家使用数组估计最让人厌烦的就是对数组进行赋初值,要不就是手动的进行赋值要不就是使用for循环进行赋值。在ES6中可以使用fill方法进行数组的初始化。fill方法接收3个参数,第一个参数是赋值的值为必要参数,第二个参数是赋值开始的起始位置,第3个参数是赋值开始的终止位置此位置不会进行赋值。当只有第1个参数是默认设置数组的所有值为参数1的值。当只有第1,2两个参数值设置从第2个值的位置到数组的末尾使用参数1的值进行赋值。同时还需要注意的是不能对超出数组长度的值进行赋值。请看下...原创 2020-09-02 19:00:43 · 3091 阅读 · 0 评论 -
JavaScript数组遍历6 some方法
上一篇文章我们讲述了every方法,这里我们将会进行讲解some方法和every方法相似some方法也接收2个参数;第一个参数是一个函数第二个参数是一个传入值。其中第一个参数接收3个参数第一个参数是当前值,第二个参数是当前值的索引值,第三个参数是本数组。some方法的使用和every的方法相似但是也有一个返回值,返回当前的数组是否有符合的条件。如果没有返回值,则返回的是undefined。当有一个值满足条件则会停止遍历。下面是使用some方法的例子。<!DOCTYPE html><原创 2020-08-31 16:01:49 · 1136 阅读 · 0 评论 -
JavaScript数组遍历5 every方法
数组的every方法也可以对数组进行遍历,every方法也接上两个参数,第一个参数是一个函数,第二个参数是传入值;其中第一个参数函数可以接收3个参数,第一个参数是当前值,第二个参数是当前值的索引值,第三个参数为当前的数组,返回值是一个布尔类型的参数,只有所有参数全部符合要求才会返回真,只要是有一个不满足要求则返回假。数组中的每个参数在迭代过程中都会调用第一个参数回调函数,如果这个函数没有返回值则默认返回的是一个undefined,可以转换为false。所以这个函数需要有个判断条件进行显示的返回。当有一个值不原创 2020-08-30 10:22:08 · 1975 阅读 · 0 评论 -
JavaScript数组遍历方法4 reduce方法
数组的reduce方法也是数组进行遍历的方法,其也接收两个参数;第一个参数是一个回调函数,第二个参数是一个传入值。其中第一个参数回调函数可以接收4个参数第一个参数为传入值,第二个参数为当前值,第三个参数为当前在数组中的索引值,第四个参数为当前数组,其中第一个和第二个参数为必要参数其他参数为可选参数,reduce函数和map函数一样需要有一个返回值,但是与map函数不同的是reduce函数的返回值不必强制为数组。同map函数一样reduce函数中的回调函数也不能存在break和continue语句。下面是使用原创 2020-08-28 13:42:46 · 729 阅读 · 0 评论 -
JavaScript数组遍历方法3 map方法
map也是数组的一个方法和foreach一样也可以接收两个参数第一个参数是一个回调函数,第二个参数是一个传入值;对于参数回调函数接收三个参数第一个参数是当前值,第二个参数是当前值的索引值,第三个参数为此数组;man函数中不能存在break和continue语句,和foreach不同的是foreach没有返回值,但是map函数具有返回值为每次执行时返回的值组成的数组,如果没有指定返回值返回值为undefined。下面我们来看一下map方法进行数组求和的处理。<!DOCTYPE html>&原创 2020-08-26 22:53:36 · 822 阅读 · 0 评论 -
JavaScript数组遍历方法2 foreach
foreach方法是数组的方法,也可以对数组进行遍历,他接收两个参数第一个参数为一个函数,第二个参数为传入的值。其中第一个参数的函数接受3个参数第一个参数是当前遍历数据的值,第二个参数为当前遍历数据在数组中的索引值,第三个参数是当前数组。foreach中的函数中不能存在break和continue语句。相对for循环来说功能比较专注于对数组的每一项元素都进行处理。但是对于寻找某个值或者需要中途退出的函数来说不太适用,同时函数没有返回值。下面我们来看一下对于foreach的求数组和的实现。<!DO原创 2020-08-23 21:34:07 · 592 阅读 · 0 评论 -
JavaScript的数组遍历的方法1 for循环
JavaScript遍历数组的方法有很多种,其中最为常见的一种就是for循环。for循环只能算是JavaScript遍历数组的一种方法大多数由其他语言转变过来的程序员最为喜欢使用的一种方法。使用这种方法主要是使用JavaScript语言的几种特性。(1)for循环是每种语言中都存在的循环语句。(2)数组具有长度参数。(3)数组可以使用[]的方式变量数组中的每一个元素。使用上述的三种特性便可以实现对数组的遍历,下面这个例子便完成了对数组的遍历进而计算数组的总和。let a=...原创 2020-08-23 21:18:30 · 638 阅读 · 0 评论 -
JavaScript的switch的使用
很多程序都具有switch语句,用于作为菜单功能。当传入的参数的值等于菜单选项将会执行菜单选项中的内容,但是JavaScript语言具有特殊性有三等(===)和两等(==)两种情况,对于JavaScript来说switch使用的是三等呢,还是两等呢?我们以下面这段程序来进行阐述。<!DOCTYPE html><html> <head> <title>简单的switch的使用</title> <m原创 2020-08-09 21:34:33 · 715 阅读 · 0 评论 -
JavaScript的假值问题
JavaScript中的真假值判断是一个比较重要的知识点下面针对每种数据类型进行分析:大家都知道当前JavaScript的数据类型有:undefined,null,Object,Number,String,Symbol,Boolean这七种数据类型。undefined数据类型只有一种数据undefined,对应的布尔值为false。null数据类型也是只有一种数据null,对应的布尔值为false。Object是一个大的数据类型包括array,function,正则表达式等,所有的Objec原创 2020-05-24 17:46:40 · 206 阅读 · 0 评论 -
JavaScript作用域问题
JavaScript的作用域问题是一个比较复杂的问题也是在编写程序过程中比较容易出错的地方,特别是从C/C++这些具有块级语言功能的语言转过来的工程师。 JavaScript在ES6时代之前是没有块级作用域的概念只有全局作用域和函数级作用域这两种作用域。同时由于JavaScript定义变量的特殊性导致编写程序的时候容易出现一些问题造成不少的麻烦。 JavaScript定义变量的特殊性:(1)使用var定义变量的时候会产生变量提升。(2)使用var定义变量...原创 2020-05-24 15:47:04 · 181 阅读 · 0 评论 -
JavaScript 基础学习之 其他数据类型转换为数字类型
Hello,大家好。很多前端面试的试题都会考到其他类型到数值类型的转换。特别是在隐式转换的时候会特别的多,现在我们就对这一点进行讨论:其他类型转换为数值类型的值大致分为4种情况:(1)非对象类型的参数转换为数值:...原创 2020-05-14 14:30:32 · 631 阅读 · 0 评论 -
原生前端之nodetext操作
JavaScript与HTML交互最主要的是使用DOM进行控制HTML的文档信息。对于具有全标签结构的HTML元素可以分为属性和文本两部分,下面我们将对文本这一部分进行详细的讲解。话先不多说先举个栗子压压惊。<!DOCTYPE html><html> <head> <title>text的使用</title>...原创 2019-12-30 15:47:48 · 577 阅读 · 0 评论 -
原生前端之DOM属性操作
JavaScript与HTML交互最主要的是使用DOM进行控制HTML的文档信息。对于具有全标签结构的HTML元素可以分为属性和文本两部分,下面我们将对属性这一部分进行详细的讲解。话先不多说先举个栗子压压惊。<!DOCTYPE html><html> <head> <title>设置读取元素的属性</title&...原创 2019-12-26 11:19:36 · 565 阅读 · 0 评论 -
原生前端之样式类的操作---classList
操作自己DOM元素的样式可以使用className和classList两种方式 进行操作。className返回的是一个此元素包含的样式类的字符串以空格符间隔,classList返回的是一个数组。这里我们主要讲解classList的使用。classList包含5种方法:add:添加类contains:是否包含此类remove:删除此类replace:进行类的替换togg...原创 2019-12-24 17:07:02 · 621 阅读 · 0 评论 -
WebPack 安装出现 Cannot find module 'webpack-cli/package.json'的错误解决
最近想尝试一下使用Webpack按照网上和书籍上进行Webpack的安装,当执行webpack命令的时候会出现Cannot find module 'webpack-cli/package.json'。经过检查webpack和webpack-cli都已经安装成功了。但是就是执行webpack命令的时候会出现错误。尝试了很多网上的办法和指导都没有解决这个问题。后来没有办法只能硬着头皮找问题了。...原创 2019-08-30 15:08:05 · 31529 阅读 · 8 评论