本文目錄一覽：
JS 數組相關操作
push()可以將某些值加入到數組的最後一個位置，並且不限制添加數量（註：數組長度是有限制的），如果需要添加多項內容使用逗號隔開即可，加入後數組長度會增加。
let a=[1,2,3,4,5,6,7,8];
a.push(9,10);
console.log(a);// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
pop()會移除數組的最後一個元素。
let a=[1,2,3,4,5,6,7,8];
a.pop();
console.log(a);// [1, 2, 3, 4, 5, 6, 7]
shift() 會移除數組的第一個元素。
let a=[1,2,3,4,5,6,7,8];
a.shift();
console.log(a);// [2, 3, 4, 5, 6, 7, 8]
unshift() 會將指定的元素添加到數組的第一個位置。
let a=[1,2,3,4,5,6,7,8];
a.unshift(100,200,300);
console.log(a);// [100, 200, 300, 1, 2, 3, 4, 5, 6, 7, 8]
reverse()會將數組反轉
let a=[1,2,3,4,5,6,7,8];
a.reverse();
console.log(a);// [8, 7, 6, 5, 4, 3, 2, 1]
splice()可以移除或新增數列的元素，它包含了三個參數，第一個是要移除或要添加的序列號( 必填)，第二個是要移除的長度( 選填，若不填則從第一個參數序號位置開始，後方的所有元素都會被移除，若設定為0則不會有元素被移除)，第三個是要替換的內容( 選填 )
let a=[1,2,3,4,5,6,7,8];
a.splice(5,1);
console.log(a);// [1, 2, 3, 4, 5, 7, 8] ( 6 被移除了 )
添加第三個參數就能夠添加或替換元素。
let a=[1,2,3,4,5,6,7,8];
a.splice(5,1,100);
console.log(a);// [1, 2, 3, 4, 5, 100, 7, 8] ( 6 被移除，100加到第5個位置 )
let b=[1,2,3,4,5,6,7,8];
b.splice(5,3,100,200,300);
console.log(b);// [1, 2, 3, 4, 5, 100, 200, 300] ( 6,7,8 被移除，100,200,300 加到第 5,6,7 個位置 )
let c=[1,2,3,4,5,6,7,8];
c.splice(5,0,100);
console.log(c);// [1, 2, 3, 4, 5, 100, 6, 7, 8] ( 沒有元素被移除，100 加到第 5 個位置 )
sort()可以針對數組的元素進行排序，裡頭包含了一個排序用的判斷函數，函數內必須包含兩個參數，這兩個參數分別代表數組裡的第n個和第n+1 個元素，通過比較第n和第n+1個元素的大小來進行排序。
let a=[1,3,8,4,5,7,6,2];
a.sort((x,y)=y-x);
console.log(a);// [8, 7, 6, 5, 4, 3, 2, 1]
a.sort((x,y)=x-y);
console.log(a);// [1, 2, 3, 4, 5, 6, 7, 8]
如果不使用判斷函數， 默認會將元素轉換成字串，並採用unicode來判斷 ，這也會造成某些數字的排序錯誤，如下段示例：
let a=[1,3,8,4,5,7,6,2,9,10,11];
a.sort();
console.log(a);// [1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9]
copyWithin()能複製數組中的某些元素，並將它們放到同一個數組指定的位置，copyWithin()有三個參數，第一個是要置換的位置(必填)，第二個是從什麼位置開始複製(選填，預設0 )，第三個是停止複製的元素的前一個位置(選填，默認值等於數組長度)。
let a=[1,2,3,4,5,6,7,8];
a.copyWithin(2);
console.log(a);// [1,2,1,2,3,4,5,6] ( 因 7 和 8 超過數組長度，只出只複製到6 )
let b=[1,2,3,4,5,6,7,8];
b.copyWithin(3,1,3);
console.log(b);// [1,2,3,2,3,6,7,8] ( 複製 2,3 取代 4,5 )
fill()會把數組中所有元素，置換為指定的值，fill()有三個參數，第一個是準備要置換的內容(必填)，第二個是從什麼位置開始置換(選填，不設定就全部置換) ，第三個是停止置換的元素的前一個位置(選填，預設等於數組長度)。
let a=[1,2,3,4,5,6,7,8];
a.fill(‘a’);
console.log(a);// [‘a’,’a’,’a’,’a’,’a’,’a’,’a’,’a’]
let b=[1,2,3,4,5,6,7,8];
b.fill(‘b’,3,5);
console.log(b);// [1,2,3,’b’,’b’,6,7,8]
length可以取得數組的長度。
let a=[1,2,3,4,5,6,7,8];
console.log(a.length);// 8
indexOf() 會判斷數組中是否包含某個值，判斷的方式為「由左而右」，如果有包含就返回這個值在數組中的索引值，如果沒有就返回-1，有兩個參數，第一個參數表示要判斷的值( 必填)，第二個參數表示從數組的哪個位置開始判斷( 選填，預設為0 )。
let a=[1,2,3,4,5,6,7,8];
console.log(a.indexOf(4));// 3
console.log(a.indexOf(4,5));// -1 ( 在6,7,8中搜索有沒有4 )
lastIndexOf() 會判斷數組中是否包含某個值，判斷的方式為「由右而左」，如果有包含就返回這個值在數組中的索引值，如果沒有就返回-1，這個方法有兩個參數，第一個參數表示要判斷的值( 必填)，第二個參數表示判斷從數組的哪個位置開始從右往左查找( 選填，默認為整個數組長度-1 )。
let a=[1,2,3,4,5,6,7,8];
console.log(a.lastIndexOf(3));// 2
console.log(a.lastIndexOf(3,1));// -1 ( 只在1,2中判斷，所以沒有 3 )
find()會將數組中的「每一個」元素帶入指定的函數內做判斷，並會返回第一個符合判斷條件的元素，如果沒有元素符合則會返回undefined。
let a=[1,2,3,4,5,6,7,8];
console.log(a.find(e=e3));// 4
console.log(a.find(e=e0));// undefined
findIndex()會將數組中的「每一個」元素帶入指定的函數內做判斷，並會返回第一個符合判斷條件元素的位置索引，如果沒有元素符合則會返回-1。
let a=[1,2,3,4,5,6,7,8];
console.log(a.findIndex(e=e3));// 3
console.log(a.findIndex(e=e0));// -1
filter()會將數組中的「每一個」元素帶入指定的函數內做判斷，如果元素符合判斷條件則會返回，組成一個新的數組。
let a=[1,2,3,4,5,6,7,8];
console.log(a.filter(e=e3));// [4, 5, 6, 7, 8]
console.log(a.filter(e=e%2==0));// [2, 4, 6, 8]
forEach()會將數組中每個元素套用到指定的函數里進行運算，函數有三個參數，第一個參數表示每個元素的值( 必填)，第二個參數為該元素的索引值( 選填)，第三個參數則表示原本的數組( 選填)。
let a=[1,2,3,4,5];
let b=0;
a.forEach(item={b=b+item;});
console.log(b);// 15 ( 1+2+3+4+5 )
如果結合第二和第三個參數進行搭配使用，就能做到改變原本數組的效果。
let a=[1,2,3,4,5];
a.forEach((item,index,arr)={arr[index]=item*10;});
console.log(a);// [10,20,30,40,50]
join()可以將數組中所有元素，變成由指定的字符分割合併在一起組合成字符串進行呈現，若沒有指定字符默認會用「逗號」合併。
let a=[1,2,3,4,5,6,7,8];
console.log(a.join());// 1,2,3,4,5,6,7,8
console.log(a.join(”));// 12345678
console.log(a.join(‘@@’));// 1@@2@@3@@4@@5@@6@@7@@8
concat()可以將兩個數組合併在一起，如果是使用ES6語法也可以用擴展運算符…來代替。
let a=[1,2,3,4,5];
let b=[6,7,8,9];
let c=a.concat(b);
let d=[…a,…b];// 使用 …
console.log(c);// [1,2,3,4,5,6,7,8,9]
console.log(d);// [1,2,3,4,5,6,7,8,9]
slice()可以截取出數組某部份的元素為一個新的數組，有兩個必填的參數，第一個是起始位置，第二個是結束位置( 操作時數字減1 )。
let a=[1,2,3,4,5,6,7,8];
let b=a.slice(2,4);
console.log(b);// [3, 4]
map()會處理數組中每個元素，最後返回一個新的數組，裡頭有一個函數( 必填) 和一個返回函數里的this參數( 選填)，函數內又包含三個參數，第一個是每個元素的值( 必填)，第二個是當前元素的索引值( 選填)，第三個是當前的數組( 選填)。
let a=[1,2,3,4,5,6,7,8];
let b=a.map(e={returne+10;});
console.log(b);// [11, 12, 13, 14, 15, 16, 17, 18]
使用第二個和第三個參數的示例:
let a=[1,2,3,4,5,6,7,8];
let b=a.map((e,i,arr)={return`${e}${i}${arr.find(e=e%5==1)}`;// 組合成「元素 + 索引值 + 除以五餘數為1的第一個元素」});
console.log(b);// [‘101’, ‘211’, ‘321’, ‘431’, ‘541’, ‘651’, ‘761’, ‘871’]
如果要使用回調函數里this的參數，則「不能使用」箭頭函數，因為箭頭函數的this指向和函數的this指向不同，所以要用一般的函數處理。
let a=[1,2,3,4,5,6,7,8];
let b=a.map(function(e){
returne+this;// 此處的 this為10
},10);
console.log(b);// [11, 12, 13, 14, 15, 16, 17, 18]
reduce() 可以將數組中每個元素進行計算，每次計算的結果會再與下個元素作計算，直到結束為止，裡頭包含一個函數( 必填) 和初始計算的數值( 選填)，函數內有四個參數，第一個是計算的值( 必填)，第二個是取得的元素(必填)，第三個是該元素的索引值( 選填)，第四個是原本的數組(選填)。
let a=[1,2,3,4,5,6,7,8];
let b=a.reduce(function(total,e){returntotal+e;});
console.log(b);// 36 ( 1+2+3+4+5+6+7+8=36 )
reduceRight() 和reduce()大同小異，只是其計算方式是由右到左，對於加法來說沒什麼影響，但對於減法而言就有差異。
let a=[1,2,3,4,5,6,7,8];
let b=a.reduce(function(total,e){returntotal-e;});
console.log(b);// -34 ( 1-2-3-4-5-6-7-8 = -34 )
let c=a.reduceRight(function(total,e){returntotal-e;});
console.log(c);// -20 ( 8-7-6-5-4-3-2-1 = -20 )
flat()可以將一個多維數組的深度轉成一維(扁平化或稱作降維)，它有一個選填的參數，代表要轉換的深度數字，預設為1（只展開一層放到一維數組裡，如果是2，只展開2層放到一維數組裡），如果深度有很多層，可使用Infinity來全部展開成一維數組。
let a=[1,2,[3],[4,[5,[6]]]];
let b=a.flat();
let c=a.flat(2);
let d=a.flat(Infinity);
console.log(b);// [1, 2, 3, 4, [5, [6]]]
console.log(c);// [1, 2, 3, 4, 5, [6]]
console.log(d);// [1, 2, 3, 4, 5, 6]
flatMap()的方法等於map()和flat()的組合，在運算後直接將數組扁平化處理。
let a=[1,2,[3],[4,5]];
let b=a.flatMap(e=e+1);
let c=a.map(e=e+1).flat();
console.log(b);// [2, 3, “31”, “4,51”] ( 可以看到 b 和 c 得到的結果相同 )
console.log(c);// [2, 3, “31”, “4,51”]
Array.isArray()能判斷一個元素是否為數組，如果是就返回true，不然就返回false。
let a=[1,2,3,4,5,6,7,8];
let b=123;letc=’hello’;
let d={d1:1,d2:2};
console.log(Array.isArray(a));// true
console.log(Array.isArray(b));// false
console.log(Array.isArray(c));// false
console.log(Array.isArray(d));// false
Array.from()會將「類數組」或是「可迭代的對象」轉換成數組，Array.from()有兩個參數，第一個參數為「類數組對象」或「可迭代的對象」(必填)，第二個參數則是改變轉換成數組元素的函數(選填)。
類數組對象具有length 屬性以及索引化index 的元素，可迭代對象表示具有可以利用迭代的方式取得它自己本身的元素，例如Map 和Set…等。( 參考MDN 說法 )
let a=’abcde’;
let b=Array.from(a);
console.log(b);// [‘a’,’b’,’c’,’d’,’e’]
let c=Array.from(a,e=e+e);
console.log(c);// [‘aa’,’bb’,’cc’,’dd’,’ee’]
類數組對象寫法必須包含length 屬性，且對象的key須為0開始的數字，對應轉換後的元素索引。
let a={‘0′:14,’2′:13,’1′:7,’3′:9,’4’:6,length:5};
let b=Array.from(a);
console.log(b);// [14,7,13,9,6]
Array.of()可以快速將數字、字串等內容，轉換成數組。
let a=Array.of(1,’a’,2,’b’,3);
console.log(a);// [1, “a”, 2, “b”, 3]
toString()會把整個數組轉換成字符串。
let a=[1,2,3,4,5,6,7,8];
let b=a.toString();
console.log(b);// 1,2,3,4,5,6,7,8
every()會將數組中的「每一個」元素帶入指定的函數內做判斷，只要有任何一個元素不符合判斷條件，會回返回false，如果全部符合，就會回傳true。
let a=[1,2,3,4,5,6];
console.log(a.every(e=e3));// fasle ( 因為1、2 小於 3，3 等於 3 )
console.log(a.every(e=e0));// true
some()會將數組中的「每一個」元素帶入指定的函數內做判斷，只要有任何一個元素符合判斷條件，就會返回true，如果全都不符合，才會返回false。
let a=[1,2,3,4,5,6];
console.log(a.some(e=e3));// 返回 true，因為 4、5、6 大於 3
console.log(a.some(e=e6));// 返回 fasle，因為全都小於或等於 6
includes()會判斷數組中是否包含某個值，如果有包含就返回true，否則返回false，有兩個參數，第一個參數表示要判斷的值( 必填)，第二個參數表示從數組的哪個位置開始判斷( 選填)。
let a=[1,2,3,4,5,6,7,8];
console.log(a.includes(2));// true
console.log(a.includes(2,2));// false ( 在 3,4,5,6,7,8 查找有沒有 2 )
valueOf()會返回數組的原始值，如果原本的數組有修改，那麼返回的原始值也會跟着改變（相當淺複製）
let a=[1,2,3,4,5,6,7,8];
let b=a.valueOf();
console.log(a);// [1, 2, 3, 4, 5, 6, 7, 8]
let c=a.valueOf();
a.shift();
console.log(a);// [2, 3, 4, 5, 6, 7, 8]
console.log(b);// [2, 3, 4, 5, 6, 7, 8] ( 因為 a 的原始值更新了，所以 b 也變了 )
console.log(c);// [2, 3, 4, 5, 6, 7, 8]
keys()會返回數組中的每一個索引值( key )成為一個新的Array Iterator對象，因為是Array Iterator對象，可以使用for…of進行迭代。
let a=[‘a’,’b’,’c’,’d’,’e’];
let b=a.keys();
for(let key of b){
console.log(key);// 1、2、3、4、5
}
JavaScript學習筆記之數組基本操作示例
本文實例講述了JavaScript學習筆記之數組基本操作。分享給大家供大家參考，具體如下：
一、數組定義
1、定義
vara=[1,2,3]
vara=newArray(1,2,3);
2、長度
返回長度
script
vara=[1,2,3,4,5,6];
alert(a.length);
/script
設置長度
script
vara=[1,2,3,4,5,6];
a.length=2;
alert(a);
/script
二、數組連接
script
vara=[1,2,3];
varb=[4,5,6];
alert(a.concat(b));
alert(b.concat(a));
/script
三、數組排序
sort()函數
默認情況是把數組元素按字符串排序
例子
01
script
vararr=[‘float’,’width’,’alpha’,’zoom’,’left’];
arr.sort();
alert(arr);
/script
例子02
vararr=[12,8,99,19,112];
arr.sort();
alert(arr);
例子03
sort()函數的改進
vararr=[12,8,99,19,112];
arr.sort(function(n1,n2){
returnn1-n2;
});
alert(arr);
四、數組連接
1、兩個數組間的連接：contact()
script
vara=[1,2,3];
varb=[4,5,6];
alert(a.concat(b));
alert(b.concat(a));
/script
2、數組元素間的連接：join()
script
vararr=[1,2,3,4];
alert(arr.join(‘–p’));
/script
五、數組元素添加、刪除
1、數組尾部的添加、刪除
尾部添加：push(value)
例子01
script
vara=[1,2,3];
a.push(4);
alert(a);
/script
尾部刪除：pop()
例子02
script
vara=[1,2,3];
a.pop();
alert(a);
/script
2、數組頭部的添加、刪除
頭部添加
unshift(value)
例子01
script
vararr=[1,2,3];
arr.unshift(0)
alert(arr);
/script
頭部刪除:shift()
例子02
script
vararr=[1,2,3];
arr.shift();
alert(arr);
/script
3、數組——splice()
刪除數據
例子01
script
vararr=[1,2,3,4,5,6];
//splice(起點，長度)
arr.splice(2,3);
alert(arr);
/script
插入數據
例子02
script
vararr=[1,2,3,4,5,6];
//插入數據splice（起點，長度，元素）
arr.splice(2,0,’a’,’b’,’c’);
alert(arr);
/script
替換數據
例子02
script
vararr=[1,2,3,4,5,6];
//替換數據
arr.splice(2,2,’a’,’b’);
alert(arr);
/script
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：測試上述代碼運行結果。
更多關於JavaScript相關內容還可查看本站專題：《JavaScript數組操作技巧總結》、《JavaScript字符與字符串操作技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript排序算法總結》、《JavaScript查找算法技巧總結》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
您可能感興趣的文章:js數組與字符串的相互轉換方法js刪除數組元素、清空數組的簡單方法(必看)js數組循環遍曆數組內所有元素的方法JS
array
數組詳解js數組去重的三種常用方法總結JavaScript從數組中刪除指定值元素的方法JS數組的遍歷方式for循環與for…in向JavaScript的數組中添加元素的方法小結JS刪除數組裡的某個元素方法javascript
數組的定義和數組的長度Js數組的操作push,pop,shift,unshift等方法詳細介紹
js-數組-1
1：首先最基本的數組方法。push,pop,shift,unshift.
2:splice()最終返回的都是當前操作的數組，具體操作後的結果要看讀取原來的字符串。
3：splice(num,num,”n1″,”n1″).如左所示，可以增加，刪除，替換字符串。第一個數是開始的位置，第二個數是向後操作幾個數，第三個是要換的數組。
4：slice(num1,num2)是用來從已有的數組或字符串中提取返回特定的元素的。他是不會改變原來的字符串。
5：分號使用的原則：缺少的分號會有分號自動插入機制，但是者不可靠。規則是以塊結束的語句不要分號。
6：在調用數字變量的方法時，區分浮點數的點號還是調用方法的點運算符很重要。1..toString().
7:嚴格模式：為了讓js書寫變得更加好。
8：sort函數：主要用來對數組排序，默認情況下是將數組元素轉變成字符串，按照那個編碼比較，包括數字也是這樣比的。還是只比較第一個數字。。如果想要實現自己的自定義排序，就要在sort()裏面加自定義函數。
9：數組的話還得看那些forEach().Map().filter()
10:對象的比較不是值得比較，即使兩個對象包含相同的屬性，他們也不相同。
12:在Vue中檢測數組更新，包括變異方法：pop，unshift. splice(),sort(),reverse()
非變異方法：這些方法是不會返回原數組的，而是會加載一個新的數組。
11：一些字符串方法。
var text=document.getElementById(‘text’);
var lines=text.value.split(“\n”);
var result=”
“;
for(var i=0;i
result+=lines[i];
}
result+=””;
var div=document.getElementById(‘div’);
div.innerHTML=result;
// setInterval(function(){
// div.innerHTML=”sdfsdfsd”;
// },1000);
}
12:數組是從索引0開始的自然數到任意值的印射。這些值是成為數組的元素。
13：數組可以在作為索引到值得印射，換句話來說，數組可能不是連續的，中間可以有空缺。
14：其中沒有定義的是undefined.絕大數的js引擎都會自動去重，並連續保存元素。
15:數組也可有對象，並且可以擁有對象的屬性。但是並不認為那些屬性是實際數組的一部分。
16：多維數組的操作：var rows=[];for(var rowCount=0;rowCount5;rowCount++){rows[rowCount]=[];for(var colCount=0;colCount5;colCount++){rows[rowCount][colCount]=’.’}};rows[0][2]=’x’;rows.forEach(function(row){console.log(row.join(”))})當矩陣較小的且緯度固定，可以通過數組字面量來創建。
17：多維數組怎麼創建？var infos =
[
[‘小A’,’女’,21,’大一’],
[‘小B’,’男’,23,’大三’],
[‘小C’,’男’,24,’大四’],
[‘小D’,’女’,21,’大一’],
[‘小E’,’女’,22,’大四’],
[‘小F’,’男’,21,’大一’],
[‘小G’,’女’,22,’大二’],
[‘小H’,’女’,20,’大三’],
[‘小I’,’女’,20,’大一’],
[‘小J’,’男’,20,’大三’]
];var arr=[];
var n=0;
for(var i=0;iinfos.length;i++){
if(infos[I][3]==”大一”){arr[n]=infos[i];console.log(arr[n])}
}
n++;
}
18：另一種初始化的方法：var tArray = new Array();
for(var k=0;kp;K++){
tArray[k]=new Array(){
for(var j=0;jp;j++){
tArray[k][j]=””;
}
}
}然後在下面賦值。。。
19：數組索引之外的索引被視為普通的屬性值。他們不會作為數組元素呈現，也不會影響length的屬性。
20：in 操作符用來查看數組中是否有這個索引的值，這有必要麼？還有別的用么？
21：delete不僅可以刪除對象，還可以刪除數組內的元素，這個刪除不會產生空缺。不會更新length.
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/154412.html
微信掃一掃 
支付寶掃一掃 