末了更新于2019年1月13日
前端经常运用代码片断(一) 点这里
前端经常运用代码片断(二) 点这里
前端经常运用代码片断(三) 点这里
前端经常运用代码片断(四) 点这里
前端经常运用代码片断(五) 点这里
前端经常运用代码片断(六) 点这里
1.数组去重
要领1: (ES5)
function unique(a) {
var res = [];
for (var i = 0, len = a.length; i < len; i++) {
var item = a[i];
(res.indexOf(item) === -1) && res.push(item);
}
return res;
}
var a = [1, 1, '1', '2', 1];
var ans = unique(a);
console.log(ans); // => [1, "1", "2"]
或
function unique(a) {
var res = a.filter(function(item, index, array) {
return array.indexOf(item) === index;
});
return res;
}
var a = [1, 1, '1', '2', 1];
var ans = unique(a);
console.log(ans); // => [1, "1", "2"]
要领2: (ES6)
Set 以及 Array.from 要领:
function unique(a) {
return Array.from(new Set(a));
}
var a = [{name: "hanzichi"}, {age: 30}, new String(1), new Number(1)];
var ans = unique(a);
console.log(ans); // => [Object, Object, String, Number]
2.数组不是原始数据范例
typeof {} === 'object' // true
typeof 'a' === 'string' // true
typeof 1 === number // true
// But....
typeof [] === 'object' // true
假如你想晓得你的变量是不是是数组,你依然能够用Array.isArray(myVar)
原始数据 (原始值、原始数据范例)不是一种 object 范例而且没有本身的要领的。在 JavaScript 中,有六种原始数据范例:string,number,boolean,null,undefined,symbol (new in ECMAScript 2015)。
3.两个数组内的元素相加
var a = [1,2,3,4,3];
var b = [4,5,6,7];
var c = a.map(function(v, i){
return v + (b[i] || 0);
});
console.log(c);
第二种斟酌兼容
var a=[1,2,3,4,5];
var b=[6,7,8,9];
var c=[];
for (var i=0;i<a.length;i++){
c[i]=a[i]+(b[i]||0);
}
console.log(c);//[7, 9, 11, 13, 5]
4.一个数组插进去到另一个数组
经由过程Array.prototype.push.apply
要领将一个数组插进去到别的一个数组
var a = [1,2,3];
var b = [4,5,6];
Array.prototype.push.apply(a, b);
console.log(a); // [1, 2, 3, 4, 5, 6]
5.数字排序
Javascript 的sort()函数在默许情况下运用字母数字(字符串Unicode码点)排序。
所以
[1,2,5,10].sort()
//会输出
[1, 10, 2, 5]
要准确的排序一个数组, 你能够用
[1,2,5,10].sort((a, b) => a — b)
//会输出 从小到大排序
[1, 2, 5, 10]
从大到小排序即
[1,2,5,10].sort((a, b) => b-a)
6.replace替换字符串
let s = "bob"
const replaced = s.replace('b', 'l')
replaced === "lob"
s === "bob"
我以为这是一件功德,由于我不喜欢函数转变它们的输入。 你还应该晓得 replace 只会替换第一个婚配的字符串:
假如你想替换一切婚配的字符串,你能够运用带/g标志的正则表达式 :
"bob".replace(/b/g, 'l') === 'lol' // 替换一切婚配的字符串
7. 比较的时刻要注意
// These are ok
'abc' === 'abc' // true
1 === 1 // true
// These are not
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1} // false
{} === {} // false
缘由:[1,2,3]和[1,2,3]是两个自力的数组。它们只是正好包括雷同的值。它们具有差别的援用,没法用===
相比较。
8. 闭包
const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10
你是不是是以为它会输出 0, 1, 2… ? 你晓得它为什么不是如许输出的吗? 你会如何修正让它输出 0, 1, 2… ?
这里有两种能够的处理要领:
- 用 let 替换 var. Boom. 处理了.
let和var的差别在于作用域。var的作用域是近来的函数块,let的作用域是近来的封闭块,封闭块能够小于函数块(假如不在任何块中,则let和var都是全局的)。(泉源)
- 替换要领: 用 bind:
Greeters.push(console.log.bind(null, i))
9.当点击 复制 按钮的时刻, 将选中的笔墨复制到粘贴板上
<input type="text" id="copytest"/>
<input type="button" value="复制" onclick="clickBtn()"/>
function clickBtn(){
// 猎取 input 元素
var input = document.querySelector('#copytest');
//或 var input = document.getElementById('copytest');
input.focus();
input.select();
// 实行复制敕令
document.execCommand('Copy')
}
中心代码 document.execCommand() 要领, 该要领的也许用处是 对选中地区 举行一些操纵
10.JS猎取textarea中盈余字数
html部份:
<textarea id="text_txt1"></textarea>
<span id ="num_txt1">盈余可输入600字</span>
js部份:
function changeLength(obj,num){
obj.on('keyup',function(){
var txtval = obj.val().length;
//console.log(txtval);
var str = parseInt(600-txtval);
//console.log(str);
if(str > 0 ){
num.html('盈余可输入'+str+'字');
}else {
num.html('盈余可输入0字');
obj.val(obj.val().substring(0, 600));
}
//console.log($('#num_txt').html(str));
});
}
$(function(){ //我这里有四个,所以挪用4次
changeLength($('#text_txt1'),$('#num_txt1'));
changeLength($('#text_txt2'),$('#num_txt2'));
changeLength($('#text_txt3'),$('#num_txt3'));
changeLength($('#text_txt4'),$('#num_txt4'));
});
11.js中的点击事宜
//html
<button id="btn">click</button>
var btn=document.getElementById('btn');
//js 第一种:
btn.onclick=function(){
alert('hello world');
}
//消弭事宜
btn.onclick=null;//就不会弹出框了
//js 第二种:
btn.addEventListener('click',function(){
alert('hello world')
},false);
btn.addEventListener('click',function(){
alert(this.id)
},false);
//js 第三种:
function demo(){
alert('hello');
}
<button id="btn" onclick="demo()">click</button>
js触发按钮点击事宜
模仿JS触发按钮点击功用
<html>
<head>
<title>usually function</title>
</head>
<script>
function load(){
//下面两种要领效果是一样的
document.getElementById("target").onclick();
document.getElementById("target").click();
}
function test(){
alert("test");
}
</script>
<body onload="load()">
<button id="target" onclick="test()">test</button>
</body>
<html>
//备注:
//btnObj.click()是真正地用顺序去点击按钮,触发了按钮的onclick()事宜
//btnObj.onclick()只是简朴地挪用了btnObj的onclick所指向的要领,
//只是挪用要领罢了,并未触发事宜
12.消灭浮动clearfix一种写法(stylus)
.clearfix
display :inline-block
&:after
display :block
content:"."
height:0
line-height: 0
clear :both
visibility :hidden
13.星星评分盘算
许多商品评价中都邑触及评分,再依据评分盘算星星个数
现引见一种要领:
每一个都是单个星星,分为三种.png图
const LENGTH = 5;//星星个数
const CLS_ON = 'on';//悉数选中星星的classNmae
const CLS_HALF = 'half';//半个选中的classNmae
const CLS_OFF = 'off';//未选中的classNmae
let result = [];
let score = Math.floor(this.score * 2) / 2;
//盘算评分,如4.7会盘算成4.5分,4.3会盘算成4分
let hasDecimal = score % 1 !== 0; //盘算是不是存在半颗星
let integer = Math.floor(score); //盘算有几个完整选中的星星
for (let i = 0; i < integer; i++) {
result.push(CLS_ON);//数组中增加悉数选中星星的classNmae
};
if (hasDecimal) {
result.push(CLS_HALF);//数组中增加半颗星星的classNmae
};
while (result.length < LENGTH) {
result.push(CLS_OFF);//数组中补充未点亮星星的classNmae
};
return result;//返回数组
14.封闭页面弹框提醒
相似下图效果
window.onbeforeunload=function (){
var warning = "请确认保留后再退出哦!";
return warning;
}
//注:如今不能弹出自定义的信息,暂时不晓得缘由,
//后续会追踪这个题目(假如你晓得能够留下批评)
//封闭页面时的一些清晰缓存,ajax退出登录等操纵能够写在函数里
15.封装jsonp
import originJSONP from 'jsonp'
// 封装的 jsonp 函数
export default function jsonp(url, data, options) {
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
return new Promise((resolve, reject) => {
originJSONP(url, options, (err, data) => {
if(!err) {
resolve(data)
} else {
reject(err)
}
})
})
}
// url 拼接函数
function param(data) {
let url = ''
for(let k in data) {
let value = data[k] !== undefined ? data[k] : ''
url += `&${k}=${encodeURIComponent(value)}`
}
return url ? url.substring(1) : ''
}
16.firefox 到场toolTip提醒信息后 页面发抖
在firefox中 默许页面不凌驾一页是没有滚动条的 到场页面中某些元素会暂时转变页面高度 比方用了toolTip 之类的提醒小工具 就会涌现滚动条时有时无 致使页面发抖
处理要领: 增加css代码
body{
overflow: -moz-scrollbars-vertical;
}
17.推断游览器内核,自动增加前缀完成css属性兼容
let elementStyle = document.createElement('div').style
// 主流浏览器内核
let vendor = (() => {
let transfromNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
ms: 'msTransform',
O: 'OTransform',
standard: 'transform'
}
for (let key in transfromNames) {
if (elementStyle[transfromNames[key]] !== undefined) {
return key
}
}
return false
})()
// 增加款式的浏览器前缀
export function prefixStyle(style) {
if (vendor === false) {
return false
}
if (vendor === 'standard') {
return style
}
return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}
18.增加className
// 为元素增加类名
export function addClass(el, className) {
// 先推断一下元素是不是含有须要增加的类名,有则直接 return
if (hasClass(el, className)) {
return
}
// 把该元素含有的类名以空格支解
let newClass = el.className.split(' ')
// 把须要的类名 push 进来
newClass.push(className)
// 末了以空格拼接
el.className = newClass.join(' ')
}
// 推断是不是有要检察的 className,有则返回true,不然返回 false
export function hasClass(el, className) {
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
return reg.test(el.className)
}
19.猎取或设置data- 属性
export function getData(el, name, val) {
const prefix = 'data-'
name = prefix + name
if (val) {
return el.setAttribute(name, val)
} else {
console.log('el.getAttribute(name)', el.getAttribute(name))
return el.getAttribute(name)
}
}
20.基于jq的datatables(兼容ie8)基础设置
形貌:采纳基于jq的datatables(兼容ie8)
主要功用:基础设置,服务端分页,清晰缓存,革新等
/************************表格革新*****************************/
$("#searchFormBtn").click(function () {
tablebyGroup.ajax.reload();
});
function queryUserByGroup() {
tablebyGroup = $('#workArr').DataTable({
destroy: true,
serverSide: true, //启用服务器端分页
searching: false, //禁用原生搜刮
orderMulti: false, //启用多列排序
order: [], //作废默许排序查询,不然复选框一列会涌现小箭头
renderer: "bootstrap", //衬着款式:Bootstrap和jquery-ui
pagingType: "simple_numbers", //分页款式:simple,simple_numbers,full,full_numbers
iDisplayLength:100,
ajax: function (data, callback, settings) {
var selected = $('#selectWorkArr').val();
var param = {
depId: parseInt(selected),
docId: JSON.parse($.cookie('userinfo')).docId
};
//ajax要求数据
$.ajax({
type: "post",
url: serverIp + "rest/doctor/selectWorkGroup?" + Math.random() + "&" + maiyaBuildParam(param),
cache: false, //禁用缓存
// data: JSON.stringify(param), //传入组装的参数
// contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由背景返回
returnData.recordsTotal = result.data.length;//返回数据悉数纪录
returnData.recordsFiltered = result.data.length;//背景不完成过滤功用,每次查询均视作悉数效果
returnData.data = result.data;//返回的数据列表
//挪用DataTables供应的callback要领,代表数据已封装完成并传回DataTables举行衬着
//此时的数据需确保准确无误,非常推断应在实行此回调前自行处理完毕
callback(returnData);
},
error: function(msg) {
alert(msg.message || '查询失利')
}
});
},
bFilter: false,//去掉搜刮框要领
bLengthChange: false, //去掉每页显现若干条数据要领
"ordering": false,//制止排序
"columns": [
{"data": "pName"},
{"data": "pSex"},
{"data": "strBirthDate"},
{"data": "pCardNum"},
{"data": "pPhone"},
{"data": "cName"},
{"data": "pActivited"}
],
paging: false,
"columnDefs": [{
"render": function(data, type, row, meta) {
//衬着 把数据源中的题目和url构成超链接
return '<a href="javascript:showStatistics(' + row.pId +','+ row.pActivited + ');" style="color:blue;text-decoration: underline">'+data+'</a>';
},
//指定是第1列
"targets": 0
},{
"render": function(data, type, row, meta) {
return data == 1 && '男' || '女';
},
//指定是第1列
"targets": 1
},{
"render": function(data, type, row, meta) {
return data == 1 && '已注册' || '未注册';
},
//指定是第1列
"targets": 6
}]
});
}
援用: