首頁 web前端 js教程 JavaScript初学者的10个迷你技巧

JavaScript初学者的10个迷你技巧

May 16, 2016 pm 06:20 PM
javascript 技巧

在之前的编程语言排行榜中,我们曾介绍过转正在即的JavaScript语言,正如文章中阐明的那样,JavaScript不仅是最具活力的脚本语言,还是是最有用的编程语言之一。因为绝大多数的浏览器都和它兼容,你可以在这些浏览器中使用它。JavaScript被接受的相当快,因为它是如此的简单,而且使用范围相当广泛。许多程序员过去常常认为JavaScript是一门“玩具语言”,但是,AJAX进入市场后表现出了完全相反的一面,它让JavaScript展现出了完全不同的能力和功能。
由于这个发明的出现,程序员现在已经可以创建带有桌面应用程序效果的Web应用程序了,这是很有益处的,因为数据可以更快地改变。这是一些迷你技巧,它们可以帮助初学者更好地使用JavaScript。JavaScript的使用范围相当广泛,而且还有这么多的风格,所以它可以有很多的技巧。另外,虽然它很多的编程方法,但是我只挑选了10个技巧,我认为这些技巧对初学者理解JavaScript来说是很好的的起点。
1,在一个数组的最后添加一个元素
这个技巧可以让你使用Length属性在一个数组的最后添加一个元素,因为Length属性比数组的最后一个元素的下标多1。这个方法和“push”方法是相同的。例如: 

var myArray = []; 
myArray[myArray.length] = 'New Element';
登入後複製

2,调整一个数组的长度
Length属性不是只读的,所以你可以设置Length属性的值。而且,你可以使用它增大或缩小数组的长度。例如:

var myArray = [1,2,3]; 
myArray.length // 3 
myArray.length = 2; //Delete the last element 
myArray.length = 20 // add 18 elements to the array; the elements have the undefined value.
登入後複製

3,使用“!!”把任意数据类型转换成Boolean
这个技术可以让你使用“!!”把任意数据类型(比如string, number或integer)转换成Boolean。例如:

var myString = '23255'; 
typeof myString; //String 
myString = !!myString; 
typeof myString //Boolean
登入後複製

4,把Number转换成String
这个技巧可以让你在number的结尾添加一个空的string来把number转换成string,例如:

var mynumber = 234; 
typeof mynumber; //Number 
mynumber += ''; 
typeof mynumber; //String
登入後複製

5,了解一个函数需要多少个变量
这是一个伟大的技巧,可以让你准确地知道一个函数需要多少个变量。例如:

function add_nums(num1, num2){ 
return num1 + num2; 
} 
add_nums.length // 2 is the amount of parameters expected by the function add_nums
登入後複製

6,使用“arguments”对象来了解一个函数接收到了多少个参数
这个技术可以让你使用“arguments”对象来了解一个函数接收到了多少个参数。例如:

function add_nums(){ 
return arguments.length; 
} 
add_nums(23,11,32,56,89,89,89,44,6); //this return the number 9
登入後複製

当你需要检查参数个数的有效性的时候,或者当你需要创建一个不确定参数个数的函数的时候,这个技巧是很有用的。

function sum_three_nums( ){ 
if(arguments.length!=3) throw new Error('received ' + arguments.length + ' parameters and should work with 3'); 
} 
sum_three_nums(23,43); //Return the error message 
function sum_num(){ 
var total = 0; 
for(var i=0;i<arguments .length;i++){ 
total+=arguments[i]; 
} 
return total; 
} 
sum_num(2,34,45,56,56);
登入後複製

7,把对象当成参数,来组织和改善函数
在现代Web开发中,对象最普遍的一个用途是把它们当成函数的参数。要记住函数参数的这个规则总是很困难的;但是,使用一个对象是十分有好处的,因为我们不必再担心参数的规则了。而且,它更有组织性,可以让用户更好的理解我们要做什么。这个方法可以让你把对象当成参数,来组织和改善函数。例如:

function insertData(name,lastName,phone,address){ 
code here; 
}
登入後複製

重构以后的代码是这样的:

function insertData(parameters){ 
var name = parameters.name; 
var 
lastName = parameters.lastName; 
var phone = parameters.phone; 
var 
address = parameters.address; 
}
登入後複製

当你要使用默认值的时候,它也是十分有用的。例如:

