时间日期日常操作

2020-01-11

不同应用场景不同计算方式，这里只放些简单日常所需；
时间类的操作水太深(比如chrome和safari的时间格式不一样)，复杂的操作可用插件来操作，插件已做了兼容性处理（各位亦可根据实际情况自己写写）：

Moment.js 目前版本：2.24.0 官网 github
JavaScript 日期处理类库，在javascript中解析，验证，操作和显示日期

Day.js github
Moment.js 的 2kB 轻量化方案，拥有同样强大的 API

Date的详细介绍

获取当前时间、日期

Date.prototype.format = function(fmt) { 
     var o = { 
        "M+" : this.getMonth()+1,                 //月份
        "d+" : this.getDate(),                    //日
        "h+" : this.getHours(),                   //小时
        "m+" : this.getMinutes(),                 //分
        "s+" : this.getSeconds(),                 //秒
        "q+" : Math.floor((this.getMonth()+3)/3), //季度
        "S"  : this.getMilliseconds()             //毫秒
    }; 
    if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    }
     for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
         }
     }
    return fmt; 
}    
new Date().format("yyyy-MM-dd hh:mm:ss")
// 2019-07-08 12:26:26

new Date().format("yyyy-MM-dd")
// 2019-07-08

new Date().format("yyyy/MM/dd")
// 2019/07/08

new Date().format("yyyy年MM月dd日")
// 2019年07月08日

距离现在时间差

日常用到的场景很多，比如：

文章新闻类的发布后面经常带着日期显示，如：刚刚、10分钟、一小时内、昨天、一周前、一个月前、一年前，或者抢购一周前提示，出发头一天提醒

到期类：会员到期时间，比如2月28买的一个月会员，3月27到期，1月31买的一个月会员，2月28就到期了。发布会倒计时，还有多少天，多少小时，多少秒

聊天对话框中：晚上6:20、周一 20:00、1月3日中午12:31、2018年1月1日晚上08:00

下面的逻辑就是用时间戳来算，要是用插件来的话就简单了，有现成的方法fromNow()或者from()：moment(v).from( moment(now) )

var now = new Date('2019-01-01 07:40:31'),
    listDate = [
      '2019-01-01 07:39:50',
      '2019-01-01 07:30:01',
      '2019-01-01 07:21:56',
      '2018-12-31 08:21:56',
      '2018-11-03 08:21:56',
      '2018-02-16 08:41:59',
      '2018-02-27 08:21:56',
      '2016-01-07 08:21:56'
    ],
    getshowTime = (v) => {
    let miao = Number(now) - Number(new Date(v) ),
        txt = "";
        
	if(miao<= 45000){  //45秒内
      txt = "刚刚"
    }else if( miao > 45000 && miao< 3600000 ){ //45秒到1小时之间
      txt = Math.floor( miao / 60000 ) + "分钟前";
	}else if ( miao >= 3600000 && miao< 86400000 ){ //24小时以内
      txt = Math.floor( miao / 3600000 ) + "小时前"
	}else if ( miao >= 86400 && miao< 604800000 ){ //24小时-7天内
      txt = Math.floor( miao / 86400000 ) + "天前"
	} else if ( miao >= 604800000 && miao< 2419200000 ){ //7天内-28天 按周算
	  txt = Math.floor( miao / 604800000 ) + "周前"
	} else if ( miao >= 2419200000 && miao< 31536000000 ){ //28天-365天内按月算
      txt = Math.floor( miao / 2419200000 ) + "个月前"
	} else if ( miao >= 31536000000 ){ //365天以上按年算
      txt = Math.floor( miao / 31536000000 ) + "年前"
	}
    return txt
  };
  listDate.forEach(function (v, i, arr) {
    console.log( getshowTime(v) );
  })
//刚刚
//10分钟前
//18分钟前
//23小时前
//2个月前
//11个月前
//10个月前
//2年前

时间格式转换

转时间戳

console.log( new Date().valueOf() )
console.log( new Date().getTime() )
console.log( Number(new Date()) )
//都是一个结果，如：1562578637502

时间戳转日期

直接用 new Date(时间戳) 格式转化获得时间日期，每个浏览器的结果会有所不同，得再格式化一下

1 2	new Date(1562577998147); //Mon Jul 08 2019 17:26:38 GMT+0800 (中国标准时间)

日期的属性和方法

Date.prototype 方法

