js 常用代码片段

时间:2022-04-07 20:51:14

一、预加载图像

如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。

  function preloadImages(){

    for(var i=0;i<arguments.length;i++){

      $("<img>").attr('arc',arguments[i])

    }

  }

  preloadImages()

二、检查图像是否加载

有时为了继续脚本,你可能需要检查图像是否全部加载完毕。

$('img').load(function(){

  console.log('image load successfuI')

})

你也可以使用 ID 或 CLASS 替换<img> 标签来检查某个特定的图像是否被加载。

三、自动修复破坏的图像

逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你。

$('img').on('error',function(){

  if(!$(this).hasClass('brokenImage')){

    $(this).prop('src','img/broken.pen').addClass('brokenImage')

  }

})

四、悬停切换

当用户鼠标悬停在可点击的元素上时,可添加类到元素中,反之则移除类。

只需要添加必要的 CSS 即可。更简单的方法是使用 toggleClass() 方法。

五、淡入淡出/显示隐藏

 

$("#hide").click(function(){
$("p").hide();
}); $("#show").click(function(){
$("p").show();
});

六、鼠标滚轮

$('#content').on("mousewheel DOMMouseScroll", function (event) {

// chrome & ie || // firefox

var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||

(event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));

if (delta > 0) {

console.log('mousewheel top');

} else if (delta < 0) {

console.log('mousewheel bottom');

}

});

七、鼠标坐标

 

1、JavaScript实现

X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />

function mousePosition(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

function mouseMove(ev){

ev = ev || window.event;

var mousePos = mousePosition(ev);

document.getElementById('xxx').value = mousePos.x;

document.getElementById('yyy').value = mousePos.y;

}

document.onmousemove = mouseMove;

2、jQuery实现

$('#ele').click(function(event){

//获取鼠标在图片上的坐标

console.log('X:' + event.offsetX+'\n Y:' + event.offsetY);

//获取元素相对于页面的坐标

console.log('X:'+$(this).offset().left+'\n Y:'+$(this).offset().top);

});

八、禁止移动端浏览器页面滚动

 

1、HTML实现

<body ontouchmove="event.preventDefault()" >

2、JavaScript实现

document.addEventListener('touchmove', function(event) {

event.preventDefault();

});

九、阻止默认行为

// JavaScript

document.getElementById('btn').addEventListener('click', function (event) {

event = event || window.event;

if (event.preventDefault){

// W3C

event.preventDefault();

} else{

// IE

event.returnValue = false;

}

}, false);

// jQuery

$('#btn').on('click', function (event) {

event.preventDefault();

});

十、阻止冒泡

// JavaScript

document.getElementById('btn').addEventListener('click', function (event) {

event = event || window.event;

if (event.stopPropagation){

// W3C

event.stopPropagation();

} else{

// IE

event.cancelBubble = true;

}

}, false);

// jQuery

$('#btn').on('click', function (event) {

event.stopPropagation();

});

十一、检测浏览器是否支持svg

function isSupportSVG() {

var SVG_NS = 'http://www.w3.org/2000/svg';

return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;

}

console.log(isSupportSVG());

十二、检测浏览器是否支持canvas

function isSupportCanvas() {

if(document.createElement('canvas').getContext){

return true;

}else{

return false;

}

}

console.log(isSupportCanvas());

十三、检测是否是微信浏览器

function isWeiXinClient() {

var ua = navigator.userAgent.toLowerCase();

if (ua.match(/MicroMessenger/i)=="micromessenger") {

return true;

} else {

return false;

}

}

alert(isWeiXinClient());

十四、检测是否移动端及浏览器内核

var browser = {

versions: function() {

var u = navigator.userAgent;

return {

trident: u.indexOf('Trident') > -1, //IE内核

presto: u.indexOf('Presto') > -1, //opera内核

webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios

android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android

iPhone: u.indexOf('iPhone') > -1 , //iPhone

iPad: u.indexOf('iPad') > -1, //iPad

    weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
    qq: u.match(/\sQQ/i) == " qq", //是否QQ

webApp: u.indexOf('Safari') > -1 //Safari

};

}

}

if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() ||browser.versions.iPhone() || browser.versions.iPad()) {

alert('移动端');

}

十五、检测是否电脑端/移动端

