JavaScript可以應(yīng)用在哪些領(lǐng)域

Javascript 除了性能略捉雞外基本是全能的，可以應(yīng)用在以下領(lǐng)域：

按需網(wǎng)站開發(fā)可以根據(jù)自己的需求進(jìn)行定制，網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義

1. 網(wǎng)站開發(fā)

1.1. 網(wǎng)站前端開發(fā)

Javascript 的老本行。用來實(shí)現(xiàn)前端邏輯，簡單的比如說點(diǎn)一個按鈕會發(fā)生什么之類的，復(fù)雜的你可以用 js 寫個 x86 模擬器再灌個 linux 系統(tǒng)進(jìn)去。

1.2. 網(wǎng)站后端開發(fā)

Node.js 讓程序員可以用 js 自由地寫后端了。

2. 移動開發(fā)

2.1. Web app

HTML5 提供了很多 API 支持，可以實(shí)現(xiàn)原生應(yīng)用擁有的大部分功能，但是性能有待提高。像 Firefox OS 就是基于 web app 的移動操作系統(tǒng)。

2.2. 混合式應(yīng)用開發(fā)

把原生應(yīng)用的一部分用前端技術(shù)實(shí)現(xiàn)，使原生應(yīng)用更加靈活。很多應(yīng)用都會這樣做。PhoneGap 之類平臺的出現(xiàn)允許程序員使用 js 來進(jìn)行移動應(yīng)用開發(fā)。

3. 桌面開發(fā)

主要是指 chrome 等瀏覽器能把 js 寫的程序打包成桌面應(yīng)用。Google 力推的 Chrome OS 也是基于 web app 的操作系統(tǒng)。

4. 插件開發(fā)

Javascript 是唯一一種在所有主流平臺都被原生支持的編程語言，因此在所有主流平臺都可以使用 js 進(jìn)行插件開發(fā)。常見的有瀏覽器插件和擴(kuò)展程序，同時大部分移動應(yīng)用的插件平臺也是使用 js 進(jìn)行插件開發(fā)的，因?yàn)橐淮伍_發(fā)可以保證跨平臺使用。

沒錯，幾乎所有領(lǐng)域都可以使用 js 進(jìn)行開發(fā)，就算現(xiàn)在不能以后也會可以的，所有能用 Javascript 寫的東西最終都會被 Javascript 寫出來。

javascript如何使用

1、字符串的創(chuàng)建

創(chuàng)建一個字符串有幾種方法。最簡單的是用引號將一組字符包含起來，可以將其賦值給一個字符串變量。

var myStr = "Hello, String!";

我們在上面腳本創(chuàng)建了字符串，但本質(zhì)上，它們并不是真正的字符串對象，準(zhǔn)確地說，它們是字符串類型的值。要創(chuàng)建一個字符串對象，可使用如下語句：var strObj = new String("Hello, String!");

使用typeof運(yùn)算符查看會發(fā)現(xiàn)，上面的myStr類型為string，而strObj類型為object。

如果想知道字符串的長度，使用其length屬性：string.length。

得到字符串的指定位置的字符使用方法：string.charAt(index);

2、字符串的拼接

非常簡單，就用一個"+"將兩個字符串"相加"：

var longString = "One piece " + "plus one more piece.";

要將多個字符串累積為一個字符串，還可以使用"+="操作符：

var result = "";

result += "My name is Anders"

result += " and my age is 25";

要在字符串中添加換行符，需要使用轉(zhuǎn)義字符"/n"：

var confirmString = "You did not enter a response to the last " +

"question./n/nSubmit form anyway?";

var confirmValue = confirm(confirmString);

但這種方法只能用在像警告、確認(rèn)對話框之類的情況下，如果將這段文本作為HTML內(nèi)容呈現(xiàn)，就無效了，此時用"br"代替它：

var htmlString = "First line of string.brSecond line of string.";

document.write(htmlString);

String對象還提供了方法concat()，它完成與"+"相同的功能：

string.concat(value1, value2, ...)

不過concat()方法顯然不如"+"來得直觀簡潔。

3、訪問字符串的子串

使用substring()或slice()方法(NN4+, IE4+)，下面說明它們的具體用法。

substring()的原型為： string.substring(from, to)

第一個參數(shù)from指定了子字符串在原字符串中的起始位置(基于0的索引)；第二個參數(shù)to是可選的，它指定了子字符串在原字符串的結(jié)束位置(基于0的索引)，一般情況下，它應(yīng)比from大，如果它被省略，那么子字符串將一直到原字符串的結(jié)尾處。

