JavaScript項目中常用數(shù)據(jù)處理方法(必備)

1. 對數(shù)組的處理

1.1 對數(shù)組的處理燥撞,變異方法(會改變原始數(shù)組)

1.push()

向數(shù)組的末尾增加一個或多個元素,可以通過for循環(huán)來達到增加多個元素的效果审编。

2.pop()

刪除并返回數(shù)組的最后一個元素

let element = arr.pop() //返回最后一個元素

arr //刪除最后一個元素后的數(shù)組

3.shift()

刪除并返回數(shù)組的第一個元素

如果數(shù)組為空剥悟,那么shift()方法不進行任何操作嘀趟,并返回一個undefined(ps:可以用該方法來判斷一個未知長度的數(shù)組是否為空)

4.unshift()

向數(shù)組的開頭增加一個或多個元素

5.splice()

對數(shù)組的內(nèi)容進行刪除搁胆,增加夺溢,替換阔逼。

arr.splice(index,howmany,item1,item2...)

index是執(zhí)行操作的位置兆衅,必須

howmany是刪除的個數(shù),為0時就是不刪除只增加

? ? //樣例(通過循環(huán)來刪除數(shù)組里幾個特定的元素)? ? let params = ["方案1", "方案2", "方案3", "方案4", "方案5678等等"];? ? for (let i = 0, len = params.length; i < len; i++) {? ? ? if (? ? ? ? params[i].methodName === "方案1" ||? ? ? ? params[i].methodName === "方案2" ||? ? ? ? params[i].methodName === "方案3"? ? ? ) {? ? ? ? params.splice(i, 1);? ? ? ? i--; //因為刪除后嗜浮,數(shù)組長度會減1羡亩,所以 i 也要減1,才能對應(yīng)新的數(shù)組? ? ? }? ? }

6.sort()

用于對數(shù)組進行排序危融,默認升序畏铆。

如果不傳入?yún)?shù),默認以字符編碼為基準排序吉殃,也可以傳入一個排序函數(shù)進行排序辞居。

? ? //例子:? ? let array = [1, 2, 10, 18, 3, 95, 2, 5];? ? let arrayNew = array.sort(? ? ? //升序? ? ? function(a, b) {? ? ? ? return a - b;? ? ? }? ? );? ? let arrayNew = array.sort(? ? ? //降序? ? ? function(a, b) {? ? ? ? return b - a;? ? ? }? ? );

7.reverse()

array.reverse()

用于顛倒數(shù)組中的元素,但是不會創(chuàng)建新的數(shù)組蛋勺,會改變原來的數(shù)組

1.2 對數(shù)組的處理瓦灶,非變異方法(不會改變原始數(shù)組,而是創(chuàng)建一個新的數(shù)組迫卢,所以需要創(chuàng)建一個新數(shù)組去接收)

1.filter()

對數(shù)組中的每一項運行給定函數(shù)倚搬,返回該函數(shù)會返回true的項組成的數(shù)組

例子:

? ? let array = [1, 2, 5, 6];? ? let arrayNew = array.filter(item => item > 2); //如果item大于2,則返回該item到新數(shù)組中去? ? console.log(arrayNew); //5,6

2.concat()

用于連接兩個或者多個數(shù)組

3.slice()

從已有的數(shù)組中返回選定的元素

array.slice(start,end) //start是開始的位置乾蛤,必須

4.map()

map方法會按照原始數(shù)組元素的順序依次按照方法處理元素并且不會改變原來的數(shù)組每界,也不會對空數(shù)組進行檢測 (所以要將返回的數(shù)組賦值于一個新定義的數(shù)組)

例子:

//map有返回值

? ? let array = [1,2,4,5]

? ? let arr = array.map(function(value) {

? ? ? return value * 2;

? ? });

? ? console.log(arr) //[2,4,8,10]

5.forEach()

forEach也是一種對數(shù)組的遍歷捅僵,與map不同的是,forEach沒有返回值眨层;

let array = [1,2,4,5]

? ? let arr = array.forEach((item)=> {

? ? ? return item * 2;

? ? });

? ? console.log(arr) //undefined

? ? let arr2 = [];

? ? array.forEach((item,index)=>{

? ? ? arr2.push(item*2)

? ? })

? ? console.log(arr2) //[2,4,8,10]

6.join()

array.join(separator) // separator= "." 分隔符庙楚,默認為,

將所有數(shù)組元素拼接成字符串

注意:不能處理對象數(shù)組const arr1 = [1,2,3,4,5];const arr2 = [{name:'張三'},{age:24}];console.log(arr1.join("")) // 12345console.log(arr2.join("")) // [object Object][object Object]