var browser={

versions:function(){

var u = navigator.userAgent, app = navigator.appVersion;

var sUserAgent = navigator.userAgent;

return {

trident: u.indexOf('Trident') > -1,

presto: u.indexOf('Presto') > -1,

isChrome: u.indexOf("chrome") > -1,

isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),

isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,

webKit: u.indexOf('AppleWebKit') > -1,

gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,

mobile: !!u.match(/AppleWebKit.*Mobile.*/),

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),

android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,

iPhone: u.indexOf('iPhone') > -1,

iPad: u.indexOf('iPad') > -1,

  weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
  qq: u.match(/\sQQ/i) == " qq", //是否QQ

iWinPhone: u.indexOf('Windows Phone') > -1

};

}()

}

if(browser.versions.mobile || browser.versions.iWinPhone){

window.location = "http:/www.baidu.com/m/";

}

十六、检测浏览器内核

function getInternet(){

if(navigator.userAgent.indexOf("MSIE")>0) {

return "MSIE";       //IE浏览器

}

if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){

return "Firefox";     //Firefox浏览器

}

if(isSafari=navigator.userAgent.indexOf("Safari")>0) {

return "Safari";      //Safan浏览器

}

if(isCamino=navigator.userAgent.indexOf("Camino")>0){

return "Camino";   //Camino浏览器

}

if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){

return "Gecko";    //Gecko浏览器

}

}

十七、强制移动端页面横屏显示

$( window ).on( "orientationchange", function( event ) {

if (event.orientation=='portrait') {

$('body').css('transform', 'rotate(90deg)');

} else {

$('body').css('transform', 'rotate(0deg)');

}

});

$( window ).orientationchange();

十八、电脑端页面全屏显示

function fullscreen(element) {

if (element.requestFullscreen) {

element.requestFullscreen();

} else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if (element.webkitRequestFullscreen) {

element.webkitRequestFullscreen();

} else if (element.msRequestFullscreen) {

element.msRequestFullscreen();

}

}

fullscreen(document.documentElement);

十九、获得/失去焦点

 

1、JavaScript实现

<input id="i_input" type="text" value="会员卡号/手机号"/>

// JavaScript

window.onload = function(){

var oIpt = document.getElementById("i_input");

if(oIpt.value == "会员卡号/手机号"){

oIpt.style.color = "#888";

}else{

oIpt.style.color = "#000";

};

oIpt.onfocus = function(){

if(this.value == "会员卡号/手机号"){

this.value="";

this.style.color = "#000";

this.type = "password";

}else{

this.style.color = "#000";

}

};

oIpt.onblur = function(){

if(this.value == ""){

this.value="会员卡号/手机号";

this.style.color = "#888";

this.type = "text";

}

};

}

2、jQuery实现

<input type="text" class="oldpsw" id="showPwd" value="请输入您的注册密码"/>

<input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/>

// jQuery

$("#showPwd").focus(function() {

var text_value=$(this).val();

if (text_value =='请输入您的注册密码') {

$("#showPwd").hide();

$("#password").show().focus();

}

});

$("#password").blur(function() {

var text_value = $(this).val();

if (text_value == "") {

$("#showPwd").show();

$("#password").hide();

}

});

二十、获取上传文件大小

<input type="file" id="filePath" onchange="getFileSize(this)"/>

// 兼容IE9低版本

function getFileSize(obj){

var filesize;

if(obj.files){

filesize = obj.files[0].size;

}else{

try{

var path,fso;

path = document.getElementById('filePath').value;

fso = new ActiveXObject("Scripting.FileSystemObject");

filesize = fso.GetFile(path).size;

}

catch(e){

// 在IE9及低版本浏览器,如果不容许ActiveX控件与页面交互,点击了否,就无法获取size

console.log(e.message); // Automation 服务器不能创建对象

filesize = 'error'; // 无法获取

}

}

return filesize;

}

二十一、限制上传文件类型

 

1、高版本浏览器

<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf"/>

2、限制图片

<input type="file" class="file" value="上传" accept="image/*">

3、低版本浏览器

<input type="file" id="filePath" onchange="limitTypes()">

/* 通过扩展名,检验文件格式。

* @parma filePath{string} 文件路径

* @parma acceptFormat{Array} 允许的文件类型

* @result 返回值{Boolen}:true or false

*/

