搜尋
首頁web前端前端問答javascript數組有什麼用

javascript數組有什麼用

Sep 14, 2022 pm 12:07 PM
javascript

在javascript中,數組是有序數據的集合,用於對大量數據進行存儲,可以一次性存儲多個數據,並且數組的長度可以動態的調整;通過使用數組,可以在很大程度上縮短和簡化程式程式碼,從而提高應用程式的效率。

javascript數組有什麼用

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript 陣列(Array)是有序資料的集合,數組中的每個成員被稱為元素(Element),每個元素的名稱(鍵)被稱為數組下標(Index)。數組的長度是彈性的、可讀寫的;即數組的長度可以動態的調整。

數組的作用:對大量資料進行存儲,可以一次儲存多個資料。透過使用數組,可以在很大程度上縮短和簡化程式程式碼,從而提高應用程式的效率。

在 JavaScript 中,您可以使用 Array 物件定義數組,此外,Array 物件中還提供了各種有關數組的屬性和方法。

陣列的定義: Array 簡寫: arr

陣列是JS中的一個資料容器。它是引用類型之一。

它的作用非常簡單,就是用來裝多個資料,並且陣列的長度可以動態的調整。


陣列所建立的方式:

  • 字面量

  • 建構函數

字面量語法:var 陣列名稱= [成員1, 成員2, 成員3, ...] ;  

陣列元素之間,逗號隔開;

javascript數組有什麼用

建構子語法: var 陣列名稱= new Array(成員1, 成員2, 成員3, ...)  (至少要是有兩個或兩個以上的陣列元素;)  小bug:當參數只有一個且參數的型別是數字​​ ,會被當作陣列的長度 ;

var arr = new Arry(5 );   console.log(arr);  輸出結果是:  

var陣列名稱= new Array() ;
var arr = new Array ();//建立一個新的空數組
注意Array 0 ,A要大寫


#陣列由兩部分組成:

1:索引(也叫下標) , 下標從0開始;

2.成員(數組元素): 成員沒有任何限制,可以是任意類型的資料; 可以是字串 可以是數字 可以是布林值 可以是 undefined 可以是null 還可以是陣列;

javascript數組有什麼用

#取得陣列元素:

數組的取值:   數組名[下標] ;       下標從零開始的;

/ / 格式:數組名[下標]    下標又稱索引
// 功能:取得數組對應下標的那個值,如果下標不存在,則回傳undefined。
var arr = ['red',, 'green', 'blue'];

            # console.log(
arr[0]);    // red console.log(
arr[2]#) ; // blue aconsole.log(
arr[3]); // 這個陣列的最大下標示為2,沒有這個陣列元素所以輸出的結果是undefined ;


透過索引新增成員/修改成員:

// 构造函数定义一个数组
var arr = new Array('张三', '李四', '王五', '赵六')

// 添加成员
arr[4] = '龚七'
console.log(arr)  //张三', '李四', '王五', '赵六','龚七'
// 修改成员
arr[0] = '王老五'
console.log(arr)  //'王老五', '李四', '王五', '赵六'

特殊情況:  透過索引多重設定成員, 中間會有斷開,為空; 禁止!

var arr = ["a", "b"];

arr[5] = "good";

console.log (arr); // 


 遍历数组:

 javascript數組有什麼用

javascript數組有什麼用


 数组的属性length,就是数组成员的个数;

数组名.length

 var  arr = [1, 2, 3, 4, 5, 6, 7, 8];

length表示数组的长度 它会跟着数组实时发生变化(动态监测数组元素的个数)

 console.log(arr.length)   //数组成员的个数: 8

 length属性可读可写  它也会影响数组的成员个数 但是我们一般不会主动修改该属性;

var arr = [1, 2, 3, 4, 5, 6, 7, 8];

arr.length = 3;

console.log(arr.length);    

console.log(arr);

javascript數組有什麼用

javascript數組有什麼用

javascript數組有什麼用


数组元素求和,求平均值:

javascript數組有什麼用

求数组元素的最大值:

javascript數組有什麼用

数组元素转字符串,并分割开:    推荐: 数组名.join("连接符")

javascript數組有什麼用

求数组中大于10的成员,并挑选出来:

1javascript數組有什麼用

1javascript數組有什麼用

数组元素的倒叙:

1javascript數組有什麼用


数组元素的增删改查;

unshift   头增       数组名.unshift("value")

