电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JavaScript數(shù)組方法總結

瀏覽:4日期:2023-11-15 13:11:49

說起來很搞笑,我在用 sublime 3 寫排序算法的時候,準備用 nodejs 來運行,就用 sublime 3 提供的編譯功能。但問題來了,我比較挫,寫了個死循環(huán),然后 sublime 3 也不給輸出提示,我很疑惑的連續(xù)跑了 3 遍,過了一會電腦發(fā)熱,風扇開始叫了,我察覺到,一看進程,3 個 node 進程在狂吃內存和 cpu,我在想,這個 bug 該反饋給 sublime 3 還是 node 呢?

JavaScript數(shù)組方法總結

JavaScript 中的數(shù)組本身就很特別,不像 C 或 Java,搞了數(shù)組、list 一整套東西,JS 中的數(shù)組就完全可以當作一個棧或隊列來使用,四大操作 pop、push、shift、unshift。

我今天寫這篇博客,主要是寫一篇總結,以備以后查看,因為我發(fā)現(xiàn)無論數(shù)組操作多熟,時間久了都會忘記。

對于一個數(shù)組方法,我最關心的有兩個問題, 返回值是什么,會不會對原始數(shù)組造成影響 ,典型的例子就是 splice 和 slice 方法。對于那些返回原數(shù)組的函數(shù),我們可以直接調用數(shù)組的鏈式調用,很酷( array.filter().sort().reverse() )。

我想帶著這兩個疑問,來總結下 Array 的數(shù)組方法。

Array

Array.length 是數(shù)組的長度,每個新建的數(shù)組對象都會有 length 對象,可以通過 Array.prototype 修改原型,不過數(shù)組的基本使用和操作不是今天的重點,我們來看數(shù)組方法。

一般情況下,數(shù)組方法在最后都會帶有一個 thisArg 的參數(shù),這個參數(shù)會指定內部 this 的指向。如果參數(shù)中有回掉函數(shù),這個回掉函數(shù)一般接受 3 個參數(shù),value、index 和 array,分別代表當前傳入的值,當前傳入值所在的索引和當前的處理的數(shù)組。

目錄索引:

concat

這個方法可以用于數(shù)組的拼接,參數(shù)是一個或多個數(shù)組,返回的結果是拼接數(shù)組。

concat 方法將創(chuàng)建一個新數(shù)組,然后將調用它的對象(this 指向的對象,即原數(shù)組)中的元素以及所有參數(shù)中的數(shù)組類型的參數(shù)中的元素以及非數(shù)組類型的參數(shù)本身按照順序放入這個新數(shù)組,并返回該數(shù)組。concat 方法并不修改原數(shù)組和參數(shù)數(shù)組,而且對非數(shù)組對象同樣有效果。

返回拼接的新數(shù)組; 不修改原數(shù)組和參數(shù)數(shù)組; 參數(shù)可以是非數(shù)組。

var a1 = [1, 2, 3], a2 = [4, 5, 6], a3 = [7, 8, 9];var newarr = a1.concat(a2, a3);newarr //[1, 2, 3, 4, 5, 6, 7, 8, 9]a1 //[1, 2, 3]newarr = a1.concat(4, a3);//[1, 2, 3, 4, 7, 8, 9]newarr = a1.concat(’hello’);//[1, 2, 3, 'hello']every

every() 方法測試數(shù)組的所有元素是否都通過了指定函數(shù)的測試。

arr.every(callback) 會對每一個元素都執(zhí)行 callback 方法,直到 callback 返回 false。有時候 every 方法會和 forEach 方法相比較,因為 forEach 無法停止,而 every 方法返回 flase 時可以中途停止。

若全部通過測試,函數(shù)返回值 true,中途退出,返回 false; 不對原數(shù)組產生影響。

function isBigEnough(element, index, array) { console.log(index); return (element >= 10);}var passed = [12, 5, 8, 130, 44].every(isBigEnough);// 0// 1// passed is falsepassed = [12, 54, 18, 130, 44].every(isBigEnough);// 0 1 2 3 4// passed is truefilter