使用場景:map與push和join配合,可以將多個數(shù)組趴樱,合并成一個字符串馒闷,生成模板字符串

7.reduce()

接收一個函數(shù)作為累加器(可做對數(shù)組元素的求和或者求積),數(shù)組中的每個值(從左到右)開始縮減叁征,最終計算為一個值

例子:

let arry = [1, 25, 85, 36];

? ? let arryNew = arry.reduce(function(total, currentValue, currentIndex, arr) {

? ? ? return total * currentValue;

? ? });

? ? console.log(arryNew);//76500

total: 必需纳账。初始值, 或者計算結(jié)束后的返回值。

currentValue 必需捺疼。當前元素

currentIndex 可選疏虫。當前元素的索引

arr 可選。當前元素所屬的數(shù)組對象啤呼。

8.toString()

將數(shù)組作為字符串返回

注意:使用toString()方法將數(shù)組轉(zhuǎn)為字符串時卧秘,只能轉(zhuǎn)化數(shù)值數(shù)組或字符串數(shù)組。不能用在對象數(shù)組上

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

const arr2 = [{name:'張三'},{age:24}];

console.log(arr1.toString()) // 1,2,3,4,5

console.log(arr2.toString()) // [object Object],[object Object]

1.3 對數(shù)組的數(shù)字的檢測

1.every()

對數(shù)組中的每一項運行給定函數(shù)官扣,全部滿足條件則返回true

let arr = array.every(value => value > 18)

2.some()

對數(shù)組中的每一項運行給定函數(shù)翅敌,如果有一項滿足條件則返回true

3.indexOf()

返回第一個與給定參數(shù)相等的數(shù)組元素的索引,沒有的話返回-1

例子:

let arr = [1,2,3,56,57]

arr.indexOf(1)

4.lastIndexOf()

返回最后一個與給定參數(shù)相等的數(shù)組元素的索引惕蹄,沒有的話返回-1

5. includes()

檢測數(shù)組是否包含某個數(shù)

[5,6,7,8,24,25,26,27,28,29,30,31,32,33].includes(val)

存在返回true蚯涮,不存在返回false

6.find()

找出第一個符合條件的數(shù)組成員,如果沒有符合條件的則返回undefined

[1, 4, -5, 10].find((n) => n < 0)

// -5

7.findIndex()

返回第一個符合條件的數(shù)組成員的位置焊唬,如果沒有符合條件的恋昼,則返回-1

2.對字符串的處理

1.indexOf()

可以返回指定字符串值或數(shù)字在字符串或數(shù)組中首次(第一個)出現(xiàn)的位置看靠,有的話會出現(xiàn)對應(yīng)的下標赶促,沒有的話會返回 -1。

2.split()

把一個字符分割成字符串數(shù)組 挟炬。非變異方法鸥滨,不會改變原字符串,所以需創(chuàng)建變量去接收谤祖。

array.split(separator婿滓,howmany) //separator 必須,字符串或正則表達式粥喜,從該參數(shù)指定的位置分割 howmany 可選 分割的長度 默認不考慮長度 ","

3.substr()

可在字符串中抽取從start下標開始的指定書目的字符

stringObject.substr(start,length)

start(必需):抽取的字符串的起始下標

length(可選):字串中的字符數(shù)凸主,必修是數(shù)值

4.replace()

replace("條","行")可將字符串中特定的內(nèi)容轉(zhuǎn)為自己想要的

但是注意要把修改后的值重新賦值給字段,這樣才能通過該字段取得想要的值

aaa = aaa.replace("false", "true");

5.parseInt()

解析一個字符串额湘,返回一個整數(shù) parseInt(msg.totals);

6.parseFloat()

解析一個字符串卿吐,返回一個浮點數(shù)

7.+

將字符串類型轉(zhuǎn)為Number類型

例子:const obj={

a:'12'

}

console.log(+obj.a) //12(Number類型)

8.toString()

將一個邏輯值轉(zhuǎn)為一個字符串旁舰,或者將數(shù)值轉(zhuǎn)為一個字符串;

3.處理對象

1.Object.assign()

將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標對象。它將返回目標對象(屬性相同的情況嗡官,后面的源對象的屬性值會覆蓋前面的屬性值)

const target = { a: 1, b: 2 };

const source = { b: 4, c: 5 };

const source1 = {b : 5 , d : 4};

Object.assign(target, source,source1);

console.log(target); // { a: 1, b: 5, c: 5, d: 4 }

2.Object.create()

將參數(shù)對象的屬性和方法都加到新對象的原型上去

例子:

