今天來講一下我們js中常用的數(shù)組

?數(shù)組是引用數(shù)據(jù)類型中的對象數(shù)據(jù)類型（特殊對象）?

?????????*???創(chuàng)建一個(gè)數(shù)組，也是要開辟一個(gè)堆內(nèi)存，一個(gè)堆內(nèi)存中存儲數(shù)組是對象中的鍵值對例如：

?????????*?????0?:?10

?????????*?????1?:?20

?????????*?????2?:?30

?????????*?????length?:?3（length指的是數(shù)組中的長度）

?????????*???1）數(shù)組中我們看到的每一項(xiàng)都是屬性值，默認(rèn)的屬性名是數(shù)字，數(shù)字從零開始遞增，數(shù)字代表當(dāng)前是第幾項(xiàng)，我們把代表位置的數(shù)字屬性名稱為“索引”；數(shù)組是以數(shù)字為索引，索引從零開始遞增的結(jié)構(gòu)！

?????????*???2）默認(rèn)存在一個(gè)length屬性，代表數(shù)組的長度（有多少項(xiàng)）

?????????*???3）數(shù)組中存在的每一項(xiàng)可以是任何數(shù)據(jù)類型

?????????*?真實(shí)項(xiàng)目中，我們從服務(wù)器獲取到的數(shù)據(jù)，一般都是對象或者數(shù)組（JSON格式），而且結(jié)構(gòu)層級一般也都是多級結(jié)構(gòu)，所以學(xué)會(huì)數(shù)組/對象的相關(guān)操作，能夠根據(jù)需求把獲取的數(shù)據(jù)進(jìn)行有效的解析和處理，是當(dāng)下前端開發(fā)中非常重要的知識點(diǎn)；尤其是vue/react開發(fā)的時(shí)候，我們都是在不斷的操作數(shù)據(jù)，來控制視圖的渲染，而操作的數(shù)據(jù)也是以對象和數(shù)組偏多；..

????????//?====?一維數(shù)組（只有一級結(jié)構(gòu)）

????????//?let?arr?=?[10,?20,?30];

????????//?let?arr?=?[10,?'AA',?true,?null,?undefined,?Symbol(1)];

????????//?====?二維數(shù)組（多維數(shù)組）?有兩級或者多級結(jié)構(gòu)

??????例如：let?arr?=?[{x:?100 }，{y:?200}];

?????????*?學(xué)習(xí)數(shù)組：

?????????*???1.掌握基礎(chǔ)操作

?????????*???2.掌握數(shù)組中常用的內(nèi)置方法（瀏覽器天生給數(shù)組提供的方法）

?????????*???3.掌握數(shù)組排序和去重（算法）

????????//??獲取每一項(xiàng)值：ARR[索引]???或者對某一項(xiàng)進(jìn)行操作

????????//??ARR.LENGTH?-?1：最后一項(xiàng)的索引

????????//??ARR[ARR.LENGTH]?=?X：向數(shù)組末尾追加一個(gè)新項(xiàng)

????????//??基于DELETE刪除數(shù)組中的某一項(xiàng)（把它當(dāng)做普通對象操作），鍵值對可以刪掉，但是LENGTH并不會(huì)跟著改變，一般數(shù)組刪除不用它！

????????//??基于ARR.LENGTH--可以實(shí)現(xiàn)刪除數(shù)組中最后一項(xiàng)

????????//?let?arr?=?[10,?20,?30];

????????//?arr[0]?=?100;

????????//?console.log(arr[arr.length?-?1]);

????????//?arr[3]?=?40;

????????//?delete?arr[0];

????????//?arr.length--;

????????//?數(shù)組迭代（遍歷數(shù)組中的每一項(xiàng)）

????????/*?for?(let?i?=?0;?i?<?arr.length;?i++)?{

????????????let?item?=?arr[i];

????????????console.log(`當(dāng)前遍歷的是數(shù)組中索引為：${i}，數(shù)值為：${item}的這一項(xiàng)！`);

????????}?*/

????????//?作為普通對象，基于FOR?IN遍歷數(shù)組中所有的鍵值對

????????/*?for?(let?attr?in?arr)?{

????????????console.log(attr,?arr[attr]);

????????}?*/

