數(shù)據(jù)常用方法總結(jié)

forEach遍歷數(shù)組

let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
arr.forEach((item, index) => {
  console.log("值是" + item, "下標(biāo)是" + index);
});
值是15 下標(biāo)是0
值是26 下標(biāo)是1
值是23 下標(biāo)是2
值是10 下標(biāo)是3
值是9 下標(biāo)是4
值是6 下標(biāo)是5
值是78 下標(biāo)是6
值是21 下標(biāo)是7
值是24 下標(biāo)是8
值是10 下標(biāo)是9
值是9 下標(biāo)是10

filter過濾數(shù)組

// filter 過濾數(shù)組單元值 生成新數(shù)組 遍歷篩選元素 把滿足條件的元素篩選出來后放入新的數(shù)組
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.filter((item) => item > 30);
console.log(arr); // 15, 26, 23, 10,  9,6, 78, 21, 24, 10,9
console.log(newArr); //78

map迭代原數(shù)組

// map 迭代原數(shù)組 生成新數(shù)組遍歷元素 把每項(xiàng)執(zhí)行一遍回調(diào)函數(shù) 把結(jié)果放到一個(gè)新數(shù)組中返回例如求一個(gè)數(shù)的平方
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.map((item) => item - 10);
console.log(arr); //15, 26, 23, 10,  9, 6, 78, 21, 24, 10,9
console.log(newArr); //5, 16, 13,  0, -1,-4, 68, 11, 14,  0,-1

join數(shù)組單元素拼接成字符串

// join數(shù)組單元素拼接成字符串
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.join("");
let newArr2 = arr.join(",");
console.log(newArr); //1526231096782124109
console.log(newArr2); //15,26,23,10,9,6,78,21,24,10,9

concat 合并兩個(gè)數(shù)組 生成一個(gè)新數(shù)組

// concat合并兩個(gè)數(shù)組 生成一個(gè)新數(shù)組
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let arr2 = ["zs", "ls", "wr", "ly"];
let newArr = arr.concat(arr2);
console.log(newArr);//15, 26,   23,   10,   9,6,  78,   21,   24,   10,9,  'zs', 'ls', 'wr', 'ly'

sort 數(shù)組排序

// sort 對(duì)原數(shù)組單元值排序  傳入一個(gè)函數(shù) 計(jì)算a-b從小到大  b-a從大到小
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.sort(function (a, b) {
  return a - b;
});
let newArr2 = arr.sort(function (a, b) {
  return b - a;
});
console.log(newArr); //6,  9,  9, 10, 10,15, 21, 23, 24, 26, 78
console.log(newArr);// 78, 26, 24, 23, 21,15, 10, 10,  9,  9, 6

splice 刪除或替換原數(shù)組單元

//萬能方法玉转，可以實(shí)現(xiàn)增刪改：
//Array.splice(開始位置， 刪除的個(gè)數(shù)殴蹄，元素)
let arr = [1, 2, 3, 4, 5];
     let arr1 = arr.splice(2, 0 'haha')
     let arr2 = arr.splice(2, 3)
     let arr1 = arr.splice(2, 1 'haha')
     console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一個(gè)元素
     console.log(arr2) //[1, 2] 刪除三個(gè)元素
     console.log(arr3) //[1, 2, 'haha', 4, 5] 替換一個(gè)元素

indexOf 查找在數(shù)組中首次出現(xiàn)的位置

// indexOf在數(shù)組中查找首次出現(xiàn)的位置 找到返回索引值 找不到返回-1
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.indexOf(9);
console.log(newArr); //4

lastIndexOf 在數(shù)組中最后出現(xiàn)的位置

// lastIndexOf在數(shù)組中查找某個(gè)元素最后一次出現(xiàn)的位置 找到返回索引值 找不到返回-1
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.lastIndexOf(9);
let newArr1 = arr.lastIndexOf(100);
console.log(newArr); //10
console.log(newArr1); //-1

reverse反轉(zhuǎn)數(shù)組

// reverse反轉(zhuǎn)數(shù)組
let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.reverse();
console.log(newArr); // 9, 10, 24, 21, 78, 6,  9, 10, 23, 26,15

from偽數(shù)組轉(zhuǎn)為真數(shù)組

let array = {
    0: 'name', 
    1: 'age',
    2: 'sex',
    3: ['user1','user2','user3'],
    'length': 4
}
let arr = Array.from(array )
console.log(arr) // ['name','age','sex',['user1','user2','user3']]

let array = {
    'name': 'name', 
    'age': 'age',
    'sex': 'sex',
    'user': ['user1','user2','user3'],
    'length': 4
}
let arr = Array.from(array )
console.log(arr)  // [ undefined, undefined, undefined, undefined ]

let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

find返回首次滿足條件的元素

//find() 方法返回通過測(cè)試（函數(shù)內(nèi)判斷）的數(shù)組的第一個(gè)元素的值究抓。
//如果沒有符合條件的元素返回 undefined
//find() 對(duì)于空數(shù)組，函數(shù)是不會(huì)執(zhí)行的袭灯。
//find() 并沒有改變數(shù)組的原始值刺下。
//array.find(function(currentValue, index, arr),thisValue)，其中currentValue為當(dāng)前項(xiàng)稽荧，index為當(dāng)前索引橘茉，arr為當(dāng)前數(shù)組

 let test = [1, 2, 3, 4, 5];
 let a = test.find(item => item > 3);
 console.log(a); //4
 let b = test.find(item => item == 0);
 console.log(b); //undefined