function insertData(parameters){ 
var name = parameters.name; 
var 
lastName = parameters.lastName; 
var phone = parameters.phone; 
var 
address = parameters.address; 
var status = parameters.status || &#39;single&#39; 
//If status is not defined as a property 
//in the object the variable status 
take single as value 
}
登入後複製

现在,要使用这个函数十分的简单;我们可以用两种方式来发送数据:

//Example 1 
insertData({name:&#39;Mike&#39;, lastName:&#39;Rogers&#39;, 
phone:&#39;555-555-5555&#39;,address:&#39;the address&#39;, status:&#39;married&#39;}); 

//Example 2 
var myData = { name:&#39;Mike&#39;, 
lastName:&#39;Rogers&#39;, 
phone:&#39;555-555-5555&#39;, 
address:&#39;the address&#39;, 
status:&#39;married&#39; 
}; 
insertData(myData);
登入後複製

8,函数就是数据
函数就是像strings或numbers那样的数据,我们可以把它们当成函数参数来传递它们,这可以创建十分令人惊讶而又“威风凛凛”的Web应用程序。这个方法是非常有用的,几乎所有的主流框架都使用了这个方法。例如:

function byId(element, event, f){ 
Document.getElementById(element).[&#39;on&#39;+event] = f; //f is the function that 
we pass as parameter 
} 
byId(&#39;myBtn&#39;,&#39;click&#39;,function(){alert(&#39;Hello 
World&#39;)}); 
Another example of functions as data: 
//Example 1 
function msg(m){ 
Alert(m); 
} 
//Example 2 
var msg = 
function(m){ alert(m);}
登入後複製

这些函数几乎是完全相同的。唯一的区别是使用它们的方式。例如:第一个函数,在你声明它以前,你就可以使用它了;但是第二个函数只有声明以后才能使用:

//Example 1 
msg(&#39;Hello world&#39;); //This will work 
function msg(m){ 
alert(m); 
} 
//Example 2 
msg(&#39;Hello world&#39;); //Does not work 
because JavaScript cannot find the function msg because is used before is been 
declared. 
var msg = function(m){ alert(m)}
登入後複製

9,扩展本地对象

虽然一些JavaScript的领袖不推荐这个技术,但是它已经被一些框架使用了。它可以让你针对JavaScript API来创建一些辅助性的方法。

//We create the method prototype for our arrays 
//It only sums numeric 
elements 
Array.prototype.sum = function(){ 
var len = this.length; 
total = 0; 
for(var i=0;i<len ;i++){ 
if(typeof this[i]!= &#39;number&#39;) 
continue; 
total += this[i]; 
} 
return total; 
} 
var myArray = 
[1,2,3,&#39;hola&#39;]; 
myArray.sum(); 


Array.prototype.max = function(){ 
return Math.max.apply(&#39;&#39;,this); 
}
登入後複製

10,Boolean
注意它们之间的区别,因为这会节省你调试脚本的时间。

&#39;&#39; == &#39;0&#39; // false 
0 == &#39;&#39; // true 
0 == &#39;0&#39; // true 
false == &#39;false&#39; 
// false 
false == &#39;0&#39; // true 
false == undefined // false 
false == 
null // false 
null == undefined // true 
true == 1 // true 
&#39;&#39; == null 
// false 
false == &#39;&#39; // true
登入後複製

如果你在其他地方看过这些脚本,那么这些技巧可以帮助你融会贯通。这些技巧甚至还不及JavaScript所有功能的冰山一角,但是这是一个开始!请不要客气,留下你的评论,问题,额外的技巧或疑虑吧,但是请记住,这是一篇针对初学者的文章!!我希望能收到一些开发者同行的来信!Enjoy!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Win11小技巧分享:一招跳過微軟帳號登入 Win11小技巧分享:一招跳過微軟帳號登入 Mar 27, 2024 pm 02:57 PM

Win11小技巧分享:一招跳過微軟帳號登入Windows11是微軟最新推出的作業系統,具有全新的設計風格和許多實用的功能。然而,對於某些用戶來說,在每次啟動系統時都要登入微軟帳戶可能會感到有些煩擾。如果你是其中一員,不妨試試以下的技巧,讓你能夠跳過微軟帳號登錄,直接進入桌面介面。首先,我們需要在系統中建立一個本機帳戶,來取代微軟帳戶登入。這樣做的好處是

老手必備:C語言中*與&的技巧與注意事項 老手必備:C語言中*與&的技巧與注意事項 Apr 04, 2024 am 08:21 AM

C語言中,表示指針,儲存其他變數的位址;&表示位址運算符,傳回變數的記憶體位址。指針的使用技巧包括定義指針、解引用指針,需確保指針指向有效地址;地址運算符&的使用技巧包括取得變數地址,取得數組元素地址時返回數組第一元素地址。實戰案例說明了使用指標和位址運算子反轉字串。

新手製作表格有哪些技巧 新手製作表格有哪些技巧 Mar 21, 2024 am 09:11 AM

我們經常在excel中製作和編輯表格,但是作為一個剛剛接觸軟體的新手來講,如何使用excel製作表格,並沒有我們使用起來那麼輕鬆。下邊,我們針對新手,也就是初學者需要掌握的表格製作的一些步驟進行一些演練,希望對需要的人有些幫助。新手錶格範例樣板如下圖:我們看看如何完成! 1,新建excel文檔,有兩種方法。可以在【桌面】空白位置,點選滑鼠右鍵-【新建】-【xls】檔。也可以【開始】-【所有程式】-【MicrosoftOffice】-【MicrosoftExcel20**】2,雙擊我們新建的ex

VSCode入門指南:初學者必讀,快速掌握使用技巧! VSCode入門指南:初學者必讀,快速掌握使用技巧! Mar 26, 2024 am 08:21 AM

VSCode(VisualStudioCode)是一款由微軟開發的開源程式碼編輯器,具有強大的功能和豐富的插件支持,成為開發者的首選工具之一。本文將為初學者提供一個入門指南,幫助他們快速掌握VSCode的使用技巧。在本文中,將介紹如何安裝VSCode、基本的編輯操作、快捷鍵、插件安裝等內容,並為讀者提供具體的程式碼範例。 1.安裝VSCode首先,我們需

PHP程式設計技巧:如何實現3秒內跳轉網頁 PHP程式設計技巧:如何實現3秒內跳轉網頁 Mar 24, 2024 am 09:18 AM

標題:PHP程式設計技巧:如何實現3秒內跳轉網頁在Web開發中,經常會遇到需要在一定時間內自動跳到另一個頁面的情況。本文將介紹如何使用PHP實作在3秒內實現頁面跳轉的程式設計技巧,並提供具體的程式碼範例。首先,實現頁面跳轉的基本原理是透過HTTP的回應頭中的Location欄位來實現。透過設定該欄位可以讓瀏覽器自動跳到指定的頁面。下面是一個簡單的例子,示範如何在P

Win11技巧大揭密:如何繞過微軟帳號登入 Win11技巧大揭密:如何繞過微軟帳號登入 Mar 27, 2024 pm 07:57 PM

Win11技巧大揭密:如何繞過微軟帳號登入近期,微軟公司推出了全新的作業系統Windows11,引起了廣泛關注。相較於之前的版本,Windows11在介面設計、功能改進等方面做出了許多新的調整,但也引發了一些爭議,其中最引人注目的一點就是強制要求用戶使用微軟帳戶登入系統。對於某些用戶來說,他們可能更習慣於使用本地帳戶登錄,而不願意將個人資訊與微軟帳戶綁定。

Laravel表單類別使用技巧:提高效率的方法 Laravel表單類別使用技巧:提高效率的方法 Mar 11, 2024 pm 12:51 PM

在編寫網站或應用程式時,表單是不可或缺的一部分。 Laravel作為一個流行的PHP框架,提供了豐富而強大的表單類,使得表單處理變得更加簡單和高效。本文將介紹一些Laravel表單類別的使用技巧,幫助你提升開發效率。下面透過具體的程式碼範例來詳細講解。建立表單要在Laravel中建立表單,首先需要在檢視中編寫對應的HTML表單。在處理表單時,可以使用Laravel

深入理解Go語言中的函數重構技巧 深入理解Go語言中的函數重構技巧 Mar 28, 2024 pm 03:05 PM

在Go語言程式開發中,函數重構技巧是十分重要的一環。透過優化和重構函數,不僅可以提高程式碼品質和可維護性,還可以提升程式的效能和可讀性。本文將深入探討Go語言中的函數重構技巧,結合具體的程式碼範例,幫助讀者更能理解和應用這些技巧。 1.程式碼範例1:提取重複程式碼片段在實際開發中,經常會遇到重複使用的程式碼片段,這時就可以考慮將重複程式碼提取出來作為一個獨立的函數,以

See all articles