如果參數(shù)from不小心比參數(shù)to大了會怎樣？JavaScript會自動調(diào)解子字符串的起止位置，也就是說，substring()總是從兩個參數(shù)中較小的那個開始，到較大的那個結(jié)束。不過要注意，它包含起始位置的那個字符，但不包含結(jié)束位置的那個字符。

var fullString = "Every dog has his day.";

var section = fullString.substring(0, 4); // section is "Ever".

slice()的原型為： string.slice(start, end)

參數(shù)start表示子串的起始位置，如果為負(fù)數(shù)，那么可以理解為倒數(shù)第幾個開始，例如-3表示從倒數(shù)第三個開始；參數(shù)end表示結(jié)束位置，與start一樣，它也可以為負(fù)數(shù)，其含義也表示到倒數(shù)第幾個結(jié)束。slice()的參數(shù)可以為負(fù)數(shù)，所以要比substring()更加靈活，但沒那么寬容了，如果start比end要大，它將返回一個空字符串(示例略)。

還有一個方法是substr()，其原型為： string.substr(start, length)

從原型可以看出它的參數(shù)的含義，start表示起始位置，length則表示子字符串的長度。JavaScript標(biāo)準(zhǔn)不提倡使用該方法。

4、字符串的大小寫轉(zhuǎn)換

使用toLowerCase()和toUpperCase()方法：

var city = "ShanGHai";

city = city.toLowerCase(); // city is "shanghai" now.

5、判斷兩個字符串是否相等

先將用戶的輸入值全部轉(zhuǎn)換為大寫（或小寫），然后再行比較：

var name = document.form1.txtUserName.value.toLowerCase();

if(name == "urname")

{

// statements go here.

}

JavaScript有兩種相等運(yùn)算符。一種是完全向后兼容的，標(biāo)準(zhǔn)的"=="，如果兩個操作數(shù)類型不一致，它會在某些時候自動對操作數(shù)進(jìn)行類型轉(zhuǎn)換，考慮下面的賦值語句：

var strA = "i love you!";

var strB = new String("i love you!");

這兩個變量含有相同的字符序列，但數(shù)據(jù)類型卻不同，前者為string，后者為object，在使用"=="操作符時，JavaScript會嘗試各種求值，以檢測兩者是否會在某種情況下相等。所以下面的表達(dá)式結(jié)果為true： strA == strB。

第二種操作符是"嚴(yán)格"的"==="，它在求值時不會這么寬容，不會進(jìn)行類型轉(zhuǎn)換。所以表達(dá)式strA === strB的值為false，雖然兩個變量持有的值相同。

有時代碼的邏輯要求你判斷兩個值是否不相等，這里也有兩個選擇："!="和嚴(yán)格的"!=="，它們的關(guān)系就類似于"=="和"==="。

討論：

"=="和"!="在求值時會盡可能地尋找值的匹配性，但你可能還是想在比較前進(jìn)行顯式的類型轉(zhuǎn)換，以"幫助"它們完成工作。比如，如果想判斷一個用戶的輸入值（字符串）是否等于一個數(shù)字，你可以讓"=="幫你完成類型轉(zhuǎn)換：

if(document.form1.txtAge.value == someNumericVar) { ... }

也可以提前轉(zhuǎn)換：

if(parseInt(document.form1.txtAge.value) == someNumericVar) { ... }

如果你比較習(xí)慣于強(qiáng)類型的編程語言(比如C#,Java等)，那么這里你可以延續(xù)你的習(xí)慣(類型轉(zhuǎn)換)，這樣也會增強(qiáng)程序的可讀性。

有一種情況需要注意，就是計(jì)算機(jī)的區(qū)域設(shè)置。如果用""和""來比較字符串，那么JavaScript把它們作為Unicode來比較，但顯然，人們在瀏覽網(wǎng)頁時不會把文本當(dāng)作Unicode來閱讀:) 比如在西班牙語中，按照傳統(tǒng)的排序，"ch"將作為一個字符排在"c"和"d"之間。localeCompare()提供了一種方式，可以幫助你使用默認(rèn)區(qū)域設(shè)置下的字符排序規(guī)則。

var strings; // 要排序的字符串?dāng)?shù)組，假設(shè)已經(jīng)得到初始化

strings.sort(function(a,b) { return a.localeCompare(b) }); // 調(diào)用sort()方法進(jìn)行排序

6、字符串的查找

使用string的indexOf()方法：

strObj.indexOf(subString[, startIndex])

strObj為要進(jìn)行判斷的字符串，subString為要在strObj查找的子字符串，startIndex是可選的，表示查找的開始位置(基于0的索引)，如果startIndex省略，則從strObj開始處查找，如果startIndex小于0，則從0開始，如果startIndex大于最大索引，則從最大索引處開始。

