<meta charset="utf-8">

需求：

js數(shù)組(Array)方法匯總

索引：

對(duì)數(shù)組方法的學(xué)習(xí)和匯總麸粮，分為三大類：

一馁蒂，改變?cè)瓟?shù)組的方法(10種)：

1饱亮，arr[key]='tom';

2兆旬，arr.splice();

3吧凉，arr.reverse();

4隧出，arr.sort();

5，arr.push();

6阀捅，arr.pop();

7胀瞪，arr.unshift();

8，arr.shift();

9饲鄙，arr.fill();

10凄诞，arr.copyWithin();

二，不動(dòng)原數(shù)組忍级，只產(chǎn)生新數(shù)據(jù)的方法(14種)：

1幔摸，arr.concat();

2，arr.slice();

3颤练，arr.join();

4既忆，arr.toString();

5，arr.map();

6嗦玖，arr.filter();

7患雇，arr.reduce()和arr.reduceRight();

8，arr.find();

9宇挫，Array.from();

10苛吱，Array.of();

11，Object.keys(arr);

12器瘪，arr.values();

13翠储，arr.keys();

14绘雁，arr.entries();

三，不動(dòng)原數(shù)組援所，只依據(jù)原數(shù)組進(jìn)行判斷/處理的方法(10種)：

1庐舟，arr.forEach()---遍歷方法1;

2，for()---遍歷方法2;

3住拭，for...of....---遍歷方法3;

4挪略，for...in...---遍歷方法4;

5，...(spread);

6滔岳，arr.indexOf()||arr.lastIndexOf();

7杠娱，arr.every()||arr.some();

8，Array.isArray();

9谱煤，arr.includes();

10摊求，arr.findIndex();

正文：

一，改變?cè)瓟?shù)組的方法

1刘离，arr[key]='tom';依據(jù)下標(biāo)直接賦值

代碼如下室叉，說(shuō)明一點(diǎn)：索引和關(guān)聯(lián)數(shù)組不是互斥的，這里為了方便說(shuō)明定義了兩個(gè)空數(shù)組寥闪，實(shí)際上太惠，可以同時(shí)用數(shù)字和字符串作為下標(biāo)為同一個(gè)數(shù)組賦值；

//定義一個(gè)空數(shù)組
let indexArr=[];
//以索引數(shù)組賦值方式
indexArr[0]='tom';
console.log(indexArr);//['tom']
//定義一個(gè)空數(shù)組
let associativeArr=[];
//以關(guān)聯(lián)數(shù)組方式賦值
associativeArr['age']=30;
console.log(associativeArr);//[age:30]

image

2疲憋，arr.splice()

(1)作用：允許從指定的數(shù)組中凿渊，刪除一部分元素，同時(shí)還可以添加另外一部分元素;

(2)語(yǔ)法：var res=數(shù)組名.splice(start,count,e1,e2,e3)缚柳；

(3)語(yǔ)法解釋：start:開(kāi)始刪除和(或)添加元素的位置埃脏；count：刪除的數(shù)量，0表示不刪除任何元素秋忙，省略表示從開(kāi)始位置全部刪除彩掐；e1,e2,e3:新添加的元素；

(4)返回值：返回的是刪除的元素組成的數(shù)組灰追，原數(shù)組會(huì)被刪除對(duì)應(yīng)的元素堵幽；

(5)示例代碼：

// 定義一個(gè)數(shù)組
let arr=[1,2,3,4,5,6];
// 用splice方法處理
let res=arr.splice(1,2,'new1','new2','new3');
// 查看返回值
console.log('res',res);// [2,3]
// 查看修改后的數(shù)組
console.log('arr',arr);// [1, "new1", "new2", "new3", 4, 5, 6]
// 驗(yàn)證為count為0的情況
let newRes=arr.splice(1,0);
console.log(newRes);// []
console.log(arr);// [1, "new1", "new2", "new3", 4, 5, 6]
// 驗(yàn)證count空著的情況
let myNewRes=arr.splice(1);
console.log(myNewRes);// ["new1", "new2", "new3", 4, 5, 6]
console.log(arr);// [1]

image

3,arr.reverse()

(1)作用：將一個(gè)數(shù)組反轉(zhuǎn)(次序反轉(zhuǎn));

