1. 程式人生 > >JS中陣列的常用方法(包含es6擴充套件)

JS中陣列的常用方法(包含es6擴充套件)

1、 join()

 功能:將陣列中所有元素都轉化為字串並連線在一起。
 輸入: 分隔符,預設為逗號
 輸出:分隔符分割的字串
 舉例:
var a = [1,2,3];
a.join(); // =>"1,2,3"
a.join(";");// =>"1;2;3"

2、 reverse()

功能:將陣列中的元素顛倒順序。
輸入:無
輸出:逆序的陣列
舉例:
var a = [1,2,3];
a.reverse.join()// =>"3,2,1"

3、sort()
功能:將陣列中的元素
輸入:比較函式或null。null時表示按照字母表順序排序;傳入帶兩個引數的比較函式時;第一個引數在前,則返回小於0的數值;第一個引數在後,則返回大於0的陣列
輸出:排序後陣列
注意:改變了原陣列
舉例:

var a = [22,33,11111,4444];
a.sort();// =>11111,22,33,4444
a.sort(function(a,b){
    return a-b;
});// => 22,33,4444,11111
a.sort(function(a,b){return b-a})// =>11111,4444,33,22

4、concat()
功能:陣列拼接的功能
輸入:待拼接的元素;如果引數中有陣列,則連線的是陣列元素,而非陣列本身;但是不支援遞迴,不修改呼叫的陣列。
輸出:拼接後的新陣列
注意:新建的陣列,原陣列不改變。
舉例:

var a = [1,2,3];
a.concat(4,5) // =>[1,2,3,4,5]
a.concat([4,5]) // =>[1,2,3,4,5]
a.concat(4,[5,[6,7]]) //[1,2,3,4,5,[6,7]]

5、slice()
功能:獲取原陣列的片段或子陣列
輸入:片段的開始和結束
輸出:返回的陣列包含第一個引數指定的位置和所有到但不含第二個引數指定位置之間的所有元素。如果為負數,表示相對於陣列中最後一個元素的位置。
注意:新建的陣列,原陣列不改變。
舉例:

var a = [1,2,3,4,5];
a.slice(0,3);// =>[1,2,3]
a.slice(3);// =>[4,5] a.slice(1,-1)// =>[2,3,4]

6、splice()
功能:從陣列中刪除元素、插入元素到陣列中或者同事完成這兩種操作。
輸入:第一個引數為指定插入或刪除的起始位置,第二個引數為要刪除的個數。之後的引數表示需要插入到陣列中的元素
輸出:返回一個由刪除元素組成的陣列。
注意:新建了一個數組,並修改了原陣列
舉例:

var a = [1,2,3,4,5,6,7,8];
a.splice(4) // =>[5,6,7,8];a [1,2,3,4]
a.splice(2,0,'a','b') // =>[];a [1,2,a,b,3,4]

7、push()和pop()
功能:push從陣列尾部新增一個或多個元素,並返回陣列新的長度;pop返回最後一個元素
輸入:push輸入為插入的元素;pop輸入為空
輸出:push為新長度;pop為返回的陣列元素
舉例:

var stack = [];
stack.push(1,2);// =>stack:[1,2],返回2
stack.pop;// => stack: [1],返回2

8、unshift()和shift
功能:類似push和pop,不同是從頭部插入和刪除,而非尾部

9、toString()和toLocaleString()
功能:將陣列的每個元素轉化為字串,並且輸入用逗號分隔的字串列表。功能類似join();
輸入:無
輸出:字串
舉例:

[1,2,3].toString() // =>'1,2,3'

***********以下為es5中新增的9個方法*********
10、forEach()
功能:從頭至尾遍歷陣列,為每個元素呼叫指定函式
輸入:輸入為一個待遍歷函式,函式的引數依次為:陣列元素、元素的索引、陣列本身
輸出:只是執行了遍歷函式,無特定返回
舉例:

var data = [1,2,3,4,5];
data.forEach(function(v,i,a){a[i] = v + 1;});
data // =>[2,3,4,5,6]

11、map()
功能:呼叫的陣列的每一個元素傳遞給指定的函式,並返回一個新陣列
輸入:和forEach一樣
輸出:執行完函式的新陣列
注意:返回新陣列,不修改原陣列
舉例:

a = [1,2,3];
b = a.map(function(x){return x*x;}); // =>[1,4,9]

