摘要:使用方法返回值返回一個新的數(shù)組,包含從到不包括該元素的中的元素接受一或兩個參數(shù),即要返回項的起始和結(jié)束位置。用于執(zhí)行每個數(shù)組元素的函數(shù)。新增的方法使用方法返回值返回新的被替換的數(shù)組方法用于將一個固定值替換數(shù)組的元素。
ECMAScript為操作已經(jīng)包含在數(shù)組中的項提供了很多方法。這里本人總結(jié)一下自己對這些方法的理解,如此之多的方法中,我首先已是否會改變原數(shù)組做為分類標準,逐個解釋一下每一個方法。
一、不會改變原數(shù)組 1. concat()使用方法:array.concat(array2,array3,...,arrayX)
返回值: 返回一個新的數(shù)組
concat()方法用于連接兩個或多個數(shù)組。該方法不會改變現(xiàn)有的數(shù)組,僅會返回被連接數(shù)組的一個副本。
在沒有傳遞參數(shù)的情況下,它只是復制當前數(shù)組并返回副本;如果傳遞的值不是數(shù)組,這些值就會簡單地添加到結(jié)果數(shù)組的末尾。
var arr1 = [1,2,3]; var arr2 = arr1.concat(4,[5,6]); console.log(arr1); // [ 1, 2, 3 ] console.log(arr2); // [ 1, 2, 3, 4, 5, 6 ]2. join()
使用方法:array.join(separator)
返回值: 返回一個字符串
join()方法用于把數(shù)組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的,默認使用","號分割,不改變原數(shù)組。
var arr1 = [1,2,3]; var arr2 = arr1.join(); console.log(arr1); // [ 1, 2, 3 ] console.log(arr2); // 1,2,3
之前接觸過一個功能是需要生成多個連續(xù)的*,一開始是直接使用for循環(huán)可以做到,后面了解了join()方法后,發(fā)現(xiàn)其實一句話就可以弄好了。
var arr3 = ""; for(let i = 0; i < 15; i ++) { arr3 = arr3 + "*"; } console.log(arr3); // *************** var arr4 = new Array(16).join("*"); console.log(arr4); // ***************3. slice()
使用方法:array.slice(start, end)
返回值: 返回一個新的數(shù)組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素
slice()接受一或兩個參數(shù),即要返回項的起始和結(jié)束位置。
在只有一個參數(shù)的情況下,slice()方法返回從該參數(shù)指定位置到當前數(shù)組末尾的所有項;
如果有兩個參數(shù),改方法返回起始和結(jié)束位置之間的項——但不包括結(jié)束位置的項。
如果參數(shù)為負數(shù),規(guī)定從數(shù)組尾部開始算起的位置。也就是說,-1 指最后一個元素,-2 指倒數(shù)第二個元素,以此類推。
var arr1 = [1,2,3,4,5,6]; var arr2 = arr1.slice(1); var arr3 = arr1.slice(2,4); var arr4 = arr1.slice(-4,-2); // 等價于 arr1.slice(2,4); console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ] console.log(arr2); // [ 2, 3, 4, 5, 6 ] console.log(arr3); // [ 3, 4 ] console.log(arr4); // [ 3, 4 ]
對于偽數(shù)組轉(zhuǎn)換為標準數(shù)據(jù)就用到了這個方法
Array.prototype.slice.call(arguments)4. some()
使用方法:array.some(function(currentValue,index,arr),thisValue)
返回值: 布爾值
或 ==> some()對數(shù)組中的每一項運行給定的函數(shù),如果該函數(shù)對任一項返回true,剩余的元素不會再執(zhí)行檢測;如果沒有滿足條件的元素,則返回false。
function compare(item, index, arr){ return item > 10; } [2, 5, 8, 1, 4].some(compare); // false [20, 5, 8, 1, 4].some(compare); // true5. every()
使用方法:array.every(function(currentValue,index,arr),thisValue)
返回值: 布爾值
和 ==> every()對數(shù)組中的每一項運行給定的函數(shù),如果該函數(shù)對每一項返回true,剩余的元素不會再執(zhí)行檢測;如果其中有一個沒有滿足條件的元素,則返回false。
function compare(item, index, arr){ return item > 10; } [20, 50, 80, 11, 40].every(compare); // true [20, 50, 80, 10, 40].every(compare); // false5. filter()
使用方法:array.filter(function(currentValue,index,arr), thisValue)
返回值: 返回數(shù)組
filter()方法創(chuàng)建一個新的數(shù)組,新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。
對數(shù)組的每一項都運行給定的函數(shù),返回結(jié)果為true的項組成的數(shù)組。
function filterArr(item, index, arr){ return item > 4; } [2, 5, 8, 1, 4].filter(filterArr); // [5,8]6. find() —— ES6新增的方法
使用方法:array.find(function(currentValue, index, arr),thisValue)
返回值: 返回符合測試條件的第一個數(shù)組元素值,如果沒有符合條件的則返回 undefined
find()方法傳入一個回調(diào)函數(shù),找到數(shù)組中符合當前搜索規(guī)則的第一個元素,返回它,并且終止搜索。
filter()和find()方法的區(qū)別:
filter()方法是對數(shù)組的每一項都進行檢查,最后返回結(jié)果為true的數(shù)組;而find()方法當找到符合的元素時,立刻返回該元素,之后的元素不再進行檢查;
filter()方法如果沒有找到符合的元素返回空的數(shù)組;而find()方法沒有找到符合的元素則返回undefined
function filterArr(item, index, arr){ return item > 4; } [2, 5, 8, 1, 4].filter(filterArr); // [5,8] [2, 5, 8, 1, 4].find(filterArr); // 5 function findArr(item, index, arr){ return item > 10; } [2, 5, 8, 1, 4].filter(findArr); // [] [2, 5, 8, 1, 4].find(findArr); // undefined7. map()
使用方法:array.map(function(currentValue,index,arr), thisValue)
返回值: 返回數(shù)組
map()方法返回一個新數(shù)組,數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。
function mapArr(item, index, arr){ return item * 4; } [2, 5, 8, 1, 4].map(mapArr); // [8,20,32,4,16]
經(jīng)常筆試和面試都會考到的一道題 ——實現(xiàn)一個map數(shù)組方法,以下是本人自己寫的一個方法
var arr = [2, 4, 8, 6, 1]; Array.prototype.myMap = function (fn, thisValue) { var arr = this, len = arr.length, tmp = 0, result = []; thisValue = thisValue || null; for (var i = 0; i < len; i++) { var item = arr[i], index = i; tmp = fn.call(thisValue, item, index, arr); result.push(tmp); } return result } function mapArr(item, index, arr) { return item * 4; } arr.myMap(mapArr) // [8, 16, 32, 24, 4]8. forEach()
使用方法:array.forEach(function(currentValue, index, arr), thisValue)
返回值: undefined
forEach() 方法用于調(diào)用數(shù)組的每個元素,并將元素傳遞給回調(diào)函數(shù)。這個方法沒有返回值。
本質(zhì)上與使用for循環(huán)迭代數(shù)組一樣。
var items = [1, 2, 4, 7, 3]; var copy = []; items.forEach(function(item,index){ copy.push(item*index); }) console.log(items); // [ 1, 2, 4, 7, 3 ] console.log(copy); // [ 0, 2, 8, 21, 12 ]9. reduce() 與 reduceRight()
使用方法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
返回值: 返回計算結(jié)果
參數(shù) | 描述 |
---|---|
function(total,currentValue, index,arr) | 必需。用于執(zhí)行每個數(shù)組元素的函數(shù)。 |
initialValue | 可選。傳遞給函數(shù)的初始值 |
函數(shù)參數(shù)
參數(shù) | 描述 |
---|---|
total | 必需。初始值, 或者計算結(jié)束后的返回值。 |
currentValue | 必需。當前元素 |
currentIndex | 可選。當前元素的索引 |
arr | 可選。當前元素所屬的數(shù)組對象。 |
這兩個方法都會迭代數(shù)組的所有項,然后構(gòu)建一個最終返回的值。其中,reduce()方法中數(shù)組的第一項開始,逐個遍歷到最后;而reduceRight()則從數(shù)組的最后一項開始,向前遍歷到第一項。
如果沒有設置initialValue,total的值為數(shù)組第一項,currentValue為數(shù)組第二項。
如果設置了initialValue,則total的值就是initialValue,currentValue為數(shù)組第一項。
var numbers = [65, 44, 12, 4]; function getSum(total,currentValue, index,arr) { return total + currentValue; } var res = numbers.reduce(getSum); console.log(numbers); // [ 65, 44, 12, 4 ] console.log(res); // 125 var numbers = [65, 44, 12, 4]; function getSum(total,currentValue, index,arr) { return total + currentValue; } var res = numbers.reduce(getSum, 10); // 初始值設置為10,所以最終結(jié)果也相應的加10 console.log(res); // 135
具體reduce()方法用得好是能起到很大的作用的,對于批量修改從后臺獲取的數(shù)據(jù)十分有用,可以參考JS進階篇--JS數(shù)組reduce()方法詳解及高級技巧10. indexOf() 和 lastIndexOf()
使用方法:array.indexOf(item,start)
返回值: 元素在數(shù)組中的位置,如果沒與搜索到則返回 -1
indexOf() 和 lastIndexOf() 方法都接收兩個參數(shù):要查找的項和(可選)查找起點位置的索引。
其中,indexOf()方法從數(shù)組開頭開始向后查找;lastIndexOf() 方法從數(shù)組末尾開始向前查找。
var n = [1,2,3,4,5,4,3,2,1]; console.log(n.indexOf(4)); // 3 console.log(n.lastIndexOf(4)); // 5 console.log(n.indexOf(4,4)); // 5 console.log(n.lastIndexOf(4,4)); // 3
indexOf()可以使用在數(shù)組去重中,如下:
var n = [1, 2, 3, 4, 5, 4, 3, 2, 1]; function fn(arr) { var result = [], len = arr.length; for (var i = 0; i < len; i++) { var item = arr[i]; if (result.indexOf(item) < 0) { result.push(item); } } return result; } console.log(fn(n)); // [1, 2, 3, 4, 5]二、會改變原數(shù)組 1. push()
使用方法:array.push(item1, item2, ..., itemX)
返回值: 返回新數(shù)組的長度
push() 方法可向數(shù)組的末尾添加一個或多個元素,并返回新的長度。
var arr= [65, 44, 12, 4]; var arr1 = arr.push(2,5); console.log(arr); // [ 65, 44, 12, 4, 2, 5 ] console.log(arr1); // 62. pop()
使用方法:array.pop()
返回值: 數(shù)組原來的最后一個元素的值(移除的元素)
pop()方法用于刪除并返回數(shù)組的最后一個元素。返回最后一個元素,會改變原數(shù)組。
var arr = [65, 44, 12, 4]; var arr1 = arr.pop(); console.log(arr); // [ 65, 44, 12 ] console.log(arr1); // 43. unshift()
使用方法:array.unshift(item1,item2, ..., itemX)
返回值: 返回新數(shù)組的長度
unshift() 方法可向數(shù)組的開頭添加一個或更多元素,并返回新的長度。返回新長度,改變原數(shù)組。
var arr = [65, 44, 12, 4]; var arr1 = arr.unshift(1); console.log(arr); // [ 1, 65, 44, 12, 4 ] console.log(arr1); // 54. shift()
使用方法:array.shift()
返回值: 數(shù)組原來的第一個元素的值(移除的元素)
shift() 方法用于把數(shù)組的第一個元素從其中刪除,并返回第一個元素的值。返回第一個元素,改變原數(shù)組。
var arr = [65, 44, 12, 4]; var arr1 = arr.shift(); console.log(arr); // [ 44, 12, 4 ] console.log(arr1); // 655. sort()
使用方法:array.sort(sortfunction)
返回值: 返回排序后的數(shù)組(默認升序)
sort() 法用于對數(shù)組的元素進行排序。
排序順序可以是字母或數(shù)字,并按升序或降序。
默認排序順序為按字母升序。
P.S 由于排序是按照 Unicode code 位置排序,所以在排序數(shù)字的時候,會出現(xiàn)"10"在"5"的前面,所以使用數(shù)字排序,你必須通過一個函數(shù)作為參數(shù)來調(diào)用。
var values = [0, 1, 5, 10, 15]; values.sort(); console.log(values); // [ 0, 1, 10, 15, 5 ] values.sort(function(a, b){ return a - b; }) console.log(values); // [0, 1, 5, 10, 15 ]6. reverse()
使用方法:array.reverse()
返回值: 返回顛倒后的數(shù)組
reverse() 方法用于顛倒數(shù)組中元素的順序。返回的是顛倒后的數(shù)組,會改變原數(shù)組。
var values = [0, 1, 5, 10, 15]; values.reverse(); console.log(values); // [ 15, 10, 5, 1, 0 ]7. fill() —— ES6新增的方法
使用方法:array.fill(value, start, end)
返回值: 返回新的被替換的數(shù)組
fill()方法用于將一個固定值替換數(shù)組的元素。
參數(shù) | 描述 |
---|---|
value | 必需。填充的值。 |
start | 可選。開始填充位置。 |
end | 可選。停止填充位置(不包含) (默認為 array.length) |
var values = [0, 1, 5, 10, 15]; values.fill(2); console.log(values); // [ 2, 2, 2, 2, 2 ] values = [0, 1, 5, 10, 15]; values.fill(2,3,4); console.log(values); // [ 0, 1, 5, 2, 15 ]8. splice()
使用方法:array.splice(index,howmany,item1,.....,itemX)
返回值: 如果從 arrayObject 中刪除了元素,則返回的是含有被刪除的元素的數(shù)組
splice()有多種用法:
刪除: 可以刪除任意數(shù)量的項,只需要指定2個參數(shù):要刪除的第一項的位置和要刪除的項數(shù)。splice(0,2) // 會刪除數(shù)組中前兩項
插入: 可以向指定位置插入任意數(shù)量的項,只需提供3個參數(shù):起始位置、0(要刪除的項數(shù))和要插入的項。如果要插入多個項,可以再傳入第四、第五,以至任意多個項。splice(2,0,1,4) // 會從數(shù)組位置2的地方插入1和4
替換: 可以向指定位置插入任意數(shù)量的項,且同時刪除任意數(shù)量的項,只需提供3個參數(shù):起始位置、要刪除的項數(shù)和要插入的項。插入的項不必與刪除的項數(shù)相等。splice(2,3,1,4) // 會從數(shù)組位置2刪除兩項,然后再從位置2的地方插入1和4
// 刪除 var values = [4,8,0,3,7]; var remove = values.splice(3,1); console.log(values); // [ 4, 8, 0, 7 ] console.log(remove); // [ 3 ] 刪除第四項 // 插入 remove = values.splice(2,0,1,2); console.log(values); // [ 4, 8, 1, 2, 0, 7 ] console.log(remove); // [] 從位置2開始插入兩項,由于沒有刪除所有返回空函數(shù) // 替換 remove = values.splice(2,2,6,9,10); console.log(values); // [ 4, 8, 6, 9, 10, 0, 7 ] console.log(remove); // [ 1, 2 ] 從位置2開始刪除兩項,同時插入三項9. copyWithin() —— ES6新增的方法
使用方法:array.copyWithin(target, start, end)
返回值: 返回新復制的數(shù)組
copyWithin()方法選擇數(shù)組的某個下標,從該位置開始復制數(shù)組元素,默認從0開始復制。也可以指定要復制的元素范圍。
var fruits = [1,2,3,4,5,6]; fruits.copyWithin(1); // [ 1, 1, 2, 3, 4, 5 ] 從下標為1的元素開始,復制數(shù)組 fruits.copyWithin(3, 0, 3); // [ 1, 2, 3, 1, 2, 3 ] 從下標為3的元素開始,復制數(shù)組坐標為0到2的數(shù)組三、其他 1. form() —— ES6新增的方法
使用方法:Array.from(object, mapFunction, thisValue)
返回值: 數(shù)組對象
from() 方法用于字符串、擁有 length 屬性的對象(偽數(shù)組)或可迭代的對象(Set/Map)來返回一個數(shù)組。
var myArr = Array.from("RUNOOB"); var s = new Set(["A", "B", "C"]); var m = new Map([[1, "x"], [2, "y"], [3, "z"]]); var s1 = Array.from(s); var m1 = Array.from(m); console.log(myArr); // [ "R", "U", "N", "O", "O", "B" ] console.log(s1); // [ "A", "B", "C" ] console.log(m1); // [ [ 1, "x" ], [ 2, "y" ], [ 3, "z" ]]
對于偽數(shù)組轉(zhuǎn)換為標準數(shù)據(jù)除了Array.prototype.slice.call(arguments),還可以使用以下方法:
function test(){ var arg = Array.from(arguments); arg.push(5); console.log(arg); // [ 1, 2, 3, 4, 5 ] } test(1,2,3,4);
還可以結(jié)合new Set()進行數(shù)組的去重
> function dedupe(array){ return Array.from(new Set(array)); } dedupe([1,1,2,3]) //[1,2,3]
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/98617.html
摘要:高性能小結(jié)文章轉(zhuǎn)載于我的博客最近看完了動物叢書的高性能,覺得那本書的小結(jié)部分寫得非常不錯,簡潔輕快易懂概括性很強。由于局部變量存在于作用域鏈的起始位置,因此訪問局部變量比訪問跨作用域變量更快。 高性能javascript小結(jié) 文章轉(zhuǎn)載于我的CSDN博客:http://blog.csdn.net/hello_world_20/article/details/46793317 最近看完了動...
摘要:最近在全力整理高性能的文檔,并重新學習一遍,放在這里方便大家查看并找到自己需要的知識點。 最近在全力整理《高性能JavaScript》的文檔,并重新學習一遍,放在這里方便大家查看并找到自己需要的知識點。 前端開發(fā)文檔 高性能JavaScript 第1章:加載和執(zhí)行 腳本位置 阻止腳本 無阻塞的腳本 延遲的腳本 動態(tài)腳本元素 XMLHTTPRequest腳本注入 推薦的無阻塞模式...
摘要:而用來聲明一些根據(jù)判斷條件會發(fā)生變化的變量。函數(shù)中盡量避免的嵌套是十分常見的一種邏輯。僅對原數(shù)組進行一次遍歷。當然,使用專門的請求庫也是很好的選擇。以上總結(jié)僅僅是個人對于工作中的一些細節(jié)上的經(jīng)驗之談。 不知不覺,正式工作馬上兩年了,待了兩家公司,做過的項目也不少了,總結(jié)一下自己在寫代碼上的經(jīng)驗累積。 1. 確定變量的類型 不要使用==,使用=== JS是弱類型語言,類型檢查不嚴格。...
摘要:性能訪問字面量和局部變量的速度是最快的,訪問數(shù)組和對象成員相對較慢變量標識符解析過程搜索執(zhí)行環(huán)境的作用域鏈,查找同名標識符。建議將全局變量存儲到局部變量,加快讀寫速度。優(yōu)化建議將常用的跨作用域變量存儲到局部變量,然后直接訪問局部變量。 缺陷 這本書是2010年出版的,這本書談性能是有時效性的,現(xiàn)在馬上就2018年了,這幾年前端發(fā)展的速度是飛快的,書里面還有一些內(nèi)容考慮IE6、7、8的東...
摘要:遍歷方法小結(jié)常用的遍歷方法遍歷對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)創(chuàng)建一個新數(shù)組,其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果遍歷大家都熟悉,所以重點講一下與的區(qū)別相同點回調(diào)函數(shù)參數(shù)相同,都自帶三個屬性均不會修改原數(shù)組第二參數(shù)的 遍歷方法小結(jié) 常用的遍歷方法 for 遍歷 forEach(對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)) map(創(chuàng)建一個新數(shù)組,其結(jié)果是該數(shù)組中的每個...
摘要:類似的情況還有,方法和方法等。今天我說一個最簡單。代碼如下和也可以實現(xiàn),但是生成的是一個整數(shù),如下分割線其它類型數(shù)據(jù)轉(zhuǎn)布爾數(shù)據(jù)下面的轉(zhuǎn)換,大家一看就明白了,不多說。緩存變量循環(huán)緩存分割線第一段就是每一次循環(huán)的時候,都要查詢一次。 1.前言 從大學到現(xiàn)在,接觸前端已經(jīng)有幾年了,感想方面,就是對于程序員而言,想要提高自己的技術(shù)水平和編寫易于閱讀和維護的代碼,我覺得不能每天都是平庸的寫代碼,...
閱讀 2082·2023-04-25 17:48
閱讀 3590·2021-09-22 15:37
閱讀 2943·2021-09-22 15:36
閱讀 6016·2021-09-22 15:06
閱讀 1646·2019-08-30 15:53
閱讀 1438·2019-08-30 15:52
閱讀 720·2019-08-30 13:48
閱讀 1130·2019-08-30 12:44