(2)語(yǔ)法：var res=數(shù)組名.reverse()；

(3)語(yǔ)法解釋：#弹澎；

(4)返回值：該函數(shù)會(huì)改變?cè)袛?shù)組朴下，返回的時(shí)反轉(zhuǎn)后的新數(shù)組；

(5)示例代碼：

let arr=[1,2,3,4,5,6];
let res=arr.reverse();
console.log(res);// [6, 5, 4, 3, 2, 1]
console.log(arr);// [6, 5, 4, 3, 2, 1]

image

4,arr.sort()

(1)作用：將數(shù)組中的元素排序;

(2)語(yǔ)法：arr.sort()苦蒿；

(3)語(yǔ)法解釋：小括號(hào)內(nèi)可以帶參數(shù)殴胧，如果不帶參數(shù)，默認(rèn)依照字母表順序排列，如果數(shù)組中有unefined值团滥，將會(huì)被排到數(shù)組尾部竿屹；小括號(hào)內(nèi)也可以帶一個(gè)函數(shù)作為參數(shù):

function(a,b){
  // value是a和b比較的結(jié)果
  return value;
}

image

函數(shù)解釋：a，b分別代表數(shù)組的兩個(gè)元素灸姊，數(shù)組元素采用冒泡方法比較拱燃，每個(gè)元素至少會(huì)比較一次；value值如果小于0,從小到大排序厨钻，value如果大于0,從大到小排序扼雏，value如果等于0坚嗜，不動(dòng)順序(如果是a===b的情況value需要等于0,其實(shí)可以忽略這個(gè)判斷)夯膀；

函數(shù)個(gè)人理解如下,僅供參考，完整用例見(jiàn)(5)示例代碼:

// 從小到大排序
function(a,b){
  // 個(gè)人來(lái)理解：如果a小于b,a-b強(qiáng)制等于-1=>a小于b,a排前面(升序)
  // 基于a-b的判斷苍蔬，結(jié)果可以強(qiáng)制定義诱建，依據(jù)定義的結(jié)果，小值永遠(yuǎn)在前
  if(a<b)return -1;
  return 1;
}

// 從大到小排序
function(a,b){
  // 個(gè)人來(lái)理解：如果a小于b,a-b強(qiáng)制等于1=>a大于b,b排前面(降序)
  // 基于a-b的判斷碟绑，結(jié)果可以強(qiáng)制定義俺猿，依據(jù)定義的結(jié)果，小值永遠(yuǎn)在前
  if(a<b)return 1;
  return -1;
}

image

(4)返回值：返回排序后的數(shù)組格仲，注意undefined值總會(huì)被默認(rèn)排在最后押袍，無(wú)論升序還是降序；

(5)示例代碼：

let arr=['b','c','a',undefined,'e','d'];
// 不帶參數(shù)排序
let res=arr.sort();
// 驗(yàn)證返回值
console.log(res);// ["a", "b", "c", "d", "e",undefined]
// 驗(yàn)證原數(shù)組
console.log(arr);// ["a", "b", "c", "d", "e",undefined]
// 驗(yàn)證返回值是否指向原數(shù)組
console.log(res===arr); // true
// 驗(yàn)證排序規(guī)則-從小到大
let arr1=['b','c','a',undefined,'e','d'];
arr1.sort((a,b)=>{
  if(a<b)return -1;
  return 1;
})
console.log(arr1);// ["a", "b", "c", "d", "e", undefined]
// 驗(yàn)證排序規(guī)則-從大到小
let arr1=['b','c','a',undefined,'e','d'];
arr1.sort((a,b)=>{
  if(a<b)return 1;
  return -1;
})
console.log(arr1);// ["e", "d", "c", "b", "a", undefined]
// 讓某個(gè)值排在第一位比如'd'
// 注意一個(gè)現(xiàn)象:如果要求'd'在第一位凯肋，而其他元素排序不變谊惭，在元素偏多時(shí)(比如10個(gè)以上)
// 'd'在第一位不會(huì)出問(wèn)題，但是其他元素的排序可能不穩(wěn)定
let arr=['c','b','a','d','e'];
arr.sort((a,b)=>{
  // 個(gè)人來(lái)理解：如果a是‘d’,a-b強(qiáng)制等于-1=>a小于b,a排前面
  if(a==='d')return -1;
  // 個(gè)人理解：如果b是‘d’侮东，a-b強(qiáng)制等于1=>b小于a,b排前面
  if(b==='d')return 1;
  return 0;
})
console.log(arr); // ["d", "c", "b", "a", "e"]