indexOf()返回strObj中subString的開始位置，如果沒有找到，則返回-1。在腳本中，可以這么使用：

if(largeString.indexOf(shortString) != -1)

{

// 如果包含，進(jìn)行相應(yīng)處理；

}

也許一個字符串會包含另一字符串不止一次，這時第二個參數(shù)startIndex也許會派上用場，下面這個函數(shù)演示如何求得一個字符串包含另外一個字符串的次數(shù)：

function countInstances(mainStr, subStr)

{

var count = 0;

var offset = 0;

do

{

offset = mainStr.indexOf(subStr, offset);

if(offset != -1)

{

count++;

offset += subStr.length;

}

}while(offset != -1)

return count;

}

String對象有一個與indexOf()對應(yīng)的方法，lastIndexOf()：

strObj.lastIndexOf(substring[, startindex])

strObj為要進(jìn)行判斷的字符串，subString為要在strObj查找的子字符串，startIndex是可選的，表示查找的開始位置(基于0的索引)，如果startIndex省略，則從strObj末尾處查找，如果startIndex小于0，則從0開始，如果startIndex大于最大索引，則從最大索引處開始。該方法自右向左查找，返回subString在strObj中最后出現(xiàn)的位置，如果沒有找到，返回-1。

Web前端工程師應(yīng)該知道的JavaScript使用小技巧

今天小編要跟大家分享的文章是關(guān)于Web前端工程師應(yīng)該知道的JavaScript使用小技巧。任何一門技術(shù)在實(shí)際中都會有一些屬于自己的小技巧。同樣的，在使用JavaScript時也有一些自己的小技巧，只不過很多時候有可能容易被大家忽略。而在互聯(lián)網(wǎng)上，時不時的有很多同行朋友會總結(jié)(或收集)一些這方面的小技巧。

今天在這篇文章中，小編會整理一些大家熟悉或不熟悉的有關(guān)于JavaScript的小技巧，希望能夠?qū)Υ蠹业膶W(xué)習(xí)和工作有所幫助。

一、數(shù)組

先來看使用數(shù)組中常用的一些小技巧。

01、數(shù)組去重

ES6提供了幾種簡潔的數(shù)組去重的方法，但該方法并不適合處理非基本類型的數(shù)組。對于基本類型的數(shù)組去重，可以使用...new

Set()來過濾掉數(shù)組中重復(fù)的值，創(chuàng)建一個只有唯一值的新數(shù)組。

constarray=[1,1,2,3,5,5,1]

constuniqueArray=[...newSet(array)];

console.log(uniqueArray);

Result:(4)[1,2,3,5]

這是ES6中的新特性，在ES6之前，要實(shí)現(xiàn)同樣的效果，我們需要使用更多的代碼。該技巧適用于包含基本類型的數(shù)組：undefined、null、boolean、string和number。如果數(shù)組中包含了一個object,function或其他數(shù)組，那就需要使用另一種方法。

除了上面的方法之外，還可以使用Array.from(newSet())來實(shí)現(xiàn)：

constarray=[1,1,2,3,5,5,1]

Array.from(newSet(array))

Result:(4)[1,2,3,5]

另外，還可以使用Array的.filter及indexOf()來實(shí)現(xiàn)：

constarray=[1,1,2,3,5,5,1]

array.filter((arr,index)=array.indexOf(arr)===index)

Result:(4)[1,2,3,5]

注意，indexOf()方法將返回數(shù)組中第一個出現(xiàn)的數(shù)組項(xiàng)。這就是為什么我們可以在每次迭代中將indexOf()方法返回的索引與當(dāng)索索引進(jìn)行比較，以確定當(dāng)前項(xiàng)是否重復(fù)。

02、確保數(shù)組的長度

在處理網(wǎng)格結(jié)構(gòu)時，如果原始數(shù)據(jù)每行的長度不相等，就需要重新創(chuàng)建該數(shù)據(jù)。為了確保每行的數(shù)據(jù)長度相等，可以使用Array.fill來處理：

letarray=Array(5).fill('');

console.log(array);

Result:(5)["","","","",""]

03、數(shù)組映射

不使用Array.map來映射數(shù)組值的方法。

constarray=[

{

ame:'大漠',

email:'w3cplus@#'

},

{

ame:'Airen',

email:'airen@#'

}

]

constname=Array.from(array,({name})=name)

Result:(2)["大漠","Airen"]

04、數(shù)組截斷

如果你想從數(shù)組末尾刪除值(刪除數(shù)組中的最后一項(xiàng))，有比使用splice()更快的替代方法。

