js 前端对数据的处理操作总结

目录

一.字符串去除空格

1.使用String原型的trim()方法去除两端空格

2.使用split()和join()方法删除所有空格

3.使用正则去除所有空格

二. 对象判空

三. 判断数组/对象中是否存在某个元素

1.判断数组/对象是否存在

2.js判断数组中对象里的某一个值是否存在

四. 字符串转换成对象

五.小数运算出现多位的处理

1. 先把需要运算的小数扩大成整数,运算后在缩小相同倍数。

2.使用toFixed()

六. 对Number类型的处理

1. 限制只能是两位的小数,(不能包含特殊字符, 中英文等)

2.出现.开头时,主动在其前面添0, (金额类处理)

七.input输入框的一些校验

1.只能输入数字和英文

2.邮箱/邮件地址的校验

3.身份证的校验

4.手机号的校验

5.URL的校验

6.验证密码

7.校验中文

8.校验日期("YYYY-MM-DD"格式,已考虑平闰年)

扩展

扩展1.字符串常用方法

扩展2.正则匹配规则



一.字符串去除空格

1.使用String原型的trim()方法去除两端空格

trim() 方法会删除一个字符串两端的空白字符。在这个字符串里的空格包括所有的空格字符 (space, tab, no-break space 等)以及所有的行结束符(如 LF,CR)。
 

let str = ' hello world ';
str.trim()
//"hello world"

trim()方法有个问题,不兼容低版本浏览器,如果出现这种情况, 使用下面写法:

function myTrim(str) {
    if(String.prototype.trim) {
        return str.trim();
    }
    return str.replace(/^\s+(.*?)\s+$/g, "$1");
}
myTrim(' hello world ');
//"hello world"

可以看到, trim()方法只能删除字符串两端的空白, 那么中间也要删除怎么做?

2.使用split()和join()方法删除所有空格

//如果在字符串中仅存在空格,没有制表符等空白符,那么可以使用split()和join()方法来去空白:

let str = "   hello  world   !";
let result = str.split(" ").join("");
console.log(result);  //"helloworld!"

3.使用正则去除所有空格

而如果存在了制表符等空白符,上面的方法便无法去除:

let str = "\t hello  world  !";
let result = str.split(" ").join("");
console.log(result);  //"    helloworld!"

  可以使用正则表达式

//去除所有空格
let str = "\t hello  world  !";
let result = str.replace(/\s+/g, "");
console.log(result);  //"helloworld!"
//去除两头空格:
str = str.replace(/^\s+|\s+$/g,"");
//去除左空格:
str = str.replace( /^\s/, '');
//去除右空格:
str = str.replace(/(\s$)/g, "");

 

二. 对象判空

js判断一个object对象是否存在

if (JSON.stringify(data) === '{}') {
    return false // 如果为空,返回false,数组可以用同样的判断方式
}
if (Object.keys(object).length === 0) {
    return false // 如果为空,返回false,Object.keys(object)会返回一个空数组[]
}

 

三. 判断数组/对象中是否存在某个元素

1.判断数组/对象是否存在

typeof data.archiveRecordPage !== undefined

2.js判断数组中对象里的某一个值是否存在

(1).如果要判断数组中是否存在某个元素的话很好判断,直接用数组的indexOf方法就好,存在返回当前索引不存在返回-1

let arr=[1,2,3,4]
arr.indexOf(3) // 2

(2)遍历后判断对象的属性是否相同的

arr.forEach(item=>{
    if(item.name=='Alex'){
        alert('存在这个元素');
    }
})

(3)在实际中往往是需要动态添加或删除对象或元素的,用这个方法的话不好操作,可能会添加或删除掉多个,可以是用string的indexOf方法来判断.

const option = {name:'111'}
// 如果数组里面本身不存在这个对象则把这个加进去
if(JSON.stringify(arr).indexOf(JSON.stringify(option))==-1){
           arr.push(option); // 进行动态的操作
}

这个判断是可以,但存在一个问题需要注意一下,如果对象的顺序不一样,是不能检测到重复的

例如arr = [{name:'张三', sex:'男'}]

option = {sex:'男', name:'张三'}

利用上述方法检测的话,实际上该数组是存在这个数组对象的,但如果用string的indexOf方法是不能检测对的,用这个方法的时候这个点需要注意.

(4)利用数组API some来判断

