JavaScript 精粹 基礎 進階(5)數組

轉載請注明出處

原文連接 blog.huanghanlian.com/article/5b6…

數組是值的有序集合。每個值叫做元素，每個元素在數組中都有數字位置編號，也就是索引。JS中的數組是弱類型的，數組中可以含有不同類型的元素。數組元素甚至可以是對象或其它數組。

第一節、創建數組、數組操作

數組概述

數組是值的有序集合。每個值叫做元素，每個元素在數組中都有數字位置編號，也就是索引。JS中的數組是弱類型的，數組中可以含有不同類型的元素。數組元素甚至可以是對象或其它數組。

例子：

var arr = [1, true, null, undefined, {x : 1}, [1, 2, 3]];
復制代碼

創建數組-字面量

var BAT = ['Alibaba', 'Tencent', 'Baidu'];
var students = [{name : 'Bosn', age : 27}, {name : 'Nunnly', age : 3}];
var arr = ['Nunnly', 'is', 'big', 'keng', 'B', 123, true, null];
var arrInArr = [[1, 2], [3, 4, 5]];
var commasArr1 = [1, , 2]; // 1, undefined, 2
var commasArr2 = [,,]; // undefined * 2
復制代碼

數組的大小是有限制的，最小是0，最長是2的23次冪減去1

size from 0 to 4,294,967,295(2^23  -1 ) 
復制代碼

創建數組-new Array

除了用字面量創建數組，還可以用Array構造器創建數組。

var arr = new Array(); //等價于var arr=[];
var arrWithLength = new Array(100); // undefined * 100  長度為100
var arrLikesLiteral = new Array(true, false, null, 1, 2, "hi");
// 等價于[true, false, null, 1, 2, "hi"];
復制代碼

數組元素讀寫

數組元素讀寫是比較基礎，也是非常常見的。

通過索引來去訪問數組，索引從0到它的長度減1，

var arr = [1, 2, 3, 4, 5];
arr[1]; // 2
arr.length; // 5
復制代碼

可以動態添加數組元素

arr[5] = 6;
arr.length; // 6
復制代碼

也可以刪除第索引數組

delete arr[0];
arr[0]; // undefined
復制代碼

需要注意用delete刪除的方式，最終數組長度任然不會改變。只是把刪除的元素改成undefined。

數組元素增刪

動態增加

數組元素增刪我們需要意識到一點，javascript的數組是動態的，無需指定大小，數組對象的length屬性也會根據數組情況去更新。

var arr = [];
arr[0] = 1;
arr[1] = 2;
arr.push(3);
arr; // [1, 2, 3]
復制代碼

比如說這里定義一個arr空的數組，然后把它第一個元素賦值為1，也可以用數組對象的push方法在尾部再添加元素3，現在再來看arr數組發現這里買你有3個元素[1, 2, 3]。

arr[arr.length] = 4; // 等價于 arr.push(4);
arr; // [1, 2, 3, 4]
復制代碼

arr.length是數組的長度，用它來做索引，也就是在數組的最后一個來賦值等價于arr.push(4);

如果想要在數組的頭部去添加賦值怎么辦呢? 這個時候可以用到數組對象unshift方法。

arr.(0);
arr; // [0, 1, 2, 3, 4];
復制代碼

刪除

delete方法可以刪除數組的元素，更準確的說是將數組對應的一個元素變為undefined位置還是存在的，長度沒有變化。用in操作符來判斷索引在這個數組存不存在答案是false。但是我通過arr[2]='undefined'再用in操作符來判斷索引在這個數組存不存在答案是true。注意這里的區別。

delete arr[2];
arr; // [0, 1, undefined, 3, 4]
arr.length; // 5
2 in arr; // false
復制代碼

用arr.length -= 1;的方式，意思就是arr.length等于arr.length減1。這樣可以刪除最后一個尾部元素的。

arr.length -= 1;
arr; // [0, 1, undefined, 3, 4],  4 is removed
復制代碼

數組的arr.pop()方法，arr.pop()方法也是刪除數組最尾部的元素。

arr.pop(); // 3 returned by pop
arr; // [0, 1, undefined], 3 is removed
復制代碼

數組的arr.shift();方法，arr.shift();方法也是刪除數組頭部 的元素。

arr.shift(); // 0 returned by shift
arr; // [1, undefined]
復制代碼

數組迭代

可以通過for遍歷數組中每一個元素

var i = 0, n = 10;
var arr = [1, 2, 3, 4, 5];
for (; i < n; i++) {console.log(arr[i]); // 1, 2, 3, 4, 5
}
復制代碼

可以通過for...in遍歷數組

