js中常用的數組方法整理

數組轉字元串（join）

數組排序（sort()）--待核實

反轉數組項的順序（reverse()）

截取數組（slice()）

周遊數組（forEach()、map()、filter()、every()、some()）

增加（push()、unshift()、concat()）

删除（pop()、shift()）

增删改（splice()）--重點

查找（indexOf()從前往後、lastIndexOf()從後往前）

數組轉字元串（join）--原數組不變

join，就是把數組轉換成字元串，然後給他規定個連接配接字元，預設的是逗号( ，)

書寫格式：join(" ")，括号裡面寫字元串 ("要加引号")

var arr = [1,2,3];
console.log(arr.join()); 　　　　// 1,2,3
console.log(arr.join("-")); 　　// 1-2-3
console.log(arr); 　　　　　　　// [1, 2, 3]（原數組不變）

數組排序（sort()）--待核實

sort()：将數組裡的項從小到大排序

書寫格式：arr.sort( )

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); 　　　　　　　　　　// ["a", "b", "c", "d"]

以上 sort()方法比較的是字元串，沒有按照數值的大小對數字進行排序，要實作這一點，就必須使用一個排序函數，如下：

function sortNumber(a,b)
{
　　return a - b
}

arr = [13, 24, 51, 3]; console.log(arr.sort()); 　// [13, 24, 3, 51] 
console.log(arr.sort(sortNumber)); 　　　　       // [3, 13, 24, 51](數組被改變)

反轉數組項的順序（reverse()）

reverse()：反轉數組項的順序。

書寫格式：arr.reverse( )

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); 　　　　　　　　//[3, 51, 24, 13]
console.log(arr); 　　　　　　　　　　　　　　//[3, 51, 24, 13](原數組改變)

截取數組（slice()）--原數組不變

slice()：傳回從原數組中指定開始下标到結束下标之間的項組成的新數組。

slice()方法可以接受一或兩個參數，即要傳回項的起始和結束位置。

在隻有一個參數的情況下， slice()方法傳回從該參數指定位置開始到目前數組末尾的所有項。

如果有兩個參數，該方法傳回起始和結束位置之間的項——但不包括結束位置的項。

書寫格式：arr.slice( 1 , 3 )

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); 　　　　　　　　　　　　　　//[1, 3, 5, 7, 9, 11](原數組沒變)
console.log(arrCopy); 　　　　　　　　　　　 //[3, 5, 7, 9, 11]
console.log(arrCopy2); 　　　　　　　　　　　//[3, 5, 7]
console.log(arrCopy3); 　　　　　　　　　　　//[3, 5, 7]
console.log(arrCopy4); 　　　　　　　　　　　//[5, 7, 9]

周遊數組（forEach()、map()、filter()、every()、some()）

forEach()：對數組進行周遊循環，對數組中的每一項運作給定函數。這個方法沒有傳回值。

參數都是function類型，預設有傳參，參數分别為：周遊的數組内容(item)；第對應的數組索引(index)，數組本身(a)。

　　　　書寫格式：arr.forEach()

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, a){
    console.log(item + '|' + index + '|' + (a === arr));
});
// 輸出為：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

map()：指“映射”，對數組中的每一項運作給定函數，傳回:每次函數調用的結果組成的數組。

　　　　書寫格式：arr.map()

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
    return item*item;
});
console.log(arr2); 　　　　　　　　//[1, 4, 9, 16, 25]

filter()：“過濾”功能，數組中的每一項運作給定函數，傳回:滿足過濾條件組成的數組。

　　　　書寫格式：arr.filter()

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(item, index) {
return index % 3 === 0 || item >= 8;
}); 
console.log(arr2); 　　　　　　　　//[1, 4, 7, 8, 9, 10]

every()：判斷數組中每一項都是否滿足條件，隻有所有項都滿足條件，才會傳回true。傳回的是布爾值

　　　　書寫格式：arr.every()

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(item) {
return item < 10;
}); 
console.log(arr2); 　　　　　　　　//true
var arr3 = arr.every(function(item) {
return item < 3;
}); 
console.log(arr3); 　　　　　　　　// false

some()：判斷數組中是否存在滿足條件的項，隻要有一項滿足條件，就會傳回true，周遊随即終止。傳回的是布爾值

　　　　書寫格式：arr.some()

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(item) {
return item < 3;
}); 
console.log(arr2); 　　　　　　　　//true
var arr3 = arr.some(function(item) {
return item < 1;
}); 
console.log(arr3); 　　　　　　　　// false

增加（push()、unshift()、concat()）

push(): 把裡面的内容添加到數組末尾，并傳回修改後的長度。

