一、强制类型转换

1.1string强制转换为数字
//可以用*1来转化为数字((实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN,或者使用 a !== a 来判断是否为NaN)
'32' * 1 //
'ds' * 1 // NaN
null * 1 //
undefined * 1 // NaN
1 * { valueOf: ()=>'3' } //
//使用+来转化字符串为数字
+ '123' //
+ 'ds' // NaN
+ '' //
+ null //
+ undefined // NaN
+ { valueOf: ()=>'3' } //
.2使用Boolean过滤数组中的所有假值
const compact = arr => arr.filter(Boolean)
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])
1.3 数值取整 --去除小数点后面的值
~~2.33
2.33 | 0
2.33 >> 0
//Math.floor()向下取整,值永远只会变小
1.4 判断奇偶数,负数同样适用
const num=3;
!!(num & 1) // true
!!(num % 2) // true
//以上两种形式返回true的都是奇数
1.5 JS|| && 妙用 多重if else 选择情况
假设对成长速度显示规定如下:
成长速度为5显示1个箭头
成长速度为10显示2个箭头
成长速度为12显示3个箭头
成长速度为15显示4个箭头
其他显示为0个箭头 //一般代码
var add_level = 0;
if(add_step == 5){
add_level = 1;
}
else if(add_step == 10){
add_level = 2;
}
else if(add_step == 12){
add_level = 3;
}
else if(add_step == 15){
add_level = 4;
}
else {
add_level = 0;
} //好一点的switch
var add_level = 0;
switch(add_step){
case 5 : add_level = 1;
break;
case 10 : add_level = 2;
break;
case 12 : add_level = 3;
break;
case 15 : add_level = 4;
break;
default : add_level = 0;
break;
} //更好一点的
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0; //还有更好的
var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;

二、函数

2.1 惰性载入函数
//这个判断依据在整个项目运行期间一般不会变化,所以判断分支在整个项目运行期间只会运行某个特定分支,那么就可以考虑惰性载入函数
function foo(){
if(a !== b){
console.log('aaa')
}else{
console.log('bbb')
}
} // 优化后
function foo(){
if(a != b){
foo = function(){
console.log('aaa')
}
}else{
foo = function(){
console.log('bbb')
}
}
return foo();
}
2.2//动态添加js
document.write("<script src='" + context.path + "/resource/apps/logger.js'></script>"); /**
* 动态添加JS
* @param {Object} js
*/
function loadJs(js) {
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('src', js);
var content = document.getElementById("container-fluid");
content.appendChild(s);
}
2.3劫持别人写的函数

function A () {
console.log("我是原函数");
}
/**
*
* @param {*要劫持的函数所在的对象} obj
* @param {*计划要劫持的函数名} method
* @param {*回调函数} fun
*/
const hijack = (obj, method, fun) => {
let orig = obj[method];//保存原函数
obj[method] = fun(orig);//将重写的函数作为回调函数的返回值赋给原函数变量
}
hijack(window,'A',function(orig){
return function (){
//做任何你想函数A执行时候你想做的事情
console.log("我劫持了函数A");
orig.call(this);
}
})
A();
2.4AOP在JS当中的执行

/**
* 织入执行前函数
* @param {*} fn
*/
Function.prototype.aopBefore = function(fn){
console.log(this)
// 第一步:保存原函数的引用
const _this = this
// 第四步:返回包括原函数和新函数的“代理”函数
return function() {
// 第二步:执行新函数,修正this
fn.apply(this, arguments)
// 第三步 执行原函数
return _this.apply(this, arguments)
}
}
/**
* 织入执行后函数
* @param {*} fn
*/
Function.prototype.aopAfter = function (fn) {
const _this = this
return function () {
let current = _this.apply(this,arguments)// 先保存原函数
fn.apply(this, arguments) // 先执行新函数
return current
}
}
/**
* 使用函数
*/
let aopFunc = function() {
console.log('aop')
}
// 注册切面
aopFunc = aopFunc.aopBefore(() => {
console.log('aop before')
}).aopAfter(() => {
console.log('aop after')
})
// 真正调用
aopFunc();
2.5一次性函数,适用于初始化的一些操作
var sca = function() {
console.log('msg')//永远只会执行一次
sca = function() {
console.log('foo')
}
}
sca() // msg
sca() // foo
sca() // foo

三、数组

3.1 reduce方法同时实现map和filter
const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num,currentIndex,numbers) => { console.log(finalList);
console.log(num);
console.log(currentIndex);
console.log(numbers);
num = num * 2;
if (num > 50) {
finalList.push(num);
}
return finalList;
}, []);

四、元素操作

1:判断一个元素是否函数某个class,存在就删除,不存在就添加
let $this = $(this);
let $target = $(target);
$this[$target.hasClass('am-in') ? 'addClass' : 'removeClass']('am-collapsed');

  

五、其他

//空('' null undefined)验证
let pan = '';
function fUN () {
console.log("panrui");
return true;
}
let rui = pan || fUN();
//三目运算后面使用函数
let string = true;
function pan () {
console.log("pan");
}
function rui () {
console.log("rui");
}
string ? pan() : rui(); //三目运算符结合return使用
return $a ? 1 : 2 //使用jquery结合三目运算符添加样式
$('.js_name')['addClass']('none') == $('.js_name').addClass('none')
所以衍生出
$('.item')[flag ? 'addClass' : 'removeClass']('active')