方法	描述
getDate()	根据本地时间返回指定日期对象的月份中的第几天（1-31）
getDay()	根据本地时间返回指定日期对象的星期中的第几天（0-6）
getFullYear()	根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字）
getHours()	根据本地时间返回指定日期对象的小时（0-23）
getMilliseconds()	根据本地时间返回指定日期对象的毫秒（0-999）
getMinutes()	根据本地时间返回指定日期对象的分钟（0-59）
getMonth()	根据本地时间返回指定日期对象的月份（0-11）
getSeconds()	根据本地时间返回指定日期对象的秒数（0-59）
getTime()	返回从1970-1-1 00:00:00 UTC（协调世界时）到该日期经过的毫秒数，对于1970-1-1 00:00:00 UTC之前的时间返回负值。
getTimezoneOffset()	返回当前时区的时区偏移
getUTCDate()	根据世界时返回特定日期对象一个月的第几天（1-31）
getUTCDay()	根据世界时返回特定日期对象一个星期的第几天（0-6）
getUTCFullYear()	根据世界时返回特定日期对象所在的年份（4位数）
getUTCHours()	根据世界时返回特定日期对象当前的小时（0-23）
getUTCMilliseconds()	根据世界时返回特定日期对象的毫秒数（0-999）
getUTCMinutes()	根据世界时返回特定日期对象的分钟数（0-59）
getUTCMonth()	根据世界时返回特定日期对象的月份（0-11）
getUTCSeconds()	根据世界时返回特定日期对象的秒数（0-59）
getYear()	根据特定日期返回年份 (通常 2-3 位数). 使用 getFullYear()
setDate()	根据本地时间为指定的日期对象设置月份中的第几天
setFullYear()	根据本地时间为指定日期对象设置完整年份（四位数年份是四个数字）
setHours()	根据本地时间为指定日期对象设置小时数
setMilliseconds()	根据本地时间为指定日期对象设置毫秒数
setMinutes()	根据本地时间为指定日期对象设置分钟数
setMonth()	根据本地时间为指定日期对象设置月份
setSeconds()	根据本地时间为指定日期对象设置秒数
setTime()	通过指定从 1970-1-1 00:00:00 UTC 开始经过的毫秒数来设置日期对象的时间，对于早于 1970-1-1 00:00:00 UTC的时间可使用负值
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)
setYear()	setYear() 方法用于设置年份。请使用 setFullYear() 方法代替
toDateString()	以人类易读（human-readable）的形式返回该日期对象日期部分的字符串
toISOString()	把一个日期转换为符合 ISO 8601 扩展格式的字符串
toJSON()	使用 toISOString() 返回一个表示该日期的字符串。为了在 JSON.stringify() 方法中使用
toGMTString()	返回一个基于 GMT (UT) 时区的字符串来表示该日期。请使用 toUTCString() 方法代替
toLocaleDateString()	返回一个表示该日期对象日期部分的字符串，该字符串格式与系统设置的地区关联（locality sensitive）
toLocaleFormat()	使用格式字符串将日期转换为字符串
toLocaleString()	返回一个表示该日期对象的字符串，该字符串与系统设置的地区关联（locality sensitive）。覆盖了 Object.prototype.toLocaleString() 方法
toLocaleTimeString()	返回一个表示该日期对象时间部分的字符串，该字符串格式与系统设置的地区关联（locality sensitive）
toSource()	返回一个与Date等价的原始字符串对象，你可以使用这个值去生成一个新的对象。重写了 Object.prototype.toSource() 这个方法
toString()	返回一个表示该日期对象的字符串。覆盖了Object.prototype.toString() 方法
toTimeString()	以人类易读格式返回日期对象时间部分的字符串
toUTCString()	把一个日期对象转换为一个以UTC时区计时的字符串
valueOf()	返回一个日期对象的原始值。覆盖了 Object.prototype.valueOf() 方法

对象和数组遍历方法总结

2020-01-11

网页三兄弟

遍历的法子很多，和后端数据交互时经常要用到，下面是一些常用到的

遍历对象

遍历对象用来获取对象的所有属性、值

for..in

使用for..in遍历，循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)

var obj = {'0':'a','1':'b','2':'c'};
for(var i in obj) {
     console.log(i,":",obj[i]);
}
//0 : a
//1 : b
//2 : c

Object.keys() 遍历键名

使用Object.keys()遍历，返回一个属性名数组

var obj = {'0':'a','1':'b','2':'c'};
Object.keys(obj).forEach(function(key){
     console.log(key,obj[key]);
});
//0 a
//1 b
//2 c

Reflect.ownKeys(obj) 遍历键名

使用Reflect.ownKeys(obj)遍历，返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.

1
2
3

var obj = {name:'ken','age':18, from:'taihu'};
Reflect.ownKeys(obj)
["name", "age", "from"]

Object.values(obj) 遍历键值

Object.values(obj)返回对象属性value值数组

1
2
3

var obj={a:55,b:32,c:88,d:99,e:"aaa" }
Object.values(obj)
//[55, 32, 88, 99, "aaa"]

Object.entries遍历键值对

这个比较厉害，属性名和值都有

1
2
3

var obj = {a:1,b:2,c:function(){}};
Object.entries(obj); 
//[ ["a", 1], ["b", 1], ["c", function(){}]]

Object.getOwnPropertyNames(obj)

使用Object.getOwnPropertyNames(obj)遍历，返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).

1
2
3

var obj = {name:'ken','age':18, from:'taihu'};
Object.getOwnPropertyNames(obj)
["name", "age", "from"]

Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有Symbol属性。
这个用的很少！！！

以上的方法遍历对象的属性，都遵守同样的属性遍历的次序规则。

首先遍历所有属性名为数值的属性，按照数字排序。
其次遍历所有属性名为字符串的属性，按照生成时间排序。
最后遍历所有属性名为Symbol值的属性，按照生成时间排序。

遍历数组