function checkFormat(filePath,acceptFormat){

var resultBool= false,

ex = filePath.substring(filePath.lastIndexOf('.') + 1);

ex = ex.toLowerCase();

for(var i = 0; i < acceptFormat.length; i++){

  if(acceptFormat[i] == ex){

resultBool = true;

break;

  }

}

return resultBool;

};

function limitTypes(){

var obj = document.getElementById('filePath');

var path = obj.value;

var result = checkFormat(path,['bmp','jpg','jpeg','png']);

if(!result){

alert('上传类型错误,请重新上传');

obj.value = '';

}

}

二十二、正则表达式

//验证邮箱

/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

//验证手机号

/^1[3|5|8|7]\d{9}$/

//验证URL

/^http:\/\/.+\./

//验证身份证号码

/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

//匹配字母、数字、中文字符

/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

//匹配中文字符

/[\u4e00-\u9fa5]/

//匹配双字节字符(包括汉字)

/[^\x00-\xff]/

二十三、限制字符数

<input id="txt" type="text">

//字符串截取

function getByteVal(val, max) {

var returnValue = '';

var byteValLen = 0;

for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; elsebyteValLen += 1; if (byteValLen > max) break;

returnValue += val[i];

}

return returnValue;

}

$('#txt').on('keyup', function () {

var val = this.value;

if (val.replace(/[^\x00-\xff]/g, "**").length > 14) {

this.value = getByteVal(val, 14);

}

});

二十四、验证码倒计时

<input id="send" type="button" value="发送验证码">

// JavaScript

var times = 60, // 时间设置60秒

timer = null;

document.getElementById('send').onclick = function () {

// 计时开始

timer = setInterval(function () {

times--;

if (times <= 0) {

send.value = '发送验证码';

clearInterval(timer);

send.disabled = false;

times = 60;

} else {

send.value = times + '秒后重试';

send.disabled = true;

}

}, 1000);

}

var times = 60,

timer = null;

$('#send').on('click', function () {

var $this = $(this);

// 计时开始

timer = setInterval(function () {

times--;

if (times <= 0) {

$this.val('发送验证码');

clearInterval(timer);

$this.attr('disabled', false);

times = 60;

} else {

$this.val(times + '秒后重试');

$this.attr('disabled', true);

}

}, 1000);

});

二十五、时间倒计时

<p id="_lefttime"></p>

var times = 60,

timer = null;

$('#send').on('click', function () {

var $this = $(this);

// 计时开始

timer = setInterval(function () {

times--;

if (times <= 0) {

$this.val('发送验证码');

clearInterval(timer);

$this.attr('disabled', false);

times = 60;

} else {

$this.val(times + '秒后重试');

$this.attr('disabled', true);

}

}, 1000);

});

二十六、倒计时跳转

<div id="showtimes"></div>

// 设置倒计时秒数

var t = 10;

// 显示倒计时秒数

function showTime(){

t -= 1;

document.getElementById('showtimes').innerHTML= t;

if(t==0){

location.href='error404.asp';

}

//每秒执行一次 showTime()

setTimeout("showTime()",1000);

}

showTime();

二十七、时间戳、毫秒格式化

function formatDate(now) {

var y = now.getFullYear();

var m = now.getMonth() + 1; // 注意 JavaScript 月份+1

var d = now.getDate();

var h = now.getHours();

var m = now.getMinutes();

var s = now.getSeconds();

return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;

}

var nowDate = new Date(1442978789184);

alert(formatDate(nowDate));

二十八、当前日期

var calculateDate = function(){

var date = new Date();

var weeks = ["日","一","二","三","四","五","六"];

return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+

date.getDate()+"日 星期"+weeks[date.getDay()];

}

$(function(){

$("#dateSpan").html(calculateDate());

});

二十九、判断周六/周日

<p id="text"></p>

function time(y,m){

var tempTime = new Date(y,m,0);

var time = new Date();

var saturday = new Array();

var sunday = new Array();

for(var i=1;i<=tempTime.getDate();i++){

time.setFullYear(y,m-1,i);

var day = time.getDay();

if(day == 6){

saturday.push(i);

}else if(day == 0){

sunday.push(i);

}

}

var text = y+"年"+m+"月份"+"<br />"

+"周六:"+saturday.toString()+"<br />"

+"周日:"+sunday.toString();

document.getElementById("text").innerHTML = text;

}