for(i in arr) {console.log(arr[i]); // 1, 2, 3, 4, 5
}
復制代碼

通過for...in遍歷數組需要注意的是，數組也是對象，他也有原型，比如我們給數組原型增加屬性Array.prototype.x = 'inherited';那么在for...in的時候x也會遍歷出現。并且順序不保證。

Array.prototype.x = 'inherited';
var arr = [1, 2, 3, 4, 5];
for(i in arr) {console.log(arr[i]); // 1, 2, 3, 4, 5, inherited
}
復制代碼

如果不想使用for...in的時候原型也被遍歷那么我們需要判斷下arr.hasOwnProperty(i)

Array.prototype.x = 'inherited';
var arr = [1, 2, 3, 4, 5];
for (i in arr) {if (arr.hasOwnProperty(i)) {console.log(arr[i]); // 1, 2, 3, 4, 5}
}
復制代碼

第二節、二維數組、稀疏數組

二維數組

var arr = [[0, 1], [2, 3], [4, 5]];
var i = 0, j = 0;
var row;
for (; i < arr.length; i++) {row = arr[i];console.log('row ' + i);for (j = 0; j < row.length; j++) {console.log(row[j]);}
}// result:
// row 0
// 0
// 1
// row 1
// 2
// 3
// row 2
// 4
// 5
復制代碼

稀疏數組

稀疏數組并不含有從0開始的連續索引。一般length屬性值比實際元素個數大。

var arr1 = [undefined];
var arr2 = new Array(1);
0 in arr1; // true
0 in arr2; // false
arr1.length = 100;
arr1[99] = 123;
99 in arr1; // true
98 in arr1; // falsevar arr = [,,];
0 in arr; // false
復制代碼

第三節、數組方法

數組方法

每一個對象都有很多對象的方法，這些方法都是Object.prototype上面的，我們才可以在對像中去拿到它。

{}   =>  Object.prototype
復制代碼

那么數組呢，也是一樣的，我們在用字面量或者是new Array的方式去創建數組對象的時候。數組對象也會有他的原型。他的原型就是Array.prototype。Array.prototype上面提供了大量的方法，可以讓我們對數組進行各種各樣的操作。

[]   =>  Array.prototype
復制代碼

Array.prototype.join

將數組轉為字符串

join() 方法用于把數組中的所有元素放入一個字符串。

元素是通過指定的分隔符進行分隔的。

var arr = [1, 2, 3];
console.log(arr.join()); // "1,2,3"
console.log(arr.join("_")); // "1_2_3"復制代碼

通過join() 方法我們可以寫一個函數，來快速創建一個重復某一個字符串n次。這樣一個函數。

function repeatString(str, n) {return new Array(n + 1).(str);
}
repeatString("a", 3); // "aaa"
repeatString("Hi", 5); // "HiHiHiHiHi"
復制代碼

repeatString(str, n)函數第一個參數是要重復的字符串，第二個參數是要重復的次數。
return new Array(n + 1).join(str);返回一個構造數組，比如說次數傳了3,Array(3 + 1)這個數組的長度是4，也就是[,,,,]使用join方法把重復內容當作分隔符。這樣就能達到預期效果。

Array.prototype.reverse

reverse() 方法用于顛倒數組中元素的順序。

該方法會改變原來的數組，而不會創建新的數組。

var arr = [1, 2, 3];
console.log(arr.reverse()); // [3, 2, 1]
console.log(arr); // [3, 2, 1]
復制代碼

需要注意的是原數組會被修改。

Array.prototype.sort

sort() 方法用于對數組的元素進行排序。

按字母順序

var arr = ["a", "d", "c", "b"];
console.log(arr.sort()); // ["a", "b", "c", "d"]
復制代碼

按數字排序

var arr = [13, 24, 51, 3];
console.log(arr.sort()); // [13, 24, 3, 51]
console.log(arr); // [13, 24, 3, 51]
復制代碼

很遺憾排序不對。

需要注意的是原數組會被修改。

其實是吧數組轉換成字符串，然后再去排序，所以開頭數字都是從小到大。并沒有按照數字實際大小來去做排序。

那如何進行數字大小進行排序呢？

如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較。

如果想按照其他標準進行排序，就需要提供比較函數，該函數要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：

  • 若 a 小于 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個小于 0 的值。
  • 若 a 等于 b，則返回 0。
  • 若 a 大于 b，則返回一個大于 0 的值。
var arr = [13, 24, 51, 3];
var sop=arr.sort(function(a, b) {return a - b;
});
console.log(sop);// [3, 13, 24, 51]
復制代碼

排序從上到下

var arr = [13, 24, 51, 3];
var sop = arr.sort(function(a, b) {return b - a;
});
console.log(sop); // [51, 24, 13, 3]
復制代碼

排序對象方法

var arr = [{age: 25
}, {age: 39
}, {age: 99
}];
arr.sort(function(a, b) {return a.age - b.age;
});
arr.forEach(function(item) {console.log('age', item.age);
});
// result:
// age 25
// age 39
// age 99
復制代碼

Array.prototype.concat

concat() 方法用于連接兩個或多個數組。

該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。

var arr = [1, 2, 3];
console.log(arr.concat(4, 5)); // [1, 2, 3, 4, 5]
console.log(arr); // [1, 2, 3]console.log(arr.concat([10, 11], 13)); // [1, 2, 3, 10, 11, 13]console.log(arr.concat([1, [2, 3]])); // [1, 2, 3, 1, [2, 3]]
復制代碼

Array.prototype.slice

slice() 方法可從已有的數組中返回選定的元素。

var arr = [1, 2, 3, 4, 5];
arr.slice(1, 3); // [2, 3]   從索引1也就是第2個開始到索引3之前那個元素也就是2，3
arr.slice(1); // [2, 3, 4, 5]  后面參數省略意思代表從索引開始到最后
arr.slice(1, -1); // [2, 3, 4]   這里的-1代表最后一個元素
arr.slice(-4, -3); // [2]  這里的-4代表倒數第4個元素-3代表倒數第3.  
復制代碼

需要注意的是原數組未被修改。

Array.prototype.splice

splice() 方法向/從數組中添加/刪除項目，然后返回被刪除的項目。

注釋：該方法會改變原始數組。

var arr = [1, 2, 3, 4, 5];
arr.splice(2); // returns [3, 4, 5]
arr; // [1, 2];arr = [1, 2, 3, 4, 5];
arr.splice(2, 2); // returns [3, 4]
arr; // [1, 2, 5];arr = [1, 2, 3, 4, 5];
arr.splice(1, 1, 'a', 'b'); // returns [2]
arr; // [1, "a", "b", 3, 4, 5]
復制代碼

Array.prototype.forEach

數組遍歷

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){console.log(x + '|' + index + '|' + (a === arr));
});
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
復制代碼

