javascript 有意思的操作

1、在for循环的时候 缓存array.length

常见的for循环,提高性能的写法

for(var i=0, len=array.length; i//code...
}
for(var i=0, item; item=array[i++]; ){
    //array[i] ⇒ item
}

2、使用 || 设置默认值

在 ES6 中有设置默认值这个功能, 在 ES5 中可以利用 || 来设置默认值(当前面的值返回false时,就执行后面的)

// ES5
var ang = ‘’;
var name = ang || 默认值
ES6
var [name='小明'] = ['小军']; //默认值: '小明'

3、用 && 代替if短路条件

常见短路条件

if ( judge ){
    fun();
}

现在可以直接写成

judge && fun();

4、使用 !! 将变量转换成布尔类型

使用!!(双重否定运算符),能将任何类型的数据转换为布尔值,只有这些变量才会返回false 0,null,”,undefined,NaN 其他的都返回true:

// false
console.log(!!'', !!0, !!+0, !!-0, !!NaN, !!null, !!undefined);
// true
console.log(!!'  ', !!{}, !!'null');

5、使用 + 将变量转换成数字

适用于数字字符串,不然就会返回NaN(不是数字):

var num = +'123';
var noNum = +'123a';
var data = +new Date()
console.log(typeof num , num);  // number 123
console.log(typeof noNum , noNum );  // number NaN
console.log( typeof data, data )  // 1526263384977

6、用 in 检测对象中的属性

旧版IE 6兼容的代码,想要使用document.querySelector()来通过ID获取某些元素。
但是,在现代浏览器中,这个函数不存在。

if ('querySelector' in document) {  
    document.querySelector("#id");
} else {  
    document.getElementById("id");
}

7、获取数组的最后一个元素

Array.prototype.slice(start,end)可以用来裁剪数组。但是如果没有设置结束参数end的值的话,该函数会自动将end设置为数组长度值。
如果你将start设置一个负数的话,你就能从数组中获取到倒数的元素:

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

8、用 slice() 克隆数组

var arr = [123,321];
//var arrCopy = arr;//错误,数据还是指向同一个内存块(改变任意一个数组,其他的都会改变)
var arrCopy = arr.slice ; 
console.log(arrCopy);//[123,321].

9、 把NodeList转组成数组

<p>111p>
<p>222p>
<p>333p>
var nodeList = document.querySelectorAll("p"); //NodeList  
var arrEle = [].slice.call(nodeList); [p,p,p]
//var arrEle = Array.from(nodeList); //[p,p,p]  另外一个方法
arrEle[0].innerHTML = 'hehehe'; //

hehehe

arrEle.push('abc');//[p,p,p,'abc']

你可能感兴趣的:(前端)