Javascript 數組（Array）相關內容總結

来源:http://www.cnblogs.com/luda/archive/2017/12/08/JavaScript-Array.html
-Advertisement-
Play Games

作者根據JavaScript紅皮書，結合簡單的測試，比較全面的總結了JavaScript中Array（數組）類型的相關知識。 ...


創建數組

var colors = new Array(); //創建新數組
var num = new Array(3); //創建包含三項的新數組
var names = new Array("Dalu"); // 創建包含一項數據“Dalu”的新數組

 

檢測數據類型是否為數組

if(Array.isArray(value)){
// ECMAscript5新增
// 是數組
};

if(value instanceof Array){
// 是數組
}

 

轉換數組為String類型四種方法

toString()：由數組中每個值的字元串形式拼接而成的一個以逗號分隔的字元串。

valueOf()：同上。

toLocaleString()：和toString()返回結果基本相同，調用的是每一項的toLocale- String()方法。

join()：可自定義分隔符

代碼示例：

var nums = [1,2,3];
alert(nums.toString());  // ”1,2,3”
alert(nums.join(’||’);  // “1||2||3”

* 如果數組中的某一項的值是null或者undefined，那麼該值在上述方法返回的結果中以空字元串表示。

 

數組排序

 棧和隊列

 push()：在數組最後插入數據，可以是一個或多個。

 pop()：獲取數組最後一項的值。

 shift()：移除數組中的第一個項並返回該項 ，同時將數組長度減 1 。

 unshift()：在數組前端添加任意個項並返回新數組的長度 。同時使用unshift()和pop()方法,可以從相反的方向來模擬隊列，即在數組的前端添加項，從數組末端移除項。

 重排序

 reverse()：反轉數組項的順序。

 sort()：調用每個數組項的toString()轉型方法，然後比較得到的字元串，以確定如何排序。即使數組中的每一項都是數值，sort()方法比較的也是字元串。sort()方法可以接收一個比較函數作為參數，以便我們指定哪個值位於哪個值的前面。

 

代碼示例：

// 棧方法

var colors = new Array();
var count = colors.push("red","green");  //在最後面推入兩項
console.log(colors);  //["red","green"]
console.log(count);  //計數為2

count = colors.push("black");  //在最後面推入另一項
console.log(count);  //3

var item = colors.shift();  //移除數組中的第一個項並返回該項
console.log(item);  //"red"
console.log(colors.length); //2
// 隊列方法

var colors = new Array();
var count = colors.unshift("red","green");  //在最前面推入兩項
console.log(count);  //2

count = colors.unshift("black");  //在最前面推入另一項
console.log(count);  //3

var item = colors.pop();  //移除數組中的最後一項並返回該項
console.log(item);  //"green"
console.log(corlors.length); //2
// reverse() 反轉數組項的順序

var values = [1,2,3,4,5];
values.reverse();
console.log(values);  // [5,4,3,2,1]
// sort() 調用每個數組項的toString()轉型方法，然後比較得到的字元串，以確定如何排序

var values = [0,1,5,10,15];
values.sort();
console.log(values);  // [0,1,10,15,5]

// sort()方法可以接收一個比較函數作為參數，以便我們指定哪個值位於哪個值的前面。
/* 比較函數接收兩個參數，如果第一個參數應該位於第二個之前則返回一個負數，如果兩個參數相等則返回0，如果第一個參數應該位於第二個之後則返回一個正數。以下就是一個簡單的比較函數：*/

// 升序
function compare(value1,value2){
　　if(value1 < value2){
　　　　return -1;
　　} else if(value1 > value2){
　　　　return 1;
　　} else {
　　　　return 0;
　　}
}
var values = [0,1,5,10,15];
values.sort(compare);
console.log(values);  // [0,1,5,10,15]

// 降序
function compare(value1,value2){
　　if(value1 < value2){
　　　　return 1;
　　} else if(value1 > value2){
　　　　return -1;
　　} else {
　　　　return 0;
　　}
}
var values = [0,1,5,10,15];
values.sort(compare);
console.log(values);  // [15,10,5,1,0]

/*對於數值類型或者其valueOf()方法會返回數值類型的對象類型，可以使用一個更簡單的比較函數。這個函數只要用第二個值減第一個值即可*/
function compare(value1,value2){
　　return value2 - value1;
}

 

操作方法

• concat()：基於當前數組中的所有項創建一個新數組 。

具體來說 ，這個方法會先創建當前數組一個副本 ，然後將接收到的參數添加到這個副本的末尾 ，最後返回新構建的數組 。在沒有給 c o n c a t ( )方法傳遞參數的情況下 ，它只是複製當前數組並返回副本 。如果傳遞給 c o n c a t ( )方法的是一或多個數組 ，則該方法會將這些數組中的每一項都添加到結果數組中 。如果傳遞的值不是數組 ，這些值就會被簡單地添加到結果數組的末尾 。

• slice()：基於當前數組中的一或多個項創建一個新數組 。

如果 s l i c e ( )方法的參數中有一個負數 ，則用數組長度加上該數來確定相應的位置 。例如 ，在一個包含 5項的數組上調用 s l i c e （ 2 ， 1 ）與調用 s l i c e （ 3 , 4 ）得到的結果相同 。如果結束位置小於起始位置 ，則返回空數組 。

• splice()：向數組的中部插入項，但使用這種方法的方式則有如下3種

刪除：可以刪除任意數量的項，只需指定2個參數：要刪除的第一項的位置和要刪除的項數。例如，splice（0,2）會刪除數組中的前兩項。

插入：可以向指定位置插入任意數量的項，只需提供3個參數：起始位置、0（要刪除的項數）和要插入的項。如果要插入多個項，可以再傳入第四、第五，以至任意多個項。例如，splice（2,0,"red","green"）會從當前數組的位置2開始插入字元串"red"和"green"。

替換：可以向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定3個參數：起始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。例如，splice（2,1,"red","green"）會刪除當前數組位置2的項，然後再從位置2開始插入字元串"red"和"green"。

 

代碼示例：

// concat()

var colors = ["red","green","blue"];
var colors2 = colors.concat("yellow",["black","brown"]);
console.log("colors");  //["red","green","blue"]
console.log("colors2"); //["red","green","blue","yellow","black","brown"]
// slice()

var colors = ["red","green","blue","yellow","purole"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
console.log(colors2)  //["green","blue","yellow","purole"]
console.log(colors3)  //["green","blue","yellow"]
// splice()

var colors = ["red","green","blue"];
var removed = colors.splice(0,1);  // 刪除第一項
console.log(colors);  //["green","blue"]
console.log(removed); //["red"]，返回的數組只包含一項

removed = colors.splice(1,0,"yellow","orange"); //從位置1開始插入兩項
console.log(colors);  //["green","yellow","orange","blue"]
console.log(removed); //返回一個空數組[]

removed = colors.splice(1,2,"red","purple");    //插入兩項，刪除兩項
console.log(colors);  //["green","red","purple","blue"]
console.log(removed); //["yellow"，"orange"]，返回類型為Array，包含兩項

 

位置方法

indexOf()：從數組的開頭 （位置 0 ）開始向後查找

lastIndexOf()：從數組的末尾開始向前查找 。

這兩個方法都接收兩個參數 ：要查找的項和 （可選的 ）表示查找起點位置的索引 。

這兩個方法都返回要查找的項在數組中的位置 ，或者在沒找到的情況下返回-1 。在比較第一個參數與數組中的每一項時 ，會使用全等操作符 ；

支持它們的瀏覽器包括IE9+、Firefox2+、Safari3+、Opera9.5+和Chrome。

代碼示例：

// indexOf()

var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(4));       //3
console.log(numbers.lastIndexOf(4));   //5
console.log(numbers.indexOf(4,4));     //5
console.log(numbers.lastIndexOf(4,4))  //3

var person = {name:"Dalu"};
var people = [{name:"Dalu"}];
var morePeople = [person];
console.log(people.indexOf(person));     //-1
console.log(morePeople.indexOf(person)); //0

 

迭代方法

every()：對數組中的每一項運行給定函數，如果該函數對每一項都返回ture，則返回ture。

filter()：對數組中的每一項運行給定函數，返回該函數會返回ture的項組成的數組 。

forEach()：對數組中的每一項運行給定函數。這個方法沒有返回值 。

map()：對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組 。

some()：對數組中的每一項運行給定函數，如果該函數對任一項返回ture ，則返回ture。

支持這些迭代方法的瀏覽器有IE9+、Firefox2+、Safari3+、Opera9.5+和Chrome。

代碼示例：

// every()

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
    return (item > 2);
});
console.log(everyResult);  //false
var someResult = numbers.some(function(item,index,array){
    return (item > 2);
});
console.log(someResult);   //ture
// filter()

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){
    return (item > 2);
});
console.log(filterResult); //[3,4,5,4,3]
// map()

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item,index,array){
    return item * 2;
});
console.log(mapResult);    //[2,4,6,8,10,8,6,4,2]
// forEach()

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,array){
    console.log("item:" + item)   //返回當前項的值
    console.log("index:" + index) //返回當前項的索引
    console.log("array:" + array) //返回數組的字元串1,2,3,4,5,4,3,2,1
});

 

