JS-數組常用方法整理

来源:https://www.cnblogs.com/ronaldo9ph/archive/2020/01/03/12132936.html
-Advertisement-
Play Games

想瞭解數組有哪些原生方法，控制台輸出，如圖： length：數組的實例屬性，返回或設置一個數組中的元素個數。 toString()：可以把數組轉換成字元串，並返回結果。 toLocaleString()：返回數組中每個元素的本地化表示形式。 let a = [1234,'hello',21]; a. ...


想瞭解數組有哪些原生方法，控制台輸出，如圖：

 

 

 

length：數組的實例屬性，返回或設置一個數組中的元素個數。

 

toString()：可以把數組轉換成字元串，並返回結果。

toLocaleString()：返回數組中每個元素的本地化表示形式。

let a = [1234,'hello',21];
a.length; //3
a.toString();  //'1234','hello','21'
a.toLocaleString();  //'1,234','hello','21'

 

join([seperator])：返回一個字元串，由每個元素轉換而成的字元串使用指定的seperator拼接而成。

let a = [1234,'hello',21];
a.join('-'); //'1234-hello-21'

 

concat()：拼接兩個或更多的數組，並返回結果。此方法不會更改現有數組，而是返回一個新數組。每個參數可以是一個值，也可以是一個數組，可以接收任意多個參數。可用作拷貝數組。

let a = [1234,'hello',21];
let b = a.concat(50,60,[1,2,3]); //[1234, "hello", 21, 50, 60, 1, 2, 3]

 

reverse()：顛倒數組中元素的順序，現有數組內容會改變。

let a = [1234,'hello',21];
let b = a.reverse();
a; //[21, "hello", 1234]
b; //[21, "hello", 1234]

 

sort()：講數組元素按Unicode碼進行重新排序。

let a = [1234,'hello',21,'bar',6,789];
a.sort();
a; //[1234, 21, 6, 789, "bar", "hello"]

 

slice(start, [end]) : 返回現有數組的一個子數組，從下標為start的位置開始取，到下標為end的為止(獲取內容不包括end)，若參數為負數，則表示從尾部開始算起，end參數可以省略。可用作拷貝數組。

let a = [1234,'hello',21,'bar',6,789];
let b = a.slice(1,4); //["hello", 21, "bar"]
let c = a.slice(2); //[21, "bar", 6, 789]
let d = a.slice(-4,-2); //[21, "bar"]
a; //[1234, "hello", 21, "bar", 6, 789]

 

splice(start,count,e1,e2,...en)：從數組中刪除一部分元素，並添加另一部分元素，start為指定添加/刪除的起始位置，可取負值，count為要刪除的個數，0表示不刪除，e1，e2表示在start新添加的項，返回會刪除的項目，現有數組會改變。

let a = [10,20,30,40,50];
let b = a.splice(2,2,110);
b; //[30,40]
a; //[10,20,110,50,]
let c = a.splice(2,0,[70,80,90]);
c; //[]
a; //[10,20,[70,80,90],110,50]

 

push()：將一個或多個元素添加到數組的末尾，並返回該數組的新長度。

unshift()：將一個或多個元素添加到數組的開頭，並返回該數組的新長度。

pop()：從數組中刪除最後一個元素，並返回該元素的值。此方法更改數組的長度。

shift()：從數組中刪除第一個元素，並返回該元素的值。此方法更改數組的長度。

let a = [10,20,30,40,50];
let a1 = a.push(60);
a1; //6
a; //[10,20,30,40,50,60]

let b = [10,20,30,40,50];
let b1 = b.unshift(60);
b1; //6
b; //[60,10,20,30,40,50]

let c = [10,20,30,40,50];
let c1 = c.pop();
c1; //50
c; //[10,20,30,40]

let d = [10,20,30,40,50];
let d1 = d.shift();
d1; //10
d; //[20,30,40,50]

 

includes()：用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false。

let array1 = [1, 2, 3];
array1.includes(2); //true

 

indexOf(value, [fromIndex])：返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。fromIndex為可選，指定從該下標處開始進行查找。

lastIndexOf(value, [fromIndex])：返回指定元素在數組中的最後一個的索引，如果不存在則返回 -1。從數組的後面向前查找，從 fromIndex 處開始。

let beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
beasts.indexOf('bison'); //1
beasts.indexOf('bison', 2); //4
beasts.indexOf('giraffe'); //-1

beasts.lastIndexOf('bison'); //4
beasts.lastIndexOf('bison', 2); //1
beasts.lastIndexOf('giraffe'); //-1

 

find()：返回數組中滿足提供的測試函數的第一個元素的值。否則返回undefined。

findIndex()：返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。

let array1 = [5, 12, 8, 130, 44];
let val = array1.find(element => element > 10);
let index = array1.findIndex(element => element > 10);
val; //12
index; //1

 

forEach()：對數組的每個元素執行一次提供的函數。

filter()：創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。

map()：創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數後返回的結果。