findIndex返回首次滿足條件的元素索引

//返回?cái)?shù)組中首次滿足條件的元素的索引值
//findIndex()與find()的使用方法相同，只是當(dāng)條件為true時(shí)findIndex()返回的是索引值姨丈，而find()返回的是元素畅卓。如果沒有符合條件元素時(shí)findIndex()返回的是-1，而find()返回的是undefined蟋恬。findIndex()當(dāng)中的回調(diào)函數(shù)也是接收三個(gè)參數(shù)翁潘，與find()相同。
const bookArr=[
    {
        id:1,
        bookName:"三國演義"
    },
    {
        id:2,
        bookName:"水滸傳"
    },
    {
        id:3,
        bookName:"紅樓夢(mèng)"
    },
    {
        id:4,
        bookName:"西游記"
    }
];
var i=bookArr.findIndex((value)=>value.id==4);
console.log(i);// 3
var i2=bookArr.findIndex((value)=>value.id==100);
console.log(i2);// -1

some有一個(gè)滿足條件返回true

//some方法會(huì)依次檢測(cè)數(shù)組中每一個(gè)元素是否符合給定函數(shù)的條件歼争，返回布爾值拜马，不會(huì)對(duì)空數(shù)組處理，不改變?cè)瓟?shù)組沐绒。在執(zhí)行中俩莽，有一個(gè)滿足就返回true，不再繼續(xù)執(zhí)行
var aa = [1,32,4,26];
var bb = aa.some(function(item){
    return item > 30;
})
console.log(bb); // 輸出為true
//some回調(diào)函數(shù)有三個(gè)參數(shù)乔遮，一個(gè)是當(dāng)前元素（必須）扮超，一個(gè)是當(dāng)前元素的索引index（可選），一個(gè)是當(dāng)前元素屬于的數(shù)組對(duì)象。

every滿足所有返回true

//every方法會(huì)依次檢測(cè)數(shù)組中每一個(gè)元素是否符合給定函數(shù)的條件瞒津，返回布爾值蝉衣，不會(huì)對(duì)空數(shù)組處理，不改變?cè)瓟?shù)組巷蚪。所有元素都滿足才返回true
var aa = [3,32,4,26];
var bb = aa.every(function(item){
    return item > 2;
})
console.log(bb); // 輸出為true
//every回調(diào)函數(shù)有三個(gè)參數(shù)，一個(gè)是當(dāng)前元素（必須）濒翻，一個(gè)是當(dāng)前元素的索引index（可選）屁柏，一個(gè)是當(dāng)前元素屬于的數(shù)組對(duì)象。

reduce方法每一個(gè)元素依次執(zhí)行返回最終的值有送。

參數(shù)	描述
function(total,currentValue, index,arr)	必需淌喻。用于執(zhí)行每個(gè)數(shù)組元素的函數(shù)。 函數(shù)參數(shù):參數(shù)描述total必需雀摘。初始值, 或者計(jì)算結(jié)束后的返回值裸删。currentValue必需。當(dāng)前元素currentIndex可選阵赠。當(dāng)前元素的索引arr可選涯塔。當(dāng)前元素所屬的數(shù)組對(duì)象。
initialValue	可選匕荸。傳遞給函數(shù)的初始值

//計(jì)算數(shù)組元素相加后的總和
//reduce方法會(huì)對(duì)數(shù)組中的每一個(gè)元素依次進(jìn)行回調(diào)函數(shù)的方法，返回最終的值枷邪。
var aa = [3,2,4,1];
var bb = aa.reduce(function(total榛搔，item){
    return total+item;
})
console.log(bb); // 輸出為10
//reduce回調(diào)函數(shù)有四個(gè)參數(shù)，第一個(gè)是總和（必須）东揣，也是返回的值践惑，第二個(gè)是當(dāng)前元素（必須），第三個(gè)是當(dāng)前元素的索引index（可選）嘶卧，一個(gè)是當(dāng)前元素屬于的數(shù)組對(duì)象尔觉。

push尾部追加

let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.push("zs");
console.log(newArr); //12 返回新數(shù)組的長(zhǎng)度 改變?cè)瓟?shù)組
console.log(arr);//15, 26, 23, 10,9,  6,  78, 21,24, 10, 9,  'zs'

unshift頭部追加

let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.unshift("zs");
console.log(newArr); //12  返回新數(shù)組的長(zhǎng)度  改變?cè)瓟?shù)組
console.log(arr); //'zs',15, 26, 23, 10,9,  6,  78, 21,24, 10, 9

pop尾部刪除

let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.pop();
console.log(newArr); //9  返回刪除的元素  改變?cè)瓟?shù)組
console.log(arr); //15, 26, 23, 10,9,  6,  78, 21,24, 10

shift頭部刪除

let arr = [15, 26, 23, 10, 9, 6, 78, 21, 24, 10, 9];
let newArr = arr.shift();
console.log(newArr); //15 返回刪除的元素  改變?cè)瓟?shù)組
console.log(arr); // 26, 23, 10,9,  6,  78, 21,24, 10, 9

Array 對(duì)象方法