????????/*?還可以基于?while循環(huán)、for?of循環(huán)、內(nèi)置的迭代方法來遍歷數(shù)組每一項(xiàng)?*/

?????????*?數(shù)組中常用的內(nèi)置方法：基于這些方法可以讓我們有效的對數(shù)組進(jìn)行操作?

?????????*????console.dir(Array.prototype)

?????????*?https://developer.mozilla.org/zh-CN/

?????????*?1.關(guān)于數(shù)組的增刪改

?????????*???+?push

?????????*???+?pop

?????????*???+?shift

?????????*???+?unshift

?????????*???+?splice

?????????*?2.關(guān)于數(shù)組查詢和拼接

?????????*???+?slice

?????????*???+?concat

?????????*?3.轉(zhuǎn)換為字符串

?????????*???+?toString

?????????*???+?join

?????????*?4.驗(yàn)證是否包含某一項(xiàng)的

?????????*???+?indexOf?/?lastIndexOf

?????????*???+?includes

?????????*?5.關(guān)于排序的

?????????*???+?reverse

?????????*???+?sort

?????????*?6.關(guān)于數(shù)組迭代的方法

?????????*???+?forEach

?????????*???+?map

?????????*?記憶的方式：

?????????*???1.方法的意義和作用

?????????*???2.參數(shù)（執(zhí)行方法的時(shí)候傳遞的內(nèi)容）@params:

?????????*???3.返回值（執(zhí)行完方法返回的結(jié)果）@return：

?????????*???4.原始數(shù)組是否改變

?????????*/

? ? ? ? 設(shè)置一個(gè)變量： let?arr?=?[10,?20,?30];

?????????*?push：向數(shù)組末尾追加元素

?????????*???@params:

?????????*??????參數(shù)個(gè)數(shù)不固定，類型也不固定，都是向數(shù)組末尾依次追加的內(nèi)容

?????????*???@return:

?????????*??????[NUMBER]新增后數(shù)組的長度

?????????*???原始數(shù)據(jù)改變

?????????*?基于對象鍵值對操作：arr[arr.length]=xx

????????//?let?result?=?arr.push(40,?'珠峰培訓(xùn)');

????????//?console.log(result);?//=>5

? ? ? ? ? pop：刪除數(shù)組最后一項(xiàng)?

?????????*???@params:無

?????????*???@return:? ? 被刪除的那一項(xiàng)內(nèi)容

?????????*???原始數(shù)組改變

?????????*?arr.length--??刪除最后一項(xiàng)

????????//?let?result?=?arr.pop();

? ? ? ? ? unshift：向數(shù)組開始位置新增內(nèi)容

?????????*???@params:

? ? ? ? ? 個(gè)數(shù)不定、類型不定，都是要依次新增的內(nèi)容?

?????????*???@return:

?????????*??????[NUMBER]新增后數(shù)組的長度

?????????*???原始數(shù)據(jù)改變

????????//?let?result?=?arr.unshift(0,?'珠峰培訓(xùn)');

? ? ? ? ? shift：刪除數(shù)組第一項(xiàng)?

?????????*???@params:無

?????????*???@return:? ? 被刪除的那一項(xiàng)內(nèi)容

?????????*???原始數(shù)組改變

????????//?let?result?=?arr.shift();

? ? ? ? splice：實(shí)現(xiàn)數(shù)組指定位置的增刪改

?????????*????arr.splice(n,m)：從數(shù)組索引n開始，刪除m個(gè)元素，返回結(jié)果是以新數(shù)組的方式，把刪除的內(nèi)容進(jìn)行存儲（m不寫就是刪除到末尾）

?????????*????arr.splice(n,m,x1,x2...)：從索引n開始，刪除m個(gè)元素，用x1（或者更多的值）替換刪除的內(nèi)容，返回結(jié)果是一個(gè)數(shù)組，存儲刪除的內(nèi)容

?????????*????arr.splice(n,0,x1,x2...)：從索引n開始，一個(gè)都不刪除（返回結(jié)果是空數(shù)組），把x1或者更多值“插入到索引n的前面”

?????????*?原始數(shù)組都會(huì)改變?

========================================================================

? ? ? ? let?arr?=?[10,?20,?30,?40,?50,?60,?70];

? ? ? ?===新增（一個(gè)都不刪）

? ? ? ? let?result?=?arr.splice(2,?0,?100,?200,?300);