image

5,arr.push()

(1)作用：在數(shù)組尾部(棧頂)添加新元素;

(2)語(yǔ)法：var res=數(shù)組名.push(n)圈盔；

(3)語(yǔ)法解釋：n是需要插入數(shù)組的元素；

(4)返回值：更新后的原數(shù)組的長(zhǎng)度悄雅；

(5)示例代碼：

let arr=[10,20,30];
let res=arr.push(40);
console.log(arr);// [10, 20, 30, 40]
console.log(res);// 4

image

6,arr.pop()

(1)作用：刪除數(shù)組尾部(棧頂)的元素;

(2)語(yǔ)法：var res=數(shù)組名.push()驱敲；

(3)語(yǔ)法解釋：#；

(4)返回值：被刪除的元素宽闲；

(5)示例代碼：

let arr=[10,20,30];
let res=arr.pop();
console.log(arr);// [10, 20]
console.log(res);// 30

image

7,arr.unshift()

(1)作用：在數(shù)組頭部(棧底)添加新元素;

(2)語(yǔ)法：var res=數(shù)組名.unshift(n)众眨；

(3)語(yǔ)法解釋：n是需要插入數(shù)組的元素；

(4)返回值：更新后的原數(shù)組的長(zhǎng)度容诬；

(5)示例代碼：

let arr=[10,20,30];
let res=arr.unshift(40);
console.log(arr);// [40, 10, 20, 30]
console.log(res);// 4

image

8,arr.shift()

(1)作用：刪除數(shù)組頭部(棧底)的元素;

(2)語(yǔ)法：var res=數(shù)組名.shift()娩梨；

(3)語(yǔ)法解釋：#；

(4)返回值：被刪除的元素放案；

(5)示例代碼：

let arr=[10,20,30];
let res=arr.shift();
console.log(arr);// [20, 30]
console.log(res);// 10

image

9,arr.fill()

(1)作用：用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素姚建；

(2)語(yǔ)法：arr.fill(value,start,end);

(3)語(yǔ)法解釋：value某個(gè)值，start起始下標(biāo)吱殉，end結(jié)束下標(biāo)掸冤；

(4)返回值：修改后的原數(shù)組厘托；

(5)示例代碼：

let arr=[1,2,3,4,5,6,7,8,9];
const res=arr.fill('tom',2,14);
console.log(res);// [1, 2, "tom", "tom", "tom", "tom", "tom", "tom", "tom"]
console.log(arr);// [1, 2, "tom", "tom", "tom", "tom", "tom", "tom", "tom"]
console.log(res===arr);// true

image

10,arr.copyWithin()

(1)作用：淺拷貝數(shù)組的部分元素到同一數(shù)組的不同位置，且不改變數(shù)組的長(zhǎng)度稿湿；

(2)語(yǔ)法：arr.copyWithin(target,start,end);

(3)語(yǔ)法解釋：target---復(fù)制序列即將覆蓋元素的目標(biāo)位置铅匹，如果是負(fù)數(shù)，target 將從末尾開(kāi)始計(jì)算饺藤，如果 target 大于等于 arr.length包斑，將會(huì)不發(fā)生拷貝，如果 target 在 start 之后涕俗，復(fù)制的序列將被修改以符合 arr.length罗丰；start 被復(fù)制元素的起始位置，如果是負(fù)數(shù)再姑，start 將從末尾開(kāi)始計(jì)算萌抵，如果 start 被忽略，copyWithin 將會(huì)從0開(kāi)始復(fù)制元镀；end 被復(fù)制元素的結(jié)束位置绍填，如果是負(fù)數(shù)，end 將從末尾開(kāi)始計(jì)算栖疑，如果 end 被忽略讨永，copyWithin 將會(huì)復(fù)制到 arr.length；以上位置遵循數(shù)組索引規(guī)則(即位于元素的左下角)遇革；