例如，你知道原始數(shù)組的大小，可以重新定義數(shù)組的length屬性的值，就可以實(shí)現(xiàn)從數(shù)組末尾刪除值：

letarray=[0,1,2,3,4,5,6,7,8,9]

console.log(array.length)

Result:10

array.length=4

console.log(array)

Result:(4)[0,1,2,3]

這是一個特別簡潔的解決方案。但是，slice()方法運(yùn)行更快，性能更好：

letarray=[0,1,2,3,4,5,6,7,8,9];

array=array.slice(0,4);

console.log(array);

Result:[0,1,2,3]

05、過濾掉數(shù)組中的falsy值

如果你想過濾數(shù)組中的falsy值，比如0、undefined、null、false，那么可以通過map和filter方法實(shí)現(xiàn)：

constarray=[0,1,'0','1','大漠','#',undefined,true,false,null,'undefined','null',NaN,'NaN','1'+0]

array.map(item={

returnitem

}).filter(Boolean)

Result:(10)[1,"0","1","大漠","#",true,"undefined","null","NaN","10"]

06、獲取數(shù)組的最后一項(xiàng)

數(shù)組的slice()取值為正值時，從數(shù)組的開始處截取數(shù)組的項(xiàng)，如果取值為負(fù)整數(shù)時，可以從數(shù)組末屬開始獲取數(shù)組項(xiàng)。

letarray=[1,2,3,4,5,6,7]

constfirstArrayVal=array.slice(0,1)

Result:[1]

constlastArrayVal=array.slice(-1)

Result:[7]

console.log(array.slice(1))

Result:(6)[2,3,4,5,6,7]

console.log(array.slice(array.length))

Result:[]

正如上面示例所示，使用array.slice(-1)獲取數(shù)組的最后一項(xiàng)，除此之外還可以使用下面的方式來獲取數(shù)組的最后一項(xiàng)：

console.log(array.slice(array.length-1))

Result:[7]

07、過濾并排序字符串列表

你可能有一個很多名字組成的列表，需要過濾掉重復(fù)的名字并按字母表將其排序。

在我們的例子里準(zhǔn)備用不同版本語言的JavaScript

保留字的列表，但是你能發(fā)現(xiàn)，有很多重復(fù)的關(guān)鍵字而且它們并沒有按字母表順序排列。所以這是一個完美的字符串列表(數(shù)組)來測試我們的JavaScript小知識。

varkeywords=['do','if','in','for','new','try','var','case','else','enum','null','this','true','void','with','break','catch','class','const','false','super','throw','while','delete','export','import','return','switch','typeof','default','extends','finally','continue','debugger','function','do','if','in','for','int','new','try','var','byte','case','char','else','enum','goto','long','null','this','true','void','with','break','catch','class','const','false','final','float','short','super','throw','while','delete','double','export','import','native','public','return','static','switch','throws','typeof','boolean','default','extends','finally','package','private','abstract','continue','debugger','function','volatile','interface','protected','transient','implements','instanceof','synchronized','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','await','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof'];

因?yàn)槲覀儾幌敫淖兾覀兊脑剂斜恚晕覀儨?zhǔn)備用高階函數(shù)叫做filter，它將基于我們傳遞的回調(diào)方法返回一個新的過濾后的數(shù)組。回調(diào)方法將比較當(dāng)前關(guān)鍵字在原始列表里的索引和新列表中的索引，僅當(dāng)索引匹配時將當(dāng)前關(guān)鍵字push到新數(shù)組。

最后我們準(zhǔn)備使用sort方法排序過濾后的列表，sort只接受一個比較方法作為參數(shù)，并返回按字母表排序后的列表。

在ES6下使用箭頭函數(shù)看起來更簡單:

constfilteredAndSortedKeywords=keywords

.filter((keyword,index)=keywords.lastIndexOf(keyword)===index)

