把陣列轉換為字串

1.toString()

2.join()

洗掉元素和添加新元素

3.pop()

4.Push()

位移元素

5.shift()

6.unshift()

更改元素

7.length

拼接陣列

8.splice()

合并（連接）陣列

9.concat()

合并三個陣列

將陣列與值合并

裁剪陣列

10.slice()

陣列排序

11.sort()

數字排序

反轉陣列

12.reverse()

13.filter()

14.forEach()

15.every()

16.reduce()

17.findIndex()

18.some()

19.map()

20.indexOf()

21.find()

22.isArray()

1.copyWithin()

2.entries()

3.fill()

4.flat()

5.flatMap()

6.from()

7.includes()

8.keys()

9.lastIndexOf()

10.of()

11.reduceRight()

12.toLocaleString()

13.toSource()

14.values()

15.Array[@@species]

16.Array.prototype[@@iterator]()

把陣列轉換為字串

1.toString()

把陣列轉換為字串

把陣列轉換為陣列值（逗號分隔）的字串，

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 console.log(fruits.toString());

//  輸出結果
//  Banana,Orange,Apple,Mango

2.join()

join() 方法也可將所有陣列元素結合為一個字串，

和toString() 類似，但是您還可以規定分隔符：

var fruits = ["Banana", "Orange","Apple", "Mango"];
var res= fruits.join(" * "); 
console.log(res)

// Banana * Orange * Apple * Mango

洗掉元素和添加新元素

3.pop()

pop() 方法從陣列中洗掉最后一個元素：

回傳值:被“洗掉”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// fruits.pop();    從 fruits 洗掉最后一個元素（"Mango"）
var x = fruits.pop();     
 // x 的值是 "Mango"

4.Push()

push() 方法（在陣列結尾處）向陣列添加一個新的元素：

回傳值:新陣列的長度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

位移元素

5.shift()

shift() 方法會洗掉首個陣列元素，并把所有其他元素“位移”到更低的索引，

回傳值:被“位移出”的字串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();  
  // 從 fruits 洗掉第一個元素 "Banana"          
 // 回傳 "Banana"

6.unshift()

unshift() 方法（在開頭）向陣列添加新元素，并“反向位移”舊元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    
// 向 fruits 添加新元素 "Lemon"
// 回傳 5

更改元素

7.length

arr.length :回傳或設定一個陣列中的元素個數

length 屬性提供了向陣列追加新元素的簡易方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

通過使用它們的索引號來訪問陣列元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // 把 fruits 的第一個元素改為 "Kiwi"

拼接陣列

8.splice()

splice(index,num,其他引數...) 方法可用于向陣列添加新項:

第一個引數（2）定義了應添加新元素的位置（拼接），

第二個引數（0）定義應洗掉多少元素，

其余引數（“Lemon”，“Kiwi”）定義要添加的新元素，

splice() 方法回傳一個包含已洗掉項的陣列：

拼接新元素:

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 var a= fruits.splice(2, 0, "Lemon", "Kiwi");
 console.log(a);
 console.log(fruits);

// []
// ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']

使用 splice() 來洗掉元素

第一個引數（0）定義新元素應該被添加（接入）的位置，

第二個引數（1）定義應該洗掉多個元素，

其余引數被省略，沒有新元素將被添加，

          var fruits = ["Banana", "Orange", "Apple", "Mango"];
          var a=fruits.splice(0, 1);        // 洗掉 fruits 中的第一個元素
          console.log(a); // ['Banana']
          console.log(fruits); // ['Orange', 'Apple', 'Mango']

合并（連接）陣列

9.concat()

回傳值: 合并之后的新陣列

concat() 方法通過合并（連接）現有陣列來創建一個新陣列.

arr1.concat(要合并的陣列名)

合并兩個陣列

var Girls = ["Cecilie", "Lone"];
var Boys = ["Emil", "Tobias", "Linus"];
var Children = Girls.concat(Boys);   // 連接 myGirls 和 myBoys

console.log(Children); // ['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus']

concat() 方法不會更改現有陣列，它總是回傳一個新陣列，

concat() 方法可以使用任意數量的陣列引數：