(4)返回值：修改后的原數(shù)組卿闹；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.copyWithin(0,1,3)
console.log(res);// [2, 3, 3, 4, 5, 6, 7, 8, 9]
console.log(res===arr);// true

image

二，不動(dòng)原數(shù)組澳淑，只產(chǎn)生新數(shù)據(jù)的方法

1,arr.concat()

(1)作用：拼接兩個(gè)或多個(gè)數(shù)組比原；

(2)語(yǔ)法：let res=數(shù)組名.concat(arr1,arr2,arr3.......);

(3語(yǔ)法解釋：arr指代數(shù)組；

(4)返回值：拼接后的新數(shù)組杠巡；

(5)示例代碼：

const arr=["中國(guó)","俄羅斯","英國(guó)"];
const arr1=["日本","韓國(guó)","朝鮮"];
const arr2=["美國(guó)","巴西","西班牙"];
const res=arr.concat(arr1,arr2);
console.log(res);// ["中國(guó)", "俄羅斯", "英國(guó)", "日本", "韓國(guó)", "朝鮮", "美國(guó)", "巴西", "西班牙"]
console.log(arr);// ["中國(guó)", "俄羅斯", "英國(guó)"]

image

2,arr.slice()

(1)作用：用來(lái)截取子數(shù)組量窘，從指定的數(shù)組中，截取幾個(gè)連續(xù)的元素氢拥，組成一個(gè)新數(shù)組沙廉；

(2)語(yǔ)法：let res=數(shù)組名.slice(start,[end]);

(3)語(yǔ)法解釋：start截取的開(kāi)始下標(biāo)牍蜂，end截取的結(jié)束下標(biāo)(可省略勺美，如果省略谣拣，一直截取到數(shù)組末尾)，[]表示可以省略叁怪；

(4)返回值：截取的元素組成的新數(shù)組审葬；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.slice(2,5);
console.log(res);// [3, 4, 5]
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9]

image

3，arr.join()

(1)作用：將數(shù)組的元素值通過(guò)指定的字符連接到一起，并組成一個(gè)新的字符串涣觉；

(2)語(yǔ)法：let res=arr.join(str);

(3)語(yǔ)法解釋：str指代一個(gè)字符串痴荐；

(4)返回值：返回?cái)?shù)組元素加分割字符串組成的一個(gè)新數(shù)組；和字符串方法arr.split(str)有互反的作用官册；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.join('-');
console.log(res);// 1-2-3-4-5-6-7-8-9
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9]
const test=res.split('-');
console.log(test);// ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
console.log(res);// 1-2-3-4-5-6-7-8-9

image

4生兆，arr.toString()

(1)作用：將數(shù)組的元素值通過(guò)逗號(hào)連接到一起，并組成一個(gè)新的字符串膝宁；

(2)語(yǔ)法：let res=arr.toString();

(3)語(yǔ)法解釋：#鸦难；

(4)返回值：返回用數(shù)組元素加逗號(hào)分隔組成的新字符串；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.toString();
console.log(res);// 1,2,3,4,5,6,7,8,9
console.log(arr)// [1, 2, 3, 4, 5, 6, 7, 8, 9]

image

5员淫，arr.map()

(1)作用：將數(shù)組的每個(gè)元素傳遞給指定函數(shù)合蔽， 并返回一個(gè)數(shù)組；

(2)語(yǔ)法：arr.map(function(item){return item*item});

(3)語(yǔ)法解釋：item指代數(shù)組的元素满粗，每個(gè)元素都會(huì)調(diào)用后面的函數(shù)處理一次辈末；

(4)返回值：函數(shù)處理后的新數(shù)組愚争；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.map((item)=>{return item*item});
console.log(res);// [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9] 

image

6,arr.filter()

(1)作用：依據(jù)指定的函數(shù)邏輯判斷映皆，并返回原數(shù)組的一個(gè)元素的子集組成的新數(shù)組；

(2)語(yǔ)法：arr.filter(function(item){return item<n});

(3)語(yǔ)法解釋：item指代數(shù)組元素轰枝，符合條件(判定為true)的item會(huì)被返回捅彻；

(4)返回值：返回符合判斷條件的元素組成的新數(shù)組；

(5)示例代碼：

// 示例1
const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.filter((item)=>{return item<5});
console.log(res);// [1, 2, 3, 4]