? ? ? ?console.log(result,?arr);?//=>result=[]??arr=[10,?20,100,200,300?,30,?40,?50,?60,?70]

============================================================================

????????//?===修改（刪除掉一部分，然后用一些值替換即可）

????????//?let?result?=?arr.splice(2,?2,?'珠峰培訓(xùn)',?'周嘯天');

????????//?console.log(result,?arr);?//=>result=[30,40]??arr=[10,?20,?'珠峰培訓(xùn)','周嘯天',?50,?60,?70]

==============================================================================

????????//?===刪除

????????//?let?result?=?arr.splice(2,?3);

????????//?console.log(result,?arr);?//=>result=[30,40,50]??arr=[10,20,60,70]

????????//?let?result?=?arr.splice(0);?//=>從索引零開始，刪除到末尾（清空原來數(shù)組，把原來數(shù)組中的每一項(xiàng)都存放到新數(shù)組RESULT中）

????????//?console.log(result,?arr);?//=>result=[10,?20,?30,?40,?50,?60,?70]??arr=[]

????????//?需求：刪除數(shù)組末尾這一項(xiàng)，你有幾種辦法

????????//?let?arr?=?[10,?20,?30,?40,?50,?60,?70];

????????//?arr.length--;

????????//?arr.pop();?//=>返回結(jié)果70

????????//?arr.splice(arr.length?-?1);?//=>從最后一項(xiàng)開始，刪除到末尾（刪除一個(gè)）??返回結(jié)果[70]

????????//?delete?arr[arr.length?-?1];?//=>雖然可以刪除，但是LENGTH長度不變（一般不用）

????????//?需求：向數(shù)組末尾追加‘珠峰’

????????//?let?arr?=?[10,?20,?30,?40,?50,?60,?70];

????????//?arr.push('珠峰');

????????//?arr[arr.length]?=?'珠峰';

????????//?arr.splice(arr.length,?0,?'珠峰');

? ? ? ? ?slice(n,m)：實(shí)現(xiàn)數(shù)組的查詢，從索引n開始，查找到索引為m處（不包含m），把查找到的內(nèi)容以新數(shù)組的方式返回，原始數(shù)組不變

????????//?let?arr?=?[10,?20,?30,?40,?50,?60,?70];

????????//?let?result?=?arr.slice(2,?5);

????????//?console.log(result,?arr);?//=>result=[30,?40,?50]??arr=[10,?20,?30,?40,?50,?60,?70]

????????//?console.log(arr.slice(2));?//=>[30,?40,?50,?60,?70]??第二個(gè)參數(shù)不寫是直接查找到數(shù)組末尾

????????//?console.log(arr.slice(0));?//=>[10,?20,?30,?40,?50,?60,?70]?可以理解為把原始數(shù)組中的每一項(xiàng)都查找到，以新數(shù)組返回，實(shí)現(xiàn)出“數(shù)組的克隆”：得到的新數(shù)組和原始數(shù)組是兩個(gè)不同的數(shù)組（兩個(gè)不同的堆），但是堆中存儲的內(nèi)容是一致的

? ? ? ? ?concat：實(shí)現(xiàn)數(shù)組拼接，把多個(gè)數(shù)組（或者多個(gè)值）最后拼接為一個(gè)數(shù)組，原始的數(shù)組都不會(huì)變，返回結(jié)果是拼接后的新數(shù)組

????????//?let?arr1?=?[10,?20,?30];

????????//?let?arr2?=?[50,?60,?70];

????????//?let?arr?=?arr1.concat('珠峰',?arr2);

????????//?console.log(arr);?//=>[10,?20,?30,?"珠峰",?50,?60,?70]

????????let?arr?=?[10,?20,?30,?40,?50,?60,?70];

? ? ? ? ?把數(shù)組轉(zhuǎn)化為字符串：

?????????*???1.?toString()：把數(shù)組中的每一項(xiàng)按照“逗號分隔”，拼接成對應(yīng)的字符串

?????????*???2.?join([char])：指定分隔符

?????????*?原始數(shù)組都不會(huì)改變

????????//?console.log(arr.toString());?//=>'10,20,30,40,50,60,70'

????????//?console.log(arr.join());?//=>等價(jià)于toString