filter() 方法使用指定的函數(shù)測試所有元素,并創(chuàng)建一個包含所有通過測試的元素的新數(shù)組。

其實這個方法就是一個過濾方法,前面那個 every 方法,只判斷不過濾,filter 會過濾掉一些不符合條件的,并返回新數(shù)組。

返回一個滿足過濾條件的新數(shù)組; 不會改變原數(shù)組。

function isBigEnough(element, index, array) { return (element >= 10);}var a1 = [19, 22, 6, 2, 44];var a2 = a1.filter(isBigEnough);a1 //[19, 22, 6, 2, 44]a2 //[19, 22, 44]forEach

forEach() 方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)(回調函數(shù))。

函數(shù)沒有返回值,即 underfined; 不對原數(shù)組產生影響。

function logArrayElements(element, index, array) { console.log('a[' + index + '] = ' + element);}// 注意索引2被跳過了,因為在數(shù)組的這個位置沒有項var result = [2, 5, 9].forEach(logArrayElements);// a[0] = 2// a[1] = 5// a[2] = 9result //underfinedindexOf

indexOf()方法返回給定元素能找在數(shù)組中找到的第一個索引值,否則返回-1。

返回值是找到元素的索引值或 -1; 不對原數(shù)組產生影響。

var array = [1, 2, 5];array.indexOf(5); // 2array.indexOf(7); // -1 join

join() 方法將數(shù)組中的所有元素連接成一個字符串。

其實,對于 join 想到的第一個是字符串的 split 操作,這兩個經常搭配用來處理字符串。

返回拼接的字符串; 不對原數(shù)組產生影響。

var a1 = [1, 2, 3];var a2 = a1.join();a1 //[1, 2, 3]a2 //'1,2,3'a2 = a1.join('');//'123'a2 = a1.join('-');//'1-2-3'lastIndexOf

lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或變量)在數(shù)組中的最后一個的索引,如果不存在則返回 -1。從數(shù)組的后面向前查找,從 fromIndex 處開始。

其實這個就是 indexOf 的翻版。

返回找到的第一個元素的索引; 不對原數(shù)組產生影響。

var array = [2, 5, 9, 2];var index = array.lastIndexOf(2);// index is 3index = array.lastIndexOf(7);// index is -1index = array.lastIndexOf(2, 3);// index is 3index = array.lastIndexOf(2, 2);map

map() 方法返回一個由原數(shù)組中的每個元素調用一個指定方法后的返回值組成的新數(shù)組。

map reduce 這兩個函數(shù)在處理數(shù)組上一直都是一把手,帶來很大的便捷性。

返回一個經過回掉函數(shù)處理的新數(shù)組; 不對原數(shù)組產生影響。

var a1 = [1, 4, 9];var a2 = a1.map(Math.sqrt);a1 //[1, 4, 9]a2 //[1, 2, 3]reduce

reduce() 方法接收一個函數(shù)作為累加器(accumulator),數(shù)組中的每個值(從左到右)開始合并,最終為一個值。

reduce 是一個合并的過程,從左到右,直到把所有元素合并到一起,并返回最終的結果。它接受兩個參數(shù),第一個參數(shù)是一個回掉函數(shù),第二個參數(shù)是一個初始值,表示處理第一個元素時的前一個值。這個回掉函數(shù)接受四個參數(shù),依次是 accumulator(上次處理的結果),currentValue(當前元素的值),index(當前元素索引),array(調用 reduce 的數(shù)組)。

返回最終合并的結果,即回掉函數(shù)的輸出,可以為字符串,對象,數(shù)組等任意結果; 不對原數(shù)組產生影響。

var getAdd = (pre, cur) => pre + cur;var a1 = [1, 2, 3];var a2 = a1.reduce(getAdd, 0);a1 //[1, 2, 3]a2 //6reduceRight

reduceRight() 方法接受一個函數(shù)作為累加器(accumulator),讓每個值(從右到左,亦即從尾到頭)縮減為一個值。(與 reduce() 的執(zhí)行方向相反)

var toStr = (pre, cur) => ’’ + pre + cur;var a1 = [1, 2, 3];var a2 = a1.reduce(toStr, ’’);a2 //'123'a2 = a1.reduceRight(toStr, ’’);a2 //'321'push