縮小方法

reduce()：迭代數組的所有項 ，然後構建一個最終返回的值 。正序。

reduceRight()：迭代數組的所有項 ，然後構建一個最終返回的值 。倒序。

這兩個方法都接收兩個參數：一個在每一項上調用的函數和（可選的）作為縮小基礎的初始值。傳給reduce()和reduceRight()的函數接收4個參數：前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會作為第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數就是數組的第二項。

代碼示例：

// reduce()

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev,cur,index,array){
    return prev + cur;
});
console.log(sum); //15
// reduceRight() 倒序

var value = [1,2,3,4,5];
var sum = values.reduceRight(function(prev,cur,index,array){
    return prve + cur;
});
console.log(sum); //15 由於都是累計相加，所以結果一樣

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • localStorage使用總結
    註：本文轉載自大神同學的博客，http://www.cnblogs.com/st-leslie/p/5617130.html ，僅供學習不用於其他用途，大家想要更多的乾貨，請移步到該大神博客園 一、什麼是localStorage、sessionStorage 在HTML5中，新加入了一個localS ...
  • JavaScript--我發現，原來你是這樣的JS：函數表達式和閉包
    一、介紹 本次博客主要介紹函數表達式的內容，主要是閉包。 二、函數表達式 定義函數的兩種方式：一個是函數聲明，另一個就是函數表達式。 區別： 1.函數聲明是用function後面有函數名，函數表達式是賦值形式給一個變數。 2.函數聲明可以提升函數，而函數表達式不會提升 函數提升就是函數會被自動提升到 ...
  • js中完美運動框架
    //多個值同時變化function getStyle(obj, name)//函數幫助獲取不在行間樣式，不受非行間border,padding等得影響{ //style只獲取行間樣式。offset受非行間border,padding等得影響 if(obj.currentStyle) { return ...
  • jQuery事件學習
    1.JS事件的基本知識 JS事件的學習和JS方法的學習揉雜在一起,JS相對於Java等語言,方法定義和使用上比較隨意和簡單,但是還是有一些區別,需要理清楚. 2.jQuery方式綁定事件 這裡多多贅述一點,由於jQuery可以理解為是對JS的一種高級封裝,這種封裝是單向的,所以我們可以在JS中加入j ...
  • 利用H5構建地圖和獲取定位地點
    地圖與地理定位 定位在大部分項目中都需要實現，如何實現主要有如下的幾種方法 1. H5定位 在HTML5中navigator有很強大的功能，其中就有定位的方法 這個服務其實是谷歌提供的，在我們國內使用的可能性較低 2. 後端定位 前端調用一個後端提供的介面，後端進行定位操作，返回給前端 在工作中公司 ...
  • 前端程式員容易忽視的一些基礎知識
    基礎數據結構與演算法 現在有兩個不同的JSON，比較複雜，可以參考這裡的DEMO中返回的JSON。要比較它們的差異，除了用現成的工具如beyond compare以外，如果我們的機器上沒有安裝這個工具，能如何較快解決？作為一個程式員，一個個對比是不可行的，對比完也不會有什麼收穫。我會把之放進Excel ...
  • 關於跨域請求
    跨域問題的產生： 因為瀏覽器有同源策略，只有在同功能變數名稱，同埠，同協議的情況下才可以進行數據交互；有的時候，例如：在公司開發項目的時候，前端開發的伺服器可能和後端伺服器不是同一個，因為可能是通過gulp、webpack搭建的開發伺服器，就需要解決跨域問題，再例如，在大公司數據伺服器不只有一個，所以跨域 ...
  • Code Kata:大整數比較大小&大整數四則運算---加減法 javascript實現
    大整數的四則運算已經是老生常談的問題了。很多的庫也已經包含了各種各樣的解決方案。 作為練習，我們從最簡單的加減法開始。 加減法的核心思路是用倒序數組來模擬一個大數，然後將兩個大數的利用豎式進行運算。 加法函數： 異符號相加時調用減法函數（減法函數後面給出） 同符號相加先確定符號 因為輸入輸出的為字元 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類