The note from nljshoxbb

js常用的12种奇技赢巧

文章翻译自 John Howard 12 Extremely Useful Hacks for JavaScript

在这篇文章中，我将分享12个非常有用的JavaScript。这些hack可以减少代码，帮助你优化的运行代码。现在让我们开始开始吧。

1. 使用!!操作符转换为布尔

有时，我们需要检查一些变量是否存在，或者它是否为有效值，如果有，则将它们视为true。对于做这样的验证，你可以使用!!（两个否定操作符），例如!! variable ，它将自动将任何类型的数据转换为布尔值，只有当这些值为0，null，“”，undefined或NaN时，该变量将返回false，否则变量只会返回true。请看下面这个简单的例子。

function Account(cash) {  
    this.cash = cash;
    this.hasMoney = !!cash;
}
var account = new Account(100.50);  
console.log(account.cash); // 100.50  
console.log(account.hasMoney); // true
var emptyAccount = new Account(0);  
console.log(emptyAccount.cash); // 0  
console.log(emptyAccount.hasMoney); // false

在这种情况下，如果account.cash值大于零，则account.hasMoney将为true

2. 使用+运算符转换为数字

这个技巧是真的强！这样做很简单，但它只适用于字符串数字，否则返回NaN（不是数字）。看看下面这个例子。

function toNumber(strNumber) {  
    return +strNumber;
}
console.log(toNumber("1234")); // 1234  
console.log(toNumber("ACB")); // NaN

如果与Date一起使用，它将返回时间戳

console.log(+new Date()) // 1461288164385

3.&&

你应该经常看到下面的代码

if (conected) {  
    login();
}

你可以在变量（这将会被验证）和函数两者之间使用&&（AND运算符）的组合来缩短它。例如，上面的代码可以再缩短为一行

conected && login();

你也可以这样做来检查对象中是否存在某些属性或函数。类似于下面的代码

user && user.login();

4.设置默认值使用||操作符

现在在ES6中有默认参数功能。为了在旧浏览器中模拟此功能，你可以使用|| （OR运算符）通过将默认值作为第二个参数来使用。如果第一个参数返回false，则第二个参数将被用作默认值。看这个例子

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

5.在循环中缓存array.length

这个提示非常简单，在处理大循环时对性能造成巨大的影响。以下例子中，每次操作都会同步迭代一个数组。

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

如果你使用较小的数组，这并不会影响什么。但是如果处理大数组，上面的代码将在该循环的每次迭代中重新计算数组的大小，这样做会导致一些延迟。为了避免这种情况，你可以将array.length缓存在一个变量中以使用它，而不是每次在循环中调用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]);
}

6.检测对象中的属性

为了避免运行未定义的函数或属性，你需要检查某些属性是否存在。如果你打算编写跨浏览器代码，可能会使用此技术。例如，我们假设你需要编写与旧版Internet Explorer 6兼容的代码，并且想要通过document.querySelector（）来获取ID。但是在旧版浏览器中，这个函数是不存在，所以要检查这个函数的存在，你可以使用in操作符，看这个例子

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

在这种情况下，如果文档对象中没有querySelector函数，则可以使用document.getElementById（）作为备用

7.获取数组中的最后一项

你可以为Array.prototype.slice（begin，end）设置开始和结束参数来切割数组。但是如果没有设置结束参数，则该函数将自动设置数组的最大值。我认为很少有人知道这个函数可以接受负值，如果你设置一个负数作为开始参数，你将从数组中得到最后一个元素

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]

8.截取数组

这样做可以锁定数组的大小，这对基于要设置的元素数量并且删除数组的某些元素时非常有用。例如，如果你有一个包含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]

9.全部替换

String.replace（）函数允许使用String和Regex来替换字符串，本质上这个函数只替换第一次出现的字符串。但是你可以通过使用正则表达式末尾加上/ g来模拟replaceAll（）函数：

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

10.合并数组

如果需要合并两个数组，可以使用Array.concat（）函数

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

但是，这个函数并不合适合并大的数组，因为它将通过创建一个新的数组，这样将会消耗大量的内存。在这种情况下,�你可以使用Array.push.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];

11.将NodeList转换为数组

如果运行document.querySelectorAll（“p”）函数，它可能返回一个DOM元素数组，即NodeList对象（类数组）。但是这个对象没有数组对象的内置函数，如：sort（），reduce（），map（），filter（）。为了获得和数组一样的功能,你需要将NodeList转换为数组。只需使用这个函数：[] .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

12.打乱数组元素顺序

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

nljshoxbb / note Goto Github PK

note's People

Contributors

Watchers

note's Issues

js常用的12种奇技赢巧

1. 使用!!操作符转换为布尔

2. 使用+运算符转换为数字

3.&&

4.设置默认值使用||操作符

5.在循环中缓存array.length

6.检测对象中的属性

7.获取数组中的最后一项

8.截取数组

9.全部替换

10.合并数组

11.将NodeList转换为数组

12.打乱数组元素顺序

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent