這篇文章主要介紹了JavaScript小技巧收集的相關資料,需要的朋友可以參考下,希望能夠為大家提供這些簡短而實用的JavaScript技巧來提高大家程式設計能力。
使用!!操作符轉換布林值
有時候我們需要檢查一個變數是否存在或檢查值是否有有效值,如果存在就回傳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的值大於0,那麼account.hasMoney回傳的值就是true。
使用+將字串轉換成數字
這個技巧非常有用,其非常簡單,可以交字串資料轉換成數字,不過其只適合用於字串數據,否則將傳回NaN,例如下面的範例:
function toNumber(strNumber) { return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaN
這個也適用於Date,在本例中,它將返回的是時間戳數字:
console.log(+new Date()) // 1461288164385
並條件符
如果你有一段這樣的程式碼:
reee如果你有一段這樣的程式碼:
reee你也可以將這樣的程式碼:reee
你也可以將變數簡寫,並且使用&&和函數連接在一起,例如上面的範例,可以簡寫成這樣:if (conected) { login(); }
conected && login();
user && user.login();
在循環中快取array.length
這個技巧很簡單,這個在處理一個很大的陣列循環時,對效能影響將是非常大的。基本上,大家都會寫一個這樣的同步迭代的數組: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
for(var i = 0; i < array.length; i++) { console.log(array[i]); }
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]); }
取得陣列中最後一個元素
Array.prototype.slice(begin,end)用來取得begin和end之間的陣列元素。如果你不設定end參數,將會將陣列的預設長度值當作end值。但有些同學可能不知道這個函數還可以接受負值當參數。如果你設定一個負值作為begin的值,那麼你可以取得數組的最後一個元素。如:if ('querySelector' in document) { document.querySelector("#id"); } else { document.getElementById("id"); }
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]
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"
合并数组
如果你要合并两个数组,一般情况之下你都会使用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];
将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
数组元素的洗牌
对于数组元素的洗牌,不需要使用任何外部的库,比如Lodash,只要这样做:
var list = [1,2,3]; console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]
转换数值的更加的方法
将字符串转换为数字是非常常见的。最简单和最快的(jspref)的方式来实现,将使用+(加)算法。
var one = '1'; var numberOne = +one; // Number 1
你也可以使用-(减号)算法的转换类型并且变成负数值。
var one = '1'; var negativeNumberOne = -one; // Number -1
返回对象的函数能够用于链式操作
当创建面向对象的JavaScript对象的function时,函数返回一个对象将能够让函数可链式的写在一起来执行。
function Person(name) { this.name = name; this.sayName = function() { console.log("Hello my name is: ", this.name); return this; }; this.changeName = function(name) { this.name = name; return this; }; } var person = new Person("John"); person.sayName().changeName("Timmy").sayName(); //Hello my name is: John //Hello my name is: Timmy
给回调函数传递参数
在默认情况下,你无法将参数传给回调函数,如下:
function callback() { console.log('Hi human'); } document.getElementById('someelem').addEventListener('click', callback);
你可以采取JavaScript闭包的优点来给回调函数传参,案例如下:
function callback(a, b) { return function() { console.log('sum = ', (a+b)); } } var x = 1, y = 2; document.getElementById('someelem').addEventListener('click', callback(x, y));
什么是闭包呢?闭包是指一个针对独立的(自由)变量的函数。换句话说,闭包中定义的函数会记住它被创建的环境。了解更多请参阅MDN所以这种方式当被调用的时候,参数X/Y存在于回调函数的作用域内。
另一种方法是使用绑定方法。例如:
var alertText = function(text) { alert(text); }; document.getElementById('someelem').addEventListener('click', alertText.bind(this, 'hello'));
提升
理解提升将帮助你组织你的function。只需要记住,变量声明和定义函数会被提升到顶部。变量的定义是不会的,即使你在同一行中声明和定义一个变量。此外,变量声明让系统知道变量存在,而定义是将其赋值给它。
function doTheThing() { // 错误: notDeclared is not defined console.log(notDeclared); // 输出: undefined console.log(definedLater); var definedLater; definedLater = 'I am defined!' // 输出: 'I am defined!' console.log(definedLater) // Outputs: undefined console.log(definedSimulateneously); var definedSimulateneously = 'I am defined!' // 输出: 'I am defined!' console.log(definedSimulateneously) // 输出: 'I did it!' doSomethingElse(); function doSomethingElse(){ console.log('I did it!'); } // 错误: undefined is not a function functionVar(); var functionVar = function(){ console.log('I did it!'); } }
为了使事情更容易阅读,在函数作用域内提升变量的声明将会让你明确该变量的声明是来自哪个作用域。在你需要使用变量之前定义它们。在作用域底部定义函数,确保代码清晰规范。
希望这些小技巧能在工作中帮助你解决一些麻烦,对你有所帮助。