摘要:整個數組的大操作轉換拼接排序倒置這個方法是將數組轉換為字符串,數組元素間用傳進去的參數沒有參數就用分隔這個方法用于拼接兩個數組并返回一個新的數組。看代碼吧打印整個數組這個方法是對數組的每一項運行給定函數,返回每一項返回結果組成的數組。
前言 在 JS 中我們數組用的是比較多的了,它自帶了很多方法可以用,省去了我們時間,特別是 ES6 當中對數組的擴展讓數組具有了更強大的功能,為了以后使用數組的時候能夠充分發揮數組的特性,在這里對數組的方法進行一次匯總吧。
說明 標題后的標識 * 是說明該方法會改變原數組
對數組元素的操作 push() & pop() *push() 向數組的末尾添加一個或更多元素(就是傳進去的參數),并返回新的長度。
pop() 刪除并返回數組的最后一個元素。
具體效果看代碼
let arr = [1,2,3]; let res1 = arr.push(5); console.log(res1); // 4 arr的長度 console.log(arr); // [1,2,3,5] let res2 = arr.pop(); console.log(res2); // 5 移除的數組項 console.log(arr); // [1,2,3]shift() & unshift() *
shift() 刪除并返回數組的第一個元素
unshift() 向數組的頭部添加一個或者多個元素(傳入的參數),并返回新的長度。
具體效果看代碼
let arr = [1,2,3]; let res1 = arr.shift(); console.log(res1); // 1 移除的數組項 console.log(arr); // [2,3] let res2 = arr.unshift(5,7); console.log(res2); // 4 數組新長度 console.log(arr); // [5,7,2,3]slice()
這個方法是從某個已有的數組返回選定的元素。一般帶兩參數 par1 和 par2,方法返回原數組 [par1, par2) 區間內的值組成的新數組。如果只有一個參數 par1 的話,就返回原數組 [par1,數組尾] 區間內的值組成的新數組。
具體看代碼
let arr = [1,2,3]; console.log(arr.slice(1,2)); // [2] console.log(arr.slice(1)); // [2,3] console.log(arr); // [1,2,3]splice() *
這個方法有點復雜了,他是從原數組中刪除/添加項目,并返回刪除的項目。具體是刪除還是添加,看參數決定,它至少需要兩個參數 index,deleteCount,分別指代要開始刪除/添加項目的下標 index 和要刪除的項目的個數 deleteCount,后面如果其他參數通通就是要加入 index 位置后面的項目了。看代碼就知道一切了。
let arr = [0,1,2,3,4]; // 刪除操做 console.log(arr.splice(0,2)); // [0,1] 從 下標 0 的位置開始刪除兩個元素,并返回。 console.log(arr); // [2,3,4] 刪除后就剩它仨了 // 添加操作 console.log(arr.splice(1, 0, 5, 6, 7)); // [] 第二個參數 0 ,那就沒有刪除啥元素咯,然后在下標 1 的位置開始插入 console.log(arr); // [2, 5, 6, 7, 3, 4] // 替換操作 console.log(arr.splice(1,1,2)); // [5] console.log(arr); // [2, 2, 6, 7, 3, 4 ]
這個方法是很強大的,可以用它來實現數組元素的刪除,替換,添加的操作,看上面代碼就知道啦。
整個數組的大操作(轉換&拼接&排序&倒置) join()這個方法是將數組轉換為字符串,數組元素間用傳進去的參數( 沒有參數就用,) 分隔
let arr = [1,2,3,4,5]; console.log(arr.join("|")); // 1|2|3|4|5 console.log(arr.join()); // 1,2,3,4,5concat()
這個方法用于拼接兩個數組并返回一個新的數組。
let arr = [1,2,3,4,5]; console.log(arr.concat([6,7,8])); // [ 1, 2, 3, 4, 5, 6, 7, 8 ]sort() *
這個就不用講了吧,排序,不過默認的排序方法是把數字當成字符串來排序的,所以就會有了下面代碼中的問題,也有了我們關于排序的重寫。
let arr = [1,22,13,4,5]; arr.sort(); console.log(arr) // [ 1, 13, 22, 4, 5 ] 因為 22 的第一個字符是 2 比 4 小,所以 22 比 4 小。。。 arr.sort(function(val1,val2){ return val1-val2; }) console.log(arr); // [ 1, 13, 22, 4, 5 ]reverse() *
如其名,倒置數組的元素。
let arr = [1,22,13,4,5]; arr.reverse(); console.log(arr) // [ 5, 4, 13, 22, 1 ]toString() & toLocaleString() & valueOf()
這三個方法,是個對象就會有,數組對象也不例外,也順便寫出來看看吧,具體啥效果,看代碼吧。
let arr = [1,22,13,4,5]; console.log(arr.toString()); // 1,22,13,4,5 console.log(arr.toLocaleString()); // 1,22,13,4,5 console.log(arr.valueOf()); // [ 1, 22, 13, 4, 5 ]數組位置方法 indexOf() & lastIndexOf()
這個用于查找數組中的元素,找到后返回元素的下標,找不到的話就返回 -1。兩個方法都是一樣的,只不過一個從頭到尾找,一個從尾到頭找
let arr = [1,22,13,4,5]; console.log(arr.indexOf(13)); // 2 console.log(arr.lastIndexOf(22)); // 1 console.log(arr.indexOf(44)); // -1迭代方法 every() & some()
every() 對數組每一項運行一個函數,如果該函數對每一項都返回 true,則整體返回 true
some() 這個和上面一樣啦,不過這個只要有一項是 true,整體就返回 true
具體看代碼啦
let arr = [1, 2, 3, 4, 5]; console.log( arr.every(function (item, index, array) { return (item > 2) }) ); // false console.log( arr.some(function (item, index, array) { return (item > 2) }) ); // trueforEach()
這個是對數組中的每一項運行給定函數,沒有返回值。看代碼吧
let arr = [1,2,3,4,5] // 打印整個數組 arr.forEach(function(item){ console.log(item); });map()
這個方法是對數組的每一項運行給定函數,返回每一項返回結果組成的數組。
let arr = [1,2,3,4,5] let newArr = arr.map(function(item){ return item+1 }); console.log(newArr); // [ 2, 3, 4, 5, 6 ]filter()
這個方法是對數組的每一項運行給定函數,返回該函數會返回為 true 的數組項組成的新數組。
let arr = [1,2,3,4,5] let newArr = arr.filter(function(item){ return item > 2 }); console.log(newArr); // [ 3, 4, 5 ]ES6 擴展的數組方法 Array.from() 對象轉為數組
這個方法用于將兩類對象轉為真正的數組,分別是類數組對象和可遍歷對象(包括 ES6 新增的數據結構 Set 和 Map)用法就看代碼吧
let arrLike = { "0":"1", "1":"2", "2":"2", length:"3" } let arr = Array.from( arrLike); console.log(arr); // [ "1", "2", "2" ]
在實際應用中,DOM 操作返回的 NodeList 集合就是一個類數組對象。
Array.of() 值轉為數組這個是用來替代 Array() 或 new Array()的,為啥要替換,來段代碼感受下就知道了
console.log(Array()); // [] console.log(Array(3)); // [, , ,] console.log(Array(1, 2, 3)); // [ 1, 2, 3 ] console.log(Array.of()); // [] console.log(Array.of(undefined)); // [undefined] console.log(Array.of(3)); // [3] console.log(Array.of(1, 2, 3)); // [ 1, 2, 3 ]
看出門道了吧,Array() 會因為參數不同會有不同的效果,而 Array.of() 就不會存在這種問題啦。
copyWithin() 數組內成員復制 *這個方法有點迷,暫時不知道是用來干啥的,但是也記一下它能干啥,沒準以后就用上了。
它的話是在當前數組內部將指定位置的成員復制到其他位置(覆蓋掉原有成員),然后返回該數組。他有下面三個參數
target(必選):從該位置開始替換數據
start(可選):從該位置讀取數據,默認 0。如果為負值,表示倒數。
end(可選):到該位置前停止讀取數據,默認是數組長度,如果為負值,表示倒數。
具體有啥效果就看代碼吧
let arr = [1, 2, 3, 6, 5]; // 從下標 0 開始換 下標 1(也就是 2)開始的數據,一直替換到 下標 4 前(也就是到 arr[3] 結束) // 人話說就是 arr[0] 到 arr[4-2] 的值被 arr[1] 到 arr[4-1] 的值替換掉 console.log(arr.copyWithin(0, 1, 4)); // [ 2, 3, 6, 6, 5 ] arr2 = [0, 1, 2, 3, 4, 5, 6]; console.log(arr2.copyWithin(1, 3, 6)); // [ 0, 3, 4, 5, 4, 5, 6 ]find() & findIndex() 查找數組元素
find() 用于查找符合第一個符合條件的數組成員,并將其返回。如果沒有的話,就返回 undefined。
findIndex() 和上面一樣,不過他返回的是那個符合條件的數組的下標。
啥效果就看代碼吧
let arr = [0, 1, 2, 3, 5, 5, 6]; arr.find(function (value, index, arr) { return value > 4; }) // 返回數值 5 arr.findIndex(function (value, index, arr) { return value > 4; }) // 返回下標 4
### fill() 數組填充
這個方法是用給定值填充一個數組。初始化數組的時候可以用到。它有三個參數:
value 填充數組的值
start 填充的起始位置
end 填充的結束位置
[1, 2, 3].fill("a") // [ "a", "a", "a" ] [1, 2, 3, 4, 5].fill("a", 2, 4) // [ 1, 2, "a", "a", 5 ]entries() & key() & values() 遍歷數組
這三個都會返回一個迭代器對象,可以用 for...of 循環遍歷,區別是,entries() 遍歷鍵值對,keys() 遍歷鍵名,values() 遍歷鍵值,啥效果看代碼。
let arr = [1, 2]; for (let [index, ele] of arr.entries()) { console.log(index, ele); } // 0 1 1 2 for (let index of arr.keys()) { console.log(index); } // 0 1 for (let ele of arr.values()) { console.log(ele); } // 1 2includes() 判斷數組是否有某值
這個方法如其名,用于判斷數組內是否有某個值,如果有,返回 true,沒有,返回 false。他如果有第二個參數的話,那么第二個參數表示開始搜索的位置。
let arr=[1,2,3,4,5,6,7]; arr.includes(1) // true arr.includes(1,5) // false 從下標 5 開始搜沒有 1
關于數組的的方法,就總結道這邊了,如果還有遺漏或者錯誤的地方的話,就麻煩下下面評論修正啦。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100201.html
摘要:將輸出新數組判斷數組中的每一項是否都滿足條件,都滿足返回,此方法相較于之前的幾個方法,返回值有差異,是一個布爾值。輸出數組用于將一組值轉化為數組輸出數組返回一個布爾值,表示某個數組中是否包含給定的值。 1、join(sep):將數組元素組合成字符串。以sep為分隔符,省略的話則默認使用逗號為分隔符。 var arr = [a,b,c]; console.log(arr.join(-))...
摘要:前端日報精選聽說你沒來總結個人使用過的移動端布局方法新特性簡介用寫組件坦然面對應對前端疲勞中文深入理解筆記函數前端架構經驗分享系列教程之創建頁面元素龍云全棧系列教程之定位頁面元素龍云全棧第期與表單驗證技術周刊期知乎 2017-07-17 前端日報 精選 聽說你沒來 JSConf 2017?總結個人使用過的移動端布局方法 - Rni-L - SegmentFaultNode.js v8....
摘要:技術路線的選擇技術學習內容匯總技術路線的選擇項目的技術路線是使用構建一套前端應用,更加具體的技術路線實際上是,應用到了技術棧加上了最新版的。不管怎么說,以這次項目對的使用體驗挺好。本次項目沒有使用開源的要求,自然是最好的選擇。 寫這篇總結的意義:總結,回顧,反思項目進行過程和這套Vue + ArcGIS API for JavaScriptGIS前端應用技術路線,從項目與技術兩個方面積...
摘要:最近開始看源碼,并將源碼解讀放在了我的計劃中。后文中均假設比較的兩個參數為和。,如果和均是類型或者類型,我們可以用來判斷是否。 Why underscore 最近開始看 underscore.js 源碼,并將 underscore.js 源碼解讀 放在了我的 2016 計劃中。 閱讀一些著名框架類庫的源碼,就好像和一個個大師對話,你會學到很多。為什么是 underscore?最主要的原...
摘要:從中學習優先隊列的實現是定時器的實現,用來調度定時執行的任務和執行一次的任務,就像的和的意思,它也可以作為后臺程序運行。通過和的方法可以保證整個優先隊列的關系,保證的是最小的。作用是構建堆,可以從的數組構建堆,來表示優先隊列。 從Timer中學習優先隊列的實現 Timer是Java定時器的實現,用來調度定時執行的任務和執行一次的任務,就像JavaScript的setInterval和s...
閱讀 2380·2019-08-30 15:56
閱讀 1039·2019-08-30 15:55
閱讀 3203·2019-08-30 15:44
閱讀 933·2019-08-30 10:53
閱讀 1888·2019-08-29 16:33
閱讀 2470·2019-08-29 16:13
閱讀 719·2019-08-29 12:41
閱讀 874·2019-08-26 13:56