Javascript之數組

来源:http://www.cnblogs.com/trim/archive/2017/07/29/7253185.html
-Advertisement-
Play Games

一、概念 數組是值的有序集合。每個值叫做一個元素，兒每個元素值數組中有一個位置，以數字表示，稱為索引。數組的元素可以是任意類型，並且同一個數組中的不同元素也可能有不同的類型。 二、創建數組 1、常規方式： 2、簡介方式 3、字面方式 三、數組的讀寫 四、數組的長度 五、數組元素的添加和刪除 最簡單的 ...


一、概念

　　數組是值的有序集合。每個值叫做一個元素，兒每個元素值數組中有一個位置，以數字表示，稱為索引。數組的元素可以是任意類型，並且同一個數組中的不同元素也可能有不同的類型。

二、創建數組

　　1、常規方式：　　

var arr = new Array();
        arr[0] = 'abc';
        arr[1] = '123';
        arr[2] = 'asd';
    console.log(arr); //列印得：Array [ "abc", "123", "asd" ]

　　2、簡介方式

 var arr = new Array('asd', '123', 'Hello');
 console.log(arr);//列印得： Array [ "asd", "123", "Hello" ]

　　3、字面方式

1 var arr = ["Saab", "Volvo", "BMW"];
2 console.log(arr);//列印得：Array [ "Saab", "Volvo", "BMW" ]

三、數組的讀寫

1 var arr = new Array(10, 20, 'Word');
2      arr[3] = 'Hello';    //寫第3個元素
3      console.log(arr);  //Array [ 10, 20, "Word", "Hello" ]
4 var val = arr[1];       //讀第一個元素
5 console.log(val);     //20

四、數組的長度

var arr = new Array('asd', '123', 'Hello');
var len = arr.length;
console.log(len); //3

五、數組元素的添加和刪除

　　最簡單的方法：為新索引值賦值

1 var arr = [];//定義一個空數組
2      arr[0] = 'zero'; //添加元素
3      arr[1] = 'one';
4 console.log(arr); //Array [ "zero", "one" ]

也可以使用push()方法在數組末尾增加一個或多個元素

1  var arr = [];//定義一個空數組
2       arr.push('zero'); //增加一個
3       arr.push('one', 'two'); //增加多個
4 console.log(arr); //Array [ "zero", "one", "two" ]

　　delete元素符刪除數組元素：

1 var arr = [ "zero", "one", "two" ];
2 delete arr[1]; //a在索引1的位置不再有元素
3 console.log(arr); //Array [ "zero", <1 個空的存儲位置>, "two" ]
4 var bool = 1 in arr;
5 console.log(bool); //false 說明數組索引1並未在數組中定義
6 console.log(arr.length); //3 delete操作不影響數組的長度

　　pop()方法刪除數組尾部的元素，並使數組長度減1，同時返回被刪除的元素：

1 var arr = [ "zero", "one", "two" ];
2 var val = arr.pop();
3 console.log(arr); //Array [ "zero", "one" ]
4 console.log(arr.length); //2
5 console.log(val); //'two'

六、數組的遍歷

　　for迴圈是遍曆數組元素最常見的方法：

1 var arr = [ "zero", "one", "two", "three"];
2 for (var i = 0; i < arr.length; i++) {
3     console.log(arr[i]); //列印得：zero one two  three
4 };

for/in迴圈遍曆數組：

1 var arr = [ "zero", "one", "two", "three"];
2 for (var index in arr) {
3     var val = arr[index];
4     console.log(val);////列印得：zero one two  three
5 };

還可以用forEach()方法遍歷：

var data = [1, 2, 3, 4, 5];
var sumOfSquares = 0;
data.forEach(function(x){
    sumOfSquares += x * x;//平方相加
})；
console.log(sumOfSquares); //55

七、多維數組

 1 /**
 2 * 創建一個多維數組
 3 * @type {Array}
 4 */
 5 var table = new Array(10); //表格有10行
 6 for (var i = 0; i < table.length; i++) {
 7     table[i] = new Array(10); //每行有10列
 8 };
 9 //初始化數組
10 for (var i = 0; i < table.length; i++) {
11     for (var j = 0; j < table[i].length; j++) {
12         table[i][j] = i * j;
13     };
14 };
15 //使用多維數組計算 5 * 7
16 var product = table[5][7];
17 console.log(product); //35

八、數組方法

　　數組常用的方法：

