主頁 > 前端設計 > JavaScript學習(八十八)—陣列知識點總結,超詳細!!!

JavaScript學習(八十八)—陣列知識點總結,超詳細!!!

2021-07-26 08:11:09 前端設計

JavaScript學習(八十八)—爆肝 陣列知識點總結,超詳細!!!

每天都要進步一點點 小王加油!!!

在這里插入圖片描述

一、陣列的概念

  • 所謂陣列就是指記憶體中開辟出來的用來存盤大量資料的連續的存盤空間
  • 陣列可以把一組相關的資料一起存放,并提供方便的訪問(獲取)方式,
  • 陣列是指一組資料的集合,其中的每個資料被稱作元素,在陣列中可以存放任意型別的元素,陣列是一種將一組資料存盤在單個變數名下的優雅方式,

二、陣列的分類

  • 從下標的個數分:一維陣列、二維陣列、多維陣列
  • 從下標的型別分類:索引型陣列(下標為陣列型)、關聯陣列(下標為字符型)

三、陣列的創建方式

方式1:利用構造法創建

格式:var 陣列的名稱=new Array(值1,值2....);

方式2:利用字面量形式創建 var 陣列名稱 =[值,值,值…];

在這里插入圖片描述

四、陣列元素的操作:增 、刪、改、查

  • 增:陣列名稱[下標]=值;下標是陣列已有下標中沒有的值

  • 刪:delete 陣列名稱[下標];這種洗掉方式只是清空了該位置上的資料,但是該位置沒有被洗掉

  • 改:陣列名稱[下標]=值; 下標是要更改的資料的下標

  • 查:陣列名稱[下標];如果下標不存在,則回傳undefined

在這里插入圖片描述

五、陣列元素

  • 陣列元素:所謂陣列元素就是指陣列中存盤的每個值,陣列中每個元素都有自己的編號,這個編號被稱為下標/索引/角標

注意:陣列中的元素的下標是從0開始的,即第一個元素的下標是0,最后一個元素的下標是陣列的長度-1.

在這里插入圖片描述
在這里插入圖片描述

六、遍歷陣列

遍歷:把陣列中的每個元素從頭到尾都訪問一次(類似學生的點名),可以通過 for 回圈索引遍歷陣列中的每一項
在這里插入圖片描述

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

七、陣列中新增的元素

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

八、遍歷陣列的四種方式

(一)、利用for 回圈

在這里插入圖片描述
在這里插入圖片描述

(二)、利用for in回圈遍歷陣列

在這里插入圖片描述

在這里插入圖片描述

(三)、利用for of 遍歷陣列

在這里插入圖片描述
在這里插入圖片描述

(四)、利用forEach方法遍歷陣列

在這里插入圖片描述
在這里插入圖片描述

九、為陣列賦值

如何為陣列賦值,即添加陣列元素,利用隨機函式為陣列賦值,格式如下:

var num=parseInt(Math.random()  *(最大值+1-最小值)+最小值);

在這里插入圖片描述

十、陣列的比較

  • Js的資料型別有兩大類:基本資料型別,參考資料型別
  • 基本資料型別:數值型(number)、字符型(String)、布爾型(BOOlean)、undefined、null
  • 參考資料型別:陣列、函式、物件
    在這里插入圖片描述

參考型別的資料互不相等 見下圖

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

十一、陣列物件常用的屬性和方法(函式)

1、length 屬性

1)作用:獲取或者設定陣列的長度
2)獲取的格式:
陣列名稱.length
3)設定的格式:
陣列名稱.length=新長度;
在這里插入圖片描述

2、push方法

1)作用:在陣列的尾部添加元素
2)格式:陣列名稱.push(值1,值2,值3…);
3)回傳值:陣列新的長度
在這里插入圖片描述

3、pop方法

1)作用:洗掉陣列尾部的元素
2)格式:陣列名稱.pop();(無參)
3)回傳值:被洗掉的元素
在這里插入圖片描述

4、unshift方法

1)作用:在陣列頭部添加元素
2)格式:陣列名稱.unshift(值1,值2,值3…);
3)回傳值:陣列新增的長度

在這里插入圖片描述

5、shift方法

1)作用:洗掉陣列頭部元素

2)格式:陣列名稱.shift();

3)回傳值:被洗掉元素
在這里插入圖片描述

6、concat方法

1)作用:實作陣列間的拼接

2)格式:陣列名稱1.concat(陣列名稱2,陣列名稱3,陣列名稱4,值1,值2…);

3)回傳值:拼接后的新的陣列,注意原有陣列不受影響
在這里插入圖片描述
在這里插入圖片描述

7、join方法

1)作用:將陣列轉換為字符

2)格式:陣列名稱join(‘分隔符’);

3)回傳值:轉換后的字串

4)分隔符可以省略,如果省略,默認用逗號作為分隔符,如果需要將陣列元素不用分隔符分開,那么可用在join的引數位置寫"";

在這里插入圖片描述

8、slice方法