push() 方法添加一個或多個元素到數(shù)組的末尾,并返回數(shù)組新的長度(length 屬性值)。

如果把數(shù)組當作棧,push pop 操作是棧進和出,而往往很多人會忽略函數(shù)執(zhí)行后的返回值。

返回 push 操作執(zhí)行之后數(shù)組的長度; 肯定改變。

var a1 = [1, 2, 3];var a2 = a1.push(4);a1 //[1, 2, 3, 4]a2 //4pop

pop() 方法刪除一個數(shù)組中的最后的一個元素,并且返回這個元素。

返回刪除的這個元素; 肯定改變。

var a1 = [1, 2, 3];var a2 = a1.pop();a1 //[1, 2]a2 //3unshift

unshift() 方法在數(shù)組的開頭添加一個或者多個元素,并返回數(shù)組新的 length 值。

返回 length 值; 肯定改變。

var a1 = [1, 2, 3];var a2 = a1.unshift(4);a1 //[4, 1, 2, 3]a2 //4shift

shift() 方法刪除數(shù)組的 第一個 元素,并返回這個元素。該方法會改變數(shù)組的長度。

shift 方法和 push 方法可以組成一個隊列的操作啦。

返回刪除的這個元素; 肯定改變。 reverse

reverse() 方法顛倒數(shù)組中元素的位置。第一個元素會成為最后一個,最后一個會成為第一個。

函數(shù)返回值是修改了的原數(shù)組; 原數(shù)組會修改。

var a1 = [1, 2, 3];var a2 = a1.reverse();a1 //[3, 2, 1]a1 === a2; //trueslice

slice() 方法會淺復制(shallow copy)數(shù)組的一部分到一個新的數(shù)組,并返回這個新數(shù)組。

slice 的參數(shù)包括拷貝的初識位置,結束位置(左閉右開),與 splice 有區(qū)別。由于不會改變原數(shù)組,這個數(shù)組可以用于前拷貝,比如經常看別人使用: arr.slice(0) ,表示拷貝數(shù)組。

返回淺拷貝后的新數(shù)組; 不會改變原數(shù)組。

var a1 = [1, 2, 3, 4, 5];var a2 = a1.slice(1, 3);a1 //[1, 2, 3, 4, 5]a2 //[2, 3]splice

splice() 方法用新元素替換舊元素,以此修改數(shù)組的內容。

如其名,分割,會修改原數(shù)組的內容,返回一個新數(shù)組,而且它的參數(shù)也比較多,第一個參數(shù)表示初始位置,第二個參數(shù)表示分割長度,第三個參數(shù)及以后表示分割后在分割處添加新元素。

返回分割的元素組成的數(shù)組; 會對數(shù)組進行修改,原數(shù)組會減去分割數(shù)組。

var a1 = [1, 2, 3, 4];var a2 = a1.splice(1, 2);a1 //[1, 4]a2 //[2, 3]a1 = [1, 2, 3, 4];a2 = a1.splice(1, 2, 5, 6);a1 //[1, 5, 6, 4]some

some() 方法測試數(shù)組中的某些元素是否通過了指定函數(shù)的測試。

sort

sort() 方法對數(shù)組的元素做原地的排序,并返回這個數(shù)組。 sort 排序可能是不穩(wěn)定的。默認按照字符串的Unicode碼位點(code point)排序。

sort 函數(shù)用于排序,比較常用,若沒有制定排序函數(shù),則按照 unicode 位點進行排序,而且數(shù)字會被轉成字符串,所以 ‘123’ 要排在 ‘11’ 的后面。

我們會用 sort 做一些有意思的排序,比如漢字按照拼音排序。

返回排序后的原數(shù)組; 會對數(shù)組進行修改。

var big = function(a, b){ return a - b;}var a1 = [2, 4, 77, 1];var a2 = a1.sort(big);a1 //[1, 2, 4, 77]a1 === a2; //true

localeCompare 可以對漢字進行排序,當同時出現(xiàn)漢字和字母的時候會有 bug:

