文章目录
前言
文中知识点均为开发过程中百度的知识点，加上自己使用时的理解，如有侵权，请联系我
一、3个js优化小技巧
1.if多条件判断
// 冗余
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {}
// 简洁
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {}
注意：ie浏览器、360浏览器都不兼容includes
2.if…else…
// 冗余
let test: boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// 简洁
let test = x > 10;
let test = x > 10 ? true : false; //三元运算符
3.重复字符串多次
// 冗余
let test = '';
for(let i = 0; i < 5; i ++) {
test += 'test ';
}
// 简洁
'test '.repeat(5);
注意：ie浏览器不兼容repeat
参考文地址：https://juejin.cn/post/6924108781542440974
二、javaScript刷新当前页面的3种方法
方法1：reload() 方法
reload()方法用于刷新当前文档。类似于你浏览器上的刷新页面按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
<script>
function reloadPage(){
location.reload()
}
</script>
</head>
<body>
<input type="button" value="重新加载页面" onclick="reloadPage()">
</body>
</html>
方法2：replace() 方法
replace() 方法可用一个新文档取代当前文档。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
<script>
function replaceDoc()
{
window.location.replace("https://sunmenglei.blog.csdn.net/")
}
</script>
</head>
<body>
<input type="button" value="载入新文档替换当前页面" onclick="replaceDoc()">
</body>
</html>
方法3：页面自动刷新
页面自动刷新：把如下代码加入区域中，其中10指每隔10秒刷新一次页面。
<meta http-equiv="refresh" content="10">
原文链接：https://juejin.cn/post/6925796809684025357
三、修改原生复选框样式
input[type="checkbox"]{width:20px;height:20px;display: inline-block;text-align: center;vertical-align: middle; line-height: 18px;position: relative;}
input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
input[type="checkbox"]:checked::before{content: "\2713";background-color: #fff;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #e50232;color:#e50232;font-size: 20px;font-weight: bold;}
原文链接：https://blog.csdn.net/guoshujie1/article/details/97147100
四、通知栏自己滚动效果
<ul>
<li>
<a href="#">通知1</a>
</li>
<li>
<a href="#">通知2</a>
</li>
</ul>
$(function(){
var setTime;
$("ul").hover(function(){
clearInterval(setTime);
},
function(){
setTime=setInterval(function(){
var $first = $(ul:first");
var height = $first.find("li:first").height();
$first.animate({
"marginTop":-height+"px"},600,function(){
$first.css({
marginTop: 0
}).find("li:first").appendTo($first);
});
},3000);
}).trigger("mouseleave");
});
原文链接：https://www.cnblogs.com/lh0616/p/5003882.html
五、重写方法用于兼容ie
//1. console兼容ie
window.console = window.console || (function () {
var c = {};
c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function () {};
return c;
})();
//2. 重写forEach方法兼容IE
if (!Array.prototype.forEach) {
Array.prototype.forEach = function forEach(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError("this is null or not defined");
}
var O = Object(this);
var len = O.length >>> 0;
if (typeof callback !== "function") {
throw new TypeError(callback + " is not a function");
}
if (arguments.length > 1) {
T = thisArg;
}
k = 0;
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}
};
}
//3. 重写indexOf方法兼容IE
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (elt /*, from*/ ) {
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0) ?
Math.ceil(from) :
Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++) {
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
六、浮点数的加减乘除
function add(a, b) {
var c, d, e;
try {
c = a.toString().split(".")[1].length;
} catch (f) {
c = 0;
}
try {
d = b.toString().split(".")[1].length;
} catch (f) {
d = 0;
}
return e = Math.pow(10, Math.max(c, d)), (mul(a, e) + mul(b, e)) / e;
}
function sub(a, b) {
var c, d, e;
try {
c = a.toString().split(".")[1].length;
} catch (f) {
c = 0;
}
try {
d = b.toString().split(".")[1].length;
} catch (f) {
d = 0;
}
return e = Math.pow(10, Math.max(c, d)), (mul(a, e) - mul(b, e)) / e;
}
function mul(a, b) {
var c = 0,
d = a.toString(),
e = b.toString();
try {
c += d.split(".")[1].length;
} catch (f) {}
try {
c += e.split(".")[1].length;
} catch (f) {}
return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c);
}
function div(a, b) {
var c, d, e = 0,
f = 0;
try {
e = a.toString().split(".")[1].length;
} catch (g) {}
try {
f = b.toString().split(".")[1].length;
} catch (g) {}
return c = Number(a.toString().replace(".", "")), d = Number(b.toString().replace(".", "")), mul(c / d, Math.pow(10, f - e));
}
原文链接：https://www.cnblogs.com/yuwensong/p/7798759.html
七、JavaScript 28个常用字符串方法及使用技巧
1.获取字符串长度
const str = 'hello';
str.length // 输出结果：5
2.获取字符串指定位置的值
charAt()和charCodeAt()方法都可以通过索引来获取指定位置的值：
charAt() 方法获取到的是指定位置的字符；
charCodeAt()方法获取的是指定位置字符的Unicode值。
const str = 'hello';
str.charAt(1) // 输出结果：e
//注意：当index的取值不在str的长度范围内时，charAt(index)会返回空字符串
let str = "abcdefg";
console.log(str.charCodeAt(1)); // "b" --> 98
//注意：该方法会返回指定索引位置字符的 Unicode 值，返回值是 0 - 65535 之间的整数，表示给定索引处的 UTF-16 代码单元，如果指定位置没有字符，将返回 NaN
3.检索字符串是否包含特定序列
//（1）indexOf() 有则返回第一次匹配到的位置，否则返回-1
//语法：searchvalue：必需，规定需检索的字符串值fromindex：可选的整数参数，规定在字符串中开始检索的位置。它的合法取值是 0 到 string.length - 1。如省略该，则从字符串的首字符开始检索。
string.indexOf(searchvalue,fromindex)
//实例：
let str = "abcdefgabc";
console.log(str.indexOf("a")); // 输出结果：0
console.log(str.indexOf("z")); // 输出结果：-1
console.log(str.indexOf("c", 4)) // 输出结果：9
//（2）lastIndexOf() 有则返回最后一次匹配到的位置，否则返回-1
//实例：
let str = "abcabc";
console.log(str.lastIndexOf("a")); // 输出结果：3
console.log(str.lastIndexOf("z")); // 输出结果：-1
//（3）includes()
//语法：searchvalue：必需，要查找的字符串；start：可选，设置从那个位置开始查找，默认为 0。
string.includes(searchvalue, start)
//实例：
let str = 'Hello world!';
str.includes('o') // 输出结果：true
str.includes('z') // 输出结果：false
str.includes('e', 2) // 输出结果：false
//（4）startsWith() 检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true，否则 false
//实例：
let str = 'Hello world!';
str.startsWith('Hello') // 输出结果：true
str.startsWith('Helle') // 输出结果：false
str.startsWith('wo', 6) // 输出结果：true
//（5）endsWith() 判断当前字符串是否是以指定的子字符串结尾
//语法：searchvalue：必需，要搜索的子字符串；length： 设置字符串的长度，默认值为原始字符串长度 string.length。
string.endsWith(searchvalue, length)
//实例：
let str = 'Hello world!';
str.endsWith('!') // 输出结果：true
str.endsWith('llo') // 输出结果：false
str.endsWith('llo', 5) // 输出结果：true
4.连接多个字符串
concat() 方法用于连接两个或多个字符串。该方法不会改变原有字符串，会返回连接两个或多个字符串的新字符串
//语法：
string.concat(string1, string2, ..., stringX)
//实例：
let str = "abc";
console.log(str.concat("efg")); //输出结果："abcefg"
console.log(str.concat("efg","hijk")); //输出结果："abcefghijk"
//注意：开发过程中连接字符串常用"+" 拼接字符串
5.字符串分割成数组
//同时拆分多个分割符，使用正则表达式
const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/)
console.log(fruits); // 输出结果：["apples", "bananas", "cherries"]
6.截取字符串
//（1） slice(start,end) 包括开始处的字符，但不包括结束处的字符
let str = "abcdefg";
str.slice(1,6); // 输出结果："bcdef"
str.slice(1); // 输出结果："bcdefg"
str.slice(); // 输出结果："abcdefg"
str.slice(-2); // 输出结果："fg" -1 指字符串的最后一个字符
str.slice(6, 1); // 输出结果：""
//（2） substr(start,length)
let str = "abcdefg";
str.substr(1,6); // 输出结果："bcdefg"
str.substr(1); // 输出结果："bcdefg" 相当于截取[1,str.length-1]
str.substr(); // 输出结果："abcdefg" 相当于截取[0,str.length-1]
str.substr(-1); // 输出结果："g"
//（3） substring(from, to) from：非负整数。to：非负整数。负参数返回原字符串。包括开始处的字符，但不包括结束处的字符
let str = "abcdefg";
str.substring(1,6); // 输出结果："bcdef" [1,6)
str.substring(1); // 输出结果："bcdefg" [1,str.length-1]
str.substring(); // 输出结果："abcdefg" [0,str.length-1]
str.substring(6,1); // 输出结果 "bcdef" [1,6)
str.substring(-1); // 输出结果："abcdefg"
7.字符串大小写转换
//toLowerCase()：字符串转换为小写。
let str = "adABDndj";
str.toLowerCase(); // 输出结果："adabdndj"
//toUpperCase()：字符串转换为大写。
let str = "adABDndj";
str.toUpperCase(); // 输出结果："ADABDNDJ"
//将字符串中第一个字母变成大写
let word = 'apple'
word = word[0].toUpperCase() + word.substr(1)
console.log(word) // 输出结果："Apple"
8.字符串模式匹配
//（1）replace(searchvalue, newvalue)
let str = "abcdef";
str.replace("c", "z") // 输出结果：abzdef
// /g 全局替换 /i 忽略大小写
let str="Mr Blue has a blue house and a blue car";
str.replace(/blue/gi, "red"); // 输出结果：'Mr red has a red house and a red car'
//（2）match(regexp)
let str = "abcdef";
console.log(str.match("c")) // ["c", index: 2, input: "abcdef", groups: undefined]
//（3）search(searchvalue) //不执行/g 返回 str 中第一个与 regexp 相匹配的子串的起始位置。
let str = "abcdef";
str.search(/bcd/) // 输出结果：1
9.移除字符串收尾空白符
空白符包括：空格、制表符 tab、换行符等其他空白符等
//trim() 方法用于移除字符串首尾空白符，该方法不会改变原始字符串
//注意，该方法不适用于null、undefined、Number类型。
let str = " abcdef "
str.trim() // 输出结果："abcdef"
//返回一个从原始字符串的开头删除了空白的新字符串
const s = ' abc ';
s.trimStart() // "abc "
//返回一个从原始字符串的结尾删除了空白的新字符串
const s = ' abc ';
s.trimEnd() // " abc"
10.获取字符串本身
valueOf()和toString()
let str = "abcdef"
console.log(str.valueOf()) // "abcdef"
let str = "abcdef"
console.log(str.toString()) // "abcdef"
11.重复一个字符串
repeat()
'x'.repeat(3) // 输出结果："xxx"
'hello'.repeat(2) // 输出结果："hellohello"
'na'.repeat(0) // 输出结果：""
//如果参数是小数，会向下取整
'na'.repeat(2.9) // 输出结果："nana"
//如果参数是负数或者Infinity，会报错
'na'.repeat(Infinity) // RangeError
'na'.repeat(-1) // RangeError
//如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0
'na'.repeat(-0.9) // 输出结果：""
//如果参数是NaN，就等同于 0
'na'.repeat(NaN) // 输出结果：""
//如果repeat的参数是字符串，则会先转换成数字0
'na'.repeat('na') // 输出结果：""
'na'.repeat('3') // 输出结果："nanana"
12.补齐字符串长度（可用于时间补零）
padStart()和padEnd()
//如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串
'x'.padStart(1, 'ab') // 'x'
//如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
//如果省略第二个参数，默认使用空格补全长度
'x'.padStart(4) // ' x'
//padEnd()用于尾部补全
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
13.字符串转为数字
parseInt(string, radix)和parseFloat(string)
string：必需。要被解析的字符串。
radix：可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。小于 2 或者大于 36，parseInt() 将返回 NaN
//字符串开头和结尾的空格是允许的
parseInt(" 60 ") // 输出结果： 60
//如果字符串的第一个字符不能被转换为数字，就会返回 NaN
parseInt("new100") // 输出结果：NaN
//parseFloat 以数字返回该数字，如果在解析过程中遇到了正负号（+ 或 -）、数字 (0-9)、小数点，或者科学记数法中的指数（e 或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。同时参数字符串首位的空白符会被忽略
parseFloat("10.00") // 输出结果：10.00
parseFloat("10.01") // 输出结果：10.01
parseFloat("-10.01") // 输出结果：-10.01
parseFloat("40.5 years") // 输出结果：40.5
原文链接：https://juejin.cn/post/7010928535053271077
753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
