JavaScript array常用方法代碼實例詳解
1.map/reduce
map()
map()是array的一個方法
作用: 對array中每一個元素調(diào)用自定義函數(shù)
’use strict’;function pow(x){return x*x;}var arr=[1,2,3,4,5]var newarray=arr.map(pow)
map的回調(diào)函數(shù)有三個參數(shù):
callback(currentValue, index, array)通常只要第一個參數(shù)
PS: map()傳入的參數(shù)是pow,即函數(shù)對象本身
通常map調(diào)用的自定義方法只包含一個參數(shù)
reduce()
reduce()也是array的一個方法
作用: 從數(shù)組的前兩個元素開始,作為函數(shù)參數(shù),傳入函數(shù)得到結(jié)果,
結(jié)果再和下一個數(shù)組元素再一次調(diào)用函數(shù),直到數(shù)組盡頭
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)PS: 通常reduce()調(diào)用的自定義方法只包含兩個個參數(shù)
2.filter(篩選)
作用:把Array的某些元素過濾掉,然后返回剩下的元素.
和map()類似,Array的filter()也接收一個函數(shù)。和map()不同的是,filter()把傳入的函數(shù)依次作用于每個元素,然后根據(jù)返回值是true還是false決定保留還是丟棄該元素。
//去掉空字符串
var arr = [’A’, ’’, ’B’, null, undefined, ’C’, ’ ’];var r = arr.filter(function (s) { return s && s.trim(); // 注意:IE9以下的版本沒有trim()方法});r; // [’A’, ’B’, ’C’]
回調(diào)函數(shù)
通常我們僅使用第一個參數(shù),表示Array的某個元素。回調(diào)函數(shù)還可以接收另外兩個參數(shù),表示元素的位置和數(shù)組本身:
var arr = [’A’, ’B’, ’C’];var r = arr.filter(function (element, index, self) { console.log(element); // 依次打印’A’, ’B’, ’C’ console.log(index); // 依次打印0, 1, 2 console.log(self); // self就是變量arr return true;});
篩選素數(shù):
function get_primes(arr){if(elem===1){return false;}for(var i=2;i<=elem/2;i++){if(elem%i==0){return false;}}return true;});return x;}
PS: 關(guān)鍵在于正確實現(xiàn)一個“篩選”函數(shù)
3.sort(排序)
默認(rèn)排序會把所有元素轉(zhuǎn)成String在排序,根據(jù)一個元素的ASCII值進行排序(非遞減)(TimSort算法)
兩兩比較,當(dāng)回調(diào)函數(shù)返回值大于0時,交換元素值
自定義數(shù)字排序
’use strict’ var arr=[10,20,1,2];arr.sort(function(x,y){if (x < y) { return -1; } if (x > y) { return 1; } return 0;});console.log(arr); // [1, 2, 10, 20]
數(shù)字倒序排列
var arr = [10, 20, 1, 2];arr.sort(function (x, y) { if (x < y) { return 1; } if (x > y) { return -1; } return 0;}); // [20, 10, 2, 1]
4.其他的Array方法
every()和some()
作用: 可以判斷數(shù)組的所有元素是否滿足測試條件(通過函數(shù)提供)
every()是全部滿足的時候返回true,一個不滿足返回false,并終止檢測
some()是全部不滿足的時候返回false,有一個滿足就返回true
find()
作用: 查找第一個符合條件的元素
查找符合條件的第一個元素,如果找到了就返回這個元素,否則,返回undefined
findindex()
作用: 查找第一個符合條件的元素的索引
查找符合條件的第一個元素,找到這個元素就返回他的索引,如果沒有找到就返回-1
forEach()
作用: 常用于遍歷數(shù)組
(和map類似)把數(shù)組每個元素依次傳入函數(shù),但不會返回新的數(shù)組.
函數(shù)作為返回值函數(shù)里再定義一個函數(shù),返回值為里面定義的函數(shù)
調(diào)用函數(shù)作為返回值的函數(shù)式,每次調(diào)用都會返回一個新的函數(shù),即使傳入相同參數(shù)
function lazy_sum(arr) { var sum = function () { return arr.reduce(function (x, y) { return x + y; }); } return sum;}//此時返回的是求和函數(shù)var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()f(); // 15 此時調(diào)用,才進行計算
在函數(shù)lazy_sum中又定義了函數(shù)sum,并且,內(nèi)部函數(shù)sum可以引用外部函數(shù)lazy_sum的參數(shù)和局部變量,當(dāng)lazy_sum返回函數(shù)sum時,相關(guān)參數(shù)和變量都保存在返回的函數(shù)中,這種稱為“閉包(Closure)”的程序結(jié)構(gòu)擁有極大的威力.
閉包(懵逼了)(吐彩虹)
有權(quán)訪問另一個函數(shù)作用域內(nèi)變量的函數(shù)都是閉包。
函數(shù)里面的函數(shù)會隨著外部定義函數(shù)而改變
PS: 因為返回值就是一個函數(shù),調(diào)用的時候要加小括號
返回閉包時牢記的一點就是:返回函數(shù)不要引用任何循環(huán)變量,或者后續(xù)會發(fā)生變化的變量。
如果一定要引用循環(huán)變量怎么辦?方法是再創(chuàng)建一個函數(shù),用該函數(shù)的參數(shù)綁定循環(huán)變量當(dāng)前的值,無論該循環(huán)變量后續(xù)如何更改,已綁定到函數(shù)參數(shù)的值不變:
箭頭函數(shù)(=>)(強噠)(參數(shù)...)=>{函數(shù)體}等價于function(參數(shù)...){函數(shù)體}
當(dāng)返回的是一個對象時函數(shù)體大括號外邊加小括號
x=>({foo:x})
this
箭頭函數(shù)內(nèi)部的this是詞法作用域,由上下文確定
var obj = { birth: 1990, getAge: function () { var b = this.birth; // 1990 var fn = () => new Date().getFullYear() - this.birth; // this指向obj對象 return fn(); }};obj.getAge(); // 25
箭頭函數(shù)完全修復(fù)了this指向,this總是指向詞法作用域,也就是外層調(diào)用 obj
generator(生成器)
ES6引入借鑒Python同名函數(shù)
寫法和函數(shù)類似,只是在function后加*,通過yield多次返回值,也可通過return返回值
函數(shù)在執(zhí)行過程中,如果沒有遇到return語句(函數(shù)末尾如果沒有return,就是隱含的return undefined;),控制權(quán)無法交回被調(diào)用的代碼。
function* (x){yield x}function* fib(max) { var t, a = 0, b = 1, n = 0; while (n < max) { yield a; [a, b] = [b, a + b]; n ++; } return;}fib(5); // fib {[[GeneratorStatus]]: 'suspended', [[GeneratorReceiver]]: Window}
直接調(diào)用一個generator和調(diào)用函數(shù)不一樣,fib(5)僅僅是創(chuàng)建了一個generator對象,還沒有去執(zhí)行它。
調(diào)用generator對象有兩個方法,
一是不斷地調(diào)用generator對象的next()方法:next()方法會執(zhí)行g(shù)enerator的代碼,然后,每次遇到y(tǒng)ield x;就返回一個對象{value: x, done: true/false},然后“暫停”。返回的value就是yield的返回值,done表示這個generator是否已經(jīng)執(zhí)行結(jié)束了。如果done為true,則value就是return的返回值。當(dāng)執(zhí)行到done為true時,這個generator對象就已經(jīng)全部執(zhí)行完畢,不要再繼續(xù)調(diào)用next()`了。
var f = fib(5);f.next(); // {value: 0, done: false}f.next(); // {value: 1, done: false}f.next(); // {value: 1, done: false}f.next(); // {value: 2, done: false}f.next(); // {value: 3, done: false}f.next(); // {value: undefined, done: true}
第二個方法是直接用for ... of循環(huán)迭代generator對象,這種方式不需要我們自己判斷done:
for (var x of fib(10)) { console.log(x); // 依次輸出0, 1, 1, 2, 3, ...}
generator還有另一個巨大的好處,就是把異步回調(diào)代碼變成“同步”代碼。這個好處要等到后面學(xué)了AJAX以后才能體會到。
try { r1 = yield ajax(’http://url-1’, data1); r2 = yield ajax(’http://url-2’, data2); r3 = yield ajax(’http://url-3’, data3); success(r3);}catch (err) { handle(err);}
看上去是同步的代碼,實際執(zhí)行是異步的。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
