非常实用的JavaScript小技巧

1、在循环中缓存array.length

这个技巧很简单,这个在处理一个很大的数组循环时,对性能影响将是非常大的。基本上,大家都会写一个这样的同步迭代的数组:

for(var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

如果是一个小型数组,这样做很好,如果你要处理的是一个大的数组,这段代码在每次迭代都将会重新计算数组的大小,这将会导致一些延误。为了避免这种现象出现,可以将array.length做一个缓存:

var length = array.length;
for(var i = 0; i < length; i++) {
    console.log(array[i]);
}

你也可以写在这样:

for(var i = 0, length = array.length; i < length; i++) {
    console.log(array[i]);
}

2、获取数组中最后一个元素

Array.prototype.slice(begin,end)用来获取begin和end之间的数组元素。如果你不设置end参数,将会将数组的默认长度值当作end值。但有些同学可能不知道这个函数还可以接受负值作为参数。如果你设置一个负值作为begin的值,那么你可以获取数组的最后一个元素。如:

var array = [1,2,3,4,5,6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]

3、数组截断

这个小技巧主要用来锁定数组的大小,如果用于删除数组中的一些元素来说,是非常有用的。例如,你的数组有10个元素,但你只想只要前五个元素,那么你可以通过array.length=5来截断数组。如下面这个示例:

var array = [1,2,3,4,5,6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]
4、替换所有

String.replace()函数允许你使用字符串或正则表达式来替换字符串,本身这个函数只替换第一次出现的字符串,不过你可以使用正则表达多中的/g来模拟replaceAll()函数功能:

var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

5、合并数组

如果你要合并两个数组,一般情况之下你都会使用Array.concat()函数:

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

然后这个函数并不适合用来合并两个大型的数组,因为其将消耗大量的内存来存储新创建的数组。在这种情况之个,可以使用Array.pus().apply(arr1,arr2)来替代创建一个新数组。这种方法不是用来创建一个新的数组,其只是将第一个第二个数组合并在一起,同时减少内存的使用:

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

6、将NodeList转换成数组

如果你运行document.querySelectorAll(“p”)函数时,它可能返回DOM元素的数组,也就是NodeList对象。但这个对象不具有数组的函数功能,比如sort()、reduce()、map()、filter()等。为了让这些原生的数组函数功能也能用于其上面,需要将节点列表转换成数组。可以使用[].slice.call(elements)来实现:

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

7、数组元素的洗牌

对于数组元素的洗牌,不需要使用任何外部的库,比如Lodash,只要这样做:

var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值