提高工作效率之原生JS的方法集锦

最新推荐文章于 2022-10-25 14:50:18 发布

_gaspar

最新推荐文章于 2022-10-25 14:50:18 发布

阅读量191

点赞数

分类专栏：前端學習

本文链接：https://blog.csdn.net/weixin_43619264/article/details/108018221

版权

前端學習专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言
随着Web前端市场的日新月异的发展，现如今的Web前端市场需要的人才对于专业技能的要求也越来越高。当今，我们基本上就是通过框架去实现的，原生JS的学习逐渐减少了，框架虽是简洁方便，但掌握原生JS也是十分有必要的。比如说，原生JS闭包，继承，原型链，node…

以下是我copy大神与自我总结，现在放到一起，方便以后查阅（有不足的地方，还望大家能够提出，我会尽快加以改正），大家相互学习。

一、!!强制转布尔值`boolean`

根据当前需要判断的值是真值还是假值来判断，真值返回true,假值返回false,除了以下6个为假值，其余的均为真值。

假值有： 0， ""， null, undefined, false, NaN
注意点：'0'， 'null'，'false' ，{}，[]也为真值

请看下面示例

    <script>
        let a0  = 0,
            a1 = null,
            a2 = '',
            a3 = undefined,
            a4 = NaN,
            a5 = false;

        /* 均为false */
        console.log(!!a0);
        console.log(!!a1);
        console.log(!!a2);
        console.log(!!a3);
        console.log(!!a4);
        console.log(!!a5);

        let b0 = '0',
            b1 = 'null',
            b2 = 'false',
            b3 = [],
            b4 = {},
            b5 = 'Gaspar',
            b6 = 123;

        /* 均为true */
        console.log(!!b0);
        console.log(!!b1);
        console.log(!!b2);
        console.log(!!b3);
        console.log(!!b4);
        console.log(!!b5);
        console.log(!!b6);
    </script>

综上所述,!!把假值转为false,真值转为true

二、如何创建一个随机数组，或者将已有的数组打乱

在实际开发中有时候我们需要一个随机打乱的数组

    <script>

        /* 1.创建一个数组 */
        let arr = [];
        for (let i = 0; i < 10; i++) {
            arr.push(i);
        }

        console.log(arr);   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

        /* 2.打乱创建的数组 */
        arr.sort(() => {
            return Math.random() - 0.5;  // Math.random()生成一个随机0-1之间的数
        })

        console.log(arr);  // [3, 5, 1, 8, 9, 0, 2, 6, 4, 7]

    </script>

Math.random()返回0到1之间的一个伪随机数，可能等于0，但是一定小于1

    console.log(Math.random());  // 0.4086334208522646   0.10854047797315336   0.6089317931688052

Math.random()的示例

1.任意范围的随机数生成函数如下

    function getRandomNumber(max, min) {
        return Math.random() * (max - min) + min;
    }

    console.log(getRandomNumber(6.3, 2.4));  // 3.4679797675339006  5.0374226483772135  5.9917008972770525

2.任意范围的随机整数生成函数如下

    function getRandomInt(max, min) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    console.log(getRandomInt(1, 7));        // 2 6 4

3.返回随机字符的例子如下(模拟验证码)

    function randomStr(len) {
        let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        str += 'abcdefghijklmnopqrstuvwxyz';
        str += '0123456789-_';

        let str2 = '';

        for (let i = 0; i < len; i++) {
           let rand = Math.floor(Math.random() * str.length);
           str2 += str.substring(rand, rand + 1);
        }

        return str2;
    }

    console.log(randomStr(6));  // puNQZA  2Zip54  XkdjWj

三、去除前后、前、后所有空格

