Javascript 技巧整理

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,后续操作

想到哪写到哪。希望对大家的学习有所帮助，也希望大家多多支持。