合并三個陣列

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   
// 將arr1、arr2 與 arr3 連接在一起
console.log(myChildren);  
//['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus', 'Robin', 'Morgan']

concat() 方法也可以將值作為引數：

將陣列與值合并

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]); 
console.log(myChildren); 
 // ['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus']

裁剪陣列

10.slice()

回傳值:裁切出來的新陣列

slice() 方法用陣列的某個片段切出新陣列，

slice() 方法創建新陣列，它不會從原陣列中洗掉任何元素，

1個引數: slice(index)

從索引為index 的位置開始裁切

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);  
console.log(fruits);  //  ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
console.log(citrus);  // ['Apple', 'Mango']

2個引數: slice(開始位置,結束位置)

該方法會從開始引數選取元素，直到結束引數（不包括）為止，

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 
console.log(fruits);  //  ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
console.log(citrus);  //  ['Orange', 'Lemon']

陣列排序

11.sort()

回傳值:排序后的新陣列

sort() :以字母順序對陣列進行排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var s= fruits.sort();  
console.log(s );  // ['Apple', 'Banana', 'Mango', 'Orange']

數字排序

默認地，sort() 函式按照字串順序對值進行排序，

var points = [40, 100, 1, 5, 25, 10];
var s=  points.sort(function(a, b){return a - b}); 

console.log(s); // [1, 5, 10, 25, 40, 100]

反轉陣列

12.reverse()

reverse() :翻轉陣列中的元素，

回傳值:翻轉之后的陣列

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 對 fruits 中的元素進行排序  
// ['Apple', 'Banana', 'Mango', 'Orange']
var s= fruits.reverse();         // 反轉元素順序
console.log(s);  //  ['Orange', 'Mango', 'Banana', 'Apple']

13.filter()

arr.filter(callback[, thisArg])

filter()引數介紹：

callback 用來測驗陣列的每個元素的函式，呼叫時使用引數 (element, index, array) 回傳true表示保留該元素（通過測驗），false則不保留，

thisArg 可選，執行 callback 時的用于 this 的值，

回傳值:回傳一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素，

注意： filter() 不會對空陣列進行檢測，

注意： filter() 不會改變原始陣列，

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

14.forEach()

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

回傳值 : undefined

callback 為陣列中每個元素執行的函式，該函式接收一至三個引數：

currentValue 陣列中正在處理的當前元素，

index 可選陣列中正在處理的當前元素的索引，

array 可選 forEach() 方法正在操作的陣列，

thisArg 可選可選引數，當執行回呼函式 callback 時，用作 this 的值，

遍歷陣列

forEach() 方法對陣列的每個元素執行一次給定的函式，

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

15.every()

arr.every(callback(element[, index[, array]])[, thisArg])

element 當前值，

index 可選當前值的索引

array 可選當前陣列

thisArg 給回呼函式指定的 this 值

遍歷陣列并查詢是否所有元素都符合條件---回傳的是布林值

every() 方法測驗一個陣列內的所有元素是否都能通過某個指定函式的測驗，

回傳值:回傳一個布林值，

若收到一個空陣列，此方法在一切情況下都會回傳 true，

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

16.reduce()

arr.reduce(sum,item) 遍歷元素并求和

reduce() 方法對陣列中的每個元素執行一個由您提供的reducer函式(升序執行)，將其結果匯總為單個回傳值，

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

reducer 函式接收4個引數:

Accumulator (acc) (累計器)
Current Value (cur) (當前值)
Current Index (idx) (當前索引) 可選
Source Array (src) (源陣列) 可選
initialValue 回呼函式第一個引數的初始值可選

17.findIndex()

findIndex() :查找第一個滿足條件的元素的索引值 ==== 沒有符合條件的回傳-1

findIndex(callback[, thisArg])

callback 針對陣列中的每個元素, 都會執行該回呼函式, 執行時會自動傳入下面三個引數:

element 當前元素，

index 當前元素的索引，

array 呼叫findIndex的陣列，

thisArg 可選，執行 callback 時作為this物件的值.

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

18.some()

some() 方法測驗陣列中是不是至少有1個元素符合條件，它回傳的是一個Boolean型別的值，