12、filter()
功能:將陣列元素執行特定函式,而返回一個子集。
輸入:執行邏輯判斷的函式,該函式返回true或false,引數類似forEach和map()
輸出:如果執行輸入函式返回值為true,則傳遞給判定函式的元素是這個子集的成員
舉例:

a = [5,4,3,2,1];
smallvalues = a.filter(function(x){return x<3});// =>[2,1]

13、every()和some()
功能:對陣列元素進行指定函式的邏輯判斷。
輸入:特定函式
輸出:true 或者false
舉例:

var a = [1,2,3,4,5];
a.every(function(x){return x<10;}) // =>true

14、reduce()和reduceRight()
功能:使用指定的函式將陣列元素進行組合,生成單個值。
輸入:兩個引數,第一個是執行化簡操作的函式。第二個(可選)的引數是一個傳遞給函式的初始值。
注意:執行化簡的函式的第一個引數為目前為止化簡操作累積的結果。
15、indexOf()和lastIndexOf()
功能:搜尋整個陣列中具有給定值得元素,返回找到的第一個元素的索引或者如果沒有找到就返回-1.lastIndexOf為反向搜尋。
輸入:元素的值。
輸入:索引值

*************************華麗分割ES6擴充套件*************************
16、Array.from()
功能:將兩類物件轉為真正的陣列:類似陣列的物件和可遍歷的物件
輸入:待轉換的物件,第二個引數可選,作用類似於陣列的map方法,用來對每個元素進行處理,將處理後的值放入返回的陣列。
輸入:陣列
舉例:

let arrayLike = {
       '0':'a',
       '1':'b',
       '2':'c',
       length:3
};
let arr2 = Array.from(arrayLike);// =>['a','b','c']

17、Array.of()
功能:將一組值,轉換為陣列。
輸入:陣列元素
輸出:陣列
舉例:

Array.of(2,11,3)// =>[2,11,3]
Array.of(3)// =>[3]

18、copyWithin()
功能:在當前陣列內部,將指定位置的成員複製到其他位置,返回當前陣列。
輸入:第一個引數(從該位置開始替換資料);第二個引數可選(從該位置開始讀取資料,預設為0,負值表示倒數);第三個引數(到該位置前停止讀取,預設為陣列長度)
輸出:返回當前替換後的陣列。
注意:改變了當前陣列
舉例:

[1, 2, 3, 4, 5].copyWithin(0, 3) //=> [4, 5, 3, 4, 5]

19、find()和findIndex()
功能:找到第一個符合條件的陣列成員。
輸入:回撥函式,所有陣列成員依次執行該函式,直到找到第一個返回值為true的成員。回撥函式可以接受三個引數,依次為值,位置,原陣列。
輸出:find()返回找到的成員;findIndex()返回成員的位置。
舉例:

[1,5,10,15].find(function(value,index,arr){
    return value > 9;
})// =>10

20、fill()
功能:使用給定的值,填充一個數組。
輸入:第一個引數為待填充的值,第二和第三引數可選,分別表示填充的起始和結束位置(不包括)。
輸出:填充後的陣列
舉例:

['a', 'b', 'c'].fill(7, 1, 2)
// =>['a', 7, 'c']

21、entries()、keys()、values()
功能:用於遍歷陣列,可以用for…of迴圈進行遍歷。區別是keys()是對鍵名的遍歷、values是對鍵值的遍歷、entries()是對鍵值對的遍歷。
輸入:無
輸出:遍歷器物件
舉例:

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// =>0
// =>1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// =>'a'
// =>'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// =>0 "a"
// =>1 "b"

如果不使用for…of迴圈,可以手動呼叫遍歷器物件的next方法,進行遍歷。

22、includes()
功能:表示某個陣列是否包含給定的值
輸入:第一個引數必選(待檢查的給定值),第二個引數可選,表示搜尋的起始位置,預設為0,負數表示倒數的位置。
輸出:一個布林值。
注意:和indexOf的區別,indexOf進行了運算子的強比對,會導致對NaN誤判。
舉例

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, NaN].includes(NaN); // true

相關推薦

JS陣列常用方法(包含es6擴充套件)

1、 join() 功能:將陣列中所有元素都轉化為字串並連線在一起。 輸入: 分隔符,預設為逗號 輸出:分隔符分割的字串 舉例: var a = [1,2,3]; a.join(); // =>"1,2,3" a.join(";");//

js陣列常用方法總結

  運算元組 運算元組,印象中運算元組的方法很多,下面總結了一下陣列中常用的幾個方法: JavaScript中建立陣列有兩種方式 (一)使用 Array 建構函式:   var arr1 = new Array(); //建立一個空陣列var arr2 = new Array(

