javascript 數組 對象的一些方法記錄

記錄一下經常使用的數組和對象的一些方法

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

轉載文章，若有侵犯，聯繫刪除！