　　concat()用於連接兩個或多個數組：

1 var arr1   = ["Cecilie", "Lone"];
2 var arr2   = ["Emil", "Tobias", "Linus"];
3 var arr3   = ["Robin"];
4 var newArr = arr1.concat(arr2, arr3);
5 console.log(newArr); //Array [ "Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin" ]

　　join把數組的所有元素轉化成一個字元串：

1 var arr = [ "Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin" ];
2 var str = arr.join(',');
3 console.log(str);//Cecilie,Lone,Emil,Tobias,Linus,Robin
4 console.log(typeof(str));//string

　　reverse()反轉元素的順序，返回新的數組：

1 var arr = [ "Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin" ];
2 var newArr = arr.reverse();
3 console.log(newArr);//Array [ "Robin", "Linus", "Tobias", "Emil", "Lone", "Cecilie" ]

　　sort()對數組元素排序，排序順序可以是字母或數字，並按升序或降序。預設排序順序為按字母升序。

1 //數字排序
2 var arr = [40,100,1,5,25,10];
3 var newArr = arr.sort(function(a,b){return a-b});
4 console.log(newArr); //Array [ 1, 5, 10, 25, 40, 100 ]

　　slice()選取數組的的一部分，並返回一個新數組。

1 var arr = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
2 var newArr = arr.slice(2,4);
3 console.log(newArr); //Array [ "Lemon", "Apple" ]

　　splice()從數組中添加或刪除元素。不同於slice()和concat(),splice()會修改調用的數組

1 var arr = ["Banana", "Orange", "Apple", "Mango"];
2 var newArr = arr.splice(2,1,"Lemon","Kiwi");
3 console.log(newArr);//移除數組的第三個元素，併在數組第三個位置添加新元素,同時返回刪除的元素
4 console.log(arr);//Array [ "Banana", "Orange", "Lemon", "Kiwi", "Mango" ]

splice()會插入數組本身而非數組的元素。

　　push()和pop()已在數組元素的添加修改提到。

　　unshift()和shift()的行為非常類似與push()和pop(),前者是在數組的頭部進行元素的插入和刪除操作，unshift()在數組的頭部插入一個或多個元素，返回數組新的長度；shift()刪除數組的第一個元素並將其返回。

1 var arr = ["Banana", "Orange", "Apple", "Mango"];
2 var len = arr.unshift("Lemon","Pineapple");
3 console.log(len);//6
4 console.log(arr);//Array [ "Lemon", "Pineapple", "Banana", "Orange", "Apple", "Mango" ]
1 var arr = ["Banana", "Orange", "Apple", "Mango"];
2 var val = arr.shift();
3 console.log(val);//Banana
4 console.log(arr);//Array [ "Orange", "Apple", "Mango"

　　toString()將數組轉換為字元串

1 var arr = ["Banana", "Orange", "Apple", "Mango"];
2 var str = arr.toString();
3 console.log(str);//Banana,Orange,Apple,Mango

這裡與不使用任何參數調用的join()方法返回的字元串是一樣的。

　　forEach()從頭到尾遍曆數組，為每個元素調用指定的元素。

 1 var data = [1, 2, 3, 4, 5];
 2 var sum  = 0;
 3 data.forEach(function(val){
 4     sum += val; //計算數組元素和
 5 });
 6 console.log(sum);//15
 7 data.forEach(function(v, i, a){
 8     a[i] = v + 1;//給數組的每個元素加1
 9 })
10 console.log(data);//Array [ 2, 3, 4, 5, 6 ]

　　map()方法將調用的數組的每個元素傳遞給指定的函數，並返回一個數組，它包含該函數的返回值。

1 var arr = [1, 2, 3];
2 var newArr = arr.map(function(x) {
3     return x * x;
4 })
5 console.log(newArr);//Array [ 1, 4, 9 ]

　　filter()方法返回的數組元素是調用的數組的一個子集。

1 var arr = [1, 2, 3, 4, 5, 6 ];
2 var newArr = arr.filter(function(x){
3     return x < 3;
4 });
5 console.log(newArr); // Array [ 1, 2 ]
6 var arr1 = arr.filter(function(x, i){
7     return i % 2 == 0;
8 })
9 console.log(arr1);//Array [ 1, 3, 5 ]

壓縮空缺並刪除undefined和null元素

arr = arr.filter(function(x){ return x !== undefined && x !== null;})