js陣列常用方法的簡單重構(部分),幫助你加快理解陣列常用方法

## `push` 將指定數字插入到陣列的末尾,返回值為`新陣列的長度` ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; ary.length = 5; ary.push(1) ; ary = [1,2,3,4,5,1

JavaScript常用陣列操作方法,包含ES6方法

一、concat() concat() 方法用於連線兩個或多個數組。該方法不會改變現有的陣列,僅會返回被連線陣列的一個副本。 ? 1

原生js常用方法的寫法

sar number charat [] typeof += eat fat array對象 1、js深度克隆的方法 //第一種 function deepClone(obj){ var str,newObj = obj i

js陣列方法總結

js中陣列的方法很多,經常都翻書看,無奈老是記不住,一到用的時候就忘了,大概還是因為用的少,也可能是因為方法確實太多,據不完全統計有23種。。。所以在這裡總結一下,當是記個筆記。 1、join() join(separator): 將陣列的元素組起一個字串,以separator為分隔符,省略

js陣列常用邏輯演算法(從大到小,從小到大排序,去重等問題)

從小到大: // 從小到大順序排序 minSort (arr) { var min for (var i = 0; i < arr.length; i++) { for (var j = i; j < arr.le

js陣列常用的API

第一組:操作方法 1.concat():基於當前陣列,建立一個新的陣列,並返回這個新陣列,不會改變原陣列; var color = ["red","green","blue"]; var colors2 = color.concat("yellow",["b

java陣列常用方法總結

Java和C陣列的一些異同: 相同點:陣列名都是首元素的地址 不同點:C語言宣告變數可以直接定義陣列長度,java不可以                 java只有在為陣列分配變數時,可以宣告陣列長度                 java:int  [] a;    

JS一些常用陣列方法

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

jsArray陣列常用方法彙總

Array的push與unshift方法效能比較分析 從原理就可以知道,unshift的效率是較低的。原因是,它每新增一個元素,都要把現有元素往下移一個位置。unshift比push要慢差不多100

js區分物件與陣列常用方法

如果你只是用typeof來檢查該變數,不論是array還是object,都將返回‘object'。 1,Object.prototype.toString.call(obj) 判斷陣列 物件 Ob

熟悉JS常用選擇器及屬性、方法的調用

model bower 文本 font [1] 選擇 val yellow width 選擇器、屬性及方法調用的配合使用: <style> #a{ width: 200px; he

JS陣列方法詳解

JS中陣列的方法有很多,但是自己一直沒有抽時間進行整理分類,故單獨寫一篇博文,對目前我所掌握的JS中陣列相關的方法進行整理,夯實一下自己的基礎。 我將陣列相關的方法分為兩類 1.方法會改變原陣列 相應的方法有:shift、unshift、pop、push、rev

一些常用 js 對於 陣列 字串 方法總結

一 、陣列concat連線 var arrayA = [1,2,3] var arrayB = [4,5,6] var arrayC = [7,8,9] console.log(arrayA.concat(arrayB)) //(6) [1,2,3,4,5,6] console.log(

js陣列遍歷的幾種方法及其區別

第一種最常用的:for迴圈  for(j = 0; j < arr.length; j++) { }  優化版for迴圈   for(j = 0,len=arr.length; j < len; j++) {

js陣列和字串的方法總結

一、陣列方法簡單總結為以下幾種   1、原有:     增、刪、改、截、拼、復、排、轉   2、ES5擴充套件:   查、遍歷 增:        前增 var arr = [3,4,5,6,7]; console.log(arr.unshift(

js陣列除重方法大全

Array型別是js中的三大引用型別之一; Array中的每一項都可以用來儲存任何型別的資料,所以在陣列除重過程中就得考慮周全,下面將要介紹幾種陣列除重方式: (1)由於indexOf對陣列又迴圈了一次,所以效能不是最佳,加之indexOf在ie9以下不相容; (2) 由於雜湊表,

JS陣列與物件的遍歷方法例項

一、陣列的遍歷: 首先定義一個數組 arr=['snow','bran','king','nightking']; 1、for迴圈,需要知道陣列的長度; 2、foreach,沒有返回值,可以不知道陣列長度; arr.forEach(function(ele,index

JS陣列方法的底層實現

原始碼地址: https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js 陣列變異方法(即改變原陣列):shift、unshift、splice、push、pop、sor