今天來講一下我們js中常用的數(shù)組
?數(shù)組是引用數(shù)據(jù)類型中的對(duì)象數(shù)據(jù)類型（特殊對(duì)象）?
?????????*???創(chuàng)建一個(gè)數(shù)組完残，也是要開辟一個(gè)堆內(nèi)存计济，一個(gè)堆內(nèi)存中存儲(chǔ)數(shù)組是對(duì)象中的鍵值對(duì)例如：
?????????*?????0?:?10
?????????*?????1?:?20
?????????*?????2?:?30
?????????*?????length?:?3（length指的是數(shù)組中的長(zhǎng)度）
?????????*???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ù)組的長(zhǎng)度（有多少項(xiàng)）
?????????*???3）數(shù)組中存在的每一項(xiàng)可以是任何數(shù)據(jù)類型
?????????*?真實(shí)項(xiàng)目中晓褪，我們從服務(wù)器獲取到的數(shù)據(jù)堵漱，一般都是對(duì)象或者數(shù)組（JSON格式），而且結(jié)構(gòu)層級(jí)一般也都是多級(jí)結(jié)構(gòu)涣仿，所以學(xué)會(huì)數(shù)組/對(duì)象的相關(guān)操作勤庐，能夠根據(jù)需求把獲取的數(shù)據(jù)進(jìn)行有效的解析和處理，是當(dāng)下前端開發(fā)中非常重要的知識(shí)點(diǎn)好港；尤其是vue/react開發(fā)的時(shí)候愉镰，我們都是在不斷的操作數(shù)據(jù)，來控制視圖的渲染媚狰，而操作的數(shù)據(jù)也是以對(duì)象和數(shù)組偏多岛杀；..
????????//?====?一維數(shù)組（只有一級(jí)結(jié)構(gòu)）
????????//?let?arr?=?[10,?20,?30];
????????//?let?arr?=?[10,?'AA',?true,?null,?undefined,?Symbol(1)];
????????//?====?二維數(shù)組（多維數(shù)組）?有兩級(jí)或者多級(jí)結(jié)構(gòu)
??????例如：let?arr?=?[{x:?100 }，{y:?200}];
?????????*?學(xué)習(xí)數(shù)組：
?????????*???1.掌握基礎(chǔ)操作
?????????*???2.掌握數(shù)組中常用的內(nèi)置方法（瀏覽器天生給數(shù)組提供的方法）
?????????*???3.掌握數(shù)組排序和去重（算法）
????????//??獲取每一項(xiàng)值：ARR[索引]???或者對(duì)某一項(xiàng)進(jìn)行操作
????????//??ARR.LENGTH?-?1：最后一項(xiàng)的索引
????????//??ARR[ARR.LENGTH]?=?X：向數(shù)組末尾追加一個(gè)新項(xiàng)
????????//??基于DELETE刪除數(shù)組中的某一項(xiàng)（把它當(dāng)做普通對(duì)象操作）崭孤，鍵值對(duì)可以刪掉类嗤，但是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)嗤形！`);
????????}?*/
????????//?作為普通對(duì)象精偿，基于FOR?IN遍歷數(shù)組中所有的鍵值對(duì)
????????/*?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)置方法：基于這些方法可以讓我們有效的對(duì)數(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ù)組的長(zhǎng)度
?????????*???原始數(shù)據(jù)改變
?????????*?基于對(duì)象鍵值對(duì)操作：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ù)組的長(zhǎng)度
?????????*???原始數(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)行存儲(chǔ)（m不寫就是刪除到末尾）
?????????*????arr.splice(n,m,x1,x2...)：從索引n開始船庇，刪除m個(gè)元素，用x1（或者更多的值）替換刪除的內(nèi)容侣监，返回結(jié)果是一個(gè)數(shù)組鸭轮，存儲(chǔ)刪除的內(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長(zhǎng)度不變（一般不用）
????????//?需求：向數(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è)不同的堆）漓藕，但是堆中存儲(chǔ)的內(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)按照“逗號(hào)分隔”，拼接成對(duì)應(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)得值替換成新值妓美，最后存儲(chǔ)在一個(gè)新數(shù)組中僵腺，但是原始數(shù)組不變；
MAP支持返回值壶栋，但是不會(huì)改變?cè)瓉淼臄?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è)成功的就是你夺饲！
