Javascript 技巧整理
1、数字取整
可以使用Math.floor(), Math.ceil() 和 Math.round() 将浮点数转换为整数。还可以使用’~~‘(英文格式)或|(位或运算符)将浮点数截断为整数。实现快速转换
console.log(~~11.25); // 11
console.log(11.25 | 0); // 11
注:’~~‘不仅能将float转换成int,还能将string转换成number,当然字符串转换number还有很多,例如运算符+、/、*,都可将一个string类型的变量转为number 类型。
console.log(~~"11.25"); // 11
console.log(+"11.25"); // 11.25
console.log("11.25" * 1); // 11.25
console.log(+"11.25" / 1); // 11.25
2、个位数补零(slice())
slice(start,end) 方法可从已有的数组中返回选定的元素。
返回值:一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。
start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end :可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
let array = [1,2,3,4,5,6,7,10,11]
array = array.map(item => ('0' + item).slice(-2))
console.log(array)
3、快速求幂(ES7+)
我们在之前常使用Math.pow(2, 4)或者<<进行求幂,ES7之后我们可以做到更快捷
Math.pow(2, 4); //16
2 << 3; //16
2 ** 4; //16
注:2 << 3 = 16 等价于 2 ** 4 = 16
4.防止冒泡事件(所有平台)
const stopPropagation = (event) => {
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
};
5.设备类型(PC\安卓\IOS)
有时候项目在不同端实现不同逻辑,这时候我们就需要识别设备类型
const isMobile = () => {
return !!navigator.userAgent.match(
/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i
);
};
有时我们还需要区分设备是安卓还是ios:
const isAndroid = () => {
return /android/i.test(navigator.userAgent.toLowerCase());
};
const isIOS = () => {
let reg = /iPhone|iPad|iPod|iOS|Macintosh/i;
return reg.test(navigator.userAgent.toLowerCase());
};
6.将NodeList转换成数组
运行document.querySelectorAll(“p”)函数时,返回的是NodeList对象。但这个对象不具备有数组的函数功能,比如some()、any()、reduce()、map()、filter()等。所以需要将节点列表转换成数组。可以使用[].slice.call(e)来实现:
let e = document.querySelectorAll("p"); // nodeList
let arrayElements = [].slice.call(e); // array
7.过滤唯一值(ES6)
Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的,结合扩展运算符(…),可以创建一个新的数组,达到过滤原数组重复值的功能。
const a = [1, 2, 6, 2, 4, 3, 3, 5, 5, 3, 4];
const newArray = [...new Set(a)];
console.log(newArray);
8.初始化函数(仅执行一次)
有时希望一个函数只在初始化时执行一次,后续不执行:
let test = function() {
console.log('msg,初始化')//执行一次
test= function() {
console.log('msg,后续操作')
}
}
test() // msg,初始化
test() // msg,后续操作
test() // msg,后续操作
想到哪写到哪。希望对大家的学习有所帮助,也希望大家多多支持。