摘要:數組方法全解析包含數組自帶屬性返回創建數組對象的原型函數返回數組對象的長度這個是老熟人了,可以增加數組的原型方法和屬性,這個放在后面的繼承中講數組的方法首先讓我們看看數組的對象屬性。
Javascript 數組方法全解析(包含es6)
1. 數組自帶屬性
constructor //返回創建數組對象的原型函數 length //返回數組對象的長度 prototype //這個是老熟人了,可以增加數組的原型方法和屬性,這個放在后面的繼承中講
2. 數組的方法
//首先讓我們看看數組的對象屬性。 Array.prototype
1. concat
用法:用來連接多個數組的方法 有了這個方法之后我們連接多個數組就方便了 array1.concat(array2,array3,...,arrayX) 該參數可以是一個具體的值也可以是數組對象
let arr = []; let arr1 = [1,2,3,4,5,6]; let pos = 7; console.log(arr.concat(arr1,pos)); // =>[1,2,3,4,5,6,7] //ok 我們再看一個厲害的,合并一維數組和二維數組 var num1 = [[1]]; var num2 = [2, [3]]; var nums = num1.concat(num2); console.log(nums); // =>[[1], 2, [3]] console.log(nums[0][0]); // =>1
2. copyWithin()
用法:淺復制數組的一部分到同一數組中的另一個位置,并返回它,而不修改其大小
重點是不改變大小
arr.copyWithin(target) arr.copyWithin(target, start) arr.copyWithin(target, start, end) arr.copyWithin(目標索引, [源開始索引], [結束源索引])
target(必須) 0為基底的索引,如果target為負數的話那么target為length+target
start(可選) 0為基底的索引,如果start為負數的話那么start為length+start 如果省略的話就是0
end(可選) 0為基底的索引,如果end為負數的話那么end為length+end 如果省略的話就是arr.length
start=>end 在數學中是[) 比如(0,2)表示選下標0,1 (1,4)表示選下標 1,2,3,同理類推
我們來看幾個例子
[1, 2, 3, 4, 5].copyWithin(-2); //=> [1,2,3,1,2] targer為-2,也可以等于-2+5=3 start和end省略 所以等同于copyWithin(3,0,5) [1, 2, 3, 4, 5].copyWithin(0, 3); // => [4,5,3,4,5] [1, 2, 3, 4, 5].copyWithin(0, 3, 4); //=> [4,2,3,4,5] [1, 2, 3, 4, 5].copyWithin(-2, -3, -1); //=>[1, 2, 3, 3, 4] -2等同于-2+5=3 -3等同2 -1等同于4 所以等同于copyWithin(3,2,4) //ok,我們再來看一個特殊的,copyWithin并不單單能對數組對象使用還能對類數組對象使用 [].copyWithin.call({length:5, 3:1},0,3); //=> {0:1,3:1, length:5} /*為什么會出這么個玩意?別急待我一步一步和你說 {length:5, 3:1} => {0:undefined,1:undefined,2:undefined,3:1,4:undefined,length:5} [].copyWithin => Array.prototype.copyWithin.call()這一步也就是把類數組能使用數組的copyWithin方法. [].copyWithin.call({length:5, 3:1},0,3)=>[undefined,undefined,undefined,1,undefined].copyWithin(0,3)=>[1,undefined,undefined,1,undefined]=>{0:1,3:1, length:5} */
3. entries
用法:array.entries(); 返回一個新的Array Iterator對象,該對象包含數組中每個索引的鍵值對
我們先看一段代碼:
var arr= ["a","b","c"]; var Iterator = arr.entries(); //返回一個Array Iterator對象 console.log(Iterator.next().value); //=>[0:"a"] console.log(Iterator.next().value); //=>[1:"b"] console.log(Iterator.next().value); //=>[2:"c"]
ok,介紹完基本用法之后我們來看一下具體應用
//二維數組排序 var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]; function sortArr(arr){ var pos = true; var Iteartor = arr.entries(); while(pos){ var result = Iteartor.next(); if(result.done !== true){ //當循環到最后一個的時候result.done會變成true result.value[1].sort((a,b)=>a-b); }else{ pos = false; } } } sortArr(arr);
我們再來看一個
var arr = ["a","b","c"]; var iteartor = arr.entries(); for(let i of iteartor){ console.log(i); } //[0, "a"] //[1, "b"] //[2, "c"]
for .. of循環能遍歷迭代器對象 //具體我放在以后的文章好好講講
4.Array.from
用法:可以將一個類似數組或者可迭代對象創建一個新的數組(不會改變原數組)
先舉一個小例子
Array.from("abc"); //=>["a","b","c"] Array.from({0:"a",1:"b",length:2}) //=> ["a","b"]
接下來我們再來看一個神奇的例子,一行代碼將數組中的元素去重
Array.from(new Set([4,2,4,2,6,6,7,8])); //=>[4,2,6,7,8]
5.every
every(callback[,thisArg])
用法:用來測試數組中是否每個元素都滿足某種規則
測試函數參數:(value, index, arr) 分別是該數組的值,該數組的索引還有該數組
返回值:Boolean true或者false
var arr = [1,3,5,12,50,6]; var flag = arr.every(chenckIsBig); function chenckIsBig(ele,index,arr){ return ele<20; } console.log(flag) //=>false
6.some
some(callback[,thisArg])
用法:用來測試數組中是否有元素都滿足某種規則
測試函數參數:(value, index, arr) 分別是該數組的值,該數組的索引還有該數組
返回值:Boolean true或者false
var arr = [1,3,5,12,50,6]; var flag = arr.some(chenckIsBig); function chenckIsBig(ele,index,arr){ return ele<20; } console.log(flag) //=>true
7.filter
filter(callback[,thisArg])
用法:用于創建一個新數組,滿足通過參數函數測試的所有函數
測試函數參數:(value, index, arr) 分別是該數組的值,該數組的索引還有該數組
返回值:返回一個新數組
先看一個小例子
const checkIsBigEnough = (value) => value >= 10 let arr = [6,12,50,77,95]; console.log(arr.filter(checkIsBigEnough)); //=> [12,50,77,95]
ok,我再給大家舉一個我經常用的例子,有的時候我們通過ajax獲取后臺穿過來的json數據,但是其實不是所有數據我們都能用的,這個時候filter的就顯得比較重要了,還是看例子
//我從后臺獲取了一個數組,數組中包含多個對象如下: let json = [ {"CostTime": "310", "FromStation": "上海"}, {"CostTime": "336", "FromStation": "北京"}, {"CostTime": "310", "FromStation": "上海"}, {"CostTime": "336", "FromStation": "北京"}, {"CostTime": "310", "FromStation": "上海"}, {"CostTime": "336", "FromStation": "北京"}, {"CostTime": "310", "FromStation": "上海"}, {"CostTime": "336", "FromStation": "北京"}, {"CostTime": "310", "FromStation": "上海"}, {"CostTime": "310", "FromStation": "上海"}, {"CostTime": "336", "FromStation": "北京"} ] //這個時候我只需要獲取FromStation值為北京的對象,這個時候filter就派上用場了 let filterMethod = (value) => value.FromStation == "北京" let finallyData = json.filter(filterMethod); console.log(finallyData); //=> [{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"}]
8.find
find(callback[,thisArg])
用法:和上面幾個是幾兄弟,用法和filter相似,不過find返回值是符合測試函數的第一個值
測試函數參數:(value, index, arr) 分別是該數組的值,該數組的索引還有該數組
返回值:符合測試函數的第一個數組的值,如果沒有符合條件的返回Undefined
let json = [ {"CostTime": "310", "FromStation": "上海"}, {"CostTime": "336", "FromStation": "北京"}, {"CostTime": "340", "FromStation": "杭州"}, ] let checkMethod = (value) => value.CostTime == "340" console.log(json.find(checkMethod)); //=>{"CostTime": "340", "FromStation": "杭州"}
9.findIndex
用法:和上面幾個是幾兄弟,用法和find相似,不過findIndex返回值是符合測試函數的第一個值的索引
測試函數參數:(value, index, arr) 分別是該數組的值,該數組的索引還有該數組
返回值:符合測試函數的第一個數組的值,如果沒有符合條件的返回-1
let json = [ {"CostTime": "310", "FromStation": "上海"}, {"CostTime": "336", "FromStation": "北京"}, {"CostTime": "340", "FromStation": "杭州"}, ] let checkMethod = (value) => value.CostTime == "340" let checkMethod2 = (value) => value.FromStation == "深圳" console.log(json.findIndex(checkMethod)); //=>2 console.log(json.findIndex(checkMethod2)); //=> -1
10.fill
arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)
用法:用一個固定的值去填充數組中從其實索引到終止索引內的全部元素
參數:
value(必填)用來填充數組的值
start(選填)起始索引,默認值為0 如果為負數的話start = start+arr.length
end (選填)終止索引,默認值為arr.length 如果為負數的話 end = end+arr.length
start=>end 在數學中是[),選擇大于等于start,小于end的值
返回值:修改之后的數組
[1,2,3].fill(5) //=> [5,5,5] 不傳start默認為0,不傳end默認為arr.length [1,2,3].fill(5,1) //=>[1,5,5] [1,2,3].fill(5,1,2) //=>[1,5,3] [1,2,3].fill(5,1,1) //=>[1,2,3] 不變因為大于等于1小于1的值沒有 [1,2,3].fill(5,-3,-2) //=>[5,2,3] start = -3 => -3+3 = 0 end = -2 =>-2 + 3 = 1 =>fill(5,0,1) Array(3).fill(5) //=> [5,5,5] 這個方法比較有用,可以初始化數組(將所有值初始化為一個值)
11.indexOf
arr.indexOf(searchElement,formIndex)
參數:
searchElement要查找的元素
formIndex從哪開始查找 (formIndex為一個整數,可以為負數,當formIndex為負數的時候formIndex可以轉化成formIndex+arr.length 如果還為負數的話表示查找整個元素)
返回值:-1(沒有找到元素) 或者 元素的下標(找到元素)
// 找出指定元素在數組中出現的位置 var positionIndex = []; var arr = [1,5,6,1,7,8,1,6,6,6]; var pos = arr.indexOf(1); while(pos!=-1){ positionIndex.push(pos); pos = arr.indexOf(1,pos+1); } console.log(positionIndex); // => [0,3,6]
12.reduce
用法:方法對累加器和數組中的每個元素(從左到右)應用一個函數,將其減少為單個值。(這個是mdn文檔上寫的,看起來感覺特別難懂,其實他就是一個將數組元素不斷遞歸執行一個函數之后返回的值)
我們還是先看例子:
//數組累加 var arr = [3,6,5,1]; arr.reduce((pre,cur)=>pre+cur,10) //10+3+6+5+1 => 25 //數組累乘 var arr = [3,6,5,1]; arr.reduce((pre,cur) => pre*cur) //3*6*5*1 =>90
ok,我們先來看看reduce函數
reduce((preValue,curValue,index,array)=>{},initialValue)
我們先看回調函數中的值:
preValue: 上一次調用回調返回的值,或者是提供的初始值(initialValue)著作權歸作者所有。
curValue: 數組中當前被處理的數組項
index: 當前數組項在數組中的索引值
array: 調用 reduce()方法的數組
我們寫一個demo來看看這個方法是如果實行的
let arr = [1,2,3,4,5,6,7]; arr.reduce((pre,cur)=>{ console.log(pre,cur); return pre+cur; }) /* 1,2 3,3 6,4 10,5 15,6 21,7 28 */ arr.reduce((pre,cur)=>{ console.log(pre,cur); return pre+cur; },10) /* 10,1 11,2 13,3 16,4 20,5 25,6 31,7 38 */
由此可以看出:
在initialValue沒有傳入的時候
pre在第一次循環的時候為數組第一個數
cur為數組第二個值
在initialValue有值的時候
在第一次循環pre初始為initialValue
cur為數組第一個值
其實reduce以遞歸的思想可以理解為:
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
再舉一個reduce的常用例子吧,二維數組的合并
var twoArr = [["a","b"],["c","d"],["e","f"]]; twoArr.reduce((pre,cur)=>{ return pre.concat(cur) },[]) //=> a,b,c,d,e,f
13.reduceRight
用法其實和reduce基本沒有區別,唯一的區別是他是從右到左執行回調函數
var twoArr = [["a","b"],["c","d"],["e","f"]]; twoArr.reduceRight((pre,cur)=>{ return pre.concat(cur) },[]) //=> f,e,d,c,b,a
let arr = [1,2,3,4,5,6];
arr.slice(0,2); // =>[1,2]
arr.slice(-1) // =>[6]
arr.slice(0) // => [1,2,3,4,5,6]
arr.slice(-7) //=> [1,2,3,4,5,6]
arr.slice(2,-3) // => [3]
字符串方法和數組方法相似
let str = "I am Bob";
str.slice(-5); //=> m Bob
str.slice(0,6); //=> I am B
數組方法之splice
splice(start,deleteCount,item...)
用法:萬精油方法,可以對數組進行增加,刪除,插入,可以從數組中移除一個或者多個元素,并且用后面的item來替換它,返回值為刪除的元素的數組,并且改方法會改變原數組
let arr = [1,2,3,4,5,6];
arr.splice(0,5); [1,2,3,4,5]返回一個唄刪除的數組
console.log(arr); // =>[6]
arr.splice(0,0,7,8,9); //返回一個空數組[]
arr // =>[7,8,9,6]
let arr = [1,2,3,4]; //普通for循環 for(var i = 0,length=arr.length;i < length;i++){ //do someThing } //forEach循環 arr.forEach((value, index)=>{ //do someThing }) //map循環 arr.map((value, index)=>{ //do someThing }) //其實還有兩個循環一個for in ,還有一個是for of,不過強烈介意不要用for in,一個是效率比普通for循環差好多,因為它會遍歷整個數組的原型對象,我們來看一個例子 //我們給數組原型添加一個haha的方法 Array.prototype.haha = function(){ //do somthing } //然后我們再用for in來輸出數組 for(let i in arr){ console.log(arr[i]); } //=> 1,2,3,4 haha 最后竟然輸出了haha,這是因為for in這個循環會遍歷數組的原型對象,所以會輸出haha,那么要解決這個有方法么?其實也有: for(let i in arr){ if(arr.hasOwnProperty(i)) console.log(arr[i]); } //可以看到遍歷輸出了正確的值,但是還是不建議大家使用for in去循環數組,不單單是效率低,而且容易出問題,特別是當項目引用了許多第三方類庫的時候。 有大牛做過一個測速,遍歷數組的時間對比 for in > map > forEach > for數組元素的添加和刪除
push 將一個或者多個數組添加到數組的末尾,并且返回數組的長度
Array.prototype.push(ele1,ele2,ele3,ele4)
pop 刪除數組的最后一個值,并且返回刪除元素的值
Array.prototype.pop()
shift刪除數組第一個值,并且返回刪除元素的值,用法和pop相似
Array.prototype.shift()
unshift 用法和push相似,將一個或者多個元素添加到數組的開頭,并且返回數組的長度
Array.prototype.unshift(ele1,ele2,ele3,ele4)數組和字符串之間的相互轉化
數組轉化成字符串
join:首先join方法不會改變原數組,只會返回一個生成的新字符串
let a = ["a","b","c"]; console.log(a.join()) //=> "a,b,c" console.log(a.join("")) //=> "abc" console.log(a.join("-")) //=> "a-b-c"
ok,這個比較簡單,我們在來看一個復雜點的,類數組轉化成字符串
function f(a,b,c){ let e = Array.prototype.join.call(arguments,""); console.log(e); } f("Hello"," ","World"); //=> Hello World
字符串轉化成數組
用字符串的split方法,具體先不多說,等寫字符串方法全解析的時候再進行具體說明
后記以上都是個人開發經驗總結而成,如有錯誤,歡迎各位大佬指正
轉載請注明出處
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92756.html
網上很少有提供不同版本接口對比的文章,所以自己總結一下。 Array Method Description Modify Version concat 連接多個數組,返回數組副本,參數可以為值或數組 否 ES3 join 把數組元素組合為字符串 否 ES3 pop 刪除并返回最后一個元素 是 ES3 push 向數組末尾添加一個或多個值,返回數組長度 是 ES3 reve...
摘要:規范最終由敲定。提案由至少一名成員倡導的正式提案文件,該文件包括事例。箭頭函數這是中最令人激動的特性之一。數組拷貝等同于展開語法和行為一致執行的都是淺拷貝只遍歷一層。不使用對象中必須包含屬性和值,顯得非常冗余。 ES全稱ECMAScript,ECMAScript是ECMA制定的標準化腳本語言。目前JavaScript使用的ECMAScript版本為ECMA-417。關于ECMA的最新資訊可以...
摘要:定期召開會議,會議由會員公司的代表與特邀專家出席。新版本將會包含每年截止時間之前完成的所有特性。它引入了一個新的構造函數和具有輔助函數的命名空間對象。 導言:ECMAScript的演化不會停止,但是我們完全沒必要害怕。除了ES6這個史無前例的版本帶來了海量的信息和知識點以外,之后每年一發的版本都僅僅帶有少量的增量更新,一年更新的東西花半個小時就能搞懂了,完全沒必要畏懼。本文將帶您花大約...
摘要:字符串拓展在我們判斷字符串是否包含另一個字符串時,之前,我們只有方法,之后我們又多了三種方法返回布爾值,表示是否找到參數字符串。返回布爾值,表示參數字符串是否在原字符串的頭部。 本文是 重溫基礎 系列文章的第八篇。今日感受:人在異鄉,也不能忘記湯圓。 系列目錄: 【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1.語法和數據類型 【重溫基礎】2.流程控制和...
摘要:在重寫完了的時候,就個人總結了一下常用的一些常用的語法和比優越的方面。參數字符串是否在原字符串的尾部返回布爾值。第一個大于的成員的索引方法,用于某個數組是否包含給定的值,返回一個布爾值。 1.前言 前幾天,用es6的語法重寫了我的一個代碼庫,說是重寫,其實改動的并不多,工作量不大。在重寫完了的時候,就個人總結了一下es6常用的一些常用的語法和比es5優越的方面。下面提到的語法可能也就是...
閱讀 2907·2021-10-19 10:09
閱讀 3126·2021-10-09 09:41
閱讀 3371·2021-09-26 09:47
閱讀 2687·2019-08-30 15:56
閱讀 590·2019-08-29 17:04
閱讀 979·2019-08-26 11:58
閱讀 2505·2019-08-26 11:51
閱讀 3353·2019-08-26 11:29