
前端简洁并实用的工具类函数封装
2018/03/06 · JavaScript
· 函数
原文出处: 火狼
ES6语法跟babel:
前言
本文主要从日期,数组,对象,axios,promise和字符判断这几个方面讲工作中常用的一些函数进行了封装,确实可以在项目中直接引用,提高开发效率.
一、首先我们来解释一下什么是ES?
### 前言
*这两本书应该是目前ES6相关的比较好的了,网上有电子版本(文末有链接)。不过我买了书看,哈哈。这两篇摘录笔记分为上下两部分,本文是上半部分(1-6章),摘录了两本书里一些比较有用的知识点。*
1.日期
日期在后台管理系统还是用的很多的,一般是作为数据存贮和管理的一个维度,所以就会涉及到很多对日期的处理
ES的全称是ECMAScript。1996 11
### 目录
1.1 element-UI的日期格式化
DatePicker日期选择器默认获取到的日期默认是Date对象,但是我们后台需要用到的是yyyy-MM-dd,所以需要我们进行转化
方法一:转化为dd-MM-yyyy HH:mm:ss
export const dateReurn1=(date1)=>{ date1.toLocaleString(“en-US”, {
hour12: false }).replace(/bdb/g, ‘0$&’).replace(new
RegExp(‘/’,’gm’),’-‘) }
1
2
3
|
export const dateReurn1=(date1)=>{
date1.toLocaleString("en-US", { hour12: false }).replace(/bdb/g, ‘0$&’).replace(new RegExp(‘/’,’gm’),’-‘)
}
|
方法二:
从element-UI的2.x版本提供了value-format属性,可以直接设置选择器返回的值
,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语能够成为国际标准。
> #####1. 块级作用域绑定
> #####2. 字符串与正则表达式
> #####3. 函数的扩展
> #####4. 数组的扩展
> #####5. 对象的扩展
#####6. 集合(Set、Map)
> 7 . Symbol和Symbol属性
>
> 8 . Javascript中的类
>
> 9 . Promise、Generator函数、Async函数
>
> 10 . 代理(Proxy)和反射(Reflection)API
>
> 11 . 修饰器
>
> 12 . Module
1.2 获取当前的时间yyyy-MM-dd HH:mm:ss
没有满10就补0
export default const obtainDate=()=>{ let date = new Date(); let year
= date.getFullYear(); let month = date.getMonth() + 1; let
day=date.getDate(); let hours=date.getHours(); let
minu=date.getMinutes(); let second=date.getSeconds(); //判断是否满10 let
arr=[month,day,hours,minu,second]; arr.forEach(item=>{ item
1
2
3
4
5
6
7
8
9
10
11
12
|
export default const obtainDate=()=>{
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day=date.getDate();
let hours=date.getHours();
let minu=date.getMinutes();
let second=date.getSeconds();
//判断是否满10
let arr=[month,day,hours,minu,second];
arr.forEach(item=>{
item
|
二、什么是ES6?为什么这么火?
### 一、块级作用域绑定
2.数组
ECMAScript 6.0(以下简称ES6)是JavaScript语的下代标准,已经在2015
6正式发布。它的标,是使得JavaScript语可以来编写复杂的型应程序,成为企业级开发语。
块级声明用于声明在指定块级作用域之外无法访问的变量。块级作用域存在于:1、函数内部;2、块中(字符'{‘和’}’之间的区域)。Es6
中存在的两种变量声明就是Let和Const声明。
2.1 检测是否是数组
export default const judgeArr=(arr)=>{ if(Array.isArray(arr)){ return
true; } }
1
2
3
4
5
|
export default const judgeArr=(arr)=>{
if(Array.isArray(arr)){
return true;
}
}
|
2009年开始ECMAScript
5.1版本发布后,其实就开始定制6.0版本了。因为这个版本引入的语法功能太多,且制定过程当中,还有很多组织和个断提交新功能。事情很快就变得清楚,可能在个版本包括所有将要引的功能。常规的做法是先发布6.0版,过段时间再发6.1版,然后是6.2版、6.3版等等;
值得摘录的有以下六点:
2.2数组去重set方法
1.常见利用循环和indexOf(ES5的数组方法,可以返回值在数组中第一次出现的位置)这里就不再详写,这里介绍一种利用ES6的set实现去重.
2.set是新怎数据结构,似于数组,但它的一大特性就是所有元素都是唯一的.
3.set常见操作
大家可以参照下面这个:新增数据结构Set的用法
4.set去重代码
export const changeReArr=(arr)=>{ return Array.from(new
Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array
from将set转化成数组类型 } 或者 export const changeReArr=(arr)=>{
return […new
Set([1,2,2,3,5,4,5])]//利用…扩展运算符将set中的值遍历出来重新定义一个数组,…是利用for…of遍历的
}
1
2
3
4
5
6
7
8
|
export const changeReArr=(arr)=>{
return Array.from(new Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array from将set转化成数组类型
}
或者
export const changeReArr=(arr)=>{
return […new Set([1,2,2,3,5,4,5])]//利用…扩展运算符将set中的值遍历出来重新定义一个数组,…是利用for…of遍历的
}
|
Array.from可以把带有lenght属性类似数组的对象转换为数组,也可以把字符串等可以遍历的对象转换为数组,它接收2个参数,转换对象与回调函数,…和Array.from都是ES6的方法
三、ES6以及ES7+增加了哪些新特性?有哪些好用的语法?实例:
##### 1. 不能重复声明
2.3 纯数组排序
常见有冒泡和选择,这里我写一下利用sort排序
export const orderArr=(arr)=>{ arr.sort((a,b)=>{ return a-b
//将arr升序排列,如果是倒序return -(a-b) }) }
1
2
3
4
5
|
export const orderArr=(arr)=>{
arr.sort((a,b)=>{
return a-b //将arr升序排列,如果是倒序return -(a-b)
})
}
|
我们之前声明一个变量需要var,为什么要增加let、const;再去声明变量呢?//关于var、let、const关键字特性和使用方法;
var count = 9;
//抛出语法错误
let count = 7;
2.4 数组对象排序
export const orderArr=(arr)=>{ arr.sort((a,b)=>{ let value1 =
a[property]; let value2 = b[property]; return value1 –
value2;//sort方法接收一个函数作为参数,这里嵌套一层函数用
//来接收对象属性名,其他部分代码与正常使用sort方法相同 }) }
1
2
3
4
5
6
7
8
|
export const orderArr=(arr)=>{
arr.sort((a,b)=>{
let value1 = a[property];
let value2 = b[property];
return value1 – value2;//sort方法接收一个函数作为参数,这里嵌套一层函数用
//来接收对象属性名,其他部分代码与正常使用sort方法相同
})
}
|
// let和const都是只在自己模块作用域内有效{}内
##### 2. Const常量声明必须进行初始化
2.5 数组的”短路运算”every和some
数组短路运算这个名字是我自己加的,因为一般有这样一种需求,一个数组里面某个或者全部满足条件,就返回true
情况一:全部满足 export const allTrueArr=(arrs)=>{ return
arr.every((arr)=>{ return
arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历
}) } 情况二:有一个满足 export default const OneTrueArr=(arrs)=>{
return arr.some((arr)=>{ return
arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false
}) }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
情况一:全部满足
export const allTrueArr=(arrs)=>{
return arr.every((arr)=>{
return arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历
})
}
情况二:有一个满足
export default const OneTrueArr=(arrs)=>{
return arr.some((arr)=>{
return arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false
})
}
|
以上两种情景就和||和&&的短路运算很相似,所以我就起了一个名字叫短路运算,当然两种情况都可以通过遍历去判断每一项然后用break和return
false 结束循环和函数.
function test() {
const age = 8;
//语法错误:常量未初始化
const name;
3.对象
if (true) {
##### 3. 特殊的For循环
For循环设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
3.1 对象遍历
export const traverseObj=(obj)=>{ for(let variable in obj){
//For…in遍历对象包括所有继承的属性,所以如果
//只是想使用对象本身的属性需要做一个判断
if(obj.hasOwnProperty(variable)){ console.log(variable,obj[variable])
} } }
1
2
3
4
5
6
7
8
9
|
export const traverseObj=(obj)=>{
for(let variable in obj){
//For…in遍历对象包括所有继承的属性,所以如果
//只是想使用对象本身的属性需要做一个判断
if(obj.hasOwnProperty(variable)){
console.log(variable,obj[variable])
}
}
}
|
let a = 1
for(let i = 0;i< 3;i++){
let i = ‘can not change’;
console.log(i);//输出’can not change’
}
3.2 对象的数据属性
1.对象属性分类:数据属性和访问器属性;
2.数据属性:包含数据值的位置,可读写,包含四个特性包含四个特性:
configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true
enumerable:表示能否通过for-in循环返回属性 writable:表示能否修改属性的值
value:包含该属性的数据值。默认为undefined
1
2
3
4
|
configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true
enumerable:表示能否通过for-in循环返回属性
writable:表示能否修改属性的值
value:包含该属性的数据值。默认为undefined
|
3.修改数据属性的默认特性,利用Object.defineProperty()
export const modifyObjAttr=()=>{ let person={name:’张三’,age:30};
Object.defineProperty(person,’name’,{ writable:false, value:’李四’,
configurable:false,//设置false就不能对该属性修改 enumerable:false }) }
1
2
3
4
5
6
7
8
9
|
export const modifyObjAttr=()=>{
let person={name:’张三’,age:30};
Object.defineProperty(person,’name’,{
writable:false,
value:’李四’,
configurable:false,//设置false就不能对该属性修改
enumerable:false
})
}
|
console.log(a)
##### 4. 暂时性死区
在区块中存在let和const命令,则这个区块对这些命令声明的变量从一开始就形成封闭的作用域。只要在声明之前就使用这些变量,就会报错。
3.3 对象的访问器属性
1.访问器属性的四个特性:
configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为false
enumerable:表示能否通过for-in循环返回属性,默认为false
Get:在读取属性时调用的函数,默认值为undefined
Set:在写入属性时调用的函数,默认值为undefined
1
2
3
4
5
6
7
|
configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为false
enumerable:表示能否通过for-in循环返回属性,默认为false
Get:在读取属性时调用的函数,默认值为undefined
Set:在写入属性时调用的函数,默认值为undefined
|
2.定义:
访问器属性只能通过要通过Object.defineProperty()这个方法来定义
export const defineObjAccess=()=>{ let personAccess={
_name:’张三’,//_表示是内部属性,只能通过对象的方法修改 editor:1 }
Object.defineProperty(personAccess,’name’,{ get:function(){ return
this._name; }, set:function(newName){ if(newName!==this._name){
this._name=newName; this.editor++; } }
//如果只定义了get方法则改对象只能读 }) }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
export const defineObjAccess=()=>{
let personAccess={
_name:’张三’,//_表示是内部属性,只能通过对象的方法修改
editor:1
}
Object.defineProperty(personAccess,’name’,{
get:function(){
return this._name;
},
set:function(newName){
if(newName!==this._name){
this._name=newName;
this.editor++;
}
}
//如果只定义了get方法则改对象只能读
})
}
|
vue中最核心的响应式原理的核心就是通过defineProperty来劫持数据的getters和setter属性来改变数据的
}
情况一:
var tmp = 123;
if(true){
tmp = ‘abc’;//ReferenceError
let tmp;
}
情况二:
function test(x = y,y = 2){
return [x,y];
}
test();//报错
4.axios
console.log(a) //a is not defined;
情况三:
let x = x;//ReferenceError: x is not defined
4.1 axios的get方法
export const getAjax= function (getUrl,getAjaxData) { return
axios.get(getUrl, { params: { ‘getAjaxDataObj1’:
getAjaxData.obj1,//obj1为getAjaxData的一个属性 ‘getAjaxDataObj2’:
getAjaxData.obj2 } }) }
1
2
3
4
5
6
7
8
|
export const getAjax= function (getUrl,getAjaxData) {
return axios.get(getUrl, {
params: {
‘getAjaxDataObj1’: getAjaxData.obj1,//obj1为getAjaxData的一个属性
‘getAjaxDataObj2’: getAjaxData.obj2
}
})
}
|
}
##### 5. Const声明对象,对象属性可变
4.2 axios的post方法
export const postAjax= function (getUrl,postAjaxData) { return
axios.post(postUrl, { ‘postAjaxDataObj1’:
postAjaxData.obj1,//obj1为postAjaxData的一个属性 ‘postAjaxDataObj2’:
postAjaxData.obj2 }) }
1
2
3
4
5
6
|
export const postAjax= function (getUrl,postAjaxData) {
return axios.post(postUrl, {
‘postAjaxDataObj1’: postAjaxData.obj1,//obj1为postAjaxData的一个属性
‘postAjaxDataObj2’: postAjaxData.obj2
})
}
|
test()
##### 6. 彻底冻结函数
4.3 axios的拦截器
主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为[]可以转化为0
1.请求拦截:将当前城市信息放入请求头中
axios.interceptors.request.use(config => { config.headers.cityCode =
window.sessionStorage.cityCode //jsCookie.get(‘cityCode’) return config
},
1
2
3
4
|
axios.interceptors.request.use(config => {
config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get(‘cityCode’)
return config
},
|
2.响应拦截:处理reponse的结果
axios.interceptors.response.use((response) =>{ let data =
response.data if(response.request.responseType ===
‘arraybuffer’&&!data.length){ reponse.date=0 } })
1
2
3
4
5
6
|
axios.interceptors.response.use((response) =>{
let data = response.data
if(response.request.responseType === ‘arraybuffer’&&!data.length){
reponse.date=0
}
})
|
// const和let的异同点
constantize(obj) {//彻底冻结函数
Object.freeze(obj);
Object.keys(obj).forEach((key, i) => {
if (typeof obj[key] === ‘object’) {
constantize(obj[key]);
}
})
obj.name = 777;//TypeError: Cannot add property name, object is
not extensible
return obj;
}
5.promise
promise是一种封装未来值的易于复用的异步任务管理机制,主要解决地狱回调和控制异步的顺序
//
**相同点:**const和let都是在当前块内有效,执行到块外会被销毁,也不存在变量提升(TDZ),不能重复声明。
### 二、字符串与正则表达式
Es6加强了对Unicode的支持,并且扩展了字符串对象。正则表达式则增加了修饰符和属性。
5.1 应用方法一
export const promiseDemo=()=>{ new Promise((resolve,reject)=>{
resolve(()=>{ let a=1; return ++a; }).then((data)=>{
console.log(data)//data值为++a的值 }).catch(()=>{//错误执行这个 }) })
}
1
2
3
4
5
6
7
8
9
10
11
12
|
export const promiseDemo=()=>{
new Promise((resolve,reject)=>{
resolve(()=>{
let a=1;
return ++a;
}).then((data)=>{
console.log(data)//data值为++a的值
}).catch(()=>{//错误执行这个
})
})
}
|
// **不同点:**const不能再赋值,let声明的变量可以重复赋值。
值得摘录的有以下几点:
5.2 应用方法二
export const promiseDemo=()=>{
Promise.resolve([1,2,3]).then((data)=>{//直接初始化一个Promise并执行resolve方法
console.log(data)//data值为[1,2,3] }) }
1
2
3
4
5
|
export const promiseDemo=()=>{
Promise.resolve([1,2,3]).then((data)=>{//直接初始化一个Promise并执行resolve方法
console.log(data)//data值为[1,2,3]
})
}
|
for (var i = 0; i < 5; i++) {
##### 1. codePointAt()与String.fromCodePoint()方法
完全支持UTF-16,接受编码单元的位置而非字符位置作为参数,返回与字符串中给定位置对应的码位,即一个整数值:
6.文本框的判断
setTimeout(() => {
var text = “𠮷a”;
6.1 全部为数字
方法一(最简单):
export const judgeNum1=(num1)=>{ if(typeof num1==number){ return
true; }else{ return false; } }
1
2
3
4
5
6
7
|
export const judgeNum1=(num1)=>{
if(typeof num1==number){
return true;
}else{
return false;
}
}
|
方法二:isNaN
export const judgeNum1=(num1)=>{ if(!isNaN(num1)){ return true;
}else{ return false; } }
1
2
3
4
5
6
7
|
export const judgeNum1=(num1)=>{
if(!isNaN(num1)){
return true;
}else{
return false;
}
}
|
注:当num1为[](空数组)、“”(空字符串)和null会在过程中转换为数字类型的0,所以也会返回false,从而判断为数字,所以可以将用typeof将以上特殊情况剔除.
方法三:正则
export const judgeNum1=(num1)=>{ let reg=/^[0-9]*$/
if(!reg.test(num1)){ console.log(‘num1是0-9’) } }
1
2
3
4
5
6
|
export const judgeNum1=(num1)=>{
let reg=/^[0-9]*$/
if(!reg.test(num1)){
console.log(‘num1是0-9’)
}
}
|
console.log(i) //5, 5, 5, 5, 5
console.log(text.charCodeAt(0)); //55362
console.log(text.codePointAt(0)); //134017
6.2 只能为数字或字母
这个用正则判断
定义一个正则:let reg=/^[0-9a-zA-Z]*$/g
}, 0)
判断一个字符是2个字节还是4个字节组成:
function is32Bit(c){
return c.codePointAt(0) > 0xFFFF;
}
6.3 只能为数字,字母和英文逗号
因为存在输入多个编号,以英文逗号分隔的情况
定义一个正则:let reg=/^[0-9a-zA-Z,]*$/g
}
is32Bit(“𠮷”); // true
is32Bit(“a”); // false
6.4 判断输入的位数不超过16位
直接利用字符串新加的length属性来判断
export const judgeNum1=(num1)=>{ if(num1.length>16){
console.log(‘num1超过16位’) } }
1
2
3
4
5
|
export const judgeNum1=(num1)=>{
if(num1.length>16){
console.log(‘num1超过16位’)
}
}
|
console.log(i) //5 i跳出循环体污染外部函数
console.log(String.fromCodePoint(134071)); // “𠮷”
结束
很开心你还能看到这里,这些类可能你现在用不到,但可以先收藏着.
大家可以一起交流,下次项目开发直接拿过去用,现在3月项目比较赶,这个真的可以提高开发效率哦!祝大家新年快乐哒.
1 赞 收藏
评论
//将var改成let之后
##### 2. normalize()方法
Es6为字符串添加了一个Normalize()方法,它可以提供Unicode的标准化形式,接受一个参数,指明应用哪种Unicode标准化形式(NFC,NFD,NFKC,NFKD)。只需要记住,在对比字符串之前,一定要先把它们标准化为同一种形式:
for (let i = 0; i < 5; i++) {
let normalized = values.map((text) => {
return text.normalize();
})
setTimeout(() => {
console.log(this[normalize](‘u01D1’) ===
this[normalize](‘u004Fu030C’)) // true
console.log(i) // 0,1,2,3,4
##### 3. includes()、startsWith()、endsWith()、repeat()方法
}, 0)
let tempArray = [1, “4”, “uu”, 5];
let tempStr = “test123uuunit582”;
console.log(’22’);
console.log(tempArray.includes(5)); //true
console.log(tempStr.includes(“test123”, 1));
//从第二个位置进行匹配
}
console.log(tempStr.startsWith(“test”)); //true
console.log(tempStr.startsWith(“test123”, 0));
//从第一个位置进行匹配
console.log(i)//i is not defined i无法污染外部函数
console.log(tempStr.endsWith(“12”,6)); //从第六个位置进行匹配
console.log(tempStr.repeat(3)); //test123uuunit582test123uuunit582test123uuunit582
四、字符串操作
##### 4. 模板字符串
领域专用语言(DSL),可以生成、查询并操作其他语言里的内容,且可以免受注入攻击(XSS、SQL等)。
let t = ‘abcdefg’;
> A、去掉模板字符串中的换行
if (t.indexOf(‘abc’) > -1) {
$(‘#list’).html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());
console.log(‘yes有abc哦😯’);
> B、引用模板字符串本身
}//ES5写法
//写法一
let str = ‘return ‘ + ‘`ni hao ${name}`’;
let func = new Function(‘name’,str);
let data = func(‘uct’);
//写法二
let str2 = ‘(name) => `ni hao ${name}`’;
let func2 = eval.call(null,str2);
let data2 = func2(‘uct’);
console.log(data + ‘ ‘ + data2);
// ES6新特性检测是否包含(如果想看在字符串的位数还是使用indexOf());
> C、标签模板
if (t.includes(‘abc’)) {
alert`123`;
//等同于
alert(123);
var a = 1,b = 2;
tag`Hello ${a + b} world ${a * b}`;
//等同于
tag([‘Hello ‘,’ world ,
”],1,2);//第一个参数是数组,存放模板中没有变量替换的部分,后续参数是变量。
console.log(‘yes有abc哦😯’);
> D、String.raw()转义模板字符串
}
String.raw`Hin${3+4}`;//”Hi\n5″
//检测是否在头部
[关于new Function][newFunction]
if (t.startsWith(‘abc’)) {
[关于eval][eval]
console.log(‘头部有abc哦😯’);
[newFunction]:
[eval]:
}
##### 5.U修饰符与Y修饰符
U修饰符,即为“Unicode模式”,用来正确处理大于uFFFF的Unicode字符。Y修饰符,叫作“粘连”(Sticky)修饰符,它的后一次匹配都从上一次匹配成功的下一个位置开始。
//检测是否在最后
> A、点(.)字符匹配(匹配除换行符外的所有字符)
if (t.endsWith(‘fg’)) {
var s = “𠮷”;
/^.$/.test(s); // false
/^.$/u.test(s); // true
> B、返回字符串长度的函数
console.log(‘尾部有fg哦😯’);
function codePointLength(){
var result = text.match(/[sS]/gu);
return result ? result.length : 0;
}
}
> C、y修饰符隐含了头部匹配的标志(^)
//有意思的字符串操作(目前没发现有啥用)
const REGEX = /a/y;
REGEX.lastIndex = 2;
REGEX.exec(“xaya”); // null
REGEX.lastIndex = 3;
const match = REGEX.exec(“xaya”);
match.index; // 3
console.log(‘哈’.repeat(4))//哈哈哈哈;原版输出了4遍。。。
### 三、函数的扩展
//字符串改版之使用模板字面量反撇号“。在实际开发中,这是经常都要用到的方法。
值得摘录的有以下几点:
let a = ‘我是字符串’;
##### 1.函数参数的默认值
let b = `这也是一个字符串哦`;
> A、参数变量默认声明
//ES5字符串换行
function test(x = 1){
let x = 2;//error
}
let a = ‘123n456’
> B、惰性求值
let x = 10;
function testLazy(p = x + 1){
console.log(p);
}
testLazy(); // 11
let x = 12;
testLazy(); // 13
console.log(a)
> C、非尾部设置默认值,参数不可省略