reduce(reducer[,initialValue])：對數組中的每個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總為單個返回值。reducer 函數接收4個參數:Accumulator (acc) (累計器)、Current Value (cur) (當前值)、Current Index (idx) (當前索引)、Source Array (src) (源數組)。initialValue作為第一次調用 callback函數時的第一個參數的值。如果沒有提供初始值，則將使用數組中的第一個元素。

accumulator為累加器，currentValue為當前值，index為當前索引，array為源數組。

every()：測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。

some()：測試數組中是不是至少有1個元素通過了被提供的函數測試。它返回的是一個Boolean類型的值。

 

let array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element)); //'a'\n 'b'\n 'c' 
array1; //['a', 'b', 'c']

let words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
let result = words.filter(word => word.length > 6);
result; //["exuberant", "destruction", "present"]
words; //["spray", "limit", "elite", "exuberant", "destruction", "present"]

let array2 = [1, 4, 9, 16];
let map1 = array2.map(x => x * 2);
map1; //[2, 8, 18, 32]
array2; //[1, 4, 9, 16]

let array3 = [1, 2, 3, 4];
let reducer = (accumulator, currentValue) => accumulator + currentValue;
array3.reduce(reducer); //10
array3.reduce(reducer, 5); //15
array3; //1, 2, 3, 4]

let isBelowThreshold = (currentValue) => currentValue < 40;
let array4 = [1, 30, 39, 29, 10, 13];
let array5 = [1, 30, 39, 291, 10, 13];
array4.every(isBelowThreshold); // true
array5.every(isBelowThreshold); // false

let array = [1, 2, 3, 4, 5];
let even = (element) => element % 2 === 0;
array.some(even); // true

  

flat([depth])：會按照一個可指定的深度遞歸遍曆數組，並將所有元素與遍歷到的子數組中的元素合併為一個新數組返回。depth指定要提取嵌套數組的結構深度，預設值為 1。可用作扁平化嵌套數組。

let arr1 = [1, 2, [3, 4],[5,[6,[7]]]];
let b = arr1.flat(); 
let c = arr1.flat(2); 
let d = arr1.flat(Infinity); 
arr1; // [1, 2, [3, 4],[5,[6,[7]]]]
b; // [1, 2, [3, 4],[5,[6,[7]]]]
c; //[1,2,3,4,5,[6,[7]]]
d; //[1,2,3,4,5,6,7]

 

 

 

 

Array.from()：從一個類似數組或可迭代對象創建一個新的，淺拷貝的數組實例。

Array.of()：用於將一組值，轉換為數組。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

 

Array.isArray()：確定傳遞的值是否是一個array。

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray("foobar");   // false
Array.isArray(undefined);  // false

 

先介紹這麼多，有空的時候再補充。

 

 


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

-Advertisement-
Play Games
更多相關文章
  • js判斷非127開頭的IP地址
    js驗證回送地址，IP地址不能以127開頭 回送地址（127.x.x.x）是本機回送地址（Loopback Address） ...
  • JS高級---案例貪吃蛇，把封裝的函數移動到js文件中
    案例貪吃蛇，把封裝的函數移動到js文件中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> .map { width: 800px; height: 600px; b ...
  • JS高級---案例：貪吃蛇小游戲
    案例：貪吃蛇小游戲 可以玩的小游戲，略複雜，過了2遍，先pass吧 先創建構造函數，再給原型添加方法。分別創建食物，小蛇和游戲對象。 食物，小蛇的橫縱坐標，設置最大最小值，運動起來的函數，按上下左右鍵的處理函數，吃到的處理函數 <!DOCTYPE html> <html lang="en"> <he ...
  • PHP正則表達式常用例子
    "^[0-9]*[1-9][0-9]*$" //正整數"^((-\d+)|(0+))$" //非正整數（負整數 + 0）"^-[0-9]*[1-9][0-9]*$" //負整數"^-?\d+$" //整數"^\d+(\.\d+)?$" //非負浮點數（正浮點數 + 0）"^(([0-9]+\.[0- ...
  • JS面向對象
    Object 是javascript 父對象 function F(){ //自定義函數 } alert(F.prototype); //函數原型是object對象 alert(F.prototype instanceof Object); //true 閉包 全局變數在函數內部可以訪問 funct ...
  • web前端-基礎篇
    該篇僅是本人學習前端時，做的備忘筆記： 一、背景圖片設置： 設置背景圖時的css代碼：background-image:url(圖片的url路徑); ps：設置好這個背景後請一定要設置該背景圖片的大小和該背景圖片的顯示區域，css樣式設置如下： e.g. background-size:36px 3 ...
  • JS-對象常用方法整理
    查看對象的方法，繼續控制台輸出，如圖： hasOwnProperty()：返回一個布爾值，指示對象自身屬性中是否具有指定的屬性（也就是，是否有指定的鍵）。 isPrototypeOf()：用於測試一個對象是否存在於另一個對象的原型鏈上。 toString()：返回一個表示該對象的字元串。 value ...
  • JS實現簡易計算器的7種方法
    先放圖（好吧比較挫） 方法一：最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>簡易計算器</title> <style> body { background-color: #eee; } ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類