// 示例2
const arr2=[0,1,2,3];
const res2=arr2.filter((item)=>{return true})鞍陨；
console.log(res2);// [0, 1, 2, 3]

// 示例3--true過(guò)濾空元素
const arr3=[0,,1,2,3];
const res3=arr3.filter((item)=>{return true})
console.log(res3);// [0, 1, 2, 3]

// 示例4--true過(guò)濾不掉null
const arr4=[0,null,1,2,3];
const res4=arr4.filter((item)=>{return true})
console.log(res4);// [0, null, 1, 2, 3]

//示例5--true過(guò)濾不掉undefined
const arr5=[0,undefined,1,2,3];
const res5=arr5.filter((item)=>{return true})
console.log(res5);

//示例6--過(guò)濾null和undefined
const arr6=[0,undefined,1,2,null,3];
const res6=arr6.filter((item)=>{return item!==undefined && item!==null})
console.log(res6);// [0, 1, 2, 3]

image

7,arr.reduce()和arr.reduceRight()

(1)作用：依據(jù)指定函數(shù)對(duì)數(shù)組進(jìn)行收斂/縮減步淹，最終返回單一值作為計(jì)算結(jié)果；

(2)語(yǔ)法：arr.reduce(function(res,value,index,arr){return res+value},n);

(3)語(yǔ)法解釋：res為每次計(jì)算的結(jié)果诚撵，初始值是n缭裆，如果n沒(méi)給，則延取數(shù)組第一個(gè)元素作為其初始值寿烟，value則延取數(shù)組第二個(gè)元素澈驼；value是數(shù)組的元素值，index是數(shù)組的下標(biāo)筛武，arr是數(shù)組本身缝其；res和value必須給，index/arr/n可選徘六；注意arr為空數(shù)組且未給參數(shù)n時(shí)報(bào)錯(cuò)内边；arr為單元素?cái)?shù)組，未給n時(shí)待锈，簡(jiǎn)單返回單元素漠其；arr為空數(shù)組，n給了時(shí)，簡(jiǎn)單返回n和屎；reduce從左到右處理阳惹，reduceRight從右到左處理；

(4)返回值：返回最終計(jì)算后的res值眶俩；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
const res1=arr.reduce((res,value)=>{return res+value},0);
console.log(res1);// 45 求和
const res2=arr.reduce((res,value)=>{return res*value},1);
console.log(res2);// 362880 求積
const res3=arr.reduce((res,value)=>{return res>value?res:value});
console.log(res3);// 9 求最大值

image

8,arr.find()

(1)作用：判斷數(shù)組內(nèi)是否有符合條件的元素莹汤，并返回這個(gè)元素；

(2)語(yǔ)法：arr.find(function(item,index,arr){return item<9});

(3)語(yǔ)法解釋：item數(shù)組元素颠印，index數(shù)組下標(biāo)纲岭，arr數(shù)組本身；

(4)返回值：返回?cái)?shù)組內(nèi)通過(guò)判斷的第一個(gè)元素的值,若找不到返回undefined线罕；空數(shù)組不執(zhí)行函數(shù)止潮；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.find((item)=>{return item<4})
console.log(res);// 1
const arr1=[{name:'tom',age:30},{name:'jery',age:35}];
const res1=arr1.find((item)=>{return item.name==='tom'});
console.log(res1);// {name: "tom", age: 30}
const res2=arr1.find((item)=>{return item.name==='tomBro'});
console.log(res2);// undefined 

image

9,Array.from()

(1)作用：從一個(gè)類似數(shù)組或可迭代對(duì)象中創(chuàng)建一個(gè)新的數(shù)組；

(2)語(yǔ)法：Array.from(arrayLike, mapFn, thisArg)钞楼；

(3)語(yǔ)法解釋：arrayLike(必須)想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對(duì)象或可迭代對(duì)象喇闸；mapFn(可選)如果指定了該參數(shù)，新數(shù)組中的每個(gè)元素會(huì)執(zhí)行該回調(diào)函數(shù)询件；thisArg(可選)執(zhí)行回調(diào)函數(shù) mapFn 時(shí)的 this 對(duì)象燃乍；

(4)返回值：一個(gè)新的數(shù)組；