1)作用:從陣列中截取出新的陣列
2)格式:陣列名稱.slice(begin,end);
3)回傳值:截取出來的新的陣列
4)注意:
begin表示開始下標
end表示結束下標,在截取時end對應的值不被截取,即含頭不含尾,
end可以省略,表示從begin一直截取到最后
begin和end都可以省略,如果省略表示復制陣列
在這里插入圖片描述

9、 splice方法

作用:對陣列進行增、刪、改的操作

  • 增的格式:陣列名.splice(下標,0,要插入的值);

  • 回傳的值是一個空陣列,另外一次可以插入多個值,值與值之間用逗號分隔開來
    在這里插入圖片描述

  • 刪的格式:陣列名.splice(下標,個數);

  • 回傳值為被洗掉的陣列元素所形成的新的陣列

  • 注意delete洗掉的元素的值,而splice洗掉的是值和空間
    在這里插入圖片描述
    在這里插入圖片描述

  • 改的格式:陣列名.splice(下標,個數,新的值);

  • 回傳值為被修改的元素所形成的新的陣列
    在這里插入圖片描述

十二、toString方法

  • 作用:將陣列轉換為字串
  • 格式:陣列名稱.toString()
  • 回傳值:由陣列元素構成的字串,元素間用逗號分隔
    在這里插入圖片描述

十三、indexOf方法

  • 作用:從左向右在陣列中查找指定的元素,如果有則回傳該元素下標,如果沒有,則回傳-1
  • 格式:陣列名稱.indexOf(要查找的值)
  • 注意:如果陣列中有多個要查找的值,那么找到第一個后停止查找
    在這里插入圖片描述

十四、lastIndexOf方法

  • 作用:叢右向左在陣列中查找指定的元素,如果有回傳該元素的下標,如果沒有回傳-1
  • 格式:陣列名稱.lastIndexOf(要查找的值)
  • 注意:如果陣列中有多個要查找的值,那么找到第一個后停止查找
    在這里插入圖片描述

十五、reverse 方法

  • 作用:顛倒陣列中元素的位置
  • 格式:陣列名稱.reverse();
  • 回傳值:顛倒了順序的原有陣列
    在這里插入圖片描述

十六、 isArray方法

  • 作用:判斷某個資料是否為陣列
  • 格式:Array.isArray(要判斷的資料);
  • 回傳值: true(是陣列)、false(不是陣列)
    在這里插入圖片描述

十七、 sort方法

  • 作用:對陣列中的資料進行排序

  • 升序:陣列名稱.sort(function(a,b){return a-b });

  • 降序:陣列名稱.sort(function(a,b){return b-a});
    在這里插入圖片描述
    在這里插入圖片描述

友友們 記得三連哦,我會記住你們的!!!

轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/290112.html

標籤:其他

上一篇:我用一張圖徹底理解了瀏覽器的決議機制

下一篇:【三萬字!】Dubbo、Zookeeper學習筆記!秒殺面試官!——雙非上岸阿里巴巴系列

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low,請各位大佬留情,一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁,頂部多層導航

    一個個人用的瀏覽器首頁,可以把一下常用的網站放在這里,平常打開會比較方便。 第一步,HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式,需要用到$(window).height(); 由于手寫demo的時候,過于自信,其實對前端方面的認識也不夠體系,用文本檔案直接敲出來的html代碼,第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前,必須要做好網站資料的備份,這個問題良家佐言是遇見過的;在剛開始接觸WordPress博客程式的時候,因為升級問題和博客網站的修改的一些嘗試,良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名,每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統,受到英文博客愛好者和中文博客愛好者的追捧,并逐步演化成一款內容管理系統軟體;它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新,就會牽動無數WordPress愛好者的心, ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果,首字改變樣式或者首行改變樣式,效果如下圖。 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽? <a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。 a標簽的語法格式:<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中,鏈接的默認外觀如下: 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址: 鏈接:https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼:4aks swiper.min.css地址 鏈接:https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片(全屏顯示,且不拉伸)

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解(上)

    HTML詳解 初識HTML Hyper Text Markup Language(超文本標記語言) 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽,描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年,面對生產環境,盡管都是小心翼翼,慎之又慎,還是難免捅出簍子。輕則滿頭大汗,面紅耳赤。重則系統停擺,損失資金。每一個生產事故的背后,都是寶貴的經驗和教訓,都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故,特開此專題,長期更新和記錄大大小小的各類事故。有些是親身經歷,有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 打開游戲界面,看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上,有一個白色的矩形框,里面不斷下落著各種單詞,而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配,那么我就可以獲得得分;如果我輸入的單詞錯誤或者時間過長,那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前,了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子,引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板(滑鼠和觸摸)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作,和在桌面端做法基本一致。 首先,使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流,并將其傳遞給 <video> 標簽進行渲染。 接著,使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 短視頻已經無數不在了,但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲,一圖頂百辯,且看下圖: 網址鏈接(需在微信或者手Q中瀏覽) 從上圖可以看到,我們主要實作的功能也是本文要講解的有: ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網(www)誕生,HTTP(HyperText Transfer Protocol)經歷了眾多版本迭代,WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more