- 博客(53)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 数组操作concat(), slice(), splice()方法记录
concat()方法concat()方法基于当前数组所有项创建一个新数组1. 在没有给concat()方法传递参数的情况下， 他复制当前数组并返回副本2. 如果传递给concat()方法的是一个或多个数组， 则该方法会将这些数组中的每一项都添加到结果数组中3. 如果传递的值不是数组， 这些值就会简单地添加到结果数组的末尾let colors = ['red', 'green...
2019-03-24 14:13:13
1081
原创 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
22941
原创 整理一些在项目中用到的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
560
原创 经典面试题：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
816
原创 JS深层取值的方法
前端取后端数据的时候， 经常会遇到一些比较深层的结构。比如```const address = { province: { name: '江苏省'， city: { name: '扬州市' district: { name: '邗江区' } } }}```这时...
2020-04-25 16:13:01
1829
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
1076
原创 利用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
377
原创 使用IntersectionObserver接口进行图片懒加载
参考文章：简书 文中图片来源：http://www.acgjc.com[MDN] IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。也就是说， 这是用来监听页面中模块可见区域的。...
2019-08-10 14:29:02
999
1
原创 js 吸顶 vue 吸顶
页面吸顶的效果， 实现有两种， 最快的一种是用position: sticky方法， 不过该方法尚存在兼容性问题， 使用的时候需加入兼容方法。使用方法跟position: fixed类似。 只要设定好吸顶时候的位置就行了。<div class="title title_sticky"> Title </div><style>.title { ...
2019-06-03 23:02:38
717
原创 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
7993
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
3029
原创 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
888
转载 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
382
原创 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
5315
1
转载 前端不改后台接口地址，也能获取假数据
原文来自：https://my.oschina.net/kalnkaya/blog/3047959， 感谢！大家都知道前端要想自己造假数据，可以使用mock.js。 如果你不想把假数据写在代码中，可以借助easymock。 但是即便你使用了easymock，依然需要修改代码中的后台接口基地址，使其暂时指向easymock的地址，这种方法存在如下弊端：你不得不修改你的baseUrl以便暂时...
2019-05-12 11:38:05
1821
转载 长度100的数组的多重写法
原文链接 [知乎]：https://www.zhihu.com/question/41493194 [简书]：https://www.jianshu.com/p/6c7d0b18d4ca今天在知乎看到一个问答贴， 题目是这样的：如何不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标？帖子作者是这样写的var a ...
2019-03-28 22:19:25
1157
转载 reduce()与flat()学习
reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。转载于 https://segmentfault.com/a/1190000010731933 arr.reduce(callback,[initialValue]) callback （执行数组中每个值的函数，包含四个参数） previousValue...
2019-02-26 21:45:00
1111
原创 js函数去抖和函数节流测试
去抖（debounce）和节流（throttle）都是限制函数不会在短时间内被频繁触发执行的方法。两者的区别简单来说， 就是：去抖是频繁触发只会执行一次， 而节流则是频繁触发但是有间隔的执行模拟一个点击事件<div id="testDiv" onclick="testClick()"> 点击</div>去抖： //函数去抖//去抖debounc...
2019-02-15 18:45:19
502
原创 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
270
转载 关于setTimeOut和setInterval改变this指向的问题解决方法
在setTimeOut()或setInterval()这样的方法中，如果传入的函数包含this, 那么，默认情况下，函数中的this会指向window对象。这是由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。百度了网上的解决方法，如下1.将当前对象的this存为一个变量 ...
2018-09-09 18:02:33
2602
1
原创 Web Worker初步学习
Web Worker是H5的新特性之一，但用的比较少。其特性是在Javascript单线程执行的基础上，开启一个子线程。子程序可以和主线程相互收发数据，但是不影响主线程。且子线程不能操作页面的dom，不能通过任何方式影响页面的外观。一、写法1. 主线程创造一个新的worker，即子线程var worker = new Worker("./worker.js");2. 传递参数/数...
2018-08-19 16:50:23
356
转载 oracle中比like'%'更高效的模糊查询方法
这里记录一下一个比较好的模糊查询方法。转载自Oracle模糊查询方法，感谢原博主。在Oracle中提供了instr(strSource,strTarget)函数，比使用'%关键字%'的模式效率高很多。instr函数有三种情况：instr(字段, '关键字')>0 相当于 字段 like '%关键字%'instr(字段, '关键字')=1 相当于 字段 like '关键字%'...
2018-01-16 11:14:38
6222
翻译 Aurelia中的HTML行为介绍
Aurelia模板引擎的自定义属性和自定义元素功能的概述，不仅包括如何创建基本版本，还包括如何在您的应用程序中本地和全局使用它们。介绍Aurelia中的术语“HTML行为”包含两个基本概念：自定义元素和自定义属性。HTML行为几乎是每个Aurelia应用程序的基本组成部分。他们用高度可重用的代码去帮助创建组件化的应用程序。在这个介绍性文档中，我们将探讨一些基本的主题，以帮助您在Aureli
2017-11-20 19:59:29
988
原创 将Bootstrap应用到Aurelia项目中
很多时候，页面样式的问题让人头疼。而Bootstrap则是一个很好的前端框架，那么如何在Aurelia中引入Bootstrap框架呢。引用Bootstrap的方法有很多种，这里介绍的是一种适合与Aurelia Cli命令工具的方法，不过我想在webpack中也可以使用（也可能会出问题，暂时先介绍这一种）.1. npm安装Bootstrap 。 （这里用的是Bootstrap的最新
2017-11-12 15:48:26
702
原创 oracle 还原被drop的表
如果要对drop掉的表做恢复处理，而此时又已经创建了表emp，那么如何恢复该表呢（由于已经存在该表名，不能直接恢复）。方法：1. 查看被删除的表是不是在回收站中，在的话才能恢复select * from dba_recyclebin；(查看original_name列)2. 由于drop掉emp表后，又新建了同名的表，所以把原来的表中数据先放到一个其他名字的表中（名字可以取个emp
2017-10-19 10:34:36
1278
原创 ES6中熟悉而又陌生的箭头函数 '=>'
以前略知晓箭头函数的写法，最近看了阮一峰先生的ES6入门后，又学到了很多。记录如下：箭头函数简化了函数的写法，作用类似于return 。ES6：var func = x => x;等同于ES5中:var func = function(x){ return x;}如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。var f = () => 5;// 等同
2017-09-06 15:26:14
483
原创 简要记录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
508
转载 关于new Date()方法在IE8下面无效的解决办法
1. 如果获取两个日期差是需要Date( )方法的，最近发现Date()方法在IE8下并不友好，存在一些兼容性的问题。下面介绍方法，计算两个日期差//计算日期差函数，兼容IE8 function getDays(strDateStart,strDateEnd){ var strSeparator = "."; //2017.08.08 这里以.为分隔符
2017-08-22 13:30:30
4180
原创 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
984
转载 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
3598
转载 整理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
20482
转载 记录一下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
23167
1
转载 ES6:变量的解构赋值
本内容摘自阮一峰先生的《ECMAScript6入门》书中第三章 -- 变量的解构赋值。变量的解构赋值用途很多。（1）交换变量的值let x = 1;let y = 2;[x, y] = [y, x];上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。（2）从函数返回多个值函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有
2017-06-06 22:35:13
377
原创 对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
534
1
原创 Angular2入门项目显示loading的原因
刚刚接触Angular 2.。按照官网的文档建好生成以后，发现浏览器显示的loading，而不是文档里的App Works。一开始还以为是index.html改了的而文档没及时更新的原因。后来当给组件加了css而无变化，才发现我是多么的想当然和无知。百度一下，原来是我的猎豹浏览器有点旧，不支持ES6的原因，后来我用最新版的Chrome后，就是显示App Works了。出现Loding是通常是因
2017-05-23 18:21:51
3269
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
1308
原创 记录一下冒泡排序和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
3130
原创 AngularJS动态切换样式
AngularJS相比原生的js或者jquery有着很大不同，对于一个简单的鼠标点击不同选项，动态切换样式该怎么实现呢。本文实现的是点击某个标题，标题问题加粗，并随之切换相应的div内容，如下 Ok.，实现过程1. html代码 推荐
2017-03-27 22:50:07
8361
原创 网页前后端图片共享（Global Setting）
一个网站系统的前后台肯定不能在一个项目里，但是前台用户上传的图片怎样跨项目在后台显示呢。这里我们需要一个全局设置工具Global Setting.这是在网页后端的java环境部署的，配合使用的是jsp + servlet技术。注： 这里是在后台，共享的是前台的图片库。可能需要导入IO的jar包。1. 在项目中新建一个文件夹Util, 新建一个class: GlobalSetting.j
2017-03-27 20:19:34
1264
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人