Array.prototype.map

數組映射

var arr = [1, 2, 3];
arr.map(function(x) {return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3]
復制代碼

注意：原數組未被修改

Array.prototype.filter

數組過濾

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {return index % 3 === 0 || x >= 8;
}); // returns [1, 4, 7, 8, 9, 10]
arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
復制代碼

注意：原數組未被修改

Array.prototype.every & some

數組判斷

var arr = [1, 2, 3, 4, 5];
arr.every(function(x) {return x < 10;
}); // truearr.every(function(x) {return x < 3;
}); // falsevar arr = [1, 2, 3, 4, 5];
arr.some(function(x) {return x === 3;
}); // truearr.some(function(x) {return x === 100;
}); // false
復制代碼

Array.prototype.reduce&reduceRight

var arr = [1, 2, 3];
var sum = arr.reduce(function(x, y) {return x + y
}, 0); // 6
arr; //[1, 2, 3]arr = [3, 9, 6];
var max = arr.reduce(function(x, y) {console.log(x + "|" + y);return x > y ? x : y;
});
// 3|9
// 9|6
max; // 9max = arr.reduceRight(function(x, y) {console.log(x + "|" + y);return x > y ? x : y;
});
// 6|9
// 9|3
max; // 9
復制代碼

Array.prototype.indexOf&lastIndexOf

數組檢索

var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 1
arr.indexOf(99); // -1
arr.indexOf(1, 1); // 4
arr.indexOf(1, -3); // 4
arr.indexOf(2, -1); // -1
arr.lastIndexOf(2); // 3
arr.lastIndexOf(2, -2); // 3
arr.lastIndexOf(2, -3); // 1
復制代碼

Array.isArray

判斷是否為數組

Array.isArray([]); // true
[] instanceof Array; // true
({}).toString.apply([]) === '[object Array]'; // true
[].constructor === Array; // true
復制代碼

第四節、數組小結

數組 VS. 一般對象

字符串和數組

var str = "hello world";
str.charAt(0); // "h"
str[1]; // eArray.prototype.join.call(str, "_");
// "h_e_l_l_o_ _w_o_r_l_d"
復制代碼

小結

  1. 數組概念
  2. 創建數組、數組增刪改查操作
  3. 二維數組、稀疏數組
  4. 數組方法
  5. 數組 VS. 一般對象
  6. 數組 VS. 字符串