let result = arr.some(item=>{
   if(item.name=='张三'){
      return true 
  } 
})
console.log(result) // 如果arr数组对象中含有name:'张三',就会返回true,否则返回false
if(result){ // 如果存在
  // do something
 }

 

四. 字符串转换成对象

var obj = JSON.parse(data);
console.log(JSON.stringify(data.data));

 

五.小数运算出现多位的处理

先看几个栗子:

产生原因: 在 JavaScript 中整数和浮点数都属于 Number 数据类型,所有数字都是以 64 位浮点数形式储存,即便整数也是如此.

十进制的0.10.2都会被转换成二进制,但由于浮点数用二进制表达时是无穷的, 导致了精度问题.

JavaScript 浮点数运算的精度问题

解决方案:  

1. 先把需要运算的小数扩大成整数,运算后在缩小相同倍数。

let num = 0.1+0.2  
num = (0.1*10+0.2*10)/10    
//结果:0.3 
//注意:type 为 number

2.使用toFixed()

let num = 0.1+0.2  
num = num.toFixed(1)     
//结果:"0.3"
//注意:type 为 string 

 

六. 对Number类型的处理

1. 限制只能是两位的小数,(不能包含特殊字符, 中英文等)

let num = 1231.1234567;
num = String(num).replace(/^d{1,*}(?:.d{0,6})?$/ig,'');
//1231.12

2.出现.开头时,主动在其前面添0, (金额类处理)

let num = .124;
if(String(num).slice(0,1) == '.'){
   num = '0'+String(num);
}
//0.124

 

七.input输入框的一些校验

1.只能输入数字和英文

 let reg = /^[0-9a-zA-Z]*$/g

2.邮箱/邮件地址的校验

/** 
   规则描述:
    1.以大写字母[A-Z]、小写字母[a-z]、数字[0-9]、下滑线[_]、减号[-]及点号[.]开头,并需要重复一次至多次[+]。
    2.中间必须包括@符号。
    3.@之后需要连接大写字母[A-Z]、小写字母[a-z]、数字[0-9]、下滑线[_]、减号[-]及点号[.],并需要重复一次至多次[+]。
    4.结尾必须是点号[.]连接2至4位的大小写字母[A-Za-z]{2,4}。  
*/

//1.简单版本
let pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
pattern.test('ifat1233@163.com') = true;

//2.修订版本
/** 
    规则增加:
    1.用户名可以包括中文[\u4e00-\u9fa5]
    2.域名结尾最长可为8位{2,8}
*/
let pattern = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;
pattern.test('cn42du@163.com') = true;

//3.安全版本

var isEmail = function (val) {
    var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var domains= ["qq.com","163.com","vip.163.com","263.net","yeah.net","sohu.com","sina.cn","sina.com","eyou.com","gmail.com","hotmail.com","42du.cn"];
    if(pattern.test(val)) {
        var domain = val.substring(val.indexOf("@")+1);
        for(var i = 0; i< domains.length; i++) {
            if(domain == domains[i]) {
                return true;
            }
        }
    }
    return false;
}
// 输出 true
isEmail("cn42du@163.com");

3.身份证的校验

/** 

    校验规则:
    1、只针对18为身份证号码进行校验,现在15位的应该很少了,
    2、不区分xX大小写,
    3、出生年份1900-2099,每月的天数也进行相关验证(考虑的闰月的情况),
    4、校验规则详见,这个写的比较详细和清楚,相信看过后都可以自己写一个,
    https://jingyan.baidu.com/art...
*/

function testid(id) {
     // 1 "验证通过!", 0 //校验不通过
        var format = /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
        //号码规则校验
        if(!format.test(id)){
            return {'status':0,'msg':'身份证号码不合规'};
        }
        //区位码校验
        //出生年月日校验   前正则限制起始年份为1900;
        var year = id.substr(6,4),//身份证年
            month = id.substr(10,2),//身份证月
            date = id.substr(12,2),//身份证日
            time = Date.parse(month+'-'+date+'-'+year),//身份证日期时间戳date
            now_time = Date.parse(new Date()),//当前时间戳
            dates = (new Date(year,month,0)).getDate();//身份证当月天数
        if(time>now_time||date>dates){
            return {'status':0,'msg':'出生日期不合规'}
        }
        //校验码判断
        var c = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2);   //系数
        var b = new Array('1','0','X','9','8','7','6','5','4','3','2');  //校验码对照表
        var id_array = id.split("");
        var sum = 0;
        for(var k=0;k<17;k++){
            sum+=parseInt(id_array[k])*parseInt(c[k]);
        }
        if(id_array[17].toUpperCase() != b[sum%11].toUpperCase()){
            return {'status':0,'msg':'身份证校验码不合规'}
        }
        return {'status':1,'msg':'校验通过'}
}