書寫格式：arr.push(" ")，括号裡面寫内容 ("字元串要加引号")

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count.length); 　　　　　　　　　　// 5
console.log(count); 　　　　　　　　　　　     // ["Lily", "lucy", "Tom", "Jack", "Sean"]

unshift:将參數添加到原數組開頭，并傳回數組的長度。

書寫格式：arr.unshift(" ")，括号裡面寫内容 ("字元串要加引号"),

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count.length); 　　　　　　　　　　// 5
console.log(arr); 　　　　　　　　　　　　　　　//["Jack", "Sean", "Lily", "lucy", "Tom"]

concat() ：将參數添加到原數組中。

這個方法會先建立目前數組一個副本，然後将接收到的參數添加到這個副本的末尾，最後傳回新建構的數組。在沒有給 concat()方法傳遞參數的情況下，它隻是複制目前數組并傳回副本。

書寫格式：arr.concat()，括号裡面寫内容 ("字元串要加引号"),

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); 　　　　　　　　　　　　//[1, 3, 5, 7, 9, 11, 13]
console.log(arr); 　　　　　　　　　　　　　　// [1, 3, 5, 7](原數組未被修改)

删除（pop()、shift()）

pop()：移除數組最後一項，傳回移除的那個值，減少數組的length。

書寫格式：arr.pop( )

var arr = ["Lily","lucy","Tom"];
var item = arr.pop();
console.log(item); 　　　　　　　　　　 // Tom
console.log(arr); 　　　　　　　　　　  // ["Lily", "lucy"]

shift()：删除原數組第一項，并傳回删除元素的值；如果數組為空則傳回undefined 。

var arr = ["Lily","lucy","Tom"];
var item = arr.shift();
console.log(item); 　　　　　　　　　　　　　　// Lily
console.log(arr); 　　　　　　　　　　　　　　 // ["lucy", "Tom"]

增删改（splice()）--重點--改變原數組

splice()：删除、插入和替換。傳回：删除項組成的數組。改變原數組

删除：指定 2 個參數：要删除的第一項的位置和要删除的項數。

　　　　書寫格式：arr.splice( 0, 2 )

插入：可以向指定位置插入任意數量的項，隻需提供 3 個參數：起始位置、 0（要删除的項數）和要插入的項。

　　　　書寫格式：arr.splice( 2,0,4,6 )

替換：可以向指定位置插入任意數量的項，且同時删除任意數量的項，隻需指定 3 個參數：起始位置、要删除的項數和要插入的任意數量的項。插入的項數不必與删除的項數相等。

　　　　書寫格式：arr.splice(1,1,2,4)

var arr = [1,3,5,7,9,11];
// 删除
var arrRemoved = arr.splice(0,2);
console.log(arr); 　　　　　　　　　　　　　　　//[5, 7, 9, 11]
console.log(arrRemoved); 　　　　　　　　　　　//[1, 3]

var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); 　　　　　　　　　　　　　　　// [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); 　　　　　　　　　　// []

var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); 　　　　　　　　　　　　　　　// [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); 　　　　　　　　　　//[7]

查找（indexOf()從前往後、lastIndexOf()從後往前）

找索引：

indexOf()：接收兩個參數：要查找的項和表示查找起點位置的索引（可選的）。其中，從數組的開頭（位置 0）開始向後查找。

　　　　書寫格式：arr.indexOf( 5 )

lastIndexOf：接收兩個參數：要查找的項和表示查找起點位置的索引（可選的）。其中，從數組的末尾開始向前查找。

　　　　書寫格式：arr.lastIndexOf( 5,4 )

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); 　　　　　　//2
console.log(arr.lastIndexOf(5)); 　　　 //5
console.log(arr.indexOf(5,2)); 　　　　 //2 待核實
console.log(arr.lastIndexOf(5,4)); 　　//2，待核實
console.log(arr.indexOf("5")); 　　　　//-1

js中常用的數組方法整理

數組轉字元串（join）--原數組不變

數組排序（sort()）--待核實

反轉數組項的順序（reverse()）

截取數組（slice()）--原數組不變

周遊數組（forEach()、map()、filter()、every()、some()）

增加（push()、unshift()、concat()）

删除（pop()、shift()）

增删改（splice()）--重點--改變原數組

查找（indexOf()從前往後、lastIndexOf()從後往前）

繼續閱讀

用JS模拟實作二叉樹(含周遊)

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

關于 underscore 中模闆引擎的應用示例

underscore模闆功能的使用和學習

【JavaScript文法】函數對象的淺拷貝、深拷貝

CSS之折疊菜單

JS--運算符

數組和類數組

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

jquery_126_demo

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題