这是专门为去除空格写的一套方法，适用于各种情况，所有空格,前后空格，前空格，后空格。

	function myTrim(str, type) {
    	switch (type) {
        	case 1:
        		// 去除所有空格
            	return str.replace(/\s+/g, "");					
            case 2:
            	// 去除前后空格
                return str.replace(/(^\s*)|(\s*$)/g, "");	    
            case 3:
            	// 去除前空格
                return str.replace(/(^\s*)/g, "");				
            case 4:
            	// 去除后空格
                return str.replace(/(\s*$)/g, "");				
            default:
                return str;
    	}
	}
	
	console.log(myTrim(str, 1));    // 'fdsfdw4rtrfvvfbghbgffvbghnyhgfgbhnjkujhnmjvujhbf'
    console.log(myTrim(str, 2));    // 'fdsfd w4rtr fvvfbghbg ffvbghnyhg fgb hnjkujh nmjvujh bf'
    console.log(myTrim(str, 3));    // 'fdsfd w4rtr fvvfbghbg ffvbghnyhg fgb hnjkujh nmjvujh bf    '    
    console.log(myTrim(str, 4));    // '   fdsfd w4rtr fvvfbghbg ffvbghnyhg fgb hnjkujh nmjvujh bf'   
    console.log(myTrim(str, 5));    // '   fdsfd w4rtr fvvfbghbg ffvbghnyhg fgb hnjkujh nmjvujh bf    '

解析

\s：空格符，Tab，换页符，换行符
\S：非\s的所有内容
/g：全局匹配
^：匹配在行首
$ ：匹配在行尾
+ ：重复次数 > 0
* ：重复次数 >= 0
|：或者
replace(a, b)：用于在字符串中用一些字符替换另一些字符，会传入两个值，将逗号前面的值a替换成逗号后面的值b

若只需要去除前后空格，可直接使用js的trim()方法

	let str2 = '  s df dg ';

    console.log(str2.trim());       // 's df dg'

四、常用校验验证：邮箱，手机号，名字，大写，小写

    <script>
        function checkType(str, type) {
            switch (type) {
                case 'email':
                    return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
                case 'phone':
                    return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
                case 'tel':
                    return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
                case 'number':
                    return /^[0-9]$/.test(str);
                case 'english':
                    return /^[a-zA-Z]+$/.test(str);
                case 'chinese':
                    return /^[\uE00-\9FA5]+$/.test(str);
                case 'lower':
                    return /^[a-z]+$/.test(str);
                case 'upper':
                    return /^[A-Z]+$/.test(str);
                default:
                    return true;
            }
        }

        /* 均为true */
        console.log(checkType('1319967044@qq.com', 'email'));
        console.log(checkType('18282288898', 'phone'));
       	...
    </script>

checkType ('hjkhjhT','lower')需要验证的字符串’，‘匹配的格式’
email：验证邮箱
phone：验证手机号
tel：验证座机号
number：验证数字
english：验证英文字母
chinese：验证中文字
lower：验证小写
upper：验证大写
\w：数字0-9或字母a-z及A-Z，或下划线
\W：非\w，除以上的特殊符号等

五、循环n次传入的字符串

str为传入随意字符串，count为循环的次数
解析：根据count循环的次数，在循环体内复制，return 返回+=后的值

	let str = 'abc';
    let number = 123;
    
    function repeatStr(str, count) {
    	let text = '';

        for (let i = 0; i < count; i++) {
        	text += str;
        }

        return text;
      }
      
	console.log(repeatStr(str, 5));     // abcabcabcabcabc
    console.log(repeatStr(number, 4));  // 123123123123

六、给sessionStorage存储对象

    <script>
        let obj = {
            hello: 'world'
        };

        let str = JSON.stringify(obj);

        /* sessionStorage的简单使用 */
        // 存
        sessionStorage.setItem('obj', str);

        // 取
        let getData = JSON.parse(sessionStorage.getItem('obj')).hello;  // 'world'

        console.log(getData);

        /* sessionStorage的进一步整理 */
        // 存
        sessionStorage.setItem('Param', JSON.stringify({name: 'Gaspar', age: 23, number: 1828228888}))
    
        // 取
        console.log(JSON.parse(sessionStorage.getItem('Param')).name);      // 'Gaspar'
    </script>

持续更新中…

_gaspar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
提高工作效率之原生JS的方法集锦

前言随着Web前端市场的日新月异的发展，现如今的Web前端市场需要的人才对于专业技能的要求也越来越高。当今，我们基本上就是通过框架去实现的，原生JS的学习逐渐减少了，框架虽是简洁方便，但掌握原生JS也是十分有必要的。比如说，原生JS闭包，继承，原型链，node…以下是我copy大神与自我总结，现在放到一起，方便以后查阅（有不足的地方，还望大家能够提出，我会尽快加以改正），大家相互学习。一、!!强制转布尔值boolean根据当前需要判断的值是真值还是假值来判断，真值返回true,假值返回fals.
复制链接

扫一扫