????????//?console.log(arr.join('+'));?//=>'10+20+30+40+50+60+70'??如果這個(gè)字符串能夠變?yōu)镴S表達(dá)式執(zhí)行，則代表數(shù)組中每一項(xiàng)的求和?=>eval

????????//?let?str?=?arr.join('+');

????????//?let?total?=?eval(str);

????????//?console.log(total);

????????/*?let?total?=?0;

????????for?(let?i?=?0;?i?<?arr.length;?i++)?{

????????????total?+=?arr[i];

????????}

????????console.log(total);

????????5.數(shù)組的排序或者排列

reverse

sort

//?不包含

}

//?也可以直接使用ES6新提供的includes方法判斷

if?(ary.includes('珠峰培訓(xùn)'))?{

//?包含：如果存在返回的是TRUE

}

?reverse?:?把數(shù)組倒過來排列

*?@params

*?@return

*??排列后的新數(shù)組

*?原來數(shù)組改變

let?ary?=?[12,?15,?9,?28,?10,?22];

ary.reverse();

console.log(ary);?//=>[22,?10,?28,?9,

15,?12]

?sort?:?實(shí)現(xiàn)數(shù)組的排序

*?@params

*??可以沒有，也可以是個(gè)函數(shù)

*?@return

*??排序后的新數(shù)組

6.遍歷數(shù)組中每一項(xiàng)的方法

forEach

*?原來數(shù)組改變

let?ary?=?[7,?8,?5,?2,?4,?6,?9];

ary.sort();

console.log(ary);?//=>[2,?4,?5,?6,?7,?8,

9]

//?SORT方法中如果不傳遞參數(shù)，是無法處理10以上

數(shù)字排序的(它默認(rèn)按照每一項(xiàng)第一個(gè)字符來排，不是

我們想要的效果)

/*?ary?=?[12,?15,?9,?28,?10,?22];

ary.sort();

console.log(ary);?//=>?[10,?12,?15,?22,

28,?9]?*/

//?想要實(shí)現(xiàn)多位數(shù)正常排序，需要給SORT傳遞一個(gè)函

數(shù)，函數(shù)中返回?a-b?實(shí)現(xiàn)升序，返回?b-a?實(shí)現(xiàn)降序

ary?=?[12,?15,?9,?28,?10,?22];

//?ary.sort(function(a,b){?return?a-b;

});

ary.sort((a,?b)?=>?a?-?b);

console.log(ary);

/*

map:forEach是不支持返回值的，而map可以在foreach的基礎(chǔ)上支持返回值，把原來數(shù)組中每一項(xiàng)得值替換成新值，最后存儲在一個(gè)新數(shù)組中，但是原始數(shù)組不變；

MAP支持返回值，但是不會(huì)改變原來的數(shù)組，執(zhí)行完的返回結(jié)果是修改后的新數(shù)組

ary.mop(fuction(item,?index)?=>?{

//?數(shù)組中有多少項(xiàng)，函數(shù)就會(huì)被默認(rèn)執(zhí)行多少次

//?每一次執(zhí)行函數(shù)：item是數(shù)組中當(dāng)前要操作的這一項(xiàng)，index是當(dāng)前項(xiàng)的索引

//函數(shù)中返回啥，都是把數(shù)組中當(dāng)前項(xiàng)替換成啥

return'@@';

}）；

let?ary?=?[12,?15,?9,?28,?10,?22];

/*?//?基于原生JS中的循環(huán)可以實(shí)現(xiàn)

for?(let?i?=?0;?i?<?ary.length;?i++)?{

//?i:當(dāng)前循環(huán)這一項(xiàng)的索引

//?ary[i]:根據(jù)索引獲取循環(huán)的這一項(xiàng)

console.log('索引：'?+?i?+?'?內(nèi)容：'?+

ary[i]);

}?

ary.forEach(fuction(item,?index){

//?數(shù)組中有多少項(xiàng)，函數(shù)就會(huì)被默認(rèn)執(zhí)行多少次

//?每一次執(zhí)行函數(shù)：item是數(shù)組中當(dāng)前要操作的這一項(xiàng)，index是當(dāng)前項(xiàng)的索引

console.log('索引：'?+?index?+?'?內(nèi)容：'?+?item);});

前端是每一個(gè)人不斷練習(xí)不斷積累，只要努力，下一個(gè)成功的就是你！