記錄一下常用的陣列和物件的一些方法

1. 陣列

• push() 陣列後新增元素

// 作用：把一個元素或多個元素，從陣列後面新增到數組裡面；
// 引數：新增的資料
// 返回：新增後的陣列的長度；
let arr = [1, 2, 3];
arr.push(5, "6");

• find() 陣列中找出符合條件的第一個元素

let result = [].find(function(item,index,self){ 
    return true;
});

// 回撥函式有三個引數，分別表示：陣列元素的值、索引、整個陣列
// 如果某次迴圈返回的是true，find方法的返回值就是滿足這個條件的第一個元素。
// 如果沒有找到會返回undefined。

// 用法：找陣列中第一個小於0的數字
let arr = [1, 2, 4, 0, -4, 3, -2, 9];
let result = arr.find(function (item) {
    return item < 0;  
});
let result =arr.find(item=>item<0)  // -4
 

• findIndex 獲得指定陣列元素下標

// 引數：函式（被傳入的函式，回撥函式）
//      格式要求：
//          item  回撥函式，代表每一次遍歷的資料
//          return 判斷條件
// 返回：滿足條件的第一個元素的下標，若沒有，返回-1；
var index = arr.findIndex(function(item) {
    return item === 20;
});
console.log(index);

// 根據 nowArticleID 把其在 articleList 陣列中的下標給獲得到
const index = this.articleList.findIndex(
    item => item.art_id === this.nowArticleID
)
 

• pop 陣列後置刪除元素

// 作用：從陣列的後面刪除一個元素
// 引數：無；
// 返回：被刪除的元素；

var arr = [2,5,9,8,7,6]
var res = arr.pop();
console.log(arr, res); 

• unshift 陣列前置追加元素

  // 作用：從陣列前面新增資料（一個或者多個）
  // 引數：一個或者多個；
  // 返回：新增後的陣列的長度

  var l = arr.unshift("a", "b");
  console.log(arr, l);

• shift 陣列前置刪除元素

// 作用：從陣列的前面刪除一個元素
// 引數：無；
// 返回：被刪除的元素；

var arr = [2,5,9,8,7,6]
var res = arr.shift();
console.log(arr, res);
 

• map陣列對映
  map對映方法：對陣列進行遍歷，返回一個新陣列，元素個數與被處理陣列一致，但是元素的value值是map處理過的。map對映方法：對陣列進行遍歷，返回一個新陣列，元素個數與被處理陣列一致，但是元素的value值是map處理過的。

// 獲取頻道的全部id，以陣列格式返回
const userChannelIds = this.channelList.map(item => {
    return item.id
})

var a = [1,2,3,4,5]
var b = a.map(function(current,index,array){
    return current + 1
})
 
console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]

• filter陣列過濾
  filter方法，對陣列的元素進行過濾，把符合條件的元素重新組成陣列返回。

// 作用：對當前陣列一定的過濾；
// 引數：函式（函式）格式要求：
//      函式引數：item,index,arr
//      item：每個資料
//      index：下標；
//      arr：當前遍歷的陣列；
//      return 過濾條件; 返回是true，把當前滿足條件的item 放入新的陣列中
// 返回:返回過濾後的新陣列;

var arr_1 = arr.filter(function(item, index, arr) {
    // 過濾條件; 返回是true，把當前滿足條件的item 放入新的陣列中
    return item == 10;
});
console.log(arr, arr_1);

const rest = this.channelAll.filter(item => {
    // Array.includes判斷是否包含該元素
    return !userChannelIds.includes(item.id)
})

• includes陣列包含

includes方法，判斷陣列是否包含指定的元素。返回 true / false
陣列.includes(引數1，引數2)

// 引數1，必須，表示查詢的內容
// 引數2，可選，表示開始查詢的位置，0表示從第一個元素開始找。預設值是0。

let arr = [1, 4, 3, 9];
console.log(arr.includes(4));    // true
console.log(arr.includes(4, 2)); // false， 從下標為2的位置開始查，所以沒有找到4
console.log(arr.includes(5));    // false

• concat 陣列拼接

// 陣列.concat();
// 傳入：拼接的資料。
// 返回：新陣列；

// 傳入1個數據
var arr = [1, 2];
var Arr = arr.concat("abc");
console.log(arr, Arr);

// 傳入多個數據
var Arr = arr.concat("a", "b", "c", "d", "e", "f");
console.log(arr, Arr);

// 傳入1個數組
var Arr = arr.concat(["aa", "bb"]);
console.log(arr, Arr);

// 傳入多個數組
var Arr = arr.concat(["aa", "bb"], [77, 88]);
console.log(arr, Arr);

• splice 陣列增刪改

var arr = ['a', 'b', 'c', 'd', 'e'];
// 刪除：
// 引數：第一個引數是開始的下標，第二個引數：要刪除的個數；
// 返回：被刪除元素的陣列；
var res = arr.splice(3, 1);
console.log(arr);----->['a', 'b', 'c',  'e']     刪除元素對原陣列進行操作
console.log(res);----->['d']

