JavaScript數組方法詳解
JavaScript中數組的方法種類眾多,在ES3-ES7不同版本時期都有新方法;並且數組的方法還有原型方法和從object繼承的方法,這里我們只介紹數組在每個版本中原型上的方法,本文舉例介紹了從ES3到ES7幾乎所有的數組方法。這大概是最全的數組方法詳解了。希望讀者能從中有所收獲。
一、各版本數組方法一覽表
| 數組方法名 | 對應版本 | 功能 | 原數組是否改變 |
|---|---|---|---|
| pop() | ES3- | 刪除最后一位,並返回刪除的數據 | 是 |
| push() | ES3- | 在最后一位新增一或多個數據,返回長度 | 是 |
| shift() | ES3- | 刪除第一位,並返回刪除的數據 | 是 |
| unshift() | ES3- | 在第一位新增一或多個數據,返回長度 | 是 |
| reverse() | ES3- | 反轉數組,返回結果 | 是 |
| sort() | ES3- | 排序(字符規則),返回結果 | 是 |
| splice() | ES3- | 刪除指定位置,並替換,返回刪除的數據 | 是 |
| copyWithin() | ES6- | 指定位置的成員復制到其他位置 | 是 |
| fill() | ES6- | 使用給定的值,填充到數組中,類似於替換 | 是 |
| concat() | ES3- | 合並數組,並返回合並之后的數據 | 否 |
| join() | ES3- | 使用分隔符,將數組轉為字符串並返回 | 否 |
| slice() | ES3- | 截取指定位置的數組,並返回 | 否 |
| toString() | ES3- | 直接轉為字符串,並返回 | 否 |
| valueOf() | ES5- | 返回數組對象的原始值 | 否 |
| indexOf() | ES5- | 查詢並返回數據的索引 | 否 |
| lastIndexOf() | ES5- | 反向查詢並返回數據的索引 | 否 |
| forEach() | ES6- | 參數為回調函數,會遍歷數組所有的項,回調函數接受三個參數,分別為value,index,self;forEach沒有返回值 | 否 |
| map() | ES6- | 同forEach,同時回調函數返回數據,組成新數組由map返回 | 否 |
| filter() | ES6- | 同forEach,同時回調函數返回布爾值,為true的數據組成新數組由filter返回 | 否 |
| every() | ES6- | 同forEach,同時回調函數返回布爾值,全部為true,由every返回true | 否 |
| some() | ES6- | 同forEach,同時回調函數返回布爾值,只要有一個為true,由some返回true | 否 |
| reduce() | ES6- | 歸並,同forEach,迭代數組的所有項,並構建一個最終值,由reduce返回 | 否 |
| reduceRight() | ES6- | 反向歸並,同forEach,迭代數組的所有項,並構建一個最終值,由reduceRight返回 | 否 |
| from() | ES6- | 將類數組對象和可遍歷對象轉化為數組 | 否 |
| of() | ES6- | 將一組值轉化為數組 | 否 |
| find() | ES6- | 在數組內部, 找到第一個符合條件的數組成員,返回值 | 否 |
| findIndex() | ES6- | 在數組內部, 找到第一個符合條件的數組成員,返回索引 | 否 |
| includes() | ES7- | 表示某個數組是否包含給定的值,與字符串的includes()方法類似 | 否 |
二、方法詳解
在講解數組方法前,我們先簡單將數組方法按上方表格內容分為下面兩大類
(1)使用后會改變原數組
(2)使用后不會改變原數組
第一類、使用后原數組改變,失去原數組,得到改變后的新數組
1.pop()
功能:用於刪除並返回數組的最后一個元素。
參數:無
var arr = [1,2,3];
console.log(arr.pop()); //3---刪除並返回3
console.log(arr); //[1,2]---原數組改變
2.push()
功能:向數組的末尾添加一個或更多元素,並返回數組新的長度。
參數:push(newData1, newData2, ......)
var arr = [1,2,3];
console.log(arr.push("a")); //4---返回數組現在的長度
console.log(arr); //[1,2,3,"a"]---原數組改變
console.log(arr.push("hello","world")); //6---一次可添加多個數組,返回新的數組長度
console.log(arr); //[1,2,3,"a","hello",world]---原數組改變
3.shift()
功能:方法用於刪除並返回數組的第一個元素。
參數:無
var arr = [1,2,3]
console.log(arr.shift()); //1---返回被刪除的元素
console.log(arr); //[2,3]---原數組改變
console.log(arr.shift()); //2---返回被刪除的元素
console.log(arr); //[3]---原數組改變
4.unshift()
功能:向數組的開頭添加一個或更多元素,並返回新的長度。
參數:unshift(newData1, newData2, ......)
var arr = [1,2,3];
console.log(arr.unshift("world")); //4---返回當前的數組長度
console.log(arr); //["world",1,2,3]---原數組改變
console.log(arr.unshift("a","b","hello")); //7---返回當前的數組長度,可一次性添加多個元素
console.log(arr); //["a","b","hello","world",1,2,3]---原數組改變
5.reverse()
功能:顛倒數組中元素的順序,並返回更改后的數組
參數:無
var arr = [1,2,3];
console.log(arr.reverse()); //[3,2,1]---返回顛倒后的數組
console.log(arr); //[3,2,1]---原數組改變
6.sort()
功能:對數組中的元素進行排序,默認是升序,返回新數組
參數:無
var arr = [6,1,5,2,3,4];
console.log(arr.sort()); //[1, 2, 3, 4, 5, 6]---返回排序后的新數組,默認升序排列
console.log(arr); //[1, 2, 3, 4, 5, 6]---原數組改變
注意:但是在排序前,會先調用數組的toString方法,將每個元素都轉成字符之后,再進行排序,此時會按照字符串的排序,逐位比較,進行排序。
var arr = [6,1024,52,256,369];
console.log(arr.sort()); //[1024, 256, 369, 52, 6]---按照第一個字符的大小排序,多位數值的排序會出錯
console.log(arr); //[1024, 256, 369, 52, 6]---原數組改變
解決方法:通過回調函數實現
參數:sort(callback)
如果需要按照數值排序,需要傳參。sort(callback),callback為回調函數,該函數應該具有兩個參數,比較這兩個參數,然后返回一個用於說明這兩個值的相對順序的數字(a-b)。其返回值如下:
若 a 小於 b,返回一個小於 0 的值。
若 a 等於 b,則返回 0。
若 a 大於 b,則返回一個大於 0 的值。
1)從小到大排序
var arr = [6,1024,52,256,369];
console.log(arr.sort(fn)); //[6, 52, 256, 369, 1024]---排序正常升序
console.log(arr); //[6, 52, 256, 369, 1024]---原數組改變
function fn(a,b){
return a-b;
}
2)從大到小排序
var arr = [6,1024,52,256,369];
console.log(arr.sort(fn)); //[1024, 369, 256, 52, 6]---排序正常降序
console.log(arr); //[1024, 369, 256, 52, 6]---原數組改變
function fn(a,b){
return b-a;
}
7.splice()
功能:向數組中添加,或從數組刪除,或替換數組中的元素,然后返回被刪除/替換的元素。
參數:splice(start,num,data1,data2,...); 所有參數全部可選;分為多種情況
start:整數,規定添加/刪除項目位置的索引,使用負數可從數組結尾處規定刪除的位置
num:整數,規定要刪除元素的數量,若為0則不會刪除
data1,data2,data3.....:可選,規定需要添加的元素
(1)不傳參時:無操作
var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.splice()); //[]---不傳參,不操作,沒有沒刪除替換的元素,返回空數組
console.log(arr); //["Tom","Jack","Lucy","Lily","May"]---無操作,原數組未變,返回原數組
(2)只傳入start:表示從索引為start的數據開始刪除,直到數組結束
var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.splice(2)); //["Lucy", "Lily", "May"]--從索引為2開始刪除,直到結束,返回被刪除的數組
console.log(arr); //["Tom", "Jack"]---原數組改變,返回改變后的數組
var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.splice(0)); //["Tom","Jack","Lucy","Lily","May"]--從索引為0開始刪除,直到結束
console.log(arr); //[]---原數組數據被全部刪除,返回空數組
(3)傳入start和num:表示從索引為start的數據開始刪除,刪除num個
var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.splice(1,3)); //["Jack", "Lucy", "Lily",]---從索引為2開始刪除,刪除3個元素
console.log(arr); //["Tom", "May"]---原數組改變,按順序返回剩下的元素
(4)傳入更多:表示從索引為start的數據開始刪除,刪除num個,並將第三個參數及后面所有參數,插入到start的位置
1)刪除的數據,等於,添加的數據,數量相同。相當於把某幾個數據替換了
var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.splice(2,2,"a","b")); //["Lucy", "Lily"]--從索引為2開始刪除2個,再把"a""b"插入刪除的空隙
console.log(arr); //["Tom", "Jack", "a", "b", "May"]---原數組改變,相當於被替換了
2)刪除的數據,多於,添加的數據。多的空位由后面的數據向前移補上
var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.splice(2,2,"a"));//["Lucy", "Lily"]--從索引為2開始刪除2個,再把"a"插入刪除的空隙,多的空隙,后面數據補上來。
console.log(arr); //["Tom", "Jack", "a", "May"]---原數組改變
3)刪除的數據,少於,添加的數據。多的數據擠進去,后面的元素都相應后退。
var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.splice(2,1,"a","b")); //["Lucy"]--從索引為2開始刪除1個,再把"a""b"插入刪除的空隙
console.log(arr); //["Tom", "Jack", "a", "b", "Lily", "May"]---原數組改變
(5)傳入更多:表示從索引為start的數據開始刪除,刪除num個,並將第三個參數及后面所有參數,插入到start的位置
var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.splice(2,0,"a","b")); //[]
console.log(arr); //["Tom", "Jack", "a", "b", "Lucy", "Lily", "May"]---原數組改變
8.ES6新增:copyWithin()
功能:在當前數組內部,將指定位置的成員復制到其他位置頂替掉原來位置的元素,並返回新數組
參數:copyWithin(target,start=0,end=this.length)
target:從該索引位置開始替換元素,如果為負值,則表示從右往左
start:從該索引位置開始讀取元素(包括該索引對應的元素)。默認為0,如果為負值,則表示從右往左
end:到該索引位置前停止讀取元素(不包括該索引對應的元素)。默認等於數組長度,使用負數可從數組結尾處規定位置開始
Tip:數組的長度前后不會改變
var arr=["Tom","Jack","Lucy","Lily","May","Alice","Ben","Rouse","Peter"]
console.log(arr.copyWithin(1,3,6));
//["Tom", "Lily", "May", "Alice", "May", "Alice", "Ben", "Rouse", "Peter"]
//從索引為1的元素開始被替換,從索引為3的元素開始讀取要替換的 索引為6的元素前面停止替換
//簡單來說就是將索引為3,4,5位置的元素復制到索引為1,2,3的位置上.后面的元素不變。
var arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(0, -2, -1));//負數表示從右到左數索引。-2相當於索引2的位置,-1相當索引為3的位置
//[4, 2, 3, 4, 5]
//表示將索引為-2的元素復制到索引為0的位置上
9.ES6新增:fill()
功能:使用給定的值,填充到數組中,類似於替換
參數:fill(data,start,end)
data:要填充數組的值
start:填充開始的位置,默認值是0
end:填充結束的位置,默認值是this.length(數組長度)
var arr = ["a","b","c"];
console.log(arr.fill(7));//[7, 7, 7]---start和end都為0,默認填充所有元素
console.log(arr);//[7, 7, 7]---原數組改變
var arr = ["a","b","c","d","e","f"];
console.log(arr.fill(7, 1, 4));//["a", 7, 7, 7, "e", "f"]---將索引1到4的元素填充為7
console.log(arr);//["a", 7, 7, 7, "e", "f"]---原數組改變
第二類、使用后原數組不變,返回新數組后,仍然可以得到原數組
1.concat()
功能:用於將兩個或多個數組連接到一起
參數:concat(data1,data2,...);
data:為數組時,將data合並到原數組;data為具體數據時直接添加到原數組尾部;省略時創建原數組的副本
var arr1 = [1,2,3];
var arr2 = arr1.concat();
console.log(arr1); //[1,2,3]---原數組
console.log(arr2); //[1,2,3]---原數組的副本;看起來和原數組一樣,但他們是兩個東西,不相等。
console.log(arr1 === arr2); //false---數組也是對象的一種,所有對象都不相等,除非是對象本身等於自己
console.log(arr1.concat("hello","world"));//[1,2,3,"hello","world"]---將字符拼接到數組后
console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));//[1,2,3,"a","b",[3,4],{"name":"admin"}]
var arr3 = [4,5,6];
console.log(arr1.concat(arr3));//[1, 2, 3, 4, 5, 6]---將兩個數組拼接
console.log(arr1); //[1,2,3]---原數組未改變
2.join()
功能:根據指定分隔符將數組中的所有元素放入一個字符串,並返回這個字符串
參數:join(str);
str:默認為","號,以傳入的字符作為分隔符
var arr = [1,2,3];
console.log(arr.join()); //1,2,3---將數組每個元素用","連接成字符串並返回
console.log(arr.join("-")); //1-2-3---將數組每個元素用"-"連接成字符串並返回
console.log(arr); //[1,2,3]---原數組未改變
//當數組里的元素也是數組或對象時
var a= [['OBKoro1','23'],'test'];
console.log(a.join("*"));//OBKoro1,23*test---數組內的還是用","連接(join只對一維數組連接,多維數組時,里面的數組不連接,只是轉成字符串),數組外的用"*"連接
var b= [{name:'OBKoro1',age:'23'},'test'];
console.log(b.join("*"));//[object Object]*test---數組內是對象時。會出問題,先轉成數組,對象內容顯示"Object",再連接。不能顯示具體值
// 對象轉字符串推薦JSON.stringify(obj);
3.slice()
功能:可從已有的數組中返回選定的元素。
參數:slice(start, end)
start:為必填,表示從第幾位索引開始。若為負數,則表示從后往前計算索引
end:為可填,表示到第幾位結束(不包含end位),省略表示到最后一位;若為負數,則表示從后往前計算索引
var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.slice(1,3)); //["Jack","Lucy"]---返回索引為1,2的元素組成的數組
console.log(arr.slice(1)); //["Jack","Lucy","Lily","May"]---返回索引為1,2,3,4的元素組成的數組
console.log(arr.slice(-4,-1)); //["Jack","Lucy","Lily"]
console.log(arr.slice(-2)); //["Lily","May"]
console.log(arr.slice(1,-2)); //["Jack","Lucy"]
console.log(arr); //["Tom","Jack","Lucy","Lily","May"]---原數組未改變
4.toString()
功能:轉換成字符串,類似於沒有參數的join()。該方法會在數據發生隱式類型轉換時被自動調用,如果手動調用,就是直接轉為字符串。
參數:無
var arr = [1,2,3];
var a= [{name:'OBKoro1',age:'23'},'test'];
console.log(arr.toString()); //1,2,3---轉為字符
console.log(a.toString()); //[object Object],test--對象沒辦法直接轉
console.log(arr); //[1,2,3]---原數組未改變
5.valueOf()
功能:返回數組的原始值(一般情況下其實就是數組自身),一般由js在后台調用,並不顯式的出現在代碼中
參數:無
var arr = [1,2,3];
console.log(arr.valueOf()); //[1,2,3]---返回的是數組本身
console.log(arr); //[1,2,3]---原數組未變
//為了證明返回的是數組自身
console.log(arr.valueOf() == arr); //true
6.indexOf()
功能:根據指定的數據,從左向右,查詢某元素在數組中出現的位置,如果不存在指定的元素,返回-1。該方法是查詢方法,不會對數組產生改變。
參數:indexOf(value, start);
value:必填,要查詢的數據;
start:選填,表示開始查詢的位置,當start為負數時,從數組的尾部向前數;如果查詢不到value的存在,則方法返回-1
var arr = ["h","e","l","l","o"];
console.log(arr.indexOf("l")); //2---字母"l"在數組中的索引,返回第一個索引
console.log(arr.indexOf("l",3)); //3
console.log(arr.indexOf("l",4)); //-1---從索引為4的位置開始查詢,未找到返回-1
console.log(arr.indexOf("l",-1)); //-1
console.log(arr.indexOf("l",-3)); //2
console.log(arr); // ["h","e","l","l","o"]---原數組未改變
7.lastIndexOf()
功能:根據指定的數據,從右向左,查詢在數組中出現的位置,如果不存在指定的數據,返回-1。該方法是查詢方法,不會對數組產生改變。
參數:lastIndexOf(value, start);
value:必填,要查詢的數據;
start:選填,表示開始查詢的位置,當start為負數時,從數組的頭部向尾部數;如果查詢不到value的存在,則方法返回-1
var arr = ["h","e","l","l","o"];
console.log(arr.lastIndexOf("l")); //3
console.log(arr.lastIndexOf("l",3)); //3
console.log(arr.lastIndexOf("l",1)); //-1
console.log(arr.lastIndexOf("l",-3)); //2
console.log(arr.lastIndexOf("l",-4)); //-1
console.log(arr); // ["h","e","l","l","o"]---原數組未改變
8.forEach()
功能:用來遍歷數組,該方法沒有返回值。forEach接收的回調函數會根據數組的每一項執行,該回調函數默認有三個參數,分別為:遍歷到的數組的數據,對應的索引,數組自身。
參數:forEach(callback);callback默認有三個參數,分別為value,index,self。
value:遍歷到的數組元素
index:元素對應的索引
self:數組自身
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.forEach(function(value,index,self){
console.log(index + "--" + value + "--" + self);
})
// 打印結果為:---第一列為遍歷到的數組元素,第二列為對應的索引,第三列為數組自身
// 0--Tom--Tom,Jack,Lucy,Lily,May
// 1--Jack--Tom,Jack,Lucy,Lily,May
// 2--Lucy--Tom,Jack,Lucy,Lily,May
// 3--Lily--Tom,Jack,Lucy,Lily,May
// 4--May--Tom,Jack,Lucy,Lily,May
console.log(arr); //["Tom","Jack","Lucy","Lily","May"]---原數組未改變
console.log(a); //undefined---forEach沒有返回值
//該方法為遍歷方法,不會修改原數組
9.map()
功能:1.同forEach功能;2.map的回調函數會將執行結果返回,最后map將所有回調函數的返回值組成新數組返回。
參數:map()接收一個回調函數作為參數,這個回調函數需要有返回值;map(callback);callback默認有三個參數,分別為value,index,self。
value:遍歷到的數組元素
index:元素對應的索引
self:數組自身
(1)功能1:同forEach
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.map(function(value,index,self){
console.log(index + "--" + value + "--" + self);
})
// 打印結果為:---第一列為遍歷到的數組元素,第二列為對應的索引,第三列為數組自身
// 0--Tom--Tom,Jack,Lucy,Lily,May
// 1--Jack--Tom,Jack,Lucy,Lily,May
// 2--Lucy--Tom,Jack,Lucy,Lily,May
// 3--Lily--Tom,Jack,Lucy,Lily,May
// 4--May--Tom,Jack,Lucy,Lily,May
(2)功能2:每次回調函數的返回值被map組成新數組返回
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.map(function(value,index,self){
return "hi:"+value;
})
console.log(a); //["hi:Tom", "hi:Jack", "hi:Lucy", "hi:Lily", "hi:May"]
//可通過此方法批量修改數組,返回新數組。
console.log(arr); //["Tom", "Jack", "Lucy", "Lily", "May"]---原數組未改變
10.filter()
功能:1.同forEach功能;2.filter的回調函數需要返回布爾值,當為true時,將本次數組的數據返回給filter,最后filter將所有回調函數的返回值組成新數組返回(此功能可理解為“過濾”)。
參數:filter()接收一個回調函數作為參數,這個回調函數需要有返回值;filter(callback);callback默認有三個參數,分別為value,index,self
value:遍歷到的數組元素
index:元素對應的索引
self:數組自身
(1)功能1:同forEach
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.filter(function(value,index,self){
console.log(index + "--" + value + "--" + self);
})
// 打印結果為:---第一列為遍歷到的數組元素,第二列為對應的索引,第三列為數組自身
// 0--Tom--Tom,Jack,Lucy,Lily,May
// 1--Jack--Tom,Jack,Lucy,Lily,May
// 2--Lucy--Tom,Jack,Lucy,Lily,May
// 3--Lily--Tom,Jack,Lucy,Lily,May
// 4--May--Tom,Jack,Lucy,Lily,May
(2)功能2:當回調函數的返回值為true時,本次的數組值返回給filter,被filter組成新數組返回
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.filter(function(value,index,self){
return value.length > 3;//返回元素長度大於3的元素。若有符合條件的元素,返回元素
})
console.log(a); //["Jack", "Lucy", "Lily"]
//相當於一個篩選器(過濾器),可以在數組中查找需要的內容並返回
console.log(arr); //["Tom", "Jack", "Lucy", "Lily", "May"]---原數組未改變
11.every()
功能:判斷數組中每一項是否都滿足條件,只有所有項都滿足條件,才會返回true。
參數:every()接收一個回調函數作為參數,這個回調函數需要有返回值;every(callback);callback默認有三個參數,分別為value,index,self
value:遍歷到的數組元素
index:元素對應的索引
self:數組自身
(1)功能1:當回調函數的返回值為true時,類似於forEach的功能,遍歷所有;如果為false,那么停止執行,后面的數據不再遍歷,停在第一個返回false的位置。
//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
})
// 打印結果為:沒有返回值,打印了第一個,默認為false,后面的就不再遍歷
// Tom--0--true
//因為回調函數中沒有return true,默認返回undefined,等同於返回false
//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
return value.length < 4;
})
// 打印結果為:
// Tom--0--true
// abc--1--true
// Jack--2--true
//因為當遍歷到Jack時,回調函數到return返回false,此時Jack已經遍歷,但是后面數據就不再被遍歷了
//demo3:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
return true;
})
// 打印結果為:
// Tom--0--true
// abc--1--true
// Jack--2--true
// Lucy--3--true
// Lily--4--true
// May--5--true
//因為每個回調函數的返回值都是true,那么會遍歷數組所有數據,等同於forEach功能
(2)功能2:當每個回調函數的返回值都為true時,every的返回值為true,只要有一個回調函數的返回值為false,every的返回值都為false
//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
return value.length > 3;
})
console.log(a); //false---只要出現一個false,返回值就為false
//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
return value.length > 2;
})
console.log(a); //true---遍歷數組全部為true,才能返回true
12.some()
功能:判斷數組中是否存在滿足條件的項,只要有一項滿足條件,就會返回true。
參數:some()接收一個回調函數作為參數,這個回調函數需要有返回值,some(callback);callback默認有三個參數,分別為value,index,self
value:遍歷到的數組元素
index:元素對應的索引
self:數組自身
(1)功能1
因為要判斷數組中的每一項,只要有一個回調函數返回true,some都會返回true,所以與every正好相反,當遇到一個回調函數的返回值為true時,可以確定結果,那么停止執行,后面都數據不再遍歷,停在第一個返回true的位置;當回調函數的返回值為false時,需要繼續向后執行,到最后才能確定結果,所以會遍歷所有數據,實現類似於forEach的功能,遍歷所有。
//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
return value.length > 3;
})
// 打印結果為:
// Tom--0--true
// abc--1--true
// Jack--2--true
//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
return true;
})
// 打印結果為:
// Tom--0--true
//demo3:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
return false;
})
// 打印結果為:
// Tom--0--true
// abc--1--true
// Jack--2--true
// Lucy--3--true
// Lily--4--true
// May--5--true
(2)功能2
與every相反,只要有一個回調函數的返回值都為true,some的返回值為true,所有回調函數的返回值為false,some的返回值才為false
//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
return value.length > 3;
})
console.log(a); //true
//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
return value.length > 4;
})
console.log(a); //false
13.reduce()
功能:從數組的第一項開始,逐個遍歷到最后,迭代數組的所有項,然后構建一個最終返回的值。
參數:reduce()接收一個或兩個參數:第一個是回調函數,表示在數組的每一項上調用的函數;第二個參數(可選的)作為歸並的初始值,被回調函數第一次執行時的第一個參數接收。
reduce(callback,initial);callback默認有四個參數,分別為prev,now,index,self
callback返回的任何值都會作為下一次執行的第一個參數。
如果initial參數被省略,那么第一次迭代發生在數組的第二項上,因此callback的第一個參數是數組的第一項,第二個參數就是數組的第二項。
prev:初始值, 或者計算結束后的返回值
now:當前元素值
index:當前元素的索引
self:數組自身
//demo1:不省略initial參數,回調函數沒有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
}, 2019)
// 打印結果為:
// 2019--10--0--true
// undefined--20--1--true
// undefined--30--2--true
// undefined--40--3--true
// undefined--50--4--true
// 此時回調函數沒有return,所以從第二次開始,prev拿到的是undefined
//demo2:省略initial參數,回調函數沒有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
})
// 打印結果為:第一次,回調函數的第一個參數是數組的第一項。第二個參數就是數組的第二項
// 10--20--1--true
// undefined--30--2--true
// undefined--40--3--true
// undefined--50--4--true
// 此時回調函數沒有return,所以從第二次開始,prev拿到的是undefined
//demo3:不省略initial參數,回調函數有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
return "hello";
}, 2019)
// 打印結果為:
// 2019--10--0--true
// hello--20--1--true
// hello--30--2--true
// hello--40--3--true
// hello--50--4--true
// 此時回調函數有return,所以從第二次開始,prev拿到的是回調函數return的值
//demo4:省略initial參數,回調函數有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
return "hello";
})
// 打印結果為:第一次,回調函數的第一個參數是數組的第一項。第二個參數就是數組的第二項
// 10--20--1--true
// hello--30--2--true
// hello--40--3--true
// hello--50--4--true
// 此時回調函數有return,所以從第二次開始,prev拿到的是回調函數return的值
//demo5:使用reduce計算數組中所有數據的和
var arr = [10,20,30,40,50];
var sum = arr.reduce(function(prev,now,index,self){
return prev + now;
})
console.log(sum); //150
// 回調函數的最后一次return的結果被返回到reduce方法的身上
//demo6:使用reduce計算數組中所有數據的和
var arr = [10,20,30,40,50];
var sum = arr.reduce(function(prev,now,index,self){
return prev + now;
}, 8)
console.log(sum); //158
// 回調函數的最后一次return的結果被返回到reduce方法的身上
// 因為reduce有第二個參數initial,在第一次執行時被計算,所以最終結果被加上8
14.reduceRight()
功能:從數組的第一項開始,逐個遍歷到最后,迭代數組的所有項,然后構建一個最終返回的值。
參數:reduce()接收一個或兩個參數:第一個是回調函數,表示在數組的每一項上調用的函數;第二個參數(可選的)作為歸並的初始值,被回調函數第一次執行時的第一個參數接收。
reduce(callback,initial);callback默認有四個參數,分別為prev,now,index,self
callback返回的任何值都會作為下一次執行的第一個參數。
如果initial參數被省略,那么第一次迭代發生在數組的第二項上,因此callback的第一個參數是數組的第一項,第二個參數就是數組的第二項。
prev:初始值, 或者計算結束后的返回值
now:當前元素值
index:當前元素的索引
self:數組自身
//demo1:不省略initial參數,回調函數沒有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
}, 2019)
// 打印結果為:
//2019--50--4--true
//undefined--40--3--true
//undefined--30--2--true
//undefined--20--1--true
//undefined--10--0--true
// 此時回調函數沒有return,所以從第二次開始,prev拿到的是undefined
//demo2:省略initial參數,回調函數沒有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
})
// 打印結果為:第一次,回調函數的第一個參數是數組的第一項。第二個參數就是數組的第二項
//50--40--3--true
//undefined--30--2--true
//undefined--20--1--true
//undefined--10--0--true
// 此時回調函數沒有return,所以從第二次開始,prev拿到的是undefined
//demo3:不省略initial參數,回調函數有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
return "hello";
}, 2019)
// 打印結果為:
//2019--50--4--true
//hello--40--3--true
//hello--30--2--true
//hello--20--1--true
//hello--10--0--true
// 此時回調函數有return,所以從第二次開始,prev拿到的是回調函數reduceRight的值
//demo4:省略initial參數,回調函數有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
return "hello";
})
// 打印結果為:第一次,回調函數的第一個參數是數組的第一項。第二個參數就是數組的第二項
//50--40--3--true
//hello--30--2--true
//hello--20--1--true
//hello--10--0--true
// 此時回調函數有return,所以從第二次開始,prev拿到的是回調函數reduceRight的值
//demo5:使用reduce計算數組中所有數據的和
var arr = [10,20,30,40,50];
var sum = arr.reduceRight(function(prev,now,index,self){
return prev + now;
})
console.log(sum); //150
// 回調函數的最后一次return的結果被返回到reduceRight方法的身上
//demo6:使用reduce計算數組中所有數據的和
var arr = [10,20,30,40,50];
var sum = arr.reduceRight(function(prev,now,index,self){
return prev + now;
}, 8)
console.log(sum); //158
// 回調函數的最后一次return的結果被返回到reduceRight方法的身上
// 因為reduceRight有第二個參數initial,在第一次執行時被計算,所以最終結果被加上8
15.ES6新增:from()
功能:將類數組對象和可遍歷對象轉化為數組
參數:from(object, mapFunction, thisValue)
object:必需,要轉換為數組的對象
mapFunction:可選,數組中每個元素要調用的函數
thisValue:可選,映射函數(mapFunction)中的 this 對象
var arr = "foo";
console.log(Array.from(arr));//["f", "o", "o"]---將類數組對象轉換為數組
console.log(arr);//"foo"---不改變原對象
16.ES6新增:of()
功能:將一組值轉化為數組
參數:of(element0[, element1[, ...[, elementN]]])
elementN:任意個參數,將按順序成為返回數組中的元素
console.log(Array.of(1)); // [1]
console.log(Array.of(1, 2, 3)); // [1, 2, 3]
console.log(Array.of(undefined)); // [undefined]
17.ES6新增:find()
功能:在數組內部, 找到第一個符合條件的數組成員
參數:find(callback[, thisArg]);callback回調函數接受三個參數(element,index,self)
element:可選;當前遍歷到的元素
index:可選:當前遍歷到的索引
self:可選:數組本身
thisArg:執行回調時用作this 的對象
var array = [5, 12, 8, 130, 44];
var found = array.find(function(element) {
return element > 10;
});
console.log(found);//12
console.log(array)//[5, 12, 8, 130, 44]---原數組不便
18.ES6新增數組findIndex()
功能:在數組內部, 找到第一個符合條件的數組成員 ,返回索引,若找不到返回-1
參數:arr.findIndex(callback[, thisArg]);callback回調函數接受三個參數(element,index,self)
element:可選;當前遍歷到的元素
index:可選:當前遍歷到的索引
self:可選:數組本身
thisArg:執行回調時用作this 的對象
var array = [5, 12, 8, 130, 44];
function isLargeNumber(element) {
return element > 13;
}
console.log(array.findIndex(isLargeNumber));//3
console.log(array);//[5, 12, 8, 130, 44]---數組未改變
19.ES7新增:includes()
功能:用來判斷一個數組是否包含一個指定的值,根據情況,如果包含則返回 true,否則返回false
參數: arr.includes(valueToFind[, fromIndex])
fromIndex:從fromIndex 索引處開始查找 valueToFind。如果為負值,則按升序從 array.length + fromIndex 的索引開始搜 (即使從末尾開始往前跳 fromIndex 的絕對值個索引,然后往后搜尋)。默認為 0。
valueToFind:需要查找的元素值
var array = [1, 2, 3];
console.log(array1.includes(2));//true
console.log(array);//[1, 2, 3]---原數組未改變
var pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));//true
console.log(pets.includes('at'));//false
console.log(pets);//['cat', 'dog', 'bat']---原數組未改變
