平时写代码用到的方法，就给封装了一下。需要的拿走不谢。。。
1.数组去重 并判断一个元素出现的次数
handle(str){
let arr=str.split('')
var newarr=[];
var obj={};
for(var i=0;i<arr.length;i++){
if(!obj[arr[i]]){
newarr.push(arr[i]);
obj[arr[i]]=1;
}else{
obj[arr[i]]++;
}
}
console.log(obj);//{a: 3, b: 2, c: 1, d: 2, e: 1, …}
}
2.获取最小与最大时间的方法
getAll(value1, value2) {
var arr = [];
var getDate = function(str) {
var tempDate = new Date();
var list = str.split("-");
tempDate.setFullYear(list[0]);
tempDate.setMonth(list[1] - 1);
tempDate.setDate(list[2]);
return tempDate;
}
var date1 = getDate(value1);
var date2 = getDate(value2);
if(date1 > date2) {
var tempDate = date1;
date1 = date2;
date2 = tempDate;
}
date1.setDate(date1.getDate());
var dateArr = [];
var i = 0;
while(!(date1.getFullYear() === date2.getFullYear() &&
date1.getMonth() === date2.getMonth() && date1.getDate() === date2
.getDate())) {
var dayStr = date1.getDate().toString();
if(dayStr.length === 1) {
dayStr = "0" + dayStr;
}
dateArr[i] = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" +
dayStr;
date1.setDate(date1.getDate() + 1);
i++;
}
arr = dateArr;
arr.push(value2)
return arr;
}
3.数组扁平化
flat(arr){
var newArr =[];
for(var i= 0; i < arr.length; i++){
if(arr[i] instanceof Array){
newArr = newArr.concat(this.flat(arr[i]));
}else{
newArr.push(arr[i]);
}
}
return newArr;
}
4.时间戳转化成时间格式
timeFormat(timestamp){
var time = new Date(timestamp);
var year = time.getFullYear();
var month = time.getMonth()+1;
var date = time.getDate();
var day=time.getDay();
return year+'-'+this.add0(month)+'-'+this.add0(date)
}
add0(m){return m<10?'0'+m:m }
5.星期封装方法 返回星期几
GetWeek(num){
let b=num%7;
switch(b){
case 1:
return '周一'
case 2:
return '周二'
case 3:
return '周三'
case 4:
return '周四'
case 5:
return '周五'
case 6:
return '周六'
case 0:
return '周日'
default:
console.log('有误')
}
}
6.取最小值
Minarr(arr){
return Math.min(...arr);
}
7.取最大值
Maxarr(arr){
return Math.max(...arr);
}
8.如何用异步解决下面问题?
function getNextEvent(){
var event1=getNextKeyboarEvent();
var event2=getNextTouchEvent();
return event1 || event2
}
function getNextEvent(callback){
let timer=setInterval(function(){
let event=getNextKeyboarEvent() || getNextTouchEvent()
if (event) {
clearInterval(timer)
callback(event)
}
})
}
9.冒泡排序：依次对相邻的两个数据进行比较，大的放在后面，小的放在前面
function Arrp(arr){
var temp=0;
for(let i=0;i<arr.length;i++){
for(let j=i+1;j<arr.length;j++){
if(arr[i]>arr[j]){
temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
}
console.log(arr)
}
10.选择排序：将第一位的数据与后面的数据依次比较，得到最小值与第一位交换，第二位大的值再一次与后面的数据依次比较，进行排序。
function ArraySt(arr){
for(let i=0;i<arr.length-1;i++){
var min=arr[i];//假设第一位是最小值
var minIndex=i;//再拿到最小值时的索引
for(let j=i+1;j<arr.length;j++){
if(min>arr[j]){//假设失败 最小值大于了后一位的值
min=arr[j];//存储此时的最小值
minIndex=j;//存储此时最小值的索引
}
}
arr[minIndex]=arr[i];//再把第一位的数据放在第二位最小值的位置
arr[i]=min;//再把最小值放在第一位的位置
}
console.log(arr)
}
11.数组去重
function Setarr(arr){
var set = new Set(arr);
return set;
}
12.实现数据双向绑定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show-txt"></p>
</div>
<script>
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show-txt').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
</body>
13.将数字金额每三位用逗号分隔
// * 功能：金额按千位逗号分隔
// * 参数：s，需要格式化的金额数值.
// * 参数：type,判断格式化后的金额是否需要小数位.
// * 返回：返回格式化后的数值字符串.
formatMoney(s, type) {
if (/[^0-9]/.test(s))
return "0.00";
if (s === null || s === "null" || s === "")
return "0.00";
s = s.toString().replace(/^(d*)$/, "$1.");
s = (s + "00").replace(/(d*.dd)d*/, "$1");
s = s.replace(".", ",");
var re = /(d)(d{3},)/;
while (re.test(s))
s = s.replace(re, "$1,$2");
s = s.replace(/,(dd)$/, ".$1");
if (type === 0) {
var a = s.split(".");
if (a[1] === "00") {
s = a[0];
}
}
return s;
}
14.获取任意两日期内所有的月份
getMonthBetween(start, end) {
var result = [];
var s = start.split("-");
var e = end.split("-");
var min = new Date();
var max = new Date();
min.setFullYear(s[0], s[1]);
max.setFullYear(e[0], e[1]);
var curr = min;
while(curr <= max) {
var month = curr.getMonth()+1;
result.push(curr.getFullYear() + "-" + (month < 10 ? ("0" + month) : month));
curr.setMonth(month);
}
return result;
}
15.获取日期前天，昨天，今天，明天，后天...
GetDateStr(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
var y = dd.getFullYear();
var m = dd.getMonth()+1;//获取当前月份的日期
var d = dd.getDate();
return y+"-"+m+"-"+d;
}
16.url地址传递数据截取
var url="http:item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e";
function StrUrl(url){
let result={};
let a=url.split("?")[1];
let b=a.split("&");
for(let i=0;i<b.length;i++){
result[b[i].split("=")[0]]=b[i].split("=")[1]
}
return result;
}
17.函数防抖
HTML:
<button id='show'>抢购</button>
<div id="box">0</div>
JS:
let oBtn=document.getElementById('show');
let oBox=document.getElementById('box');
/*
handle:buy函数
wait:规定在一秒钟内只能执行一次
*/
function throttle (handle, wait) {
let lastTime = 0;
return function (e) {
let nowTime = new Date().getTime()
if (nowTime - lastTime > wait) {
handle.apply(this,arguments);
handle();
lastTime = nowTime;
}
}
}
function buy(e){
console.log(this,e)
oBox.innerText = parseInt(oBox.innerText)+1
}
oBtn.onclick = throttle(buy, 1000)
18.函数节流
HTML:
<input type='text' id='ipt'/>
JS:
let oIpt = document.getElementById('ipt');
let time = null;
function debounce (handle, delay) {
let time = null;
return function () {
let self = this,arg = arguments;
clearTimeout(time);
time = setTimeout(function () {
handle.apply(self,arg);
},delay)
}
}
function ajax (e) {
console.log(e,this.value)
}
oIpt.oninput = debounce(ajax, 1000)
19.数据随机
arr.sort(function randomsort(a, b) { // 数据随机
return Math.random() > .5 ? -1 : 1;
});
20.多行文本溢出显示省略号
overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
21.在一个无序整数数组中，找出连续增长片段最长的一段, 增长步长是1。
let arr = [3,2,1,14,5,5,8,1,2,3,4,5,6,76,7,1,2,9];
function fn(arr){
let temp = [];
let sub = [];
for ( let i = 0; i < arr.length; i++ ){
if(arr[i]+1 === arr[i+1]){
temp.push(arr[i]);
}else{
if(temp.length!=0){
let temp1 = [];
temp.push(arr[i]);
for( let i = 0 ; i < temp.length; i++){
temp1.push(temp[i])
}
if(sub.length===0||sub.length<temp1.length){
sub = temp1
}
temp = [];
}
}
}
return sub;
}
let arr1 = fn(arr);
console.log(arr1);
22.字符中去掉汉字
function RemoveChinese(strValue) {
if(strValue!= null && strValue != ""){
var reg = /[u4e00-u9fa5]/g;
return strValue.replace(reg, "");
}
else
return "";
}
23.获取所有DOM子元素
function getDom(elem) {
var childArr = elem.children || elem.childNodes,
childArrTem = new Array();
for (var i = 0 ; i < childArr.length; i ++ ) {
if (childArr[i].nodeType == 1){
childArrTem.push(childArr[i]);
}
}
return childArrTem;
}
24.数组元素随机排序
function randomSort(a){
var arr = a,
random = [],
len = arr.length;
for (var i = 0; i < len; i++) {
var index = Math.floor(Math.random()*(len - i));
random.push(a[index]);
arr.splice(index,1);
}
return random;
}
25.要取一个小数的小数点后四位，有什么方法？
1 使用 Math.floor
var num = 3.141592653
var result = Math.floor (num * 10000) / 10000
2 当做字符串，使用正则匹配
var num = 3.141592653
var regex = /^d+(?:.d{0,4})?/
var result = num.toString().match(regex)
3 通过四舍五入
var num = 3.141592653
var result = num.toFixed(4) //"3.1416"
26.如何全选checkbox表单，或者反选他们
//全选
$("#all").click(function(){
//获取所有的checkbox
var ches=$("input[type='checkbox']")
//遍历所有的checkbox,重设选中状态为选中
ches.each(function(){
$(this).prop("checked",true)
})
})
//反选
$("#unall").click(function(){
//获取所有的checkbox
var ches=$("input[type='checkbox']")
//遍历所有的checkbox,重设选中状态为不选中
ches.each(function(){
$(this).prop("checked",false)
})
})
37.现在要做一个 类似 nav 或者 tab 的效果，点击一个元素的时候，让他高亮，他的同级元素则没有效果，用jQuery，代码应该是怎样的？
$('.mod-tab .tab').on('click',function(){
$(this).addClass('active') .siblings().removeClass('active')
}
38.select获取选项中的值和文本
<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>
<button id="my">获取</button>
---------------------------------------
$("#my").on("click",function () {
var textValue = $("#test option:selected");
console.log(textValue.val());//值
console.log(textValue.text());//文本
})
39. Demo案例
39.1）简单选项卡功能
https://www.cnblogs.com/qdclub/archive/2018/10/07/9750614.html
39.2）数组的方法
https://www.cnblogs.com/yyjbk/archive/2018/10/10/9764518.html
39.3）.向指定元素添加事件的方法：addEventListener()方法
39.4）.js实现动态分页
https://www.cnblogs.com/littleboyck/archive/2018/10/10/9769051.html
39.5）.vue懒加载
https://www.cnblogs.com/huangenai/p/9736035.html
39.6）.css基础
http://www.divcss5.com/rumen/r307.shtml
39.7）.调拨打电话页面
<a href=”tel:15771791266 ”>拨打电话</a>
39.8）.前端规范
https://www.cnblogs.com/xiaolingyan/p/9831740.html
39.9）.移动端自适应
https://www.cnblogs.com/web1/p/9812669.html
40.0）.异步async和await
https://www.cnblogs.com/SamWeb/p/8417940.html
40.1）常用类库汇总
http://react-china.org/t/topic/27278
40.2) fetch的详解
https://juejin.im/post/5c2c36626fb9a049b506eb94
40.锚点链接
$(document).ready(function () {
//点击触发事件
$("").click(function () {
$("html,body").animate({
scrollTop: $("").offset().top//跳转到的位置
}, {
duration: 400,//预定速度
easing: "swing",//动画效果.swing:在开头/结尾移动慢，在中间移动快;"linear": 匀速移动
});
});
});
41.无线H5开放平台
http://h5.alibaba-inc.com/windvane/StandardEvent.html
41.1）Native 向 H5 发送事件
var btnHref;
container.find('a').each(function(item, i) {
$(item).on('click', function() {
btnHref = $(item).attr('href');
// console.log(btnHref)
if (window.WindVane && window.WindVane.isAvailable) {
var params = {
url: btnHref
};
window.WindVane.call('WVNative', 'openWindow', params, function(e) {
}, function(e) {
window.location.href = btnHref;
});
return false;
}
});
});
42.Es7
1.Array.prototype.includes() 查找一个值是否在数组中，若在返回true，不在返回false
1.1 接收一个参数
['a', 'b', 'c'].includes('a') // true
['a', 'b', 'c'].includes('d') // false
1.2 接收两个参数
['a', 'b', 'c', 'd'].includes('b') // true
['a', 'b', 'c', 'd'].includes('b', 1) // true
['a', 'b', 'c', 'd'].includes('b', 2) // false
2.求幂运算符
2.1 基本用法
3 ** 2 //9 <==> Math.pow(3,2)
var b = 3; b **=2; b-->9
43.Es8
1.async await 异步函数async function()
2.生明方式
函数声明 ： async function foo() {}
函数表达式： const foo = async function() {}
对象的方式： let obj = { async foo() {} }
箭头函数 ： const foo = async () => {}
44.数组值为对象去重
setArr (arr) {
var result = [];
var obj = {};
for(var i =0; i<arr.length; i++){
if(!obj[arr[i].id]){
result.push(arr[i]);
obj[arr[i].id] = true;
}
}
return result;
}
45.数组值为对象去重
1.// 将对象元素转换成字符串以作比较
function obj2key(obj, keys) {
var n = keys.length,
key = [];
while (n--) {
key.push(obj[keys[n]]);
}
return key.join('|');
}
// 去重操作
function uniqeByKeys(array, keys) {
var arr = [];
var hash = {};
for (var i = 0, j = array.length; i < j; i++) {
var k = obj2key(array[i], keys);
if (!(k in hash)) {
hash[k] = true;
arr .push(array[i]);
}
}
return arr;
}
newArr = uniqeByKeys(newArr, ['video_pic']);
2.
// 去重
removeRepeat: function(arr) {
let res = [];
let repeat = [];
for (var i = 0; i < arr.length; i++) {
var title = arr[i].itemTitle;
if (!repeat[title]) {
res.push(arr[i]);
repeat[title] = 1;
}
}
return res;
}
46.css实现圆柱
.ellipse{
position: absolute;
left: 0;
top: 20%;
100px;
height:100px;
border:solid 0.5px black;
background: deepskyblue;
border-radius: 50px;
transform: rotateX(70deg);//css3新属性
}
.ellipse:after{
content: '';
display:inline-block;
100px;
height: 140px;
position:relative;
opacity: 0.6;
background: deepskyblue;
top:50%;
left:-0.5px;
border-left:black 0.5px solid;
border-right:black 0.5px solid;
border-bottom: black 0.5px solid;
border-bottom-left-radius: 50px;//css3新属性
border-bottom-right-radius: 50px;
}
47.Object.getPrototypeOf()方法可以用来从子类上获取父类。
48. // 数据排序
newArr.sort(function(a, b) {
return a.video_price - b.video_price;
});
49.z-index的取值范围
z-index的取值范围在-32767至32767之间
50.查看页面dom元素
document.getElementsByTagName('*').length
51.async await语法
51.1）async function basicDemo() {
let result = await Math.random();
console.log(result,'result');
}
basicDemo();
51.2）async
async function demo01() {
return 123;
}
demo01().then(val => {
console.log(val);// 123
});
若 async 定义的函数有返回值，return 123;相当于Promise.resolve(123),没有声明式的 return则相当于执行了Promise.resolve();
52.区分浏览器内核
function getBrowserInfo() {
var ua = navigator.userAgent.toLocaleLowerCase();
var browserType = null;
if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
browserType = "IE";
browserVersion = ua.match(/msie ([d.]+)/) != null ? ua.match(/msie ([d.]+)/)[1] : ua.match(/rv:([d.]+)/)[1];
alert('推荐使用谷歌浏览器打开')
} else if (ua.match(/firefox/) != null) {
browserType = "火狐";
} else if (ua.match(/ubrowser/) != null) {
browserType = "UC";
} else if (ua.match(/opera/) != null) {
browserType = "欧朋";
} else if (ua.match(/bidubrowser/) != null) {
browserType = "百度";
} else if (ua.match(/metasr/) != null) {
browserType = "搜狗";
} else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
browserType = "QQ";
} else if (ua.match(/maxthon/) != null) {
browserType = "遨游";
} else if (ua.match(/chrome/) != null) {
var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
function _mime(option, value) {
var mimeTypes = navigator.mimeTypes;
for (var mt in mimeTypes) {
if (mimeTypes[mt][option] == value) {
return true;
}
}
return false;
}
if (is360) {
browserType = '360';
} else {
browserType = '谷歌'
}
} else if (ua.match(/safari/) != null) {
browserType = "Safari";
}
console.log('当前浏览器： ' + browserType)
}
getBrowserInfo()
53.发出url请求并阻止
function stopDefault( e ) {
if ( e && e.preventDefault )
e.preventDefault();
else
window.event.returnValue = false;
return false;
}
var url = 'https://iwatch.cainiao-inc.com/iwatch/report/json/visit_record.json?url=https%3a%2f%2fi.cainiao-inc.com%2fcainiao-nplus%2fiknow_tms%2fiknow_tms_click_start&hostName=i.cainiao-inc.com&pathName=%2fcainiao-nplus%2fiknow_tms%2fiknow_tms_click_start&userName=' + inval;
stopDefault(e);
54.随机生成字符串
function randomString(n) {
let str = 'abcdefghijklmnopqrstuvwxyz9876543210';
let tmp = '',
i = 0,
l = str.length;
for (i = 0; i < n; i++) {
tmp += str.charAt(Math.floor(Math.random() * l));
}
return tmp;
}
55.反转一个整数 支持负数
const reverseInteger = function (number) {
var str = String(number)
if(str.length>9) return 0
if(str.charAt(0) == "-"){
var str_r = String(number).substr(1,str.length)
return parseInt("-"+str.split("").reverse().join(""))
}
return parseInt(str.split("").reverse().join(""))
}
56.递归
function factorialize(num){
if(num < 0){
return -1;
}
if(num === 0 || num === 1){
return 1;
}
if(num >1){
return num * factorialize(num-1)
}
}
57.密码移位
function rot13(str) {
var new_arr=[];
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)<65||str.charCodeAt(i)>90){
new_arr.push(str.charAt(i));
}else if(str.charCodeAt(i)>77){
new_arr.push(String.fromCharCode(str.charCodeAt(i)-1));
}else{
new_arr.push(String.fromCharCode(str.charCodeAt(i)+1));
}
}
return new_arr.join("");
}
58.this指向
定义：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象
总结：
1.在普通函数内部，this的指向是window
2.在方法内部，this的指向是方法的拥有者。
3.在箭头函数内部，this指向是创建箭头函数时所在的环境中的this指向的值。
4.在对象中，this指向当前对象
这里的this指向会发生改变
5.计时器中的this
6.回调函数中的this
7.事件处理函数中的this指向事件的绑定者
59.查找元素在数组中的位置
function indexOf(arr, item) {
if (Array.prototype.indexOf){ //判断当前浏览器是否支持
return arr.indexOf(item);
} else {
for (var i = 0; i < arr.length; i++){
if (arr[i] === item){
return i;
}
}
}
return -1; //总是把return -1暴漏在最外层
}
渡人如渡己，渡已，亦是渡当我们被误解时，会花很多时间去辩白。 但没有用，没人愿意听，大家习惯按自己的所闻、理解做出判别，每个人其实都很固执。与其努力且痛苦的试图扭转别人的评判，不如默默承受，给大家多一点时间和空间去了解。而我们省下辩解的功夫，去实现自身更久远的人生价值。其实，渡人如渡己，渡已，亦是渡人。