轉(zhuǎn)載請注明出處

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

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

第一節(jié)、創(chuàng)建數(shù)組、數(shù)組操作

數(shù)組概述

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

例子：

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

創(chuàng)建數(shù)組-字面量

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 復制代碼

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

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

創(chuàng)建數(shù)組-new Array

除了用字面量創(chuàng)建數(shù)組，還可以用Array構造器創(chuàng)建數(shù)組。

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"]; 復制代碼

數(shù)組元素讀寫

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

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

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

可以動態(tài)添加數(shù)組元素

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

也可以刪除第索引數(shù)組

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

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

數(shù)組元素增刪

動態(tài)增加

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

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

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

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

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

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

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

刪除

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

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 復制代碼

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

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

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

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

數(shù)組迭代

可以通過for遍歷數(shù)組中每一個元素

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遍歷數(shù)組

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

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

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} } 復制代碼

第二節(jié)、二維數(shù)組、稀疏數(shù)組

二維數(shù)組

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 復制代碼

稀疏數(shù)組

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

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 復制代碼

第三節(jié)、數(shù)組方法

數(shù)組方法

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

{} => Object.prototype 復制代碼

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

[] => Array.prototype 復制代碼

Array.prototype.join

將數(shù)組轉(zhuǎn)為字符串

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

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

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

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

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

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

Array.prototype.reverse

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

該方法會改變原來的數(shù)組，而不會創(chuàng)建新的數(shù)組。

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

需要注意的是原數(shù)組會被修改。

Array.prototype.sort

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

按字母順序

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

按數(shù)字排序

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

很遺憾排序不對。

需要注意的是原數(shù)組會被修改。

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

那如何進行數(shù)字大小進行排序呢？

如果調(diào)用該方法時沒有使用參數(shù)，將按字母順序?qū)?shù)組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現(xiàn)這一點，首先應把數(shù)組的元素都轉(zhuǎn)換成字符串（如有必要），以便進行比較。

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

• 若 a 小于 b，在排序后的數(shù)組中 a 應該出現(xiàn)在 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] 復制代碼

排序?qū)ο蠓椒?/p> 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() 方法用于連接兩個或多個數(shù)組。

該方法不會改變現(xiàn)有的數(shù)組，而僅僅會返回被連接數(shù)組的一個副本。

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() 方法可從已有的數(shù)組中返回選定的元素。

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] 后面參數(shù)省略意思代表從索引開始到最后 arr.slice(1, -1); // [2, 3, 4] 這里的-1代表最后一個元素 arr.slice(-4, -3); // [2] 這里的-4代表倒數(shù)第4個元素-3代表倒數(shù)第3. 復制代碼

需要注意的是原數(shù)組未被修改。

Array.prototype.splice

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

注釋：該方法會改變原始數(shù)組。

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

數(shù)組遍歷

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

數(shù)組映射

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

注意：原數(shù)組未被修改

Array.prototype.filter

數(shù)組過濾

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] 復制代碼

注意：原數(shù)組未被修改

Array.prototype.every & some

數(shù)組判斷

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

數(shù)組檢索

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

判斷是否為數(shù)組

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

第四節(jié)、數(shù)組小結

數(shù)組 VS. 一般對象

字符串和數(shù)組

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" 復制代碼

小結

數(shù)組概念

創(chuàng)建數(shù)組、數(shù)組增刪改查操作

二維數(shù)組、稀疏數(shù)組

數(shù)組方法

數(shù)組 VS. 一般對象

數(shù)組 VS. 字符串

轉(zhuǎn)載于:https://juejin.im/post/5c7f7405f265da2da4082fe0

總結

以上是生活随笔為你收集整理的JavaScript 精粹 基础 进阶(5)数组的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。