// 新增：
// 引數：第一個引數：開始的下標；第二個引數：刪除的個數；後面引數：要新增的資料，從開始的下標位置新增；
// 返回：沒有刪除，返回[]
var res = arr.splice(3, 0, "AA", 18);
console.log(arr); ---->["a", "b", "c", "AA", 18, "d", "e"]
console.log(res); ---->[]

// 修改：
// 引數：第一個引數：開始的下標；第二個引數：刪除的個數；後面引數：要新增替換的資料，從開始的下標位置；
// 返回：被替換的資料的陣列；
var res = arr.splice(3, 1, "HH");
console.log(arr); ----->["a", "b", "c", "HH", "e"]
console.log(res); ----->["d"]

• 陣列與字串互轉split和join

var str = '劉備|關羽|張飛';
console.log(str);

// 字串---->陣列：
// 引數：分隔符
// 返回：陣列；
var arr = str.split("|");
console.log(arr);

// 陣列----->字串
// 引數:分隔符；
// 返回：字串；
var str_1 = arr.join("*_*");
console.log(str_1);

• indexOf 陣列中查詢元素

// 引數：被查詢的元素
// 返回：被查詢的元素的下標索引（沒有找到返回-1）

// 場景：查詢陣列中有沒有我們需要的資料；
var arr = [1, 10, 20];
var index = arr.indexOf("a");
console.log(index);     ----->-1

• forEach 遍歷陣列

var arr = [0, 10, 10, 10, 20];
// 作用：遍歷陣列
// 引數：函式（函式）格式要求：
//      函式引數：item,index,arr
//      item：每個資料
//      index：下標；
//      arr：當前遍歷的陣列；

var max = arr[1];
arr.forEach(function(item, index, arr) {
    console.log(item, index, arr);
    if (item > max) {
        max = item;
    }
});
console.log(max);

• slice 擷取陣列

// 作用：擷取陣列
// 引數：
// 返回：被擷取的新陣列；
var arr = ['a', 'b', 'c', 'd', 'e'];

// 引數:2個引數。第一個引數從哪個下標開始（包括），擷取到哪個下標結束(不包括),
var res = arr.slice(1, 4);
console.log(arr, res);

// 引數：1個引數，從哪個下標開始，一直到結尾都要擷取
var arr_1 = arr.slice(1);
console.log(arr_1);

// 引數：沒有引數，全部擷取，複製陣列；
var res = arr.slice();
// 陣列：複雜資料型別；
console.log(res, arr);
console.log(res == arr);   ---->false

• 陣列排序 sort()

// sort() 方法用於對陣列的元素進行排序。

var arr = [11,52,74,85,96,15];
arr.sort(sortby)

// sortby	可選。規定排序順序。必須是函式。
// 返回值:對陣列的引用。

// 注意:陣列在原陣列上進行排序，不生成副本。

// 如果呼叫該方法時沒有使用引數，將按字母順序對陣列中的元素進行排序，說得更精確點，是按照字元編碼的順序進行排序。要實現這一點，首先應把陣列的元素都轉換成字串（如有必要），以便進行比較。

// 如果想按照其他標準進行排序，就需要提供比較函式，該函式要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。比較函式應該具有兩個引數 a 和 b，其返回值如下：

// 若 a 小於 b，在排序後的陣列中 a 應該出現在 b 之前，則返回一個小於 0 的值。
// 若 a 等於 b，則返回 0。
// 若 a 大於 b，則返回一個大於 0 的值。

• 陣列倒序reverse()

// reverse() 方法用於顛倒陣列中元素的順序。

var arr = [11,52,74,85,96,15];
arr.reverse();

// 注意：該方法會改變原來的陣列，而不會建立新的陣列。

• 擴充套件運算子
  把陣列中的元素一項項地展開,把一個整體的陣列拆開成單個的元素。

var arr1 = [1, 2, 3];
var arr2 = [...arr1];

• 陣列的去重操作

let arr1 = [1, 2, 3, 3, 4, 5];
let arr = [...new Set(this.arr1)]

• some() 方法
  some() 方法用於檢測陣列中的元素是否滿足指定條件（函式提供）。

some() 方法會依次執行陣列的每個元素：

如果有一個元素滿足條件，則表示式返回true , 剩餘的元素不會再執行檢測。
如果沒有滿足條件的元素，則返回false。
注意：

some() 不會對空陣列進行檢測。
some() 不會改變原始陣列

// 檢索陣列中是否存在某個值

function some(item,index,arr){
	if(item == 10){
		console.log	(item+"存在於這個陣列");
	}
		console.log	(item+"不存在於這個陣列");
}
 
var a = [11,50,40,3,5,80,90,4];
a.some(some)
// 10不存在於這個陣列
// false

• Array.isArray()
  判斷一個物件是不是陣列，返回的是布林值

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

let str = "12345"
console.log(Array.isArray(str))    // false

• Array.toString()
  此方法將陣列轉化為字串：

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

• Array.every()

// 此方法是將所有元素進行判斷返回一個布林值，如果所有元素都滿足判斷條件，則返回true，否則為false：

let arr = [1, 2, 3, 4, 5]
const isLessThan4 = value => value < 4    
const isLessThan6 => value => value < 6   
arr.every(isLessThan4 ) //false
arr.every(isLessThan6 ) //true

轉載文章，如有侵犯，聯絡刪除！