(5)示例代碼：

function fun() {
  return Array.from(arguments);
}
const res=fun('tom', 'jery');
console.log(res);// ["tom", "jery"]

const res1=Array.from('test');
console.log(res1);// ["t", "e", "s", "t"]

const res4=Array.from('test',item=>item+2);
console.log(res4);// ["t2", "e2", "s2", "t2"]

const set = new Set(['test', window]); 
const res2=Array.from(set);
console.log(res2);// ["test", Window]

const map = new Map([[1, 2], [2, 4], [4, 8]]);
const res3=Array.from(map);
console.log(res3);// [[1, 2], [2, 4], [4, 8]]

image

10,Array.of()

(1)作用：將任意數(shù)量的參數(shù)宛琅，按順序組成新數(shù)組刻蟹；

(2)語(yǔ)法：Array.of(n);

(3)語(yǔ)法解釋：n任意格式的數(shù)據(jù)；

(4)返回值：參數(shù)按照順序組成的新數(shù)組嘿辟；和Array()的區(qū)別舆瘪，當(dāng)參數(shù)是Number且是>=0的整數(shù)時(shí)，Array()默認(rèn)返回對(duì)應(yīng)長(zhǎng)度的數(shù)組(元素為空)红伦，否則報(bào)錯(cuò)英古；而Array.of()一律將參數(shù)當(dāng)作元素看待。

(5)示例代碼：

const res=Array.of('tom');
console.log(res);// ["tom"]
const res1=Array.of('tom',1,[1,2],{name:'tom'});
console.log(res1);// ["tom", 1, [1, 2], {name: "tom"}]

image

11昙读，Object.keys(arr)

(1)作用：遍歷數(shù)組的鍵(下標(biāo))召调；

(2)語(yǔ)法：Object.keys(arr);

(3)語(yǔ)法解釋：arr指代某個(gè)數(shù)組；

(4)返回值：返回原數(shù)組的鍵(下標(biāo))組成的新數(shù)組箕戳；

(5)示例代碼：

const arr1=[1,2,3,4,5,6,7,8,9];
const res1=Object.keys(arr1);
console.log(res1);// ["0", "1", "2", "3", "4", "5", "6", "7", "8"]
let arr2=[];
arr2['name']='tom';
arr2['age']=30;
arr2['female']='man';
const res2=Object.keys(arr2);
console.log(res2);// ["name", "age", "female"]

image

12某残，arr.values()

(1)作用：該方法獲取一個(gè)數(shù)組迭代器對(duì)象，該對(duì)象包含數(shù)組中每一個(gè)索引的值;

(2)語(yǔ)法：arr.values();

(3)語(yǔ)法解釋：迭代器對(duì)象Iterator具有next()方法陵吸，可以用來(lái)依次調(diào)用它的值玻墅；

(4)返回值：返回原數(shù)組的迭代器對(duì)象，通過(guò)next()方法的value屬性獲取迭代器對(duì)象的值壮虫；

(5)示例代碼：

const arr=['tom','jery','jack','wilson'];
const res=arr.values();
console.log(res.next().value);// tom
console.log(res.next().value);// jery
console.log(res.next().value);// jack
console.log(res.next().value);// wilson
console.log(res.next().value);// undefined

image

13澳厢，arr.keys()

(1)作用：該方法獲取一個(gè)數(shù)組迭代器對(duì)象环础，該對(duì)象包含數(shù)組中每一個(gè)索引的鍵;

(2)語(yǔ)法：arr.keys();

(3)語(yǔ)法解釋：迭代器對(duì)象Iterator具有next()方法，可以用來(lái)依次調(diào)用它的值剩拢；

(4)返回值：返回原數(shù)組的迭代器對(duì)象线得，通過(guò)next()方法的value屬性獲取迭代器對(duì)象的值；

(5)示例代碼：

const arr=['tom','jery','jack','wilson'];
const res=arr.keys();
console.log(res.next().value);// 0
console.log(res.next().value);// 1
console.log(res.next().value);// 2
console.log(res.next().value);// 3
console.log(res.next().value);// undefined

image

14徐伐，arr.entries()

(1)作用：該方法獲取一個(gè)數(shù)組迭代器對(duì)象贯钩，該對(duì)象包含數(shù)組中每一個(gè)索引的鍵值對(duì);

