JS中數組常用的方法(詳解)

1.map

let arrNew = arr.map(x => x*2)
console.log(arr);  // [1, 2, 3, 4]
console.log(arrNew);  // [2, 4, 6, 8]
  • map() 方法返回一個新數組,數組中的元素爲原始數組元素調用函數處理後的值。
  • map() 方法按照原始數組元素順序依次處理元素。
  • 注意: map() 不會對空數組進行檢測。
  • 原數組保持不變,返回新數組

2.forEach

arr.forEach( item => item*2 )  // return undefined
console.log(arr);  // [1, 2, 3, 4]
  • 原數組改變,沒有返回值

3.filter 過濾元素

let arr = [1, 2, 3, 4, 5]
const isBigEnough = value => value >= 3
let newArr = arr.filter(isBigEnough )
console.log(newArr);  // [3, 4, 5]
  • 原數組不改變,將滿足條件的元素作爲一個新數組返回

4.find 返回通過測試的數組的第一個元素的值

        在第一次調用 callback 函數時會確定元素的索引範圍,因此在 find 方法開始執行之後添加到數組的新元素將不會被 callback 函數訪問到。被刪除的元素仍舊會被訪問到。

var arr = [1,2,3,4,5,6,7];
var ar = arr.find(function(elem){
    return elem>5;
});
console.log(ar);//6
console.log(arr);//[1,2,3,4,5,6,7]

find()方法爲數組中的每個元素都調用一次函數執行,當數組中的元素在測試條件時返回true,find()返回符合條件的元素,之後的值不會再執行函數。如果沒有符合條件的元素則返回undefined。

5.every 是否所有元素都符合條件

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
console.log(ages.every(checkAdult))  // false
  • 不改變原數組。如果有一個元素不滿足,返回false;全部滿足才返回true

6.some 是否存在元素符合條件

var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
console.log(ages.some(checkAdult))  // true
  • 不改變原數組。如果有一個元素滿足,返回true;全部不滿足則返回false

7.reduce 所有元素返回調用函數,返回值爲最後結果

let arr = [1,2,3,4];
const add1 = (a,b) => a+b;
let arrNew = arr.reduce(add1);
console.log(arrNew);  // 10
  • 不改變原數組,只是返回最後的調用結果。
  • 返回單個值

8.push 在數組最後添加新元素

let arr = [1,2,3,4,5];
arr.push(6);  // console.log(arr.push(6))  => return 6
console.log(arr);  // [1, 2, 3, 4, 5, 6]
  • 改變數組長度。返回數組的長度

9.pop 在數組最後刪除一個元素

let arr = [1,2,3,4,5];
console.log(arr.pop());  // 5
console.log(arr);  // [1, 2, 3, 4]
console.log(arr.length);  // 4
  • 改變數組長度。返回被刪除的元素

10.shift 在數組前刪除第一個元素

let arr = [1,2,3,4,5];
console.log(arr.shift());  // 1
console.log(arr);  // [2, 3, 4, 5]
console.log(arr.length);  // 4
  • 改變數組長度。返回被刪除元素

11.unshift 將一個/多個元素添加到數組開頭

let arr = [1,2,3,4,5];
console.log(arr.unshift(6,7));  // 7  返回加進去的第一個數
console.log(arr);  // [6, 7, 1, 2, 3, 4, 5]  先把7加進去,再加7
console.log(arr.length);  // 7
  • 改變數組長度。返回加進數組的第一個數

12.isArray()

判斷一個對象是不是數組,返回的是布爾值

13.concat 拼接數組

let arr1 = [1, 2, 3]
let arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr)  //[1, 2, 3, 4, 5]

14.將數組轉化成字符串

  1. Array.toString()
let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(str) // 1,2,3,4,5

     2.Array.join() :可以設置元素間的間隔

let arr = [1, 2, 3, 4, 5];
let str1 = arr.join("");  // 12345
let str2 = arr.join('--');  // 1--2--3--4--5
let str3 = arr.join('##');  // 1##2##3##4##5

補充:字符串分割成字符串數組 split

stringObject.split(separator,howmany)
//  separator:分隔符,字符串或正則表達式; howmany 返回的數組的最大長度
"2:3:4:5".split(":")	//將返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//將返回["", "a", "b", "c"]
// 把句子分割成單詞:
var words = sentence.split(' ')
// 或者使用正則表達式作爲 separator:
var words = sentence.split(/\s+/)  // \s是不可見字符,空格、換行符、製表符等。

15.splice 萬能,實現增刪改

// 刪除  splice(1,3)  參數:刪除位置;刪除個數
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.splice(1,3)
console.log(arr);  // [1, 5]
console.log(arr1);  // [2, 3, 4]  改變原數組,返回被刪除的元素
// 插入  splice(2,0,"hhh")  參數:插入位置;0:不刪除;插入內容
let arr = [1, 2, 3, 4, 5];
var arr1 = arr.splice(2,0,"hhh")
console.log(arr);  // [1, 2, "hhh", 3, 4, 5]
console.log(arr1);  // []  沒有返回值,因爲沒有刪除元素
// 清空
let arr = [1, 2, 3, 4, 5];
arr.splice(0)
console.log(arr);  // []

16.slice 從數組指定位置輸出新數組

let arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 4));  // [2, 3, 4]
console.log(arr);  // [1, 2, 3, 4, 5]
  • 不改變數組,返回新數組
  • slice(1):從位置1開始
  • slice(1,4):從位置1開始,到位置4-1。 區別於splice

17.sort 排序

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); 
// Apple,Banana,Mango,Orange  默認升序
let arr = [1, 2, 3, 4, 5];
arr.sort(function (a,b) {
    return b-a;  // b-a:降序;a-b:升序。
})
console.log(arr);  // [5, 4, 3, 2, 1]

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章