for ··· in

for ··· in 遍历（当前对象及其原型上的）每一个属性名称

var array = ['a','b','c']
for(i  in array){
  console.log(i, array[i] )
}
//i  为 index

forEach((v, i, arr)=>{})

1	["a","b","c","d"].forEach((v, i, arr)=>console.log(i, v, arr) );

map((v, i, arr)=>{})

1	["a","b","c","d"].map((v,i) => console.log(i,v));

for…of

for…of 遍历（当前对象上的）每一个属性值

var array = ['a','b','c']
for(v  of array){   
  console.log(v )
}
//a
//b
//c

https://www.cnblogs.com/1571523732-qq/p/10076385.html

filter()

filter()数组过滤这个用法就比较多了，可查找、去重，去空数据

//过滤
console.log( [1,2,3,43,55,66,77,99].filter((item,index)=> item>40 ));

//去空
var arr = ['1','2',undefined, 3,1,undefined,null,'']
console.log( arr.filter(item => item) )

//去重
var arr = [1, 2, 2, 3, 4, "5", 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
console.log(arr.filter((x, index,self)=>self.indexOf(x)===index) )

没错，我是一个互联网搬运工
参考来源：https://www.cnblogs.com/1571523732-qq/p/10076385.html

JS事件

2020-01-11

网页三兄弟

JS事件

tip
This is a tip

export default {
  name: 'MyComponent',
  // ...
}

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

JS原生DOM元素选择器

2020-01-11

网页三兄弟

Document对象详细文档mozilla版
 Document文档w3school版（）这个比较好懂，毕竟老外的翻译很拗口，有个问题是内容不是很全

DOM选择器有几下几种：

document.querySelector(“.aa”) 返回指定CSS选择器的第一个元素 介绍
dcument.querySelectorAll(“.aa”) 返回指定CSS选择器的所有的元素 介绍
document.getElementById(“id”) 返回指定ID 的第一个对象的元素 介绍
document.getElementsByName(“username”) 返回 name属性为指定值的所有元素 介绍
document.getElementsByTagName(“input”) 返回指定标签名的对象集合 介绍
document.getElementsByClassName(“.aa”) 返回所有指定类名的元素集合 介绍

getElementById、getElementsByName、getElementsByTagName、getElementsByClassName 是基于dom节点来选择元素，
querySelector、querySelectorAll 是基于css来选择元素，新加的方法，以前没有

再有一个很大的区别，querySelector、querySelectorAll不是实时的，其他的都是实时的
在性能上，Chrome 浏览器下 getElementBy 方法的执行速度基本都高于 querySelector

querySelector(selectors)

返回满足条件的第一个元素，比如 3个class一样的div,则只返回第一个
参数: 包含一个或多个要匹配的选择器的 DOM字符串DOMString。该字符串必须是有效的CSS选择器字符串；如果不是，则引发SYNTAX_ERR异常。

1
2
3

<li class="a"></li>
<h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("p");
document.querySelector("p.example");
document.querySelector("#demo");
document.querySelector(".example");
document.querySelector("a[条件]"); //如：document.querySelector("a[href='/about']");
document.querySelector("h2, h3").style.backgroundColor = "red";

querySelectorAll(selectors)

selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串

1
2
3

<li class="a"></li>
<h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("p");
document.querySelector("p.example");
document.querySelector("#demo");
document.querySelector(".example");
document.querySelector("a[target]");
document.querySelector("h2, h3").style.backgroundColor = "red";

对比

下面的结果都一样，获取页面属性ID为test的元素：

document.getElementById('idName');
document.getElementById("test");
//or
document.querySelector("#test");
document.querySelectorAll("#test")[0];

获取页面class属性为：container 的元素:

document.getElementsByClassName('container')
//or
document.querySelector('html .container')
//or
document.querySelectorAll('html .container')

数字日常操作总结

2020-01-11

网页三兄弟

数字日常操作总结

tip
详细说明

取整


parseInt(2.58888)
// 2 丢弃小数部分,保留整数部分

Math.ceil(2.18888)
// 3 向上取整,有小数就整数部分加1

Math.floor(2.58888)
// 2 向下取整,丢弃小数部分

Math.round(2.58888)
// 3 四舍五入

取余

1 2	6%4　　 // 2

随机数

random() 方法可返回介于 0 ~ 1 之间的一个随机数，包括0，但是小于1

//1-20 中随机一个整数
parseInt(Math.random()*20)+1

//50-100 中随机一个整数
Math.round(Math.random()*50)+50

随机指定2个数字的整数、小数，包装成函数

找出奇偶数

let arr=[1,5,23,66,45,29,6,88,129,3],
    odd=[],
    even=[];
arr.forEach((v, i, arr)=>{
    if(v%2===0){
    even.push(v)
    }else if(v%1===0){
    odd.push(v)
    }
})
console.log("奇数：",odd," 偶数：",even )
//奇数：[1, 5, 23, 45, 29, 129, 3] 偶数：[66, 6, 88]

转换格式

字符串转数字

Number("123")     // 123
Number("")        // 0
Number("0x11")    // 17
Number("0b11")    // 3
Number("0o11")    // 9
Number("foo")     // NaN
Number("100a")    // NaN

Math对象属性和方法

挺多时候要用到JavaScript Math 对象来取值
Math 是一个内置对象，它具有数学常数和函数的属性和方法。不是一个函数对象
与其它全局对象不同的是, Math 不是一个构造器. Math 的所有属性和方法都是静态的. 你用到的常数pi可以用 Math.PI 表示,用 x 作参数 Math.sin(x)调用sin函数. JavaScript中的常数, 是以全精度的实数定义的. 详细说明

Math对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）
LN2	返回 2 的自然对数（约等于0.693）
LN10	返回 10 的自然对数（约等于2.302）
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）
PI	返回圆周率（约等于3.14159）
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）
SQRT2	返回 2 的平方根（约等于 1.414）

Math对象方法

方法	描述
abs(x)	返回数的绝对值
acos(x)	返回数的反余弦值
asin(x)	返回数的反正弦值
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）
ceil(x)	对数进行上舍入
cos(x)	返回数的余弦
exp(x)	返回 e 的指数
floor(x)	对数进行下舍入
log(x)	返回数的自然对数（底为e）
max(x,y)	返回 x 和 y 中的最高值
min(x,y)	返回 x 和 y 中的最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把数四舍五入为最接近的整数
sin(x)	返回数的正弦
sqrt(x)	返回数的平方根
tan(x)	返回角的正切
toSource()	返回该对象的源代码
valueOf()	返回 Math 对象的原始值

对象日常操作总结

2020-01-11

网页三兄弟

tip
mozilla的对象介绍
Object
https://www.cnblogs.com/anrainie/p/6543891.html
https://www.cnblogs.com/chenyablog/p/6477866.html

遍历对象

详细见：对象和数组遍历方法总结

for..in
Object.keys(obj)
Object.getOwnPropertyNames(obj)
Reflect.ownKeys(obj)

侦听对象值变化

Object.defineProperty函数

这是ES5的方法

var user= { name:'张三'}
Object.defineProperty(user, 'name', {
     set:function(key,value){
        console.log(key,value)
     }
});
user.name = '李四';
//李四

Proxy()

Proxy是ES6的新方法详细介绍，Proxy 可以理解成代理，对数据做了什么先经过Proxy里走一遍，相当强大
语法：
let p = new Proxy(target,handler)

target：用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler：{get: function (target, key, receiver) { },set: function (target, key, value, receiver) { } }
handler是当执行一个操作时定义代理的行为的函数。
get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。
set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。

var obj = { name:"ken"}
var newObj = new Proxy(obj, {
  get: function(target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function(target, key, value, receiver) {
    console.log(target, key, value, receiver);
    if (key === 'text') {
      input.value = value;
      p.innerHTML = value;
    }
    return Reflect.set(target, key, value, receiver);
  },
});
newObj.name ="maoshiba"

合并对象

Object.assign(target, source)
Object.assign() 方法将一个或多个源对象复制到目标对象。目标对象自身也会改变，如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。

var o1 = { a: 1 }
var o2 = { b: 2 }
var o3 = { b: 3,c:4 }
var obj = Object.assign(o1, o2, o3)

console.log(obj) //{a: 1, b: 3, c: 4}
console.log(o1) //{a: 1, b: 3, c: 4}
console.log(o2) //{b: 2}
console.log(o3) //{b: 3, c: 4}

…的用处还是满大的，同样，重复的属性会覆盖值

let o1 = { a: 1,b: 2 }
let o2 = { b: 3,c:4 }
let _obj={...o1,...o2};

console.log(_obj)
//{a: 1, b: 3, c: 4}

拷贝对象

通过 JSON.parse( JSON.stringify()) 这样转一下，新和拷贝的对象就不搭噶了；

1
2
3

var obj = {a:1,b:2,c:["hhh","jjj"]},
newObj = JSON.parse( JSON.stringify(obj) );
console.log( newObj );

删除对象属性

已声明的对象不可删除, 对象中的对象属性可以删除

1
2
3

var obj={name: 'ken',age: 18}
delete obj.name //true
console.log( obj )//{age: 18}

1
2
3

var obj={name: 'ken',age: 18}
delete obj
console.log( obj )//{name: 'ken',age: 18}

JSON对象和字符串互转

JSON.stringify()，json对象转json字符串

var json = { name: "zhangsan", age: 23, email: "chentging@aliyun.com" }
var jsonStr = JSON.stringify(json);
console.log(jsonStr);
//输出: "{"name":"zhangsan","age":23,"email":"chentging@aliyun.com"}"

JSON.parse()，json字符串转json对象

var jsonStr = '{"name":"zhangsan","age":23,"email":"chentging@aliyun.com"}';
var json = JSON.parse(jsonStr);
console.log(json);

//输出: Object {name: "zhangsan", age: 23, email: "chentging@aliyun.com"}

Object属性和方法表

Object属性

属性	描述
prototype	可向对象添加属性和方法

Object方法

属性	描述
assign()	通过复制一个或多个对象来创建一个新的对象
create()	使用指定的原型对象和属性创建一个新对象
defineProperty()	给对象添加一个属性并指定该属性的配置
defineProperties()	给对象添加多个属性并分别指定它们的配置
entries()	返回给定对象自身可枚举属性的 [key, value] 数组
freeze()	冻结对象：其他代码不能删除或更改任何属性
getOwnPropertyDescriptor()	返回对象指定的属性配置
getOwnPropertyNames()	返回一个数组，它包含了指定对象所有的可枚举或不可枚举的属性名
getOwnPropertySymbols()	返回一个数组,包含对象自身的所有Symbol属性
getPrototypeOf()	返回指定对象的原型对象
is()	比较两个值是否相同。所有 NaN 值都相等（这与==和===不同）
isExtensible()	判断对象是否可扩展
isFrozen()	判断对象是否已经冻结
isSealed()	判断对象是否已经密封
keys()	返回一个包含所有给定对象自身可枚举属性名称的数组
preventExtensions()	防止对象的任何扩展
seal()	防止其他代码删除对象的属性
setPrototypeOf()	设置对象的原型（即内部 [[Prototype]] 属性）
values()	返回给定对象自身可枚举值的数组

数组和对象根据某属性排序

2020-01-11

网页三兄弟

主要用到语法Array.prototype.sort(sortby)
sort(sortby) 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列来构建的，sortby参数可选。规定排序顺序。必须是函数。

数字升序

如果要降序，把 a-b 倒过来一下成 b-a 就可以了

1
2
3

numberArray = [40, 1, 5, 200];
console.log('排序:'+ numberArray.sort( (a, b)=> a - b ));
//排序:1,5,40,200

根据属性排序

1 2	let members = [{id: 1, role: 3}, {id: 2, role: 1}, {id: 3, role: 1}, {id: 4, role: 4}] members = members.sort((a, b) => a.role- b.role)

多条件排序

如果sortNo的大小一样就按sortNo2的数字倒序排，比如碰上日期时间属性，把日期时间转成时间戳来比较

var arr= [ 
    { 'sortNo': 2, 'sortNo2': 3},
    { 'sortNo': 1, 'sortNo2': 3},
    { 'sortNo': 5, 'sortNo2': 3},
    { 'sortNo': 6, 'sortNo2': 3},
    { 'sortNo': 7, 'sortNo2': 3},
    { 'sortNo': 3, 'sortNo2': 4},
    { 'sortNo': 3, 'sortNo2': 2},
    { 'sortNo': 3, 'sortNo2': 1},
    { 'sortNo': 3, 'sortNo2': 3},
    { 'sortNo': 8, 'sortNo2': 3},
    { 'sortNo': 4, 'sortNo2': 1},
    { 'sortNo': 4, 'sortNo2': 2}
];
arr.sort((a, b)=>{
    if (a.sortNo === b.sortNo) {
            return a.sortNo2 - a.sortNo2;
    } else {
            return a.sortNo - b.sortNo;
    }
});
console.log(arr);

正则表达式

2020-01-11

网页三兄弟

tip
正则表达式是用于匹配字符串中字符组合的模式。
在 JavaScript中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、replace、search 和 split 方法。
通常表单验证及很多场景都会用到，前端人居家旅行之必备良药
详细介绍

判断数字

使用示例：

1 2	/^[0-9]*$/.test("1290") //true

功能	正则表达式
数字	^[0-9]*$
n位的数字	^\d{n}$
至少n位的数字	^\d{n,}$
m-n位的数字	^\d{m,n}$
零和非零开头的数字	^(0\|[1-9][0-9]*)$
非零开头的最多带两位小数的数字	^([1-9][0-9]*)+(.[0-9]{1,2})?$
带1-2位小数的正数或负数	^(\-)?\d+(\.\d{1,2})?$
正数、负数、和小数	^(\-\|\+)?\d+(\.\d+)?$
有两位小数的正实数	^[0-9]+(.[0-9]{2})?$
有1~3位小数的正实数	^[0-9]+(.[0-9]{1,3})?$
非零的正整数	^[1-9]\d$ ^([1-9][0-9]){1,3}$ ^\+?[1-9][0-9]*$
非零的负整数	^-[1-9]\d*
非正整数	^-[1-9]\d*\|0$ ^((-\d+)\|(0+))$

判断字符

描述	正则表达式
汉字	^[\u4e00-\u9fa5]{0,}$
26个英文字母	^[A-Za-z]+$
26个大写英文字母	^[A-Z]+$
26个小写英文字母	^[a-z]+$
英文和数字	^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
同上，但限3-20个字	^\w{3,20}$
26个英文字母、数字或者下划线	^\w+$
中文、英文、数字	^[\u4E00-\u9FA5A-Za-z0-9]+$
同上，限2-20个字	^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
中文、英文、数字、下划线	^[\u4E00-\u9FA5A-Za-z0-9_]+$
可以输入含有^%&',;=?$\"等字符
禁止输入含有~的字符
长度为3-20的所有字符	^.{3,20}$

各种规则判断

功能	正则表达式
Email地址	^\w+([-+.]\w+)@\w+([-.]\w+)\.\w+([-.]\w+)*$
域名	[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
手机号码
国内电话号码(如：0511-4405222、021-87888822)	\d{3}-\d{8}\|\d{4}-\d{7}
身份证号码(数字、字母x结尾)
帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)	^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)	^[a-zA-Z]\w{5,17}$
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)
日期格式
一年的12个月(01～09和1～12)	^(0?[1-9]\|1[0-2])$
一个月的31天(01～09和1～31)	^((0?[1-9])\|((1\|2)[0-9])\|30\|31)$
腾讯QQ号：(QQ号从10000开始)	[1-9][0-9]{4,}
中国邮政编码：(6位数字)
IP地址： (提取IP地址时有用)	\d+\.\d+\.\d+\.\d+