　　every()和some（）方法是數組的邏輯判定，對數組元素應用指定函數進行判定，返回true或false

every() 所有的元素滿足條件，返回true，否則返回false。

var arr = [1, 2, 3, 4, 5, 6 ];
var bool = arr.every(function(x){ return x < 10; });//true  所有的值都小於10
console.log(bool);

some()至少有一個元素滿足條件，返回true， 所有的不滿足返回false

var arr  = [1, 2, 3, 4, 5, 6 ];
var bool = arr.some(function(x){ return x % 2 == 0});//true arr含有偶數
console.log(bool);

　　reduce()和reduceRight()方法使用指定函數將數組元素進行組合，生成單個值。

reduced()將數組元素計算為一個值（從左到右）。

1 var arr = [1, 2, 3, 4, 5, 6 ];
2 var sum = arr.reduce(function(x, y){return x + y}, 0);//數組求和
3 var product = arr.reduce(function(x, y){ return x * y}, 1);//數組求積
4 var max = arr.reduce(function(x, y){ return (x > y) ? x : y}); //求最大值 console.log(sum);
5 console.log(product);
6 console.log(max);

reducedRight()按照數組索引從高到低處理數組。

var arr = [2, 3, 4];
var big = arr.reduceRight(function(x, y){ return Math.pow(y, x);});
console.log(big);//2.4178516392292583e+24

　　indexOf()和lastIndexOf()方法搜索整個數組中具有給定值的元素，返回找到的第一個元素的索引或者如果沒有找到返回-1，indexOf()從頭到尾搜索，lastIndexOf()則反向搜索。

1 var arr = [0, 1, 3, 1, 2, 0];
2 var a = arr.indexOf(1); //a[1]是1
3 var b = arr.lastIndexOf(1);//a[3]是1
4 var c = arr.indexOf(5);//沒有值為5的元素
5 console.log(a);
6 console.log(b);
7 console.log(c);

 


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

-Advertisement-
Play Games
更多相關文章
  • JavaScrip ES6數組方法
    ES6提供的兩個靜態方法： Array.from Array.of ES6提供操作、填充和過濾數組的方法： Array.prototype.copyWidthin Array.prototype.fill Array.prototype.find Array.prototype.findIndex ...
  • Kindeditor單獨調用多圖上傳
    html代碼： <input type="button" id="J_selectImage" value="圖片上傳" /><div id="J_imageView"><?php foreach($imgs as $row):?><div class="img_view"><img class=' ...
  • Kindeditor單獨調用單圖上傳增加預覽
    html代碼： <p><input type="hidden" id="url1" name="IDCardPicture1" value="" /> <input type="button" id="image1" value="選擇圖片" style="width: 150px;height:  ...
  • 03-對JQuery對象的屬性，特性以及數據的操作
    對JQuery對象的屬性，特性以及數據的操作： 特性（attributes）和屬性（properties）： 特性的值是字元串。 屬性的值不光為字元串，而且可以為布爾值，對象，數字。 元素的屬性和特性有動態鏈接，如果特性在dom對象中存在，其中一個發生變化，另一個也會變化 如果特性是本來就在dom對 ...
  • JavaScript | 對象詳解
    重新學習了一遍js對象，但方法的靈活使用需要代到案例中學習，共勉 ...
  • 使用css的類名交集複合選擇器 《轉》
    複合選擇器就是兩個或多個基本選擇器，通過不同方式連接而成的選擇器，主要包括“交集”選擇器、“並集”選擇器、“後代”選擇器。 交集選擇器 “交集”複合選擇器是由兩個選擇器直接連接構成，其結果是選中二者各自元素範圍的交集。其中第一個必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器。這兩個選擇器之間 ...
  • ES6中的迭代器(Iterator)和生成器(Generator)
    [1]引入 [2]迭代器 [3]生成器 [4]可迭代對象 [5]內建迭代器 [6]高級迭代器 [7]非同步任務執行 ...
  • 小程式對接七牛雲存儲
    前言： 做小程式有一段時間了，總結一下做過的技術點，特此貢獻給小伙伴們！項目中，有圖片存儲、視頻存儲、錄音存儲這三個需要雲對接存儲。 一、圖片/視頻/錄音上傳七牛對接 準備工作： a、你要有一個七牛賬號，實名認證後，在七牛的個人中心，有個秘鑰管理-裡面有一對秘鑰，是上傳必須的。這對秘鑰，配置在後端， ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類