189 8069 5689
本篇文章给大家分享的是有关36个工作中常用的JavaScript函数片段分别是怎样的，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
为桦南等地区用户提供了全套网页设计制作服务，及桦南网站建设行业解决方案。主营业务为成都做网站、成都网站设计、成都外贸网站建设、桦南网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
数组 Array
数组去重
functionnoRepeat(arr){
return[...newSet(arr)];
}
查找数组最大
functionarrayMax(arr){
returnMath.max(...arr);
}
查找数组最小
functionarrayMin(arr){
returnMath.min(...arr);
}
返回已 size 为长度的数组分割的原数组
functionchunk(arr, size = 1){
returnArray.from(
{
length:Math.ceil(arr.length / size),
},
(v, i) =>arr.slice(i * size, i * size + size)
);
}
检查数组中某元素出现的次数
functioncountOccurrences(arr, value){
returnarr.reduce((a, v) =>(v === value ? a +1: a +0),0);
}
扁平化数组
默认 depth 全部展开
functionflatten(arr, depth =-1){
if(depth ===-1) {
return[].concat(
...arr.map((v) =>(Array.isArray(v) ?this.flatten(v) :v))
);
}
if(depth ===1) {
returnarr.reduce((a, v) =>a.concat(v), []);
}
returnarr.reduce(
(a, v) =>a.concat(Array.isArray(v) ?this.flatten(v, depth -1) : v),
[]
);
}
对比两个数组并且返回其中不同的元素
在这里小编建了一个前端学习交流扣扣群：132667127，我自己整理的最新的前端资料和高级开发教程，如果有想需要的，可以加群一起学习交流
functiondiffrence(arrA, arrB){
returnarrA.filter((v) =>!arrB.includes(v));
}
返回两个数组中相同的元素
functionintersection(arr1, arr2){
returnarr2.filter((v) =>arr1.includes(v));
}
从右删除 n 个元素
functiondropRight(arr, n =0){
returnn < arr.length ? arr.slice(0, arr.length - n) : [];
}
截取第一个符合条件的元素及其以后的元素
functiondropElements(arr, fn){
while(arr.length && !fn(arr[0])) arr = arr.slice(1);
returnarr;
}
返回数组中下标间隔 nth 的元素
functioneveryNth(arr, nth){
returnarr.filter((v, i) =>i % nth === nth -1);
}
返回数组中第 n 个元素
支持负数
functionnthElement(arr, n =0){
return(n >=0? arr.slice(n, n +1) : arr.slice(n))[0];
}
返回数组头元素
functionhead(arr){
returnarr[0];
}
返回数组末尾元素
functionlast(arr){
returnarr[arr.length -1];
}
数组乱排
functionshuffle(arr){
letarray= arr;
let index =array.length;
while(index) {
index -=1;
let randomInedx = Math.floor(Math.random() * index);
let middleware =array[index];
array[index] =array[randomInedx];
array[randomInedx] = middleware;
}
returnarray;
}
浏览器对象 BOM
判读浏览器是否支持 CSS 属性
/**
* 告知浏览器支持的指定css属性情况
* @param {String} key - css属性，是属性的名字，不需要加前缀
* @returns {String} - 支持的属性情况
*/
functionvalidateCssKey(key){
const jsKey = toCamelCase(key); // 有些css属性是连字符号形成
if(jsKeyindocument.documentElement.style) {
returnkey;
}
let validKey ="";
// 属性名为前缀在js中的形式，属性值是前缀在css中的形式
// 经尝试，Webkit 也可是首字母小写 webkit
const prefixMap = {
Webkit:"-webkit-",
Moz:"-moz-",
ms:"-ms-",
O:"-o-",
};
for(const jsPrefixinprefixMap) {
const styleKey = toCamelCase(`${jsPrefix}-${jsKey}`);
if(styleKeyindocument.documentElement.style) {
validKey = prefixMap[jsPrefix] + key;
break;
}
}
returnvalidKey;
}
/**
* 把有连字符号的字符串转化为驼峰命名法的字符串
*/
functiontoCamelCase(value){
returnvalue.replace(/-(\w)/g, (matched, letter) => {
returnletter.toUpperCase();
});
}
/**
* 检查浏览器是否支持某个css属性值（es6版）
* @param {String} key - 检查的属性值所属的css属性名
* @param {String} value - 要检查的css属性值（不要带前缀）
* @returns {String} - 返回浏览器支持的属性值
*/
functionvaliateCssValue(key, value){
const prefix = ["-o-","-ms-","-moz-","-webkit-",""];
const prefixValue = prefix.map((item) => {
returnitem + value;
});
const element = document.createElement("div");
const eleStyle = element.style;
// 应用每个前缀的情况，且最后也要应用上没有前缀的情况，看最后浏览器起效的何种情况
// 这就是最好在prefix里的最后一个元素是''
prefixValue.forEach((item) => {
eleStyle[key] = item;
});
returneleStyle[key];
}
/**
* 检查浏览器是否支持某个css属性值
* @param {String} key - 检查的属性值所属的css属性名
* @param {String} value - 要检查的css属性值（不要带前缀）
* @returns {String} - 返回浏览器支持的属性值
*/
functionvaliateCssValue(key, value){
var prefix = ["-o-","-ms-","-moz-","-webkit-",""];
var prefixValue = [];
for(var i =0; i < prefix.length; i++) {
prefixValue.push(prefix[i] + value);
}
var element = document.createElement("div");
var eleStyle = element.style;
for(var j =0; j < prefixValue.length; j++) {
eleStyle[key] = prefixValue[j];
}
returneleStyle[key];
}
functionvalidCss(key, value){
const validCss = validateCssKey(key);
if(validCss) {
returnvalidCss;
}
returnvaliateCssValue(key, value);
}
返回当前网页地址
functioncurrentURL(){
returnwindow.location.href;
}
获取滚动条位置
functiongetScrollPosition(el = window){
return{
x: el.pageXOffset !==undefined? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !==undefined? el.pageYOffset : el.scrollTop,
};
}
获取 url 中的参数
functiongetURLParameters(url){
returnurl
.match(/([^?=&]+)(=([^&]*))/g)
.reduce(
(a, v) =>(
(a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") +1)), a
),
{}
);
}
页面跳转，是否记录在 history 中
functionredirect(url, asLink = true){
asLink ? (window.location.href = url) :window.location.replace(url);
}
滚动条回到顶部动画
functionscrollToTop(){
constscrollTop =
document.documentElement.scrollTop ||document.body.scrollTop;
if(scrollTop >0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c /8);
}else{
window.cancelAnimationFrame(scrollToTop);
}
}
复制文本
functioncopy(str){
constel =document.createElement("textarea");
el.value = str;
el.setAttribute("readonly","");
el.style.position ="absolute";
el.style.left ="-9999px";
el.style.top ="-9999px";
document.body.appendChild(el);
constselected =
document.getSelection().rangeCount >0
?document.getSelection().getRangeAt(0)
:false;
el.select();
document.execCommand("copy");
document.body.removeChild(el);
if(selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
}
检测设备类型
functiondetectDeviceType(){
return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
)
?"Mobile"
:"Desktop";
}
Cookie
增
functionsetCookie(key, value, expiredays){
varexdate =newDate();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie =
key +
"="+
escape(value) +
(expiredays ==null?"":";expires="+ exdate.toGMTString());
}
删
functiondelCookie(name){
varexp =newDate();
exp.setTime(exp.getTime() -1);
varcval = getCookie(name);
if(cval !=null) {
document.cookie = name +"="+ cval +";expires="+ exp.toGMTString();
}
}
查
functiongetCookie(name){
vararr,
reg =newRegExp("(^| )"+ name +"=([^;]*)(;|$)");
if((arr =document.cookie.match(reg))) {
returnarr[2];
}else{
returnnull;
}
}
日期 Date
时间戳转换为时间
默认为当前时间转换结果
isMs 为时间戳是否为毫秒
functiontimestampToTime(timestamp =Date.parse(newDate()), isMs =true){
constdate =newDate(timestamp * (isMs ?1:1000));
return`${date.getFullYear()}-${
date.getMonth() +1<10?"0"+ (date.getMonth() +1) : date.getMonth() +1
}-${date.getDate()}${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
文档对象 DOM
固定滚动条
/**
* 功能描述：一些业务场景，如弹框出现时，需要禁止页面滚动，这是兼容安卓和 iOS 禁止页面滚动的解决方案
*/
let scrollTop =0;
functionpreventScroll(){
// 存储当前滚动位置
scrollTop = window.scrollY;
// 将可滚动区域固定定位，可滚动区域高度为0后就不能滚动了
document.body.style["overflow-y"] ="hidden";
document.body.style.position ="fixed";
document.body.style.width ="100%";
document.body.style.top = -scrollTop +"px";
// document.body.style['overscroll-behavior'] ='none'
}
functionrecoverScroll(){
document.body.style["overflow-y"] ="auto";
document.body.style.position ="static";
// document.querySelector('body').style['overscroll-behavior'] ='none'
window.scrollTo(0, scrollTop);
}
判断当前位置是否为页面底部
返回值为 true/false
functionbottomVisible(){
return(
document.documentElement.clientHeight +window.scrollY >=
(document.documentElement.scrollHeight ||
document.documentElement.clientHeight)
);
}
判断元素是否在可视范围内
partiallyVisible 为是否为完全可见
function elementIsVisibleInViewport(el, partiallyVisible =false) {
const { top,left, bottom,right} = el.getBoundingClientRect();
returnpartiallyVisible
? ((top >0&& top < innerHeight) ||
(bottom >0&& bottom < innerHeight)) &&
((left>0&&left< innerWidth) || (right>0&&right< innerWidth))
: top >=0&&left>=0&& bottom <= innerHeight &&right<= innerWidth;
}
获取元素 css 样式
functiongetStyle(el, ruleName){
returngetComputedStyle(el,null).getPropertyValue(ruleName);
}
进入全屏
functionlaunchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
}elseif(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}elseif(element.msRequestFullscreen) {
element.msRequestFullscreen();
}elseif(element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
}
launchFullscreen(document.documentElement);
launchFullscreen(document.getElementById("id"));//某个元素进入全屏
退出全屏
functionexitFullscreen(){
if(document.exitFullscreen) {
document.exitFullscreen();
}elseif(document.msExitFullscreen) {
document.msExitFullscreen();
}elseif(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}elseif(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
exitFullscreen();
全屏事件
document.addEventListener("fullscreenchange",function(e){
if(document.fullscreenElement) {
console.log("进入全屏");
}else{
console.log("退出全屏");
}
});
数字 Number
数字千分位分割
functioncommafy(num){
returnnum.toString().indexOf(".") !==-1
? num.toLocaleString()
: num.toString().replace(/(\d)(?=(?:\d{3})+$)/g,"$1,");
}
生成随机数
functionrandomNum(min, max){
switch(arguments.length) {
case1:
returnparseInt(Math.random() * min +1,10);
case2:
returnparseInt(Math.random() * (max - min +1) + min,10);
default:
return0;
}
}
以上就是36个工作中常用的JavaScript函数片段分别是怎样的，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。