time(2018,5);

三十、AJAX调用错误处理

 

当 Ajax 调用返回 404 或 500 错误时,就执行错误处理程序。如果没有定义处理程序,其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序

$(document).ajaxError(function(e,xhr,settings,error){

  console.log(error)

})

三十一、链式插件调用

jQuery 允许“链式”插件的方法调用,以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。

$('#elem').show();

$('#elem').html('bla');

$('#elem').otherStuff();

通过使用链式,可以改善

$('#elem').show().html('bla').otherStuff();

还有一种方法是在(前缀$)变量中高速缓存元素

var $elem=$('#elem');

  $elem.hide();

  $elem.html('bla');

  $elem.otherStuff();

链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。

三十二、Anagrams of string(带有重复项)

使用递归。对于给定字符串中的每个字母,为字母创建字谜。使用map()将字母与每部分字谜组合,然后使用reduce()将所有字谜组合到一个数组中,最基本情况是字符串长度等于2或1。

const anagrams = str => {

if (str.length <= 2) return str.length === 2 ? [str, str[1] + str[0]] : [str];

return str.split('').reduce((acc, letter, i) =>

acc.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), []);

};

// anagrams('abc') -> ['abc','acb','bac','bca','cab','cba']

三十三、数组平均数

使用reduce()将每个值添加到累加器,初始值为0,总和除以数组长度。

const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;

// average([1,2,3]) -> 2

三十四、大写每个单词的首字母

使用replace()匹配每个单词的第一个字符,并使用toUpperCase()来将其大写。

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());

// capitalizeEveryWord('hello world!') -> 'Hello World!'

三十五、首字母大写

使用slice(0,1)和toUpperCase()大写第一个字母,slice(1)获取字符串的其余部分。 省略lowerRest参数以保持字符串的其余部分不变,或将其设置为true以转换为小写。(注意:这和上一个示例不是同一件事情)

const capitalize = (str, lowerRest = false) =>

str.slice(0, 1).toUpperCase() + (lowerRest ? str.slice(1).toLowerCase() : str.slice(1));

// capitalize('myName', true) -> 'Myname'

三十六、检查回文

将字符串转换为toLowerCase(),并使用replace()从中删除非字母的字符。然后,将其转换为tolowerCase(),将('')拆分为单独字符,reverse(),join(''),与原始的非反转字符串进行比较,然后将其转换为tolowerCase()。

const palindrome = str => {

const s = str.toLowerCase().replace(/[\W_]/g,'');

return s === s.split('').reverse().join('');

}

// palindrome('taco cat') -> true

三十七、计数数组中值的出现次数

每次遇到数组中的特定值时,使用reduce()来递增计数器。

const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);

// countOccurrences([1,1,2,1,2,3], 1) -> 3

三十八、当前URL

使用window.location.href来获取当前URL。

const currentUrl = _ => window.location.href;

// currentUrl() -> 'https://google.com'

三十九、Curry

使用递归。如果提供的参数(args)数量足够,则调用传递函数f,否则返回一个curried函数f。

const curry = (fn, arity = fn.length, ...args) =>

arity <= args.length

? fn(...args)

: curry.bind(null, fn, arity, ...args);

// curry(Math.pow)(2)(10) -> 1024

// curry(Math.min, 3)(10)(50)(2) -> 2

四十、Deep flatten array

使用递归,使用reduce()来获取所有不是数组的元素,flatten每个元素都是数组。

const deepFlatten = arr =>

arr.reduce((a, v) => a.concat(Array.isArray(v) ? deepFlatten(v) : v), []);

// deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5]

四十一、数组之间的区别

从b创建一个Set,然后在a上使用Array.filter(),只保留b中不包含的值。

const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); };

// difference([1,2,3], [1,2]) -> [3]

四十二、两点之间的距离

使用Math.hypot()计算两点之间的欧几里德距离。

const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);

// distance(1,1, 2,3) -> 2.23606797749979

四十三、可以按数字整除

使用模运算符(%)来检查余数是否等于0。

const isDivisible = (dividend, divisor) => dividend % divisor === 0;

// isDivisible(6,3) -> true

四十四、转义正则表达式