var obj = {

a:1,

aa(){

console.log(`this ${this.a} aa ${this.b}`)

}

};

var obj2 = Object.create(obj)

obj2.b = 3;

obj2.aa();

console.log(obj2)

//this 1 aa 3

b: 3

__proto__:

a: 1

aa: ? aa()

3.Object.defineProperty()

直接在一個對象上定義一個新屬性箭窜,或者修改一個對象的現(xiàn)有屬性, 并返回這個對象衍腥。

4.Object.entries()

返回給定對象自身可枚舉屬性的[key, value]數(shù)組(與for...of一起使用)

5.Object.freeze()

凍結(jié)對象:其他代碼不能刪除或更改任何屬性

6.Object.isFrozen()

判斷對象是否已經(jīng)凍結(jié)

7.Object.keys()

返回對象可枚舉屬性(返回一個數(shù)組)

8.Object.values()

返回對象可枚舉的值(返回一個數(shù)組)

9.delete

刪除對象某個屬性

delete a.age;

在vue中磺樱,如果刪除對象的某個屬性也要觸發(fā)視圖更新的話,Vue.delete(target,propertyName/index)

4.校驗

1.typeof

用typeof可以來判別數(shù)據(jù)類型婆咸,但只能區(qū)分基本類型:

number竹捉、string、undefined尚骄、boolean活孩、object。

2.Object.prototype.toString.call()

判斷某個對象之屬于哪種內(nèi)置類型(可比type多五種類型檢測)

分為null乖仇、string憾儒、boolean、number乃沙、undefined起趾、array、function警儒、object训裆、date、math

例子:Object.prototype.toString.call("abc");// "[object String]"

5.定時器

setTimeout()與setInterval()屬于回調(diào)函數(shù)蜀铲,this指向window边琉,所以需要使用箭頭函數(shù)使this指向上下文

1.setTimeout()

在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式,只執(zhí)行一次

2.setInterval()

按照指定周期來調(diào)用函數(shù)记劝,會不停的調(diào)用变姨。可返回一個ID(數(shù)字)厌丑,然后通過調(diào)用clearInterval( ID ) 方法來取消定時器定欧,或者當窗口關(guān)閉的時候,定時器也會自己關(guān)閉

var ID = setInterval( ()=>{ this.aaa() },777 )

aaa(){ } //寫具體的方法

附:

使用二分法查詢數(shù)組中的元素

this.binarySearch = function (item,array) {

var low = 0, height= array.length - 1,mid,element;

while (low <= height){

mid = Math.floor((low+height)/2);

element = array[mid];

if(element < item){

low = mid + 1 ;

}else if(element > item){

height = mid - 1;

}else {

return mid;

}

}

return -1;

};

let arr = [1,5,8,6,5,4,8,5,2,3,1];

let arrNew = arr.sort(

function (a,b) {

return a-b;

}

);

console.log('arrNew',arrNew);

console.log(this.binarySearch(1,arrNew));

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末怒竿,一起剝皮案震驚了整個濱河市砍鸠,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌耕驰,老刑警劉巖爷辱,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡饭弓,警方通過查閱死者的電腦和手機巩检,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來示启,“玉大人兢哭,你說我怎么就攤上這事》蛏ぃ” “怎么了迟螺?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長舍咖。 經(jīng)常有香客問我矩父,道長,這世上最難降的妖魔是什么排霉? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任窍株,我火速辦了婚禮,結(jié)果婚禮上攻柠,老公的妹妹穿的比我還像新娘球订。我一直安慰自己,他們只是感情好瑰钮,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布冒滩。 她就那樣靜靜地躺著,像睡著了一般浪谴。 火紅的嫁衣襯著肌膚如雪开睡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天苟耻,我揣著相機與錄音篇恒,去河邊找鬼。 笑死凶杖,一個胖子當著我的面吹牛胁艰,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播官卡,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼蝗茁,長吁一口氣:“原來是場噩夢啊……” “哼醋虏!你這毒婦竟也來了寻咒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤颈嚼,失蹤者是張志新(化名)和其女友劉穎毛秘,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡叫挟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年艰匙,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片抹恳。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡员凝,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出奋献,到底是詐尸還是另有隱情健霹,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布瓶蚂,位于F島的核電站糖埋,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏窃这。R本人自食惡果不足惜瞳别,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望杭攻。 院中可真熱鬧祟敛,春花似錦、人聲如沸兆解。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽痪宰。三九已至叼架,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間衣撬,已是汗流浹背乖订。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留具练,地道東北人乍构。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像扛点,于是被迫代替她去往敵國和親哥遮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354