搜尋
首頁web前端js教程JS的陣列使用詳解
JS的陣列使用詳解Apr 13, 2018 am 10:30 AM
javascript使用詳解

這次帶給大家JS的陣列使用詳解,JS陣列使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

現在很多剛開始認識js的人都不是很清楚js數組是什麼,js數組是怎麼定義的,下面文章就給大家介紹下對於js數組的定義,對此感興趣的下面一起來了解下。

1、什麼是數組

數組就是一組資料的集合

其表現形式就是記憶體中的一段連續的記憶體位址

陣列名稱其實就是連續記憶體位址的首位址

2.關於js中的陣列特點

# 數組定義時無需指定資料類型

數組定義時可以無需指定數組長度

# 陣列可以儲存任何資料類型的資料(比如說一個元素保存整數型,一個元素保存字串型,這個在JS中是可以的)

建立數組的語法:

var arr=[值1,值2,值3];                     //隱式建立

# var arr=new Array(值1,值2,值3);      //直接實例化

var array=new Array(size);           //建立陣列並指定長度

JS中符號意義:

()表示函數執行

[]表示語法模擬,表示模擬Array類別的實例(=new Array())

{}表示語法模擬,表示模擬Object類別的實例(=new Object())

# //表示語法模擬(正規物件),表示模擬RegExp類別的實例(=new RegExp())

//方法一 
 var arr1 = [1,3,5,7,9]; 
 document.write(arr1[2] + '<br>');
//方法二 
var arr2 = new Array(2,4,6,8,10); 
document.write(arr2[3] + '<br>'); 
//方法三 
var arr3 = new Array(3);//固定数组长度为3 
arr3[0] = 1; 
arr3[1] = 2; 
arr3[2] = 3; 
document.write(arr3[2] + '<br>');

3.關於數組長度

數組物件.length

在js中,每個陣列物件都可以呼叫length屬性,它表示陣列物件下共有幾個陣列元素

範例:

var row = ['zhangsan','lisi','wangwu']; 
 doucument.write('共有'+row.length+'个人<br>'); 
 var length = row.length;//对数组进行遍历 
for (var i=0;i<length>'); }</length>

4、for...in語句

在js中,陣列不是資料型,數組的資料型別其實就是物件

# Js中的For.....in語句可以實現對一個物件的所有屬性的遍歷

也可以使用for...in語句實現對一個陣列的所有元素的遍歷

文法:

for( var i in array ){

}

原理:數組中有幾個元素,for..in語句就循環執行多少次

每次執行時,將目前數組元素的下標存放到變數i中

var row = ['zhangsan','lisi','wangwu','xiaoqiang']; 
for (var i in row){
document.write(i + ':' + row[i] + '<br>'); 
}

結果:

0:zhangsa

1:lisi

2:wangwu

3:xiaoqian

5.文本下標

格式:

# arr['key'] = 值;

在js中,文字下標的陣列元素,不計入數組長度

# 以文字下標形式加入數組,實際上是以屬性形式添加到數組物件中的

var arr = [1,2,3]; 
arr['first'] = 'zhangsan';
arr['second'] = 'lisi'; 
document.write(arr.length + '<br>');
document.write(arr.first + '<br>');
document.write(arr.second + '<br>');

結果:

3

zhangsan

lisi

# 遍歷帶有文字下標的陣列:

var arr = [1,2,3];
arr['first'] = 'zhangsan';
arr['second'] = 'lisi'; 
for(var i in arr){
document.write(i + ':' + arr[i] + '<br>'); 
}

結果:

0:1

1:2

2:3

first:zhangsan

# second:lisi

6、多維數組

var arr = [ 
[10,'zhangsan','male'],
[11,'lisi','female'],
[12,'wangwu','male'] 
];
for (var i in arr){ 
for(var j in arr[i]){
document.write(arr[i][j]); 
}
document.write('<br>'); 11 }

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

JS提示文字方塊信箱位址補全

getBoundingClientRect使用方法及相容性處理

#

以上是JS的陣列使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

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

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

mPDF

mPDF

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

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具