使用replace()来转义特殊字符。

const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

// escapeRegExp('(test)') -> \\(test\\)

四十五、偶数或奇数

使用Math.abs()将逻辑扩展为负数,使用模(%)运算符进行检查。 如果数字是偶数,则返回true;如果数字是奇数,则返回false。

const isEven = num => num % 2 === 0;

// isEven(3) -> false

四十六、阶乘

使用递归。如果n小于或等于1,则返回1。否则返回n和n - 1的阶乘的乘积。

const factorial = n => n <= 1 ? 1 : n * factorial(n - 1);

// factorial(6) -> 720

四十七、斐波那契数组生成器

创建一个特定长度的空数组,初始化前两个值(0和1)。使用Array.reduce()向数组中添加值,后面的一个数等于前面两个数相加之和(前两个除外)。

const fibonacci = n =>

Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);

// fibonacci(5) -> [0,1,1,2,3]

四十八、过滤数组中的非唯一值

将Array.filter()用于仅包含唯一值的数组。

const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]

四十九、Flatten数组

使用reduce()来获取数组中的所有元素,并使用concat()来使它们flatten。

const flatten = arr => arr.reduce((a, v) => a.concat(v), []);

// flatten([1,[2],3,4]) -> [1,2,3,4]

五十、从数组中获取最大值

使用Math.max()与spread运算符(...)结合得到数组中的最大值。

const arrayMax = arr => Math.max(...arr);

// arrayMax([10, 1, 5]) -> 10

五十一、从数组中获取最小值

使用Math.min()与spread运算符(...)结合得到数组中的最小值。

const arrayMin = arr => Math.min(...arr);

// arrayMin([10, 1, 5]) -> 1

五十二、获取滚动位置

如果已定义,请使用pageXOffset和pageYOffset,否则使用scrollLeft和scrollTop,可以省略el来使用window的默认值。

const getScrollPos = (el = window) =>

({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,

y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});

// getScrollPos() -> {x: 0, y: 200}

五十三、最大公约数(GCD)

使用递归。基本情况是当y等于0时。在这种情况下,返回x。否则,返回y的GCD和x / y的其余部分。

const gcd = (x, y) => !y ? x : gcd(y, x % y);

// gcd (8, 36) -> 4

五十四、Head of list

返回ARR[0]

const head = arr => arr[0];

// head([1,2,3]) -> 1

五十五、list初始化

返回arr.slice(0,-1)

const initial = arr => arr.slice(0, -1);

// initial([1,2,3]) -> [1,2]

五十六、用range初始化数组

使用Array(end-start)创建所需长度的数组,使用map()来填充范围中的所需值,可以省略start使用默认值0。

const initializeArrayRange = (end, start = 0) =>

Array.apply(null, Array(end - start)).map((v, i) => i + start);

// initializeArrayRange(5) -> [0,1,2,3,4]

五十七、用值初始化数组

使用Array(n)创建所需长度的数组,fill(v)以填充所需的值,可以忽略value使用默认值0。

const initializeArray = (n, value = 0) => Array(n).fill(value);

// initializeArray(5, 2) -> [2,2,2,2,2]

五十八、列表的最后

返回arr.slice(-1)[0]

const last = arr => arr.slice(-1)[0];

// last([1,2,3]) -> 3

五十九、测试功能所花费的时间

使用performance.now()获取函数的开始和结束时间,console.log()所花费的时间。第一个参数是函数名,随后的参数传递给函数。

const timeTaken = callback => {

console.time('timeTaken');

const r = callback();

console.timeEnd('timeTaken');

return r;

};

// timeTaken(() => Math.pow(2, 10)) -> 1024

// (logged): timeTaken: 0.02099609375ms

六十、来自键值对的对象

使用Array.reduce()来创建和组合键值对。

const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {});

// objectFromPairs([['a',1],['b',2]]) -> {a: 1, b: 2}

六十一、管道

使用Array.reduce()通过函数传递值。

const pipe = (...funcs) => arg => funcs.reduce((acc, func) => func(acc), arg);

// pipe(btoa, x => x.toUpperCase())("Test") -> "VGVZDA=="

六十二、Powerset

使用reduce()与map()结合来遍历元素,并将其组合成包含所有组合的数组。

const powerset = arr =>

arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]);

// powerset([1,2]) -> [[], [1], [2], [2,1]]

六十三、范围内的随机整数

使用Math.random()生成一个随机数并将其映射到所需的范围,使用Math.floor()使其成为一个整数。

const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

// randomIntegerInRange(0, 5) -> 2

六十四、范围内的随机数

使用Math.random()生成一个随机值,使用乘法将其映射到所需的范围。

const randomInRange = (min, max) => Math.random() * (max - min) + min;

// randomInRange(2,10) -> 6.0211363285087005

六十五、机化数组的顺序

使用sort()重新排序元素,利用Math.random()来随机排序。

const shuffle = arr => arr.sort(() => Math.random() - 0.5);

// shuffle([1,2,3]) -> [2,3,1]

六十六、重定向到URL

使用window.location.href或window.location.replace()重定向到url。 传递第二个参数来模拟链接点击(true - default)或HTTP重定向(false)。

const redirect = (url, asLink = true) =>

asLink ? window.location.href = url : window.location.replace(url);

// redirect('https://google.com')

六十七、反转一个字符串

使用数组解构和Array.reverse()来颠倒字符串中的字符顺序。合并字符以使用join('')获取字符串。

const reverseString = str => [...str].reverse().join('');

// reverseString('foobar') -> 'raboof'

六十八、RGB到十六进制

使用按位左移运算符(<<)和toString(16),然后padStart(6,“0”)将给定的RGB参数转换为十六进制字符串以获得6位十六进制值。

const rgbToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

// rgbToHex(255, 165, 1) -> 'ffa501'

六十九、滚动到顶部

使用document.documentElement.scrollTop或document.body.scrollTop获取到顶部的距离。

从顶部滚动一小部分距离。

使用window.requestAnimationFrame()来滚动。

const scrollToTop = _ => {

const c = document.documentElement.scrollTop || document.body.scrollTop;

if (c > 0) {

window.requestAnimationFrame(scrollToTop);

window.scrollTo(0, c - c / 8);

}

};

// scrollToTop()

七十、随机数组值

使用Array.map()和Math.random()创建一个随机值的数组。使用Array.sort()根据随机值对原始数组的元素进行排序。

js 常用代码片段

七十一、数组之间的相似性

使用filter()移除不是values的一部分值,使用includes()确定。

const similarity = (arr, values) => arr.filter(v => values.includes(v));

// similarity([1,2,3], [1,2,4]) -> [1,2]

七十二、按字符串排序(按字母顺序排列)

使用split('')分割字符串,sort()使用localeCompare(),使用join('')重新组合。

const sortCharactersInString = str =>

str.split('').sort((a, b) => a.localeCompare(b)).join('');

// sortCharactersInString('cabbage') -> 'aabbceg'

七十三、数组总和

使用reduce()将每个值添加到累加器,初始化值为0。

const sum = arr => arr.reduce((acc, val) => acc + val, 0);

// sum([1,2,3,4]) -> 10

七十四、交换两个变量的值

使用数组解构来交换两个变量之间的值。

[varA, varB] = [varB, varA];

// [x, y] = [y, x]

七十五、列表的tail

返回arr.slice(1)

const tail = arr => arr.length > 1 ? arr.slice(1) : arr;

// tail([1,2,3]) -> [2,3]

// tail([1]) -> [1]

七十六、数组唯一值

使用ES6 Set和... rest操作符去掉所有重复值。

const unique = arr => [...new Set(arr)];

// unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5]

七十七、URL参数

使用match() 与适当的正则表达式来获得所有键值对,适当的map() 。使用Object.assign()和spread运算符(...)将所有键值对组合到一个对象中,将location.search作为参数传递给当前url。

const getUrlParameters = url =>

url.match(/([^?=&]+)(=([^&]*))/g).reduce(

(a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}

);

// getUrlParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'}

七十八、UUID生成器

使用crypto API生成符合RFC4122版本4的UUID。

const uuid = _ =>