特殊符号说明

正则表达式中的符号说明
字符	含义
\	匹配将依照下列规则：在非特殊字符之前的反斜杠表示下一个字符是特殊的，不能从字面上解释。例如，前面没有'\'的'b'通常匹配小写'b'，无论它们出现在哪里。如果加了'\',这个字符变成了一个特殊意义的字符，意思是匹配一个字符边界。反斜杠也可以将其后的特殊字符，转义为字面量。例如，模式 /a/ 代表会匹配 0 个或者多个 a。相反，模式 /a\/ 将 '' 的特殊性移除，从而可以匹配像 "a" 这样的字符串。使用 new RegExp("pattern") 的时候不要忘记将 \ 进行转义，因为 \ 在字符串里面也是一个转义字符。
^	匹配输入的开始。如果多行标志被设置为true，那么也匹配换行符后紧跟的位置。例如，/^A/ 并不会匹配 "an A" 中的 'A'，但是会匹配 "An E" 中的 'A'。当 '^' 作为第一个字符出现在一个字符集合模式时，它将会有不同的含义。补充字符集合一节有详细介绍和示例。
$	匹配输入的结束。如果多行标示被设置为true，那么也匹配换行符前的位置。例如，/t$/ 并不会匹配 "eater" 中的 't'，但是会匹配 "eat" 中的 't'。
*	匹配前一个表达式0次或多次。等价于 {0,}。例如，/bo*/会匹配 "A ghost boooooed" 中的 'booooo' 和 "A bird warbled" 中的 'b'，但是在 "A goat grunted" 中将不会匹配任何东西。
+	匹配前面一个表达式1次或者多次。等价于 {1,}。例如，/a+/匹配了在 "candy" 中的 'a'，和在 "caaaaaaandy" 中所有的 'a'。
?	匹配前面一个表达式0次或者1次。等价于 {0,1}。例如，/e?le?/ 匹配 "angel" 中的 'el'，和 "angle" 中的 'le' 以及"oslo' 中的'l'。如果*紧跟在任何量词、 +、? 或 {} 的后面，将会使量词变为非贪婪的（匹配尽量少的字符），和缺省使用的贪婪模式**（匹配尽可能多的字符）正好相反。例如，对 "123abc" 应用 /\d+/ 将会返回 "123"，如果使用 /\d+?/,那么就只会匹配到 "1"。还可以运用于先行断言，如本表的 x(?=y) 和 x(?!y) 条目中所述。
.	（小数点）匹配除换行符之外的任何单个字符。例如，/.n/将会匹配 "nay, an apple is on the tree" 中的 'an' 和 'on'，但是不会匹配 'nay'。
(x)	匹配 'x' 并且记住匹配项，就像下面的例子展示的那样。括号被称为捕获括号。模式/(foo) (bar) \1 \2/中的 '(foo)' 和 '(bar)' 匹配并记住字符串 "foo bar foo bar" 中前两个单词。模式中的 \1 和 \2 匹配字符串的后两个单词。注意 \1、\2、\n 是用在正则表达式的匹配环节。在正则表达式的替换环节，则要使用像 $1、$2、$n 这样的语法，例如，'bar foo'.replace( /(...) (...)/, '$2 $1' )。
(?:x)	匹配 'x' 但是不记住匹配项。这种叫作非捕获括号，使得你能够定义为与正则表达式运算符一起使用的子表达式。来看示例表达式 /(?:foo){1,2}/。如果表达式是 /foo{1,2}/，{1,2}将只对 ‘foo’ 的最后一个字符 ’o‘ 生效。如果使用非捕获括号，则{1,2}会匹配整个 ‘foo’ 单词。
x(?=y)	匹配'x'仅仅当'x'后面跟着'y'.这种叫做先行断言。例如，/Jack(?=Sprat)/会匹配到'Jack'仅仅当它后面跟着'Sprat'。/Jack(?=Sprat\|Frost)/匹配‘Jack’仅仅当它后面跟着'Sprat'或者是‘Frost’。但是‘Sprat’和‘Frost’都不是匹配结果的一部分。
(?<=y)x	匹配'x'仅仅当'x'前面是'y'.这种叫做后行断言。例如，/(?<=Jack)Sprat/会匹配到' Sprat '仅仅当它前面是' Jack '。/(?<=Jack\|Tom)Sprat/匹配‘ Sprat ’仅仅当它前面是'Jack'或者是‘Tom’。但是‘Jack’和‘Tom’都不是匹配结果的一部分。
x(?!y)	匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找。例如，/\d+(?!\.)/匹配一个数字仅仅当这个数字后面没有跟小数点的时候。正则表达式/\d+(?!\.)/.exec("3.141")匹配‘141’而不是‘3.141’
x\|y	匹配‘x’或者‘y’。例如，/green\|red/匹配“green apple”中的‘green’和“red apple”中的‘red’
{n}	n是一个正整数，匹配了前面一个字符刚好发生了n次。比如，/a{2}/不会匹配“candy”中的'a',但是会匹配“caandy”中所有的a，以及“caaandy”中的前两个'a'。
{n,m}	n 和 m 都是整数。匹配前面的字符至少n次，最多m次。如果 n 或者 m 的值是0，这个值被忽略。例如，/a{1, 3}/ 并不匹配“cndy”中的任意字符，匹配“candy”中的a，匹配“caandy”中的前两个a，也匹配“caaaaaaandy”中的前三个a。注意，当匹配”caaaaaaandy“时，匹配的值是“aaa”，即使原始的字符串中有更多的a。
[xyz]	一个字符集合。匹配方括号中的任意字符，包括转义序列。你可以使用破折号（-）来指定一个字符范围。对于点（.）和星号（*）这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义，不过转义也是起作用的。例如，[abcd] 和[a-d]是一样的。他们都匹配"brisket"中的‘b’,也都匹配“city”中的‘c’。/[a-z.]+/ 和/[\w.]+/与字符串“test.i.ng”匹配。
[^xyz]	一个反向字符集。也就是说，它匹配任何没有包含在方括号中的字符。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的。例如，[^abc] 和 [^a-c] 是一样的。他们匹配"brisket"中的‘r’，也匹配“chop”中的‘h’。
[\b]	匹配一个退格(U+0008)。（不要和\b混淆了。）
\b	匹配一个词的边界。一个词的边界就是一个词不被另外一个“字”字符跟随的位置或者没有其他“字”字符在其前面的位置。注意，一个匹配的词的边界并不包含在匹配的内容中。换句话说，一个匹配的词的边界的内容的长度是0。（不要和[\b]混淆了）例子： /\bm/匹配“moon”中的‘m’； /oo\b/并不匹配"moon"中的'oo'，因为'oo'被一个“字”字符'n'紧跟着。 /oon\b/匹配"moon"中的'oon'，因为'oon'是这个字符串的结束部分。这样他没有被一个“字”字符紧跟着。 /\w\b\w/将不能匹配任何字符串，因为在一个单词中间的字符永远也不可能同时满足没有“字”字符跟随和有“字”字符跟随两种情况。注意: JavaScript的正则表达式引擎将特定的字符集定义为“字”字符。不在该集合中的任何字符都被认为是一个断词。这组字符相当有限：它只包括大写和小写的罗马字母，十进制数字和下划线字符。不幸的是，重要的字符，例如“é”或“ü”，被视为断词。
\B	匹配一个非单词边界。他匹配一个前后字符都是相同类型的位置：都是“字”字符或者都不是“字”字符。一个字符串的开始和结尾都被认为不是“字”字符，或者空字符串。例如，/\B../匹配"noonday"中的'oo', 而/y\B../匹配"possibly yesterday"中的’yes‘
\cX	当X是处于A到Z之间的字符的时候，匹配字符串中的一个控制符。例如，/\cM/ 匹配字符串中的 control-M (U+000D)。
\d	匹配一个数字。等价于[0-9]。例如， /\d/ 或者 /[0-9]/ 匹配"B2 is the suite number."中的'2'。
\D	匹配一个非数字字符。等价于[^0-9]。例如， /\D/ 或者 /[^0-9]/ 匹配"B2 is the suite number."中的'B' 。
\f	匹配一个换页符 (U+000C)。
\n	匹配一个换行符 (U+000A)。
\r	匹配一个回车符 (U+000D)。
\s	匹配一个空白字符，包括空格、制表符、换页符和换行符。等价于[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。例如, /\s\w*/ 匹配"foo bar."中的' bar'。
\S	匹配一个非空白字符。等价于[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。例如， /\S\w*/ 匹配"foo bar."中的'foo'。
\t	匹配一个水平制表符 (U+0009)。
\v	匹配一个垂直制表符 (U+000B)。
\w	匹配一个单字字符（字母、数字或者下划线）。等价于[A-Za-z0-9_]。例如, /\w/ 匹配 "apple," 中的 'a'，"$5.28,"中的 '5' 和 "3D." 中的 '3'。
\W	匹配一个非单字字符。等价于[^A-Za-z0-9_]。例如, /\W/ 或者 /[^A-Za-z0-9_]/ 匹配 "50%." 中的 '%'。
\n	在正则表达式中，它返回最后的第n个子捕获匹配的子字符串(捕获的数目以左括号计数)。比如 /apple(,)\sorange\1/ 匹配"apple, orange, cherry, peach."中的'apple, orange,' 。
\0	匹配 NULL (U+0000) 字符，不要在这后面跟其它小数，因为 \0<digits> 是一个八进制转义序列。
\xhh	与代码 hh 匹配字符（两个十六进制数字）
\uhhhh	与代码 hhhh 匹配字符（四个十六进制数字）。
\u{hhhh}	(仅当设置了u标志时) 使用Unicode值hhhh匹配字符 (十六进制数字).

字符串操作方法大全

2020-01-11

网页三兄弟

字符串操作方法大全

总结常用操作字符串的方法
String详细介绍

获取指定位置的字符串

charAt(Number)、charCodeAt(Number)函数返回指定位置字符的Unicode编码
1
2
3
4
5
"hello world".charAt(1)
//返回 e

"hello world".charCodeAt(1)
//返回：101
slice(start,end) 从已有的数组中返回选定的元素，如：[1,2,3,4,5,6].slice(2,4)，返回：[3,4]
1
2
3
4
"hello world".slice(2,4)
//返回 ll
"hello world".slice(-3)
//rld
substring(start,end)，表示从start到end之间的字符串，包括start位置的字符但是不包括end位置的字符。
substr(start,length)表示从start位置开始，截取length长度的字符串
1
2
3
4
5
"images/off_1.png".substring(7,10)
//返回： off

"hello world".substr(7,3)
//返回： orl
转成数组，取指定数组位置的值
split()：使用一个指定的分隔符把一个字符串分割存储到数组
1
2
"jpg|bmp|gif|ico|png".split("|")[2]
//返回："gif"

查找/搜索字符串

indexOf(string)、stringObject.lastIndexOf(searchvalue,fromindex) 方法可返回一个指定的字符串值最后出现的位置，对大小写敏感！找不到值则返回 -1
如：str.lastIndexOf(“w”, 5) 返回：-1，fromindex为可选的整数参数。在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。
1
2
3
4
5
6
var str="Hello world!";
console.log( str.indexOf("w") )
//6，indexOf(String) 返回子字符串的位置，没有找到返回-1

console.log( str.lastIndexOf("w") )
//6

match(字符串或正则表达式)
在字符串内检索指定的值或正则表达式，找到则返回所要匹配的字符串或数组或者对象，找不到则返回null。
使用正则匹配没有g(全局标识)标志时，返回一个数组对象：
[结果字符串, index:字符串索引, input:查找的原始字符串]
如果正则表达式包含 g 标志，则该方法返回匹配字符串的数组。

console.log( str.match("world") )
//["world", index: 6, input: "Hello world!", groups: undefined]
console.log( str.match(/l/g) )
//["l", "l"]
var str2 = "1Hello 2world! 3";
console.log( str2.match(/\d+/g) )
//["1", "2", "3"]

exec()函数是在正则上调用，传递字符串的参数，返回一个数组对象，找不到则返回null
1
2
3
console.log( /world/.exec(str) )
//["world", index: 6, input: "Hello world!", groups: undefined]
search(Object)
1
2
console.log(str.search("w"))
//6

获取字符串长度

1
2
3

var str="hello word"
console.log( str.length )
//10

字符串替换

replace(regexp/substr,replacement) 默认只进行第一次匹配操作的替换，想要全局替换，需要置上正则全局标识g

var str="hello word, ken.zhu, hello word";
console.log( str.replace("hello","") )
console.log( str.replace(/hello/,"") )
console.log( str.replace(/hello/g,"") )

字符串大小写转换

toLowerCase() 创建原字符串的小写副本，toUpperCase() 创建原字符串的大写副本

1 2	var str = "ABCabc"; console.log( str.toLowerCase(),str.toUpperCase() )

字符串合并

var str = "ABCDEF",
    s = "---";
console.log( str.concat(s,"123","ABC") )
//返回：ABCDEF---123ABC

字符串头尾去空格

trim()会创建一个字符串副本，删除前置以及后缀的所有空格，IE8及一下不支持

1
2
3

var str=" hello word     "
console.log( str.trim() )
//hello word

字符串去重

var str="aahhgggsssjjj";
function removeRepeat(msg){  
    var res=[];  
    var arr=msg.split("");  
    for(var i=0;i<arr.length;i++){  
        if(res.indexOf(arr[i])==-1){  
            res.push(arr[i]);  
        }  
    }  
    return res.join("");  
}  
removeRepeat(str);    
//ahgsj

字符串转数组

stringObject.split(separator,howmany)，把一个字符串分割成字符串数组，
separator为必需，字符串或正则表达式，以该参数对字符串进行分割，str.split(“”)则每个字符分割；howmany为可选，可指定返回的数组的最大长度

var str = "AA BB CC DD EE FF"; 
console.log( str.split(" ",3) )
//AA,BB,CC 

str.split("")
//["A", "A", " ", "B", "B", " ", "C", "C", " ", "D", "D", " ", "E", "E", " ", "F", "F"]

ES6的…也可以

1 2	[...'hello'] //["h", "e", "l", "l", "o"]

转为字符串类型

Object.toString()，String(Object)

1 2	var a = 10; console.log( a.toString(), String(a) );

对象加个空字符串就变成了字符串类型:
数字+ 空字符串 = 字符串, 数组+ 空字符串 = 字符串…

var str = 10;
str = str + " "
console.log( str )
//返回：10