var sort_py = function(a, b){ return a.localeCompare(b);}var a1 = ['北京', '上海', '南京', '合肥'];a1.sort(sort_py);//['北京', '合肥', '南京', '上海']toString

toString() 返回一個字符串,表示指定的數(shù)組及其元素。

顯然,這個方法和 join 方法比較一下。

返回拼接的字符串; 不會改變原數(shù)組。

var a1 = [1, 2, 3];var a2 = a1.toString();a2 //'1,2,3' ES6 中新添的數(shù)組方法

上面的這些方法都是 ES5 的,來看看 ES6 添加了哪些新方法。

copyWithin

copyWithin() 方法會淺拷貝數(shù)組的部分元素到同一數(shù)組的不同位置,且不改變數(shù)組的大小,返回該數(shù)組。

接受三個參數(shù),分別是要拷貝到的位置 target,拷貝開始位置 start 和結束位置 end。

返回修改了的原數(shù)組; 會對數(shù)組進行修改,且是淺拷貝; 參數(shù)可負,負值時倒推,且 end 為空表示數(shù)組長度。

var a1 = [1, 2, 3, 4, 5];var a2 = a1.copyWithin(0, 2, 4);a1 //[3, 4, 3, 4, 5]a2 //[3, 4, 3, 4, 5]a1 === a2; //truefind

如果數(shù)組中某個元素滿足測試條件,find() 方法就會返回滿足條件的第一個元素,如果沒有滿足條件的元素,則返回 undefined。 MDN array.find 。

返回找到的那個元素,若未找到,返回 underfined 不對原數(shù)組產生影響。

function isBigEnough(element, index, array) { return (element >= 10);}var a1 = [8, 18, 14];var num = a1.find(isBigEnough); //18findIndex

findIndex()方法用來查找數(shù)組中某指定元素的索引, 如果找不到指定的元素, 則返回 -1。

這個方法可以參考 find 方法,只是返回值是元素的索引而非元素本身。

fill

使用 fill() 方法,可以將一個數(shù)組中指定區(qū)間的所有元素的值, 都替換成或者說填充成為某個固定的值。

fill 方法接受三個參數(shù),第一個參數(shù) value 表示要填充到值,后面兩個 start 和 end 表示開始和結束位置,可選,且左閉右開。

函數(shù)返回值是修改了的原數(shù)組; 可對數(shù)組產生影響。

var a1 = [1, 2, 3, 4, 5];var a2 = a1.fill(6, 1, 4);a1 //[1, 6, 6, 6, 5]a2 //[1, 6, 6, 6, 5]a1 === a2; //truekeys

數(shù)組的 keys() 方法返回一個數(shù)組索引的迭代器。

這個方法會返回一個數(shù)組索引的迭代器,迭代器在 ES6 中有特殊的用途。

函數(shù)返回一個迭代器對象; 不會改變原數(shù)組。

var arr = ['a', 'b', 'c'];var iterator = arr.keys();console.log(iterator.next()); // { value: 0, done: false }console.log(iterator.next()); // { value: 1, done: false }console.log(iterator.next()); // { value: 2, done: false }console.log(iterator.next()); // { value: undefined, done: true }entries

entries() 方法返回一個 Array Iterator 對象,該對象包含數(shù)組中每一個索引的鍵值對。

var arr = ['a', 'b', 'c'];var eArr = arr.entries();console.log(eArr.next().value); // [0, 'a']console.log(eArr.next().value); // [1, 'b']console.log(eArr.next().value); // [2, 'c']includes

includes() 方法用來判斷當前數(shù)組是否包含某指定的值,如果是,則返回 true,否則返回 false。

該函數(shù)接受兩個參數(shù),第二個參數(shù)表示開始查找位置,起始位置為 0。這個方法與 indexOf 方法最大的區(qū)別不僅在于返回值一個是索引,一個是布爾值,indexOf 方法使用的是 === 來判斷,無法判斷 NaN 情況,而 includes 可以判斷。

返回 true 或 false; 不會改變原數(shù)組。

var a1 = [1, NaN];a1.indexOf(NaN);//-1a1.includes(NaN);//true

