- 博客(53)
- 资源 (2)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 数组操作concat(), slice(), splice()方法记录
concat()方法concat()方法基于当前数组所有项创建一个新数组1. 在没有给concat()方法传递参数的情况下, 他复制当前数组并返回副本2. 如果传递给concat()方法的是一个或多个数组, 则该方法会将这些数组中的每一项都添加到结果数组中3. 如果传递的值不是数组, 这些值就会简单地添加到结果数组的末尾let colors = ['red', 'green...
2019-03-24 14:13:13
1099
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 JS中find(), findIndex(), filter(), forEach(), some(), every(), map(), reduce()方法记录
1. find()与findIndex() find()方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。[1, 2, 5, -1, 9].find((n) => n < 0)//找出数组中第一个小于 0 的成员// -...
2018-10-07 20:52:47
23049
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 整理一些在项目中用到的js知识
一、 JS知识点:1. .includes();//判断是否包含啥啥啥,返回布尔 startsWith(); endsWith()///判断是否以啥啥啥开头或结尾的,返回布尔2. Math.max(...[14, 3, 26]); //26, ...用法 或者Math.max.apply(null, arr) num | 0 , 相当于Math.floor(...
2018-08-16 22:38:57
575
原创 经典面试题:JS常见的排序算法
1. 冒泡排序// 冒泡排序// 比较两个相邻的元素,将值大的元素交换至右端// N个数字要排序完成,总共进行N-1趟排序function bubbleSort(arr) { if (arr.length === 0) { return [] } for(let i = 0; i < arr.length; i++) { for(let j = 0; j<arr.length; j++) { if (arr[j] > arr[j+1]) { let
2020-10-11 13:03:10
856
原创 JS深层取值的方法
前端取后端数据的时候, 经常会遇到一些比较深层的结构。比如```const address = { province: { name: '江苏省', city: { name: '扬州市' district: { name: '邗江区' } } }}```这时...
2020-04-25 16:13:01
1930
1
原创 基于ECharts封装的vue折线图组件
<template> <div class="qf-e-chart"> <div class="e-chart-canvas" ref="echarts"></div> </div></template><script> import echarts from 'echarts' ...
2019-10-14 20:09:03
1094
原创 利用Array.from()的一些数据操作方法
1. 求和sum 根据传入的参数, 将arguments类数组对象转化为真数组, 并利用reduce方法求和 function sum() { // Array.from()将arguments类数组转换为真数组 // 也可以使用Array.prototype.slice.call(arguments) , 这是ES5语法, 兼容性更好 return Array...
2019-09-21 11:40:00
390
原创 使用IntersectionObserver接口进行图片懒加载
参考文章:简书 文中图片来源:http://www.acgjc.com[MDN] IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。也就是说, 这是用来监听页面中模块可见区域的。...
2019-08-10 14:29:02
1023
1
原创 js 吸顶 vue 吸顶
页面吸顶的效果, 实现有两种, 最快的一种是用position: sticky方法, 不过该方法尚存在兼容性问题, 使用的时候需加入兼容方法。使用方法跟position: fixed类似。 只要设定好吸顶时候的位置就行了。<div class="title title_sticky"> Title </div><style>.title { ...
2019-06-03 23:02:38
730
原创 add(1, 2, 3)与add(1)(2)(3)的写法
参考文章:https://segmentfault.com/a/1190000008610969add(1, 2, 3, ...)是对传入参数的求和方法function add (...args) { return args.reduce((prev, val) => { return prev + val })}let rs = add(...
2019-06-02 16:55:14
8067
1
原创 CSS Vue 切换背景颜色
原文演示及链接:https://codepen.io/richardtallent/pen/yvpERW/<template> <div class="theme" :style="bgProps"> <div class="btn"> <input type="color" v-...
2019-05-18 14:31:11
3054
原创 CSS3 变色背景 动态边框
动态边框样式参考:https://juejin.im/post/5cdbc938f265da034d2a38c1#heading-2// cssbody { width: 100wh; height: 90vh; color: #fff; background: linear-gradient(-45deg, #EE7752, #E73C7E,...
2019-05-16 11:08:58
908
转载 CSS3 砖头墙面效果
转载至https://codepen.io/krischan77/pen/VOmJzO// HTML<div class="brick"></div>// CSS.brick { width: 300px; height: 300px; margin: 10px auto; background: linear-gradient(135deg, #...
2019-05-16 10:37:22
415
原创 CSS 彩虹字 动态彩虹字
1. 静态彩虹字// html<div class="this-div">Elegant and Beautiful</div>// css.this-div{ margin: 20px; width: 200px; background: linear-gradient(90deg, red, blue); -webkit-text-fill-c...
2019-05-14 17:58:17
5696
1
转载 前端不改后台接口地址,也能获取假数据
原文来自:https://my.oschina.net/kalnkaya/blog/3047959, 感谢!大家都知道前端要想自己造假数据,可以使用mock.js。 如果你不想把假数据写在代码中,可以借助easymock。 但是即便你使用了easymock,依然需要修改代码中的后台接口基地址,使其暂时指向easymock的地址,这种方法存在如下弊端:你不得不修改你的baseUrl以便暂时...
2019-05-12 11:38:05
1851
转载 长度100的数组的多重写法
原文链接 [知乎]:https://www.zhihu.com/question/41493194 [简书]:https://www.jianshu.com/p/6c7d0b18d4ca今天在知乎看到一个问答贴, 题目是这样的:如何不使用loop循环,创建一个长度为100的数组,并且每个元素的值等于它的下标?帖子作者是这样写的var a ...
2019-03-28 22:19:25
1183
转载 reduce()与flat()学习
reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。转载于 https://segmentfault.com/a/1190000010731933 arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函数,包含四个参数) previousValue...
2019-02-26 21:45:00
1135
原创 js函数去抖和函数节流测试
去抖(debounce)和节流(throttle)都是限制函数不会在短时间内被频繁触发执行的方法。两者的区别简单来说, 就是:去抖是频繁触发只会执行一次, 而节流则是频繁触发但是有间隔的执行模拟一个点击事件<div id="testDiv" onclick="testClick()"> 点击</div>去抖: //函数去抖//去抖debounc...
2019-02-15 18:45:19
519
原创 VUE初学知识点记录
1. vue基础构成 HTML: <div id="app" v-on:click="doClick"> {{title}} </div> js: var vm = new Vue({ el: '#app', //实例 ,区域元素 data: { title :...
2018-09-16 11:23:16
282
转载 关于setTimeOut和setInterval改变this指向的问题解决方法
在setTimeOut()或setInterval()这样的方法中,如果传入的函数包含this, 那么,默认情况下,函数中的this会指向window对象。这是由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。百度了网上的解决方法,如下1.将当前对象的this存为一个变量 ...
2018-09-09 18:02:33
2649
1
原创 Web Worker初步学习
Web Worker是H5的新特性之一,但用的比较少。其特性是在Javascript单线程执行的基础上,开启一个子线程。子程序可以和主线程相互收发数据,但是不影响主线程。且子线程不能操作页面的dom,不能通过任何方式影响页面的外观。一、写法1. 主线程创造一个新的worker,即子线程var worker = new Worker("./worker.js");2. 传递参数/数...
2018-08-19 16:50:23
372
转载 oracle中比like'%'更高效的模糊查询方法
这里记录一下一个比较好的模糊查询方法。转载自Oracle模糊查询方法,感谢原博主。在Oracle中提供了instr(strSource,strTarget)函数,比使用'%关键字%'的模式效率高很多。instr函数有三种情况:instr(字段, '关键字')>0 相当于 字段 like '%关键字%'instr(字段, '关键字')=1 相当于 字段 like '关键字%'...
2018-01-16 11:14:38
6269
翻译 Aurelia中的HTML行为介绍
Aurelia模板引擎的自定义属性和自定义元素功能的概述,不仅包括如何创建基本版本,还包括如何在您的应用程序中本地和全局使用它们。介绍Aurelia中的术语“HTML行为”包含两个基本概念:自定义元素和自定义属性。HTML行为几乎是每个Aurelia应用程序的基本组成部分。他们用高度可重用的代码去帮助创建组件化的应用程序。在这个介绍性文档中,我们将探讨一些基本的主题,以帮助您在Aureli
2017-11-20 19:59:29
1016
原创 将Bootstrap应用到Aurelia项目中
很多时候,页面样式的问题让人头疼。而Bootstrap则是一个很好的前端框架,那么如何在Aurelia中引入Bootstrap框架呢。引用Bootstrap的方法有很多种,这里介绍的是一种适合与Aurelia Cli命令工具的方法,不过我想在webpack中也可以使用(也可能会出问题,暂时先介绍这一种).1. npm安装Bootstrap 。 (这里用的是Bootstrap的最新
2017-11-12 15:48:26
719
原创 oracle 还原被drop的表
如果要对drop掉的表做恢复处理,而此时又已经创建了表emp,那么如何恢复该表呢(由于已经存在该表名,不能直接恢复)。方法:1. 查看被删除的表是不是在回收站中,在的话才能恢复select * from dba_recyclebin;(查看original_name列)2. 由于drop掉emp表后,又新建了同名的表,所以把原来的表中数据先放到一个其他名字的表中(名字可以取个emp
2017-10-19 10:34:36
1303
原创 ES6中熟悉而又陌生的箭头函数 '=>'
以前略知晓箭头函数的写法,最近看了阮一峰先生的ES6入门后,又学到了很多。记录如下:箭头函数简化了函数的写法,作用类似于return 。ES6:var func = x => x;等同于ES5中:var func = function(x){ return x;}如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。var f = () => 5;// 等同
2017-09-06 15:26:14
497
原创 简要记录ES6中Module的语法
ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入,如同script导入外部JS脚本。例一://xx1.jsvar name = 'wu';var age = 20;var addr = 'Suzhou';export {name,age,addr}; //输出变量//main.js//引入变量 其中把name变量名改为nimpor
2017-08-26 14:36:55
527
转载 关于new Date()方法在IE8下面无效的解决办法
1. 如果获取两个日期差是需要Date( )方法的,最近发现Date()方法在IE8下并不友好,存在一些兼容性的问题。下面介绍方法,计算两个日期差//计算日期差函数,兼容IE8 function getDays(strDateStart,strDateEnd){ var strSeparator = "."; //2017.08.08 这里以.为分隔符
2017-08-22 13:30:30
4202
原创 JS输出斜边递增正三角
今天看到一条JS题目,在页面上打印输出一个正三角形,斜边递增。如下。 1 2 1 23 2 1 2 3......思索出一个简单的想法,用for循环嵌套就好了代码如下,比较粗糙for(let i = 1; i<=3;i++){ for(let d = i;d <= 3+1-i;d++){ document.wri
2017-07-09 13:59:22
1005
转载 ES6中forEach方法
本文引用地址:http://www.zhangxinxu.com/wordpress/?p=3220。感谢博主。forEachforEach是Array新方法中最基本的一个,就是遍历,循环。例如下面这个例子:[1, 2 ,3, 4].forEach(alert);等同于下面这个传统的for循环:var array = [1, 2, 3, 4];for (
2017-06-15 21:55:56
3620
转载 整理ES6中的Set和Map方法
本文参考阮一峰先生的《ECMAScript 6 入门》一书的set和map一章。1. setES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));f
2017-06-15 21:03:09
20521
转载 记录一下ES6扩展运算符(三点运算符)...的用法
该记录源于segmentfaul网友的评论,特意感谢! ...运算符用于操作数组,有两种层面1. 第一个叫做 展开运算符(spread operator),作用是和字面意思一样,就是把东西展开。可以用在array和object上都行。比如: let a = [1,2,3];let b = [0, ...a, 4]; // [0,1,2,3,4]let obj = { a:...
2017-06-11 18:51:32
23187
1
转载 ES6:变量的解构赋值
本内容摘自阮一峰先生的《ECMAScript6入门》书中第三章 -- 变量的解构赋值。变量的解构赋值用途很多。(1)交换变量的值let x = 1;let y = 2;[x, y] = [y, x];上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。(2)从函数返回多个值函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有
2017-06-06 22:35:13
390
原创 对ES6中let与const命令初步了解
最近看了阮一峰的《ECMAScript6入门》 ,对第一章做一些记录1. let命令 ES6 新增的关键字,用法就是用于声明变量,和 var 类似;区别在于声明的变量是局部的,只在 let 所在的代码块内有效。var a = [];for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}
2017-06-06 17:39:01
549
1
原创 Angular2入门项目显示loading的原因
刚刚接触Angular 2.。按照官网的文档建好生成以后,发现浏览器显示的loading,而不是文档里的App Works。一开始还以为是index.html改了的而文档没及时更新的原因。后来当给组件加了css而无变化,才发现我是多么的想当然和无知。百度一下,原来是我的猎豹浏览器有点旧,不支持ES6的原因,后来我用最新版的Chrome后,就是显示App Works了。出现Loding是通常是因
2017-05-23 18:21:51
3294
1
原创 jQuery中attr()方法和prop()方法获取input的checked属性的区别
今天在使用checkbox中,通过attr()获取checked状态时发现显示的是undefined。后来改成了prop()方法却没问题。百度发现,使用jQuery的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别:1.如果使用attr()方法获取时,如果当前input中初始化未定义checked属性,则不管当前是否
2017-04-26 14:04:55
1326
原创 记录一下冒泡排序和sort()排序
今天有空,整理了一下写过的javascript排序方法。排序方法很多,我了解的不算多,这里记录下知道的冒泡排序和js自带的sort()排序。1. 冒泡排序function BubbleSort(arr) { var len = arr.length; for (var i = 0; i < len; i++) { for (var j = 0; j < le
2017-03-28 23:58:43
3163
原创 AngularJS动态切换样式
AngularJS相比原生的js或者jquery有着很大不同,对于一个简单的鼠标点击不同选项,动态切换样式该怎么实现呢。本文实现的是点击某个标题,标题问题加粗,并随之切换相应的div内容,如下 Ok.,实现过程1. html代码 推荐
2017-03-27 22:50:07
8387
原创 网页前后端图片共享(Global Setting)
一个网站系统的前后台肯定不能在一个项目里,但是前台用户上传的图片怎样跨项目在后台显示呢。这里我们需要一个全局设置工具Global Setting.这是在网页后端的java环境部署的,配合使用的是jsp + servlet技术。注: 这里是在后台,共享的是前台的图片库。可能需要导入IO的jar包。1. 在项目中新建一个文件夹Util, 新建一个class: GlobalSetting.j
2017-03-27 20:19:34
1296
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人