前言
随着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')
需要验证的字符串’,‘匹配的格式’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>
持续更新中…