作用:头部增加 (可以增加多个)

参数:添加的成员,可以是多个;

返回值:数组的新长度

var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.unshift('王二',刘一)
console.log(result); // 6
console.log(arr); 
// ["王二", "刘一","张三", "李四", "王五", "赵六"]

push   尾增   数组名.push("value")

作用:尾部增加 (可以增加多个)

参数:添加的成员,可以是多个;

返回值:数组的新长度

var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.push('王二',"刘一")
console.log(result); // 6
console.log(arr); // ["张三", "李四", "王五", "赵六", "王二","刘一"]

shift   头删    数组名.shift()   只删除第一个,()括号内为空;

作用:删除数组的头部第一项

参数:无;

返回值:被删除的那一项

var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.shift()
console.log(result); // 张三
console.log(arr) //  ['李四', '王五', '赵六'];

 pop   尾删    数组名.pop()   只删除最后一个,()括号内为空;

作用:删除数组最后一项;

参数:无;

返回值:被删除的那一项

var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.pop();
console.log(result); // 赵六
console.log(arr) //["张三", "李四", "王五"]

concat      拼接,合并;   数组名.concat("value")

作用:合并

参数:任意个、任意类型

返回值:一个新的合并后的数组

特点:没有改变原来的数组

var arr1 = [1, 2, 3];

var arr2 = [4, 5, 6];

var newArr = arr1.concat(arr2, "good", true, 1);

console.log(arr1); // 1,2,3

console.log(arr2); //4,5,6

console.log(newArr); //1, 2, 3, 4, 5, 6, "good", true, 1

slice  截取     数组名.slice(start,end)   参数是下标; 包括开头,不包括结尾;

slice的本质是复制(浅复制) 

作用:截取

参数:

  1. 没有参数 截取全部

  2. 一个参数 从指定位置截取到最后(包括最后)

  3. 两个参数 从指定开始位置截取到指定的结束位置 1. 这两个参数都是下标 2. 开始位置(包含) 3. 结束位置(不包含) 4. 第二个参数要比第一个大;

  4. 参数可以是负数,负数是从后面开始,最后一个是-1;

特点:不改变原数组

没有参数 (截取全部的)
var arr = ['张三', '李四', '王五', '赵六'];
var arr1 = arr.slice();
console.log(arr1)  //  ["张三", "李四", "王五", "赵六"]

一个参数 (从指定位置截取到最后(包括最后))
var arr = ['张三', '李四', '王五', '赵六'];
var arr2 = arr.slice(1);
console.log(arr2) // ["李四", "王五", "赵六"]

两个参数 (包括开始,不包括结尾)
var arr = ['张三', '李四', '王五', '赵六'];
var arr3 = arr.slice(1, 3);
console.log(arr3) // ["李四", "王五"]

参数为负数; (还是第二个参数要比第一个大)

var arr = ['张三', '李四', '王五', '赵六','刘一'];
var arr3 = arr.slice(-3, -1);
console.log(arr3) // ["王五","赵六"]

PS: 如果参数是负数 那么表示从后往前数 最后一个值是-1

 splice    操作数组     数组名.splice(参数1,参数2,参数3)

作用:用于操作数组成员

参数:

  • 参数1:操作开始位置; (从第几个索引号后开始, 可以看成直接从顺序的第几个后开始的)
  • 参数2:删除的成员个数; (为0,是添加)
  • 参数3:从第三个参数开始是添加的成员;

返回值:被删除的那些成员组成的数组

特点:会改变原数组

// 删除

var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.splice(1, 2)
console.log(result); // ["李四", "王五"]
console.log(arr); // ["张三", "赵六"]   
----------------------------------------------------------------------
// 插入   第二个参数为0;

var arr = ['张三', '李四', '王五', '赵六'];
var  result = arr.splice(2, 0, '小绵羊');
console.log(result); // []
console.log(arr) // ["张三", "李四", "小绵羊", "王五", "赵六"]
------------------------------------------------------------------------
// 替换   第一个参数从哪里开始, 第二个参数删除几个,第三个参数...添加的新成员;

var arr =['张三', '李四', '王五', '赵六'];
var result = arr.splice(2, 1, '小绵羊', '大绵羊');
console.log(result); // ["王五"]
console.log(arr) // ["张三", "李四", "小绵羊", "大绵羊","赵六"]