來自:http://yuren.space/blog/2017/01/15/array-function/

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 软启动器-上海能曼电气有限公司 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 | 电梯乘运质量测试仪_电梯安全评估测试仪-武汉懿之刻 | SDG吸附剂,SDG酸气吸附剂,干式酸性气体吸收剂生产厂家,超过20年生产使用经验。 - 富莱尔环保设备公司(原名天津市武清县环保设备厂) | 北京京云律师事务所| 内窥镜-工业内窥镜厂家【上海修远仪器仪表有限公司】 | 广东风淋室_广东风淋室厂家_广东风淋室价格_广州开源_传递窗_FFU-广州开源净化科技有限公司 | 保定市泰宏机械制造厂-河北铸件厂-铸造厂-铸件加工-河北大件加工 | 深圳宣传片制作-企业宣传视频制作-产品视频拍摄-产品动画制作-短视频拍摄制作公司 | 珠海白蚁防治_珠海灭鼠_珠海杀虫灭鼠_珠海灭蟑螂_珠海酒店消杀_珠海工厂杀虫灭鼠_立净虫控防治服务有限公司 | 阿米巴企业经营-阿米巴咨询管理-阿米巴企业培训-广东键锋企业管理咨询有限公司 | 紧急泄压人孔_防爆阻火器_阻火呼吸阀[河北宏泽石化] | 高压负荷开关-苏州雷尔沃电器有限公司| 展厅设计公司,展厅公司,展厅设计,展厅施工,展厅装修,企业展厅,展馆设计公司-深圳广州展厅设计公司 | 快速门厂家-快速卷帘门-工业快速门-硬质快速门-西朗门业 | 常州企业采购平台_常州MRO采购公司_常州米孚机电设备有限公司 | 湖南自考_湖南自学考试| 北京成考网-北京成人高考网 | 长沙一级消防工程公司_智能化弱电_机电安装_亮化工程专业施工承包_湖南公共安全工程有限公司 | 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 临时厕所租赁_玻璃钢厕所租赁_蹲式|坐式厕所出租-北京慧海通 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 婚博会2024时间表_婚博会门票领取_婚博会地址-婚博会官网 | 钢化玻璃膜|手机钢化膜|钢化膜厂家|手机保护膜-【东莞市大象电子科技有限公司】 | 【灵硕展览集团】展台展会设计_展览会展台搭建_展览展示设计一站式服务公司 | 不锈钢发酵罐_水果酒发酵罐_谷物发酵罐_山东誉诚不锈钢制品有限公司 | 帽子厂家_帽子工厂_帽子定做_义乌帽厂_帽厂_制帽厂 | 油冷式_微型_TDY电动滚筒_外装_外置式电动滚筒厂家-淄博秉泓机械有限公司 | 烟气在线监测系统_烟气在线监测仪_扬尘检测仪_空气质量监测站「山东风途物联网」 | 板框压滤机-隔膜压滤机配件生产厂家-陕西华星佳洋装备制造有限公司 | 东莞市超赞电子科技有限公司 全系列直插/贴片铝电解电容,电解电容,电容器 | 软膜天花_软膜灯箱_首选乐创品牌_一站式天花软膜材料供应商! | 全自动包装机_灌装机生产厂家-迈驰包装设备有限公司 | 电动车头盔厂家_赠品头盔_安全帽批发_山东摩托车头盔—临沂承福头盔 | 首页 - 军军小站|张军博客 | 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | 车件|铜件|车削件|车床加工|五金冲压件-PIN针,精密车件定制专业厂商【东莞品晔】 | 金属回收_废铜废铁回收_边角料回收_废不锈钢回收_废旧电缆线回收-广东益夫金属回收公司 | 防爆型气象站_农业气象站_校园气象站_农业四情监测系统「山东万象环境科技有限公司」 | 大行程影像测量仪-探针型影像测量仪-增强型影像测量仪|首丰百科 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 淬火设备-钎焊机-熔炼炉-中频炉-锻造炉-感应加热电源-退火机-热处理设备-优造节能 | 层流手术室净化装修-检验科ICU改造施工-华锐净化工程-特殊科室建设厂家 |