(2)語(yǔ)法：arr.entries();

(3)語(yǔ)法解釋：迭代器對(duì)象Iterator具有next()方法，可以用來(lái)依次調(diào)用它的值办素；

(4)返回值：返回原數(shù)組的迭代器對(duì)象角雷，通過(guò)next()方法的value屬性獲取迭代器對(duì)象的值；

(5)示例代碼：

const arr=['tom','jery','jack','wilson'];
const res=arr.entries();
console.log(res.next().value);// [0, "tom"]
console.log(res.next().value);// [1, "jery"]
console.log(res.next().value);// [2, "jack"]
console.log(res.next().value);// [3, "wilson"]
console.log(res.next().value);// undefined

image

三性穿，不動(dòng)原數(shù)組勺三，只依據(jù)原數(shù)組進(jìn)行判斷/處理的方法

1，arr.forEach()

(1)作用：遍歷數(shù)組需曾，為每個(gè)元素調(diào)用指定的函數(shù)吗坚；

(2)語(yǔ)法：arr.forEach(function(item,index,arr){arr[index]=item+1;});

(3)語(yǔ)法解釋：item指代元素，index指代下標(biāo)呆万，arr指代數(shù)組本身商源；

(4)返回值：undefined；

(5)示例代碼：

// 示例1.1
const arr=[1,2,3,4,5,6,7,8,9];
let sum=0;
const res=arr.forEach((item)=>{sum+=item});
console.log(res)桑嘶；// undefined
console.log(sum);// 45

// 示例1.2
const res1=arr.forEach((item,index,arr)=>{arr[index]=item+1})
console.log(res1)炊汹；// undefined
console.log(arr);// [2, 3, 4, 5, 6, 7, 8, 9, 10]

// 示例1.3
const res2=arr.forEach((item)=>{return item+1});
console.log(res2);// undefined

// 示例2
let arr2=[];
arr.forEach((item,index)=>{arr2[index]=item+1});
console.log(arr2);// [2, 3, 4, 5, 6, 7, 8, 9, 10]

image

2,for

(1)作用：遍歷數(shù)組；

(2)語(yǔ)法：for(let key=0;key<arr.lenth;key++){};

(3)語(yǔ)法解釋：arr指代某個(gè)數(shù)組逃顶；

(4)返回值：無(wú)；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
for(let key=0;key<arr.length;key++){
  console.log(arr[key]);
}
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

image

3,for...of...

(1)作用：遍歷數(shù)組充甚；

(2)語(yǔ)法：for(let item of arr){};

(3)語(yǔ)法解釋：arr指代數(shù)組以政，item指代數(shù)組的元素；

