js — 數組Array

来源:https://www.cnblogs.com/yangjie0906/archive/2019/09/19/11405339.html
-Advertisement-
Play Games

[TOC] 數組 array 解釋器 遇到var聲明的變數，會把var聲明的變數提升到全局作用域下 1. isArray isArray() 判斷當前數組是否為數組，返回值是true,則證明是數組 2. 轉換方法 調用數組的toString()方法會返回由數組中每個值的字元串形式拼接而成的一個以逗號 ...


目錄

數組 array

解釋器 遇到var聲明的變數，會把var聲明的變數提升到全局作用域下

1. isArray

isArray() 判斷當前數組是否為數組，返回值是true,則證明是數組

var arr = ['red','green','yellow'];
console.log(Array.isArray(arr));

2. 轉換方法

調用數組的toString()方法會返回由數組中每個值的字元串形式拼接而成的一個以逗號分隔的字元串。

var num = 123;
var arr = ['red','green','yellow'];
console.log(arr.toString());//red,green,yellow
console.log(num.toString());
console.log(typeof num.toString());

3. 分割字元串 join

join()方法只接收一個參數。

var arr = ['red','green','yellow'];
console.log(arr.join('^'));

4. 棧方法

數組也可以像棧一樣，既可以插入和刪除項的數據結構。棧是一種LIFO(Last-In-First-Out,後進先出)的數據結構，也就是最新添加的那項元素最早被刪除。而棧中項的插入（叫做推入）和移除(叫做彈出)，只發生在一個位置——棧的頂部。數組專門提供了 push() 和 pop() 方法，以便實現類似棧的行為。

1.push()方法

可以接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後數組的長度。

var arr = ['red','green','yellow'];
console.log(arr.push('purple')); //返回了數組的最新的長度
console.log(arr);

2.pop()方法

從數組末尾移除最後一項，減少數組的 length 值，然後返回移除的項。

var arr = ['red','green','yellow'];
console.log(arr.pop());//返回刪除的內容
console.log(arr);

5. 隊列方法

棧數據結構的訪問規則是 LIFO(後進先出)，而隊列數據結構的訪問規則是 FIFO(First-In-First-Out， 先進先出)。隊列在列表的末端添加項，從列表的前端移除項。

1.shift()方法

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

var arr = ['red','green','yellow'];
console.log(arr.shift());
console.log(arr);

2.unshift()方法

unshift()方法 能在數組前端添加任意個項並返回新數組的長度

var arr = ['red','green','yellow'];
//往數組的第一項上添加內容
console.log(arr.unshift('gray','black'));
console.log(arr);

6. 重排序方法

數組中已經存在兩個可以直接用來重排序的方法：reverse() 和 sort()

1.reverse()方法

reverse翻轉數組項的順序

var values = [1,2,3,4,5];values.reverse();alert(values); // 5,4,3,2,1

2.sort()方法

預設情況下，sort()方法按升序排列——即最小的值位於最前面，最大的值排在最後面。 為了實現排序，sort()方法會調用每個數組項的toString()轉型方法，然後比較得到的字元串，以確定如何排序 。即使數組中的每一項都是數值，sort()方法比較的也是字元串。

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

sort()方法可以接收一個比較函數作為參數，以便我們指定哪個值位於哪個值的前面。 以完成數組中數值的升序和降序功能

比較函數接收兩個參數，如果第一個參數位於第二個參數之前則返回一個負數，如果兩個參數相等則返回0，如果第一個參數位於第二個參數之後則返回正數。

function compare(v1,v2){
    if(v1 < v2){
        return 1;
    }else if (v1 > v2){
        return -1;
    }else{
        return 0;
    }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);    // 15,10,5,1,0

7. 操作方法

1.concat()方法 — 拼接

數組合併方法，一個數組調用concat()方法去合併另一個數組，返回一個新的數組。concat()接收的參數是可以是任意的。

  • 參數為一個或多個數組，則該方法會將這些數組中每一項都添加到結果數組中。
  • 參數不是數組，這些值就會被簡單地添加到結果數組的末尾
var colors = ['red','blue','green'];
colors.concat('yello');//["red", "blue", "green", "yello"]
colors.concat({'name':'張三'});//["red", "blue", "green", {…}]
colors.concat({'name':'李四'},['black','brown']);// ["red", "blue", "green", {…}, "black", "brown"]

2.slice()方法 — 對數組進行分割

slice()方法，它能夠基於當前數組中一個或多個項創建一個新數組。slice()方法可以接受一或兩個參數，即要返回項的起始和結束位置。

  • 一個參數的情況下，slice()方法會返回從該參數指定位置開始到當前數組預設的所有項
  • 兩個參數的情況下，該方法返回起始和結束位置之間的項——但不包括結束位置的項(顧頭不顧尾)。

註意： slice()方法不會影響原始數組

var names = ['女神','wusir','太白'];
name.slice(1) // ['wusir','太白']

var colors = ['red','blue','green','yellow','purple'];
colors.slice(1);//["blue", "green", "yellow", "purple"]
colors.slice(1,4);// ["blue", "green", "yellow"]

如果 slice() 方法的參數中有一個負數，則用數組長度加上該數來確定響應的位置。

var colors = ['red','blue','green','yellow','purple'];
colors.slice(-2,-1);//["yellow"] 
colors.slice(-1,-2);//[]