通过字符串比较时间先后
var a = "2014-08-08";
var b = "2014-09-09"; console.log(a>b, a<b); // false true
console.log("21:00"<"09:10"); // false
console.log("21:00"<"9:10"); // true 时间形式注意补0
限制input输入值的大小
oninput="if(value > 10000){value=9999}else if(value<0){value=''}" 限制输入整数
  onkeyup="value=value.replace(/[^\d]/g,'')" 

JS 的骚操作的更多相关文章

  1. js 的 骚操作

    单行的js 代码虽然简洁,但却不易维护,甚至难以理解, 但这却并不影响前端童鞋们编写简洁代码的热情, 一   , 生成随机ID // 生成长度为10的随机字母数字字符串 Math.random().t ...

  2. js常用骚操作总结

    打开网址 window.open("http://www.runoob.com"); 判断是否为url var url = $("#url").val(); i ...

  3. vue开发中的"骚操作"

    前言 在与同事协作开发的过程中,见识到了不少"骚操作".因为之前都没用过,所以我愿称之为"高级技巧"! Vue.extend 在交互过程中,有个需求就是点击图标 ...

  4. 用Markdown写Html和.md也就图一乐,真骚操作还得用来做PPT

    前言 和这篇文章一样,我就是用Markdown写的.相信各位平时也就用Markdown写写文档,做做笔记,转成XHtml.Html等,今天教大伙一招骚操作:用Markdown写PPT. 绝大多数朋友做 ...

  5. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

  6. nw.js如何处理拖放操作

    nw.js如何处理拖放操作 其实拖放(drag-drop)操作是Html5的功能,不是nw.js的内置API,那么我们采用Html5应用一般的处理方法就可以了. 首先我们看一下一个正常的页面,直接拖放 ...

  7. Numeral.js – 格式化和操作数字的 JavaScript 库

    Numeral.js 是一个用于格式化和操作数字的 JavaScript 库.数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大.支持包括中文在内的17种语言. 您可能感兴 ...

  8. 【软件编程】乐易贵宾VIP教程 - JS改写+网页操作系列教程

    JS改写系列教程: 1.MD5加密改写教程(爱拍网登录)2.解密如何快速找到真确的js加密算法3.多重MD5加密改写教程(5173登录)4.DZ论坛登录加密改写5.唯品会手机登录加密改写6.新浪微博密 ...

  9. JS实现 键盘操作

    JS实现 键盘操作: 详情可以去其逛网查看其API并下载,地址:http://craig.is/killing/mice <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

  1. badboy安装及使用

    badboy下载 下载地址:http://www.badboy.com.au/download/index 直接点击[continue] badboy安装 badboy录制 默认是录制状态 访问sog ...

  2. luoguP4705 玩游戏

    好好玩 即对于k∈[1,t] 求(ax+by)^k 以下图片均来自于: 在Ta的博客查看 一 二项式展开: 设: 那么: 可以卷积了 二 求: (PS:随机序列的0~k次方和,这是一个经典问题.) 我 ...

  3. Spring Boot的事务处理

    spring boot大大简化了之前java项目需要在配置xml里设置很多繁琐的内容. 设置数据源和配置事务 @Bean(name = "masterDataSource") @P ...

  4. Linux基本命令总结(七)

    接上篇: 33,Linux中的kill命令用来终止指定的进程(terminate a process)的运行,是Linux下进程管理的常用命令.通常,终止一个前台进程可以使用Ctrl+C键,但是,对于 ...

  5. linux log4j乱码问号的解决

    原因: linux本地设置的文件编码格式不是UTF-8 解决办法: 运行locale命令看一下结果: 把LC_CTYPE修改为“zh_CN.UTF-8”: cd ~/ vi .bashrc 添加: L ...

  6. DOS批处理:FOR中的Delims和Tokens参数

    在For命令语句的参数F中,最难理解的就是Delims和Tokens两个选项,本文简单的做一个比较和总结. “For /f”常用来解析文本,读取字符串.分工上,delims负责切分字符串,而token ...

  7. 利用DOS命令窗口进行Mail通信(二)

    一:SMTP协议(对邮件进行发送) <SP>代表空格,<CRLF>代表回车和换行 SMTP命令格式 说明 ehlo<SP><domain><CRL ...

  8. wiki中文语料的word2vec模型构建

    一.利用wiki中文语料进行word2vec模型构建 1)数据获取 到wiki官网下载中文语料,下载完成后会得到命名为zhwiki-latest-pages-articles.xml.bz2的文件,里 ...

  9. [译]Ocelot - Request Id / Correlation Id

    原文 Ocelot可以通过header的形式发送一个requestid.ocelot会将这个requestid转发到下游服务. 如果在日志配置中设置了IncludeScopes为true,那么requ ...

  10. 第30月第6天 git log

    1. git log git log 96a6f18b1e0a1b7301cb4f350537d947afeb22bc -p -1 我们常用 -p 选项展开显示每次提交的内容差异,用 -2 则仅显示最 ...