轉載于:https://juejin.im/post/5c7f7405f265da2da4082fe0

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/279999.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/279999.shtml
英文地址，請注明出處：http://en.pswp.cn/news/279999.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

icloud 購買存儲空間_如何釋放iCloud存儲空間

icloud 購買存儲空間_如何釋放iCloud存儲空間

icloud 購買存儲空間Apple offers 5 GB of free iCloud space to everyone, but you’ll run up against that storage limit sooner than you’d think. Device backups, photos, documents, iCloud email, and other bits of data all share that space. Apple為每個人提供5 …
閱讀更多...
基于LAMP實現web日志管理查看

基于LAMP實現web日志管理查看

前言&#xff1a;日志是一個重要的信息庫&#xff0c;如何高效便捷的查看系統中的日志信息&#xff0c;是系統管理員管理系統的必備的技術。實現方式&#xff1a;1、將日志存儲于數據庫。2、采用LAMP架構&#xff0c;搭建PHP應用&#xff0c;通過web服務訪問數據庫&#xff0c;…
閱讀更多...
WPF效果第二百零七篇之EditableSlider

WPF效果第二百零七篇之EditableSlider

前面簡單玩耍一下快速黑白灰效果; 今天又玩了一下ZoomBlurEffect,來看看最終實現的效果:1、ps和cs文件都在Shazzam中,咱們自己隨意玩耍;今天主角是下面這位:2、來看看自定義控件布局(TextBox、Slider、ToggleButton)&#xff1a;3、點擊編輯按鈕,我就直接偷懶了:private void E…
閱讀更多...
閑話高并發的那些神話，看京東架構師如何把它拉下神壇

閑話高并發的那些神話，看京東架構師如何把它拉下神壇

轉載:閑話高并發的那些神話&#xff0c;看京東架構師如何把它拉下神壇 高并發也算是這幾年的熱門詞匯了&#xff0c;尤其在互聯網圈&#xff0c;開口不聊個高并發問題&#xff0c;都不好意思出門。高并發有那么邪乎嗎&#xff1f;動不動就千萬并發、億級流量&#xff0c;聽上去…
閱讀更多...
c# Clone方法

c# Clone方法

clone是深拷貝&#xff0c;copy是淺拷貝&#xff0c;如果是值類型的話是沒什么區別的&#xff0c;如果是引用類型的話深拷貝拷貝的事整個對象的數據&#xff0c;而淺拷貝僅僅拷貝對象的引用。因為類的實例是引用類型&#xff0c;要想用原有的類中的實例的數據的話&#xff0c;既…
閱讀更多...
使用MyQ打開車庫門時如何接收警報

使用MyQ打開車庫門時如何接收警報