-----------------------------------------------------------------------------------------------

如果只有一个参数 则第二个参数默认为删除所有;

var arr = ['张三', '李四', '王五', '赵六'];

var result = arr.splice(2);

console.log(result);  // ["王五","赵六"]

console.log(arr) // ["张三", "李四"]

indexOf      数组名.indexOf("数组元素")

作用: 查找

参数:被查找的成员;

返回值:下标(索引);      若有该成员返回该索引; 若没有就返回-1

 var arr = ["a", "b", "c", "d", "e", "f"];

var idx = arr.indexOf("d"); //3

var idx = arr.indexOf("aa"); //-1

console.log(idx);

 join    数组名.join("连接符")

作用:转字符串

返回值:数组元素变成字符串类型,链接符相连;

参数: 拼接符号(可选)

数组名.join()  不写内容,默认是逗号,  ;

数组名.join(''), '' 没有空格隔开, 数组直接相连;

数组名.join('   ')  空格隔开, 空格

数组名.join('*')

var arr =['张三', '李四', '王五', '赵六'];
var str = arr.join();
console.log(str); // 张三,李四,王五,赵六

var str1 = arr.join('+');
console.log(str1); // 张三+李四+王五+赵六 

var str2 = arr.join('❤');
console.log(str2); // 张三❤李四❤王五❤赵六

//返回值是数组元素变成字符串,并连接符相连;

 reverse  数组倒叙     数组名.reverse()   括号内不跟参数;

作用:将数组的成员倒序

返回值:倒叙的原数组

参数:无

特点:会改变原数组

var arr =['张三', '李四', '王五', '赵六'];
console.log(arr) // ["张三", "李四", "王五", "赵六"]

var arr1 = arr.reverse();
console.log(arr1) // ["赵六", "王五", "李四", "张三"]
console.log(arr === arr1) // true

console.log(arr)  // ["赵六", "王五", "李四", "张三"]     //会改变原数组;

其他方法:

1javascript數組有什麼用

sort      排序         数组名.sort(函数)  升序或降序

作用:将数组成员按照指定规则排序

返回值:排序后原数组

参数:规则函数; 不跟参数(//不跟参数,会先转为字符串,然后按照ascii码排序首字母排;)

特点:会改变原数组

var arr = [89, 96, 45, 66, 78, 3, 100, 1];

arr.sort(function(a, b) {

return a - b;     // 升序

        });

 console.log(arr);  //   [1, 3, 45, 66, 78, 89, 96, 100];

-------------------------------------------------------------------------

var arr = [89, 96, 45, 66, 78, 3, 100, 1];

arr.sort(function(a, b) {

return b - a;     // 降序

        });

 console.log(arr);  //   [100, 96, 89, 78, 66, 45, 3, 1];

--------------------------------------------------------------

var arr = [89, 96, 45, 66, 78, 3, 100, 1];

arr.sort();                //不跟参数,会先转为字符串,然后按照ascii码排序首字母排;

console.log(arr);    //[1, 100, 3, 45, 66, 78, 89, 96]

交换两个变量的值

var a = 4;
var b = 5;

// 交换两个变量的值要借助第三个变量
var c = b;
b = a;
a = c;

console.log(a); // 5
console.log(b); // 4

 数组的冒泡排序

for (var j = 0; j
  for (var i = 0; i
    if (arr[i] > arr[i + 1]) {
      var temp = arr[i];
      arr[i] = arr[i + 1];
      arr[i + 1] = temp;
    }
  }
}

----------------------------------------------------------

要排序 就要比较大小  

先拿著第一個數字與第二個比 如果第一個大 則交換位置  比完之後 數組的第二個位置的數字一定比第一個大 

再拿著第二與第三個比 比完之後 數組的第三個肯定比第二個位置的數要大

以此類推 一輪比完之後 最後的數字一定是最大的

第二輪從頭繼續比較 第二輪結束之後 可以確定第二個最大的數字

第三輪...

至最後.

 // // 外層循環 決定了內層循環的執行次數

for (var j = 0; j 

                                           (var i = 0; i 

          if (arr[i ] > arr[i   1]) {

                var temp i   1];

#   arr[i   1] = t

em

p

;

                 . ##二維陣列

一個陣列的每一個成員也是數組,這就叫做二維數組。

一維陣列: [1, 2, 3, 4, 5, 6]

二維陣列:

[

[1, 2 , 3, 4, 5, 6],

[1, 2, 3, 4, 5, 6],

[1, 2, 3, 4, 5, 6]

...

]

# 清除陣列的方法:




#// 方式1 建議
arr = [ ];


#// 方式2

arr.length = 0;

// 方式3### arr.splice(0, arr.length); #########【推薦學習:###javascript高階教學###】 ###

以上是javascript數組有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML和React的集成:實用指南HTML和React的集成:實用指南Apr 21, 2025 am 12:16 AM

HTML與React可以通過JSX無縫整合,構建高效的用戶界面。 1)使用JSX嵌入HTML元素,2)利用虛擬DOM優化渲染性能,3)通過組件化管理和渲染HTML結構。這種整合方式不僅直觀,還能提升應用性能。