4.手机号的校验

let reg = /^1(3|4|5|6|7|8|9)\d{9}$/

5.URL的校验

let reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;

6.验证密码

//1.只能是字母、数字和下划线,长度不限制:
^\w+$
//2.允许 小写字母 a-z、大写字母 A-Z、数字 0-9、下划线 _、 连接符 -,且长度在 6-18 位数:
/^[a-zA-Z0-9_-]{6,18}$/
//3.必须包含数字+小写字母+大写字母的密码,且长度在8-10位之间:
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

7.校验中文

let reg = /^[\\u4e00-\\u9fa5]{0,}$/  

8.校验日期("YYYY-MM-DD"格式,已考虑平闰年)

let reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/ 

 

补充: 1.按钮在按下的时候出现一个轮廓/虚线框,如何取消?

<!--在input里添加属性值 hideFocus 或者 HideFocus=true -->
<input hideFocus />

2. 防止退后清空的TEXT文档(可把style内容做做为类引用)

<input style='behavior:url(#default#savehistory); type=text   
d=oPersistInput'>   

3.ENTER键可以让光标移到下一个输入框 

<input οnkeydοwn="if(event.keyCode==13)event.keyCode=9" >   

4.屏蔽输入法

<input type="text" name="url" ime-mode:disabled"   
keydown="if(event.keyCode==13)event.keyCode=9">  

 

 

 

扩展

扩展1.字符串常用方法

var str="hello world";

str.charAt(1) //e 返回给定位置的字符
str.charcodeAt(1) //101 返回给定位置字符的字符编码
str[1] //e ie8+

concat() //可以接受任意多个参数拼接成新的字符串,但不会改变原字符串

slice() //截取字符串,接受一或两个参数(开始位置和结束位置),接受负值时会将负值与字符串长度相加
substring() //截取字符串,接受一或两个参数(开始位置和结束位置,会将较小的参数作为起始位置),接受负值时会将负的参数转换为零
substr() //截取字符串,接受一或两个参数(开始位置和截取的字符个数),接受负值时会将第一个负的参数加上字符串长度,将第二个负的参数转换为0
indexOf() //可接受两个参数,要查找的子字符串和查找起点(可选),找到返回位置,找不到返回-1
lastIndexOf() //从数组的末尾开始查找
trim() //删除前置和后缀的空格 返回的是字符串的副本,原始字符串不变

toLowerCase() //转小写
toUpperCase() //转大写
toLocaleLowerCase() //转小写,针对地区的方法
toLocaleUpperCase() //转大写,针对地区的方法

match() //接收一个参数,正则表达式或者RegExp对象
search() //接受一个正则,返回字符串中第一个匹配项的索引,没有返回-1
replace() //替换字符串。接受两个参数,第一个是一个字符串或者RegExp对象,
            //第二个参数是一个字符串或者函数。如果第一个参数是一个字符串,
            //那么只会替换第一个子字符串,要想替换所有唯一的方法就是提供一个
            //正则表达式,指定全局g标志
            //replace()方法的第二个参数也可以是一个函数
            function(match,...,pos,originalText){
                match //模式的匹配项
                ... //正则表达式定义了多个捕获组的情况下,是第二,三...匹配项
                pos //模式的匹配项在字符串中的位置
                originalText //原始字符串
            }
split() //分割字符串,并返回一个数组。第一个参数接受一个分隔符(可以是字符串或者RegExp对象),
        //可选的第二个参数用于指定返回数组的大小
localeCompare() //比较两个字符串,如果字符串在字母表中应该排在字符串参数之前,返回一个负数。相等返回0,之后返回正数
String.fromCharcode() //构造函数本身的静态方法,接收一个或多个字符编码,转换成字符串,与charCodeAt相反

Javascript中字符串方法总结

js 数组详细操作方法及解析合集

扩展2.正则匹配规则

 

 

 

  • 10
    点赞
  • 71
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值