.sort((a,b)=a

這是最后過濾和排序后的JavaScript保留字列表：

console.log(filteredAndSortedKeywords);

Result:['abstract','arguments','await','boolean','break','byte','case','catch','char','class','const','continue','debugger','default','delete','do','double','else','enum','eval','export','extends','false','final','finally','float','for','function','goto','if','implements','import','in','instanceof','int','interface','let','long','native','new','null','package','private','protected','public','return','short','static','super','switch','synchronized','this','throw','throws','transient','true','try','typeof','var','void','volatile','while','with','yield']

08、清空數(shù)組

如果你定義了一個數(shù)組，然后你想清空它。通常，你會這樣做：

letarray=[1,2,3,4];

functionemptyArray(){

array=[];

}

emptyArray();

但是，這有一個效率更高的方法來清空數(shù)組。你可以這樣寫:

letarray=[1,2,3,4];

functionemptyArray(){

array.length=0;

}

emptyArray();

09、拍平多維數(shù)組

使用...運(yùn)算符，將多維數(shù)組拍平：

10、從數(shù)組中獲取最大值和最小值

可以使用Math.max和Math.min取出數(shù)組中的最大小值和最小值：

constnumbers=[15,80,-9,90,-99]

constmaxInNumbers=Math.max.apply(Math,numbers)

constminInNumbers=Math.min.apply(Math,numbers)

console.log(maxInNumbers)

Result:90

console.log(minInNumbers)

Result:-99

另外還可以使用ES6的...運(yùn)算符來完成：

constnumbers=[1,2,3,4];

Math.max(...numbers)

Result:4

Math.min(...numbers)

Result:1

二、對象

在操作對象時也有一些小技巧。

01、使用...運(yùn)算符合并對象或數(shù)組中的對象

同樣使用ES的...運(yùn)算符可以替代人工操作，合并對象或者合并數(shù)組中的對象。

//合并對象

constobj1={

ame:'大漠',

url:'#'

}

constobj2={

ame:'airen',

age:30

}

constmergingObj={...obj1,...obj2}

Result:{name:"airen",url:"#",age:30}

//合并數(shù)組中的對象

constarray=[

{

ame:'大漠',

email:'w3cplus@#'

},

{

ame:'Airen',

email:'airen@#'

}

]

constresult=array.reduce((accumulator,item)={

return{

...accumulator,

[item.name]:item.email

}

},{})

Result:{大漠:"w3cplus@#",Airen:"airen@#"}

02、有條件的添加對象屬性

不再需要根據(jù)一個條件創(chuàng)建兩個不同的對象，以使它具有特定的屬性。為此，使用...操作符是最簡單的。

constgetUser=(emailIncluded)={

return{

ame:'大漠',

blog:'w3cplus',

...emailIncluded{email:'w3cplus@#'}

}

}

constuser=getUser(true)

console.log(user)

Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}

constuserWithoutEmail=getUser(false)

console.log(userWithoutEmail)

Result:{name:"大漠",blog:"w3cplus"}

03、解構(gòu)原始數(shù)據(jù)

你可以在使用數(shù)據(jù)的時候，把所有數(shù)據(jù)都放在一個對象中。同時想在這個數(shù)據(jù)對象中獲取自己想要的數(shù)據(jù)。

在這里可以使用ES6的Destructuring特性來實(shí)現(xiàn)。比如你想把下面這個obj中的數(shù)據(jù)分成兩個部分：

constobj={

ame:'大漠',

blog:'w3cplus',

email:'w3cplus@#',

joined:'2019-06-19',

followers:45

}

letuser={},userDetails={}

({name:user.name,email:user.email,...userDetails}=obj)

{name:"大漠",blog:"w3cplus",email:"w3cplus@#",joined:"2019-06-19",followers:45}

console.log(user)

Result:{name:"大漠",email:"w3cplus@#"}

console.log(userDetails)

Result:{blog:"w3cplus",joined:"2019-06-19",followers:45}

04、動態(tài)更改對象的key

在過去，我們首先必須聲明一個對象，然后在需要動態(tài)屬性名的情況下分配一個屬性。在以前，這是不可能以聲明的方式實(shí)現(xiàn)的。不過在ES6中，我們可以實(shí)現(xiàn)：

constdynamicKey='email'

letobj={

ame:'大漠',

blog:'w3cplus',

[dynamicKey]:'w3cplus@#'

}

console.log(obj)

Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}

05、判斷對象的數(shù)據(jù)類型

使用Object.prototype.toString配合閉包來實(shí)現(xiàn)對象數(shù)據(jù)類型的判斷：

constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)

constisArray=isType('Array')([1,2,3])

console.log(isArray)

Result:true

上面的代碼相當(dāng)于：

functionisType(type){

returnfunction(target){

return`[object${type}]`===Object.prototype.toString.call(target)

}

}

isType('Array')([1,2,3])

Result:true

或者：

constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)

constisString=isType('String')

constres=isString(('1'))

console.log(res)

Result:true

06、檢查某對象是否有某屬性

當(dāng)你需要檢查某屬性是否存在于一個對象，你可能會這樣做：

varobj={

ame:'大漠'

}

if(obj.name){

console.l

本文名稱：應(yīng)用javascript,應(yīng)用寶appguan方下載
當(dāng)前路徑：http://aaarwkj.com/article46/dssgihg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、做網(wǎng)站、ChatGPT、網(wǎng)頁設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)