3.splice()方法 — 對數組進行添加，刪除，替換操作

splice()方法這個恐怕要算是最強大的數組的方法了，它有很多種用法。

splice()的主要用途是向數組的中路插入項。使用這種方法的方式有3種：

  • 1.刪除：可以刪除任意數量的項，只需指定2個參數：要刪除的第一項的位置和要刪除的個數。例如splice(0,2)會刪除數組中的前兩項
  • 2.插入：可以向指定位置插入任意數量的項，只需提供3個參數：起始位置、0（要刪除的個數）和要插入的項。如果要插入多個項，可以再傳入第四、第五、以至任意多個項。例如，splice(2,0,'red','green')會從當前數組的位置2開始插入字元串'red'和'green'。
  • 3.替換：可以向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定 3 個參數:起始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。例如，splice (2,1,"red","green")會刪除當前數組位置 2 的項，然後再從位置 2 開始插入字元串"red"和"green"。

splice()方法始終都會返回一個數組，該數組中包含從原始數組中刪除的項(如果沒有刪除任何 項，則返回一個空數組)。

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); 
alert(colors); // green,blue 
alert(removed); // red，返回的數組中只包含一項
removed = colors.splice(1, 0, "yellow", "orange"); 
alert(colors); // green,yellow,orange,blue alert(removed); // 返回的是一個空數組
removed = colors.splice(1, 1, "red", "purple"); 
alert(colors); // green,red,purple,orange,blue alert(removed); // yellow，返回的數組中只包含一項

8. 位置方法 — 索引

indexOf()方法 從數組的開頭(位置 0)開始向後查找

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

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

9. 迭代方法

1.filter() 函數，它利用指定的函數確定是否在返回的數組中包含某一項.

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

2.map() 方法也返回一個數組，而這個數組的每一項都是在原始數組中的對應項上運行輸入函數的結果。

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

3.forEach() 方法

forEach() 方法 只是對數組中的每一項運行傳入的函數（ 僅能在數組對象中使用）。這個方法沒有返回值， 本質上與使用 for 迴圈迭代數組一樣。

var names = ['女神','wusir','太白'];
names.forEach(function (index,item) {
    console.log(index);
    console.log(item);
});

函數 arguments（在函數中arguments 這個對象是偽數組）

function  fn(a,b) {
    //arguments.length 代指的實參的個數
    //arguments它不是一個數組，它被稱為叫偽數組
    console.log(arguments);
    for(var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
    }
}
fn(2,3,4);
console.log(fn.length);//形參的個數

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

-Advertisement-
Play Games
更多相關文章
  • sql server之SQL SELECT INTO 語句
    SELECT INTO 語句可用於創建表的備份復件。 SELECT INTO 語句 SELECT INTO 語句從一個表中選取數據，然後把數據插入另一個表中。 SELECT INTO 語句常用於創建表的備份復件或者用於對記錄進行存檔。 SQL SELECT INTO 語法 您可以把所有的列插入新表： ...
  • Android mmap 文件映射到記憶體介紹
    本文鏈接： "Android mmap 文件映射到記憶體介紹" Android開發中，我們可能需要記錄一些文件。例如記錄log文件。如果使用流來寫文件，頻繁操作文件io可能會引起性能問題。 為了降低寫文件的頻率，我們可能會採用緩存一定數量的log，再一次性把它們寫到文件中。如果app異常退出，我們有可 ...
  • 小程式載入快慢的問題
    關於小程式的載入快慢這可是一大學問，自古以來性能都是重點，所以下麵我淺談一下自己遇到的問題和解決方法吧 首先，先從網路請求network說起： 這裡基本不關前端的事情，但是這也是優化小程式的一大重點，後端響應我們請求數據的速度影響了整個頁面的速度，所以，把它拿到第一位 請求超過300ms就已經算是慢 ...
  • Android 佈局陰影實現
    最近項目要求，ui有很多有關於陰影的設計要求，網上找了些實現方式，但都不是很理想。現在閑下來了，就尋思著自己寫個陰影佈局耍耍，以備後用。先說道說道我找到的幾種陰影實現方式: 系統陰影 Andorid 系統自api 21之後就多了一個熟悉 android:elevation ，這是android最新引 ...
  • Null is your friend, not a mistake
    原文作者： "Roman Elizarov" 原文地址： "Null is your friend, not a mistake" 譯者：秉心說 "Kotlin Island from Wikimedia by Pavlikhin, CC BY SA 4.0" 我使用 Java 語言編程已經很久很久 ...
  • jQuery 效果方法大全
    jQuery 效果方法 下表列出了用於創建動畫效果的所有jQuery方法。 ...
  • Stanford公開課《編譯原理》學習筆記(1~4課)
    示例代碼托管在： "http://www.github.com/dashnowords/blogs" 博客園地址： "《大史住在大前端》原創博文目錄" 華為雲社區地址： "【你要的前端打怪升級指南】" [TOC] B站地址： "【編譯原理】" Stanford公開課： "【Stanford大學公開課 ...
  • React入門-JSX和虛擬dom
    1.JSX理解 舉例： 這被稱為 JSX，是一個 JavaScript 的語法擴展。建議在 React 中配合使用 JSX，JSX 可以生成 React “元素”，而且JSX 可以很好地描述 UI 應該呈現出它應有交互的本質形式。JSX 可能會使人聯想到模版語言，但它具有 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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類