JavaScript —— 12 个小技巧

javascript小技巧

原文出处： @Caio Ribeiro Pereira
译文出处：w3cplus-大漠
降级理解：bluexiaowei

1. 比较符 !!

!!value 等于 "Boolean( value )" 只要变量不等于 0 -0 "" null undefined NaN false 返回的都是 true;

var value = 0;
console.log( !!value ); // false
var value = -0;
console.log( !!value ); // false
var value = "";
console.log( !!value ); // false
var value = null;
console.log( !!value ); // false
var value = undefined;
console.log( !!value ); // false
var value = NaN;
console.log( !!value ); // false
var value = false;
console.log( !!value ); // false
var value = 1;
console.log( !!value ); // true

2. 运算符 +

将 +value 等同于 Number( value )，只有数字类型的字符串能正常转换其余的都是 NaN

var value = "123";
console.log( +value ); //123
var value = "123.234";
console.log( +value ); //123.234
var value = "123.5g";
console.log( +value ); //NaN

3. 循环中用缓存 length——优化重复计算数组长度

循环数组，每次迭代都将会重新计算数组的 array.length 。所以 var length = array.length 保存数组长度，不进行重复计算数组长度。

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

4. in 的用法。

(1): 当 key in Array 时 key 是索引值；
(2): 当 key in Object 时 key 是对象属性；

var array = [ 1, 2, 3, 4, 5 ];
console.log( "b" in array ); // false
console.log( 2 in array ); // true
console.log( "2" in array ); // true
var object = { b: "is me", c: "is he", d: "is she" };
console.log( "b" in object ); // true
var array = [ 1, 2, 3, 4, 5 ];
for ( var key in array ) {
    console.log( key + ":" + array[key] );
}
// 0: 1;
// 1: 2;
// 2: 3;
// 3: 4;
// 4: 5;
var object = { b: "is me", c: "is he", d: "is she" };
for ( var key in array ) {
    console.log( key + ":" + object[key] );
}
// b: "is me";
// c: "is he";
// d: "is she";

5. 数组截取——从后向前 slice()

array.slice( [start], [end] ) 从已有的数组中截取选定的元素。“截头不截尾”。
start 为负数则从尾部开始截取。 end 不支持负数。

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

6. 数组的截断 array.length = value

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

7. 字符串替换所有 string.replce()

string.replace(searchvalue,newvalue) 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
匹配字符串中相同的：serchvalue: RegExp/string 将相同的替换为 newvalue: value

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

8. 合并数组——优化合并大型数组耗内存的问题

合并两个数组 array.concat( array2 )。
然后这个函数并不适合用来合并两个大型的数组，因为其将消耗大量的内存来存储新创建的数组

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

解决办法：Array.pus().apply(arr1,arr2) 来替代创建一个新数组。这种方法不是用来创建一个新的数组，其只是将第一个第二个数组合并在一起，同时减少内存的使用。

9. NodeList 转换为数组

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

(1)
var elements = document.querySelectorAll( "p" ); // NodeList
var arrayElements = [].slice.call( elements ); // Now the NodeList is an array
Array.isArray( elements ); //false
Array.isArray( arrayElements ); //true
(2)
var elements = document.querySelectorAll( "p" ); // NodeList
var arrayElements = Array.from( elements ); // Now the NodeList is an array
Array.isArray( elements ); //false
Array.isArray( arrayElements ); //true

10. 数组排序；

元素在数组中的排序方式

var array = [2, 6, 1, 4, 5, 3, 8, 10, 7, 9];
array = array.sort( function( a, b ) { return a - b } );
console.log( array ); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var array = [2, 6, 1, 4, 5, 3, 8, 10, 7, 9];
array = array.sort( function( a, b ) { return b - a } );
console.log( array ); // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
var array = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
array = array.sort( function() { return Math.random() - 0.5 } );
console.log( array ); // [3, 2, 5, 1, 8, 4, 6, 9, 10, 7]

11. 短路语句 和 三目运算符

简化条件判断 if if else

true && (/*执行语句*/)；//短路语句
var a = true;
a && ( a = 1 );
console.log( a ); // 1
var a = true;
a && ( a = 2, console.log( a ) );// 2
console.log( a ); // 2
Boolean ? /*true 执行*/ ： /*false 执行*/； //三目
var a = true;
a ? a = false : a = 2;
console.log( a ); // false
var a = true;
a ? a = false : a = true;
console.log( a ); // true;
Boolean ? ( Boolean ? true ： false ) ： false； //三目嵌套
var a = 2;
a >= 2 ? ( a > 2 ? a = 2 : a = 1 ) : a = 4;
console.log( a ); // 1
var a = 2;
a >= 2 ? ( a > 2 ? a = 2 : a = 1 ) : a = 4;
console.log( a ); //4

12. || 运算符

在ES6中有默认参数这一特性。为了在老版本的浏览器中模拟这一特性，可以使用||操作符，并且将将默认值当做第二个参数传入。如果第一个参数返回的值为false，那么第二个值将会认为是一个默认值。如下面这个示例

function User( name, age ) {
    this.name = name || "Oliver Queen";
    this.age = age || 20;
}
var user1 = new User();
console.log( user1.name ); // Oliver Queen
console.log( user1.age ); // 20
var user2 = new User( "Barry Allen", 25 );
console.log( user2.name ); // Barry Allen
console.log( user2.age ); // 25