(4)返回值：無(wú)伴找；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
for(let item of arr){
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

image

4,for...in...

(1)作用：遍歷數(shù)組盈蛮；

(2)語(yǔ)法：for(let key in arr){};

(3)語(yǔ)法解釋：arr指代數(shù)組，key指代數(shù)組的下標(biāo)技矮；

(4)返回值：無(wú)抖誉；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
for(let item of arr){
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

image

5,...(spread)

(1)作用：如果函數(shù)需要傳入多個(gè)參數(shù)值，但是給定的參數(shù)卻是數(shù)組衰倦，函數(shù)無(wú)法處理時(shí)袒炉，可以用...實(shí)現(xiàn)數(shù)組的打散和逐個(gè)分配；

(2)語(yǔ)法：function computed(arr){};let arr=[1,2,3];computed(...arr);

(3)語(yǔ)法解釋：arr指代某個(gè)數(shù)組樊零；

(4)返回值：無(wú)我磁；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
console.log(...arr);// 1 2 3 4 5 6 7 8 9 
const res=Math.min(...arr);
console.log(res);// 1
// 分解步驟
function getMin(){
  const arrLike=arguments;
  let min;
  for(let key in arrLike){
    if(key===0){
      min=arrLike[key]
    }else{
      min=min<=arrLike[key]?min:arrLike[key];
    }
  } 
  return min;
}
const res1 = getMin(...arr);
console.log(res1);// 1

image

6,arr.indexOf()

(1)作用：搜索整個(gè)數(shù)組中是否有給定的值孽文；

(2)語(yǔ)法：arr.indexOf(n) || arr.lastIndexOf(n);

(3)語(yǔ)法解釋：n代表某個(gè)元素值；

(4)返回值：返回找到的第一個(gè)元素的索引夺艰，如果沒(méi)找到芋哭，返回-1；indexOf從前往后找郁副，lastIndexOf從后往前找减牺；

(5)示例代碼：

const arr=['tom','jery','tom','jack'];
const res1=arr.indexOf('tom');
console.log(res1);// 0
const res2=arr.lastIndexOf('tom')
console.log(res2);// 2
const res3=arr.indexOf('kity')
console.log(res3);// -1

image

7,arr.every()和arr.some()

(1)作用：對(duì)數(shù)組元素應(yīng)用指定的函數(shù)進(jìn)行判定，判定是否符合條件存谎；

(2)語(yǔ)法：arr.every(function(item){return item<n}),arr.some(function(item){return item<n});

(3)語(yǔ)法解釋：<n是某判斷條件烹植；every要求所有元素符合條件，some只要求最少有一個(gè)元素符合要求

(4)返回值：返回true或者false愕贡；

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.every((item)=>{return item<10});
console.log(res);// true
const res1=arr.every((item)=>{return item<8});
console.log(res1);// false
const res2=arr.some((item)=>{return item <8});
console.log(res2);// true
const res3=arr.some((item)=>{return item >10});
console.log(res3);// false

image

8草雕，Array.isArray()

(1)判斷一個(gè)數(shù)據(jù)是否是數(shù)組格式；

(2)語(yǔ)法：Array.isArray();

(3)語(yǔ)法解釋：n是一個(gè)待判斷的數(shù)據(jù)固以；

(4)返回值：布爾值墩虹；

(5)示例代碼：

const data1=[1,2,3,,4,5,6];
const data2={name:'tom',age:30};
const data3='tom';
const res1=Array.isArray(data1);
console.log(res1);// true
const res2=Array.isArray(data2);
console.log(res2);// false
const res3=Array.isArray(data3);
console.log(res3);// false

image

9,arr.includes()

(1)作用：判斷一個(gè)數(shù)組中是否包含一個(gè)指定的值；

(2)語(yǔ)法：arr.includes(n);

(3)語(yǔ)法解釋：n某個(gè)指定的值憨琳；

(4)返回值：布爾值诫钓；

(5)示例代碼：

const arr=['中國(guó)','日本','韓國(guó)'];
const res1=arr.includes('中國(guó)');
console.log(res1);// true
const res2=arr.includes('china');
console.log(res2);// false

image

10,arr.findIndex();

(1)作用：判斷數(shù)組內(nèi)是否有符合條件的元素，并返回這個(gè)元素的下標(biāo)篙螟；

(2)語(yǔ)法：arr.findIndex(function(item,index,arr){return item<9});

(3)語(yǔ)法解釋：item數(shù)組元素菌湃，index數(shù)組下標(biāo)，arr數(shù)組本身遍略；

(4)返回：返回?cái)?shù)組內(nèi)通過(guò)判斷的第一個(gè)元素的下標(biāo),若找不到返回-1惧所；空數(shù)組不執(zhí)行函數(shù)；

和arr.indexOf(n)的區(qū)別：indexOf直接檢查某個(gè)數(shù)組是否包含某個(gè)元素绪杏，findIndex是判斷數(shù)組內(nèi)是否有符合條件的元素下愈，后者功能更豐富，但是前者更簡(jiǎn)潔蕾久；另外势似，借助Object.is后者可以判斷NaN，前者不可以僧著。

(5)示例代碼：

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.findIndex((item)=>{return item<4})
console.log(res);// 0
const arr1=[{name:'tom',age:30},{name:'jery',age:35}];
const res1=arr1.findIndex((item)=>{return item.name==='tom'});
console.log(res1);// 0
const res2=arr1.findIndex((item)=>{return item.name==='tomBro'});
console.log(res2);// -1
// indexOf方法不能判定NaN
const res3=[NaN].indexOf(NaN);
console.log(res3);// -1
// finIndex借助Object.is方法可以判斷NaN
const res4=[NaN].findIndex(y => Object.is(NaN, y));
console.log(res4);// 0