注意：如果用一個空陣列進行測驗，在任何情況下它回傳的都是false，

語法;

arr.some(callback(element[, index[, array]])[, thisArg])

callback 回呼函式

element 當前元素

index 可選當前索引值

array 可選被呼叫的陣列

thisArg 執行 callback 時使用的 this 值，

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

19.map()

map() 方法創建一個新陣列，其結果是該陣列中的每個元素是呼叫一次提供的函式后的回傳值，

回傳值:回傳經過回呼函式處理后組成的新陣列，

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

callback 生成新陣列元素的函式，使用三個引數：

currentValue callback 陣列中正在處理的當前元素，

index可選 callback 陣列中正在處理的當前元素的索引，

array可選 map 方法呼叫的陣列，

thisArg可選執行 callback 函式時值被用作this，

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

20.indexOf()

indexOf() 回傳在陣列中可以找到一個給定元素的第一個索引，如果不存在，則回傳-1，

arr.indexOf(searchElement[, fromIndex])

searchElement 要查找的元素

fromIndex 可選

開始查找的位置，如果該索引值大于或等于陣列長度，意味著不會在陣列里查找，回傳-1，如果引數中提供的索引值是一個負值，則將其作為陣列末尾的一個抵消，即-1表示從最后一個元素開始查找，-2表示從倒數第二個元素開始查找，以此類推，注意：如果引數中提供的索引值是一個負值，并不改變其查找順序，查找順序仍然是從前向后查詢陣列，如果抵消后的索引值仍小于0，則整個陣列都將會被查詢，其默認值為0.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

21.find()

find() 方法回傳陣列中滿足條件的第一個元素的值，否則回傳undefined

arr.find(callback[, thisArg])

callback 執行的回呼函式，接收 3 個引數：

element 當前元素，

index 可選當前索引，

array 可選陣列本身，

thisArg 可選執行回呼時用作this 的物件，

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

22.isArray()

Array.isArray() 用于確定傳遞的值是否是一個陣列.

Array.isArray(obj)

obj 需要檢測的值，

回傳值: 回傳布林值如果是陣列則為true; 否則為false，

Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false

以上是常見的陣列方法:

下面會更新不常用的方法,盡情期待吧~

1.copyWithin()

copyWithin() 方法淺復制陣列的一部分到同一陣列中的另一個位置，并回傳它，不會改變原陣列的長度，

arr.copyWithin(target[, start[, end]])

const array1 = ['a', 'b', 'c', 'd', 'e'];

// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]

// copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
// expected output: Array ["d", "d", "e", "d", "e"]

2.entries()

3.fill()

4.flat()

5.flatMap()

6.from()

7.includes()

8.keys()

9.lastIndexOf()

10.of()

11.reduceRight()

12.toLocaleString()

13.toSource()

14.values()

15.Array[@@species]

Array[@@species] 訪問器屬性回傳 Array 的建構式，

arr[Symbol.species]

回傳值: arr的建構式

16.Array.prototype[@@iterator]()

陣列的 iterator 方法，默認情況下，與 values() 回傳值相同， arr[Symbol.iterator] 則會回傳 values() 函式，

arr[Symbol.iterator]()

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/341907.html

標籤：其他

上一篇：陣列的去重

下一篇：vue中組件的props屬性（詳）

javascript中的陣列方法

把陣列轉換為字串

1.toString()

2.join()

洗掉元素和添加新元素

3.pop()

4.Push()

位移元素

5.shift()

6.unshift()

更改元素

7.length

拼接陣列

8.splice()

合并（連接）陣列

9.concat()

合并三個陣列

將陣列與值合并

裁剪陣列

10.slice()

陣列排序

11.sort()

數字排序

反轉陣列

12.reverse()

13.filter()

14.forEach()

15.every()

16.reduce()

17.findIndex()

18.some()

19.map()

20.indexOf()

21.find()

22.isArray()

1.copyWithin()

2.entries()

3.fill()

4.flat()

5.flatMap()

6.from()

7.includes()

8.keys()

9.lastIndexOf()

10.of()

11.reduceRight()

12.toLocaleString()

13.toSource()

14.values()

15.Array[@@species]

16.Array.prototype[@@iterator]()