([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>

(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)

);

// uuid() -> '7982fcfe-5721-4632-bede-6000885be57d'

七十九、验证数字

使用!isNaN和parseFloat()来检查参数是否是一个数字,使用isFinite()来检查数字是否是有限的。

const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;

// validateNumber('10') -> true

 

js 常用代码片段的更多相关文章

  1. Ext&period;NET Ext&period;JS 常用代码片段摘录

    引言 最近写代码突然有"一把梭"的感觉, 不管三七二十一先弄上再说. 换别人的说法, 这应该是属于"做项目"风格法吧. 至于知识体系, 可以参考官方或者更权威的 ...

  2. C&num;常用代码片段备忘

    以下是从visual studio中整理出来的常用代码片段,以作备忘 快捷键: eh 用途: 类中事件实现函数模板 private void MyMethod(object sender, Event ...

  3. 36个Android开发常用代码片段

    //36个Android开发常用代码片段 //拨打电话 public static void call(Context context, String phoneNumber) { context.s ...

  4. Jquery学习总结(1)——Jquery常用代码片段汇总

    1. 禁止右键点击 ? 1 2 3 4 5 $(document).ready(function(){     $(document).bind("contextmenu",fun ...

  5. 回归 &vert; js实用代码片段的封装与总结(持续更新中&period;&period;&period;)

      上一次更博还是去年10月28号了,截至今天已经有整整4个月没有更新博客了,没更新博客不是代表不学了,期间我已经用vue做了两个项目,微信小程序做了一个项目,只是毕竟找到工作了,想偷偷懒,你懂的. ...

  6. Vue3&period;0常用代码片段和开发插件

    Vue3 Snippets for Visual Studio Code Vue3 Snippets源码 Vue3 Snippets下载 This extension adds Vue3 Code S ...

  7. jQuery常用代码片段

    检测IE浏览器 在进行CSS设计时,IE浏览器对开发者及设计师而言无疑是个麻烦.尽管IE6的黑暗时代已经过去,IE浏览器家族的人气亦在不断下滑,但我们仍然有必要对其进行检测.当然,以下片段亦可用于检测 ...

  8. js常用代码示例及解决跨域的几种方法

    1.阻止默认行为 // 原生js document.getElementById('btn').addEventListener('click', function (event) { event = ...

  9. js常用代码

    获取URL ?后的查询参数 function query(name) { var reg = new RegExp("(^|&)" + name + "=([^& ...

随机推荐

  1. linux下使用远程图形界面

    1. 用xrdp的方式(客户端就是windows下的远程桌面程序) http://jingyan.baidu.com/article/d3b74d64bdab5d1f76e60951.html 2. ...

  2. NPOI 1&period;2&period;4教程 –日期函数

    //Excel中有非常丰富的日期处理函数,在NPOI中同样得到了很好的支持.如下图: using NPOI.HSSF.UserModel; using NPOI.HPSF; using NPOI.PO ...

  3. 004&period;ASP&period;NET MVC中的HTML Helpers

    原文链接:http://www.codeproject.com/Articles/794579/ASP-NET-MVC-HTML-Helpers-A-MUST-KNOW 1.什么是HTML Helpe ...

  4. Android中BaseAdapter的基本用法和加载自定义布局&excl;

    public class MainActivity extends Activity { ListView listView = null; @Override protected void onCr ...

  5. CAN通讯的总结

    1.CAN通讯有套国际标准,套协议版本号,种故障状态,种数据帧类型,种总线错误类型. 2.CAN的国际标准有两种ISO11898和ISO11519. 3.CAN2.0协议分为A版和B版两种,A版协议仅 ...

  6. Debug Dump file

    dump file is a snapshot of the processs memeory. to debug it, we need use its corresponding executiv ...

  7. Spring MVC 表单校验 (七)

    完整的项目案例: springmvc.zip 目录 实例 除了依赖spring-webmvc还需要依赖jackson-databind(用于转换json数据格式)和hibernate-validato ...

  8. wifi编辑 centos

    ifconfig -a sudo iw dev 设置名称 scan

  9. centos7 搭建WEB服务器

    centos7 搭建WEB服务器 2017年09月17日 09:44:50 逝然1994 阅读数:18321 标签: centosapacheweb服务器 更多 个人分类: centos服务器简单配置 ...

  10. 【代码审计】UKCMS&lowbar;v1&period;1&period;0 文件上传漏洞分析

      0x00 环境准备 ukcms官网:https://www.ukcms.com/ 程序源码下载:http://down.ukcms.com/down.php?v=1.1.0 测试网站首页: 0x0 ...