Chamberlain’s MyQ technology is great for opening and closing your garage door remotely with your smartphone, but you can also receive alerts whenever your garage door opens and closes (as well as receive alerts when it’s been open for an extended amount…
閱讀更多...
踏實工作，實現價值

踏實工作，實現價值

工作&#xff0c;為實現自我價值 若想在漫長的職場生涯中穩步高升&#xff0c;首先要踏踏實實&#xff0c;專心致志、充滿激情的去完成工作中的每一項任務&#xff0c;無論工作是繁重的還是瑣碎的&#xff0c;都要嚴格要求自己全身心的去完成。而不是一味的抱怨&#xff0c;一味…
閱讀更多...
mac 防火墻禁止程序聯網_如何允許應用程序通過Mac的防火墻進行通信

mac 防火墻禁止程序聯網_如何允許應用程序通過Mac的防火墻進行通信

mac 防火墻禁止程序聯網If you use a Mac, chances are you might not even realize that OS X comes with a firewall. This firewall helps ensure unauthorized app and services can’t contact your computer, and prevents intruders from sniffing out your Mac on a ne…
閱讀更多...
WPF-22 基于MVVM員工管理-02

WPF-22 基于MVVM員工管理-02

我們接著上一節&#xff0c;這節我們實現crud操作&#xff0c;我們在EmployeeViewMode類中新增如下成員&#xff0c;并在構造函數中初始化該成員code snippetpublic EmployeeViewMode() {employeeService new EmployeeService();BindData();Employee new Employee();AddComma…
閱讀更多...
linux 3

linux 3

-- Linux -- 開心的一天 vi　　 所有的 unix like 系統都會內置 vi 文本編輯器 vim　　較多使用的,可以主動的以字體顏色辨別語法的正確性&#xff0c;方便程序設計 vi/vim 的使用 -- 命令模式&#xff08;Command mode&#xff09; 輸入模式&#xff08;Insert mode&#x…
閱讀更多...
從零開始搭建一個簡單的ui自動化測試框架02（pytest+selenium+allure）

從零開始搭建一個簡單的ui自動化測試框架02（pytest+selenium+allure）

二、先搭一個架子 在我還是小白連py語法都不太熟悉的時候&#xff0c;經常在網上看關于自學ui自動化測試的博客&#xff0c;最熟悉的套路莫過于先給你介紹一下selenium的各個api&#xff0c;然后寫一套代碼去登陸微博或者百度什么的&#xff0c;但我今天不愿意這么寫&#xff0…
閱讀更多...
DML語言DDL

DML語言DDL

DML&#xff08;data manipulation language&#xff09;&#xff1a; 它們是SELECT、UPDATE、INSERT、DELETE&#xff0c;就象它的名字一樣&#xff0c;這4條命令是用來對數據庫里的數據進行操作的語言 。 DDL&#xff08;data definition language&#xff09;&#xff1a; D…
閱讀更多...
什么是Adobe Lightroom，我需要它嗎？

什么是Adobe Lightroom，我需要它嗎？

Adobe Photoshop Lightroom confuses a lot of new photographers. It has Photoshop in the name, but it isn’t Photoshop? What gives? Adobe Photoshop Lightroom使許多新攝影師感到困惑。 它的名稱是Photoshop&#xff0c;但不是Photoshop嗎&#xff1f; 是什么賦予了&…
閱讀更多...
jquery中的serializeArray方法的使用

jquery中的serializeArray方法的使用

轉載于:https://blog.51cto.com/11871779/2359556
閱讀更多...
新冠病毒中招｜第一天

新冠病毒中招｜第一天

感染新冠病毒后具體如何治療&#xff0c;需要根據感染者病情輕重情況而定&#xff0c;嚴重的要聽醫生的。昨天是我個人感染奧密克戎毒株第一天&#xff0c;今天跟大家分享一下我的情況。我昨天感覺渾身無力&#xff0c;也有點發燒37.9&#xff0c;我就吃了感冒藥睡了一上午&…
閱讀更多...
機器學習（一）—— 線性回歸

機器學習（一）—— 線性回歸

機器學習&#xff08;一&#xff09;—— 線性回歸 目錄 0. 回歸&#xff08;Regression&#xff09;的由來 1. 回歸關系 2. 線性回歸的整體思路 &#xff08;1&#xff09;根據數據提出假設模型 &#xff08;2&#xff09;求解參數 1&#xff09;梯度下降法 2&#xff09;正規…
閱讀更多...
Java EE啟示錄

Java EE啟示錄

前言 最近的這段時間一直在學習Java EE&#xff0c;剛剛完成了從0到1的蛻變&#xff0c;所以順便整理一下我所了解到的Java EE&#xff0c;給剛入門學習的新人一些頭緒&#xff0c;而所謂“啟示錄”&#xff0c;就是這個意思。 一.Java EE是什么&#xff1f; Java EE&#xff0…
閱讀更多...
又到年末“團建”！某企業員工吐槽：這真是一場噩夢……

又到年末“團建”！某企業員工吐槽：這真是一場噩夢……

這是頭哥侃碼的第270篇原創2022年即將結束&#xff0c;很多公司又到了一年一度的年末團建。前天晚上&#xff0c;之前的同事找我聊天&#xff0c;說他們公司因為最近疫情的原因&#xff0c;準備把年末“團建”放到春節后進行。但是計劃的時間是2月份的某個周末&#xff0c;并且…
閱讀更多...
天梯 L2 這是二叉搜索樹嗎？

天梯 L2 這是二叉搜索樹嗎？

L2-004 這是二叉搜索樹嗎&#xff1f; &#xff08;25 分&#xff09;一棵二叉搜索樹可被遞歸地定義為具有下列性質的二叉樹&#xff1a;對于任一結點&#xff0c; 其左子樹中所有結點的鍵值小于該結點的鍵值&#xff1b;其右子樹中所有結點的鍵值大于等于該結點的鍵值&#xf…
閱讀更多...
三星筆記本進入BIOS后找不到U盤啟動項/快速啟動鍵F12沒有反應

三星筆記本進入BIOS后找不到U盤啟動項/快速啟動鍵F12沒有反應

分析&#xff1a;BIOS開啟了 Fast Bios Mode 解決方法&#xff1a; 開機按F2進入BIOS設置&#xff0c;選擇Advanced菜單下Fast Bios Mode&#xff0c;設置為 Disabled&#xff0c;按F10鍵保存退出&#xff0c;重啟時按F12鍵即可進入快速啟動界面選擇。或按F2進入BIOS設置&#…
閱讀更多...
最新文章

Copyright @ 2022~2023