React和HTML:渲染數據和處理事件React和HTML:渲染數據和處理事件Apr 20, 2025 am 12:21 AM

React通過state和props高效渲染數據,並通過合成事件系統處理用戶事件。 1)使用useState管理狀態,如計數器示例。 2)事件處理通過在JSX中添加函數實現,如按鈕點擊。 3)渲染列表需使用key屬性,如TodoList組件。 4)表單處理需使用useState和e.preventDefault(),如Form組件。

後端連接:反應如何與服務器互動後端連接:反應如何與服務器互動Apr 20, 2025 am 12:19 AM

React通過HTTP請求與服務器交互,實現數據的獲取、發送、更新和刪除。 1)用戶操作觸發事件,2)發起HTTP請求,3)處理服務器響應,4)更新組件狀態並重新渲染。

反應:專注於用戶界面(前端)反應:專注於用戶界面(前端)Apr 20, 2025 am 12:18 AM

React是一種用於構建用戶界面的JavaScript庫,通過組件化開發和虛擬DOM提高效率。 1.組件與JSX:使用JSX語法定義組件,增強代碼直觀性和質量。 2.虛擬DOM與渲染:通過虛擬DOM和diff算法優化渲染性能。 3.狀態管理與Hooks:Hooks如useState和useEffect簡化狀態管理和副作用處理。 4.使用示例:從基本表單到高級的全局狀態管理,使用ContextAPI。 5.常見錯誤與調試:避免狀態管理不當和組件更新問題,使用ReactDevTools調試。 6.性能優化與最佳

React的角色:前端還是後端?澄清區別React的角色:前端還是後端?澄清區別Apr 20, 2025 am 12:15 AM

reactisafrontendlibrary,focusedonBuildingUserInterfaces.itmanagesuistateandupdatesefficefited avelyuseVirusity diftualdom,and internactSwithBackendServIcesViaApisforDatahandling,butdoesnotprocessorcorsorsorstoredordordordoredairself。

在HTML中進行反應:構建交互式用戶界面在HTML中進行反應:構建交互式用戶界面Apr 20, 2025 am 12:05 AM

React可以嵌入到HTML中來增強或完全重寫傳統的HTML頁面。 1)使用React的基本步驟包括在HTML中添加一個根div,並通過ReactDOM.render()渲染React組件。 2)更高級的應用包括使用useState管理狀態和實現複雜的UI交互,如計數器和待辦事項列表。 3)優化和最佳實踐包括代碼分割、惰性加載和使用React.memo和useMemo來提高性能。通過這些方法,開發者可以利用React的強大功能來構建動態和響應迅速的用戶界面。

反應:現代前端發展基礎反應:現代前端發展基礎Apr 19, 2025 am 12:23 AM

React是構建現代前端應用的JavaScript庫。 1.它採用組件化和虛擬DOM優化性能。 2.組件使用JSX定義,狀態和屬性管理數據。 3.Hooks簡化生命週期管理。 4.使用ContextAPI管理全局狀態。 5.常見錯誤需調試狀態更新和生命週期。 6.優化技巧包括Memoization、代碼拆分和虛擬滾動。

React的未來:Web開發的趨勢和創新React的未來:Web開發的趨勢和創新Apr 19, 2025 am 12:22 AM

React的未來將專注於組件化開發的極致、性能優化和與其他技術棧的深度集成。 1)React將進一步簡化組件的創建和管理,推動組件化開發的極致。 2)性能優化將成為重點,特別是在大型應用中的表現。 3)React將與GraphQL和TypeScript等技術深度集成,提升開發體驗。

See all articles

熱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

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

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),