1.map/reduce

map()

map()是array的一個(gè)方法

作用: 對(duì)array中每一個(gè)元素調(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ù)有三個(gè)參數(shù):

callback(currentValue, index, array)通常只要第一個(gè)參數(shù)

PS: map()傳入的參數(shù)是pow,即函數(shù)對(duì)象本身

通常map調(diào)用的自定義方法只包含一個(gè)參數(shù)

reduce()

reduce()也是array的一個(gè)方法

作用: 從數(shù)組的前兩個(gè)元素開(kāi)始,作為函數(shù)參數(shù),傳入函數(shù)得到結(jié)果,

結(jié)果再和下一個(gè)數(shù)組元素再一次調(diào)用函數(shù),直到數(shù)組盡頭

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
PS: 通常reduce()調(diào)用的自定義方法只包含兩個(gè)個(gè)參數(shù)

2.filter(篩選)

作用:把Array的某些元素過(guò)濾掉,然后返回剩下的元素.

和map()類(lèi)似，Array的filter()也接收一個(gè)函數(shù)。和map()不同的是，filter()把傳入的函數(shù)依次作用于每個(gè)元素，然后根據(jù)返回值是true還是false決定保留還是丟棄該元素。

//去掉空字符串

var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
  return s && s.trim(); // 注意：IE9以下的版本沒(méi)有trim()方法
});
r; // ['A', 'B', 'C']

回調(diào)函數(shù)

通常我們僅使用第一個(gè)參數(shù)，表示Array的某個(gè)元素?；卣{(diào)函數(shù)還可以接收另外兩個(gè)參數(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;
});

篩選素?cái)?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)鍵在于正確實(shí)現(xiàn)一個(gè)“篩選”函數(shù)

3.sort(排序)

默認(rèn)排序會(huì)把所有元素轉(zhuǎn)成String在排序,根據(jù)一個(gè)元素的ASCII值進(jìn)行排序(非遞減)(TimSort算法)

兩兩比較,當(dāng)回調(diào)函數(shù)返回值大于0時(shí),交換元素值

自定義數(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ù)組的所有元素是否滿足測(cè)試條件(通過(guò)函數(shù)提供)

every()是全部滿足的時(shí)候返回true,一個(gè)不滿足返回false,并終止檢測(cè)

some()是全部不滿足的時(shí)候返回false,有一個(gè)滿足就返回true

find()

作用: 查找第一個(gè)符合條件的元素

查找符合條件的第一個(gè)元素,如果找到了就返回這個(gè)元素,否則,返回undefined

findindex()

作用: 查找第一個(gè)符合條件的元素的索引

查找符合條件的第一個(gè)元素,找到這個(gè)元素就返回他的索引,如果沒(méi)有找到就返回-1

forEach()

作用: 常用于遍歷數(shù)組

(和map類(lèi)似)把數(shù)組每個(gè)元素依次傳入函數(shù),但不會(huì)返回新的數(shù)組.

函數(shù)作為返回值
函數(shù)里再定義一個(gè)函數(shù),返回值為里面定義的函數(shù)

調(diào)用函數(shù)作為返回值的函數(shù)式,每次調(diào)用都會(huì)返回一個(gè)新的函數(shù),即使傳入相同參數(shù)

function lazy_sum(arr) {
  var sum = function () {
    return arr.reduce(function (x, y) {
      return x + y;
    });
  }
  return sum;
}
//此時(shí)返回的是求和函數(shù)
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
f(); // 15 此時(shí)調(diào)用,才進(jìn)行計(jì)算

在函數(shù)lazy_sum中又定義了函數(shù)sum，并且，內(nèi)部函數(shù)sum可以引用外部函數(shù)lazy_sum的參數(shù)和局部變量，當(dāng)lazy_sum返回函數(shù)sum時(shí)，相關(guān)參數(shù)和變量都保存在返回的函數(shù)中，這種稱(chēng)為“閉包（Closure）”的程序結(jié)構(gòu)擁有極大的威力.

閉包(懵逼了)(吐彩虹)

有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域內(nèi)變量的函數(shù)都是閉包。

函數(shù)里面的函數(shù)會(huì)隨著外部定義函數(shù)而改變

PS: 因?yàn)榉祷刂稻褪且粋€(gè)函數(shù),調(diào)用的時(shí)候要加小括號(hào)

返回閉包時(shí)牢記的一點(diǎn)就是：返回函數(shù)不要引用任何循環(huán)變量，或者后續(xù)會(huì)發(fā)生變化的變量。

如果一定要引用循環(huán)變量怎么辦？方法是再創(chuàng)建一個(gè)函數(shù)，用該函數(shù)的參數(shù)綁定循環(huán)變量當(dāng)前的值，無(wú)論該循環(huán)變量后續(xù)如何更改，已綁定到函數(shù)參數(shù)的值不變：

箭頭函數(shù)(=>)(強(qiáng)噠)
(參數(shù)...)=>{函數(shù)體}等價(jià)于function(參數(shù)...){函數(shù)體}

當(dāng)返回的是一個(gè)對(duì)象時(shí)函數(shù)體大括號(hào)外邊加小括號(hào)

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對(duì)象
    return fn();
  }
};
obj.getAge(); // 25

箭頭函數(shù)完全修復(fù)了this指向,this總是指向詞法作用域,也就是外層調(diào)用 obj

generator(生成器)

ES6引入借鑒Python同名函數(shù)

寫(xiě)法和函數(shù)類(lèi)似,只是在function后加*,通過(guò)yield多次返回值,也可通過(guò)return返回值

函數(shù)在執(zhí)行過(guò)程中，如果沒(méi)有遇到return語(yǔ)句（函數(shù)末尾如果沒(méi)有return，就是隱含的return undefined;），控制權(quán)無(wú)法交回被調(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)用一個(gè)generator和調(diào)用函數(shù)不一樣，fib(5)僅僅是創(chuàng)建了一個(gè)generator對(duì)象，還沒(méi)有去執(zhí)行它。

調(diào)用generator對(duì)象有兩個(gè)方法，

一是不斷地調(diào)用generator對(duì)象的next()方法：next()方法會(huì)執(zhí)行g(shù)enerator的代碼，然后，每次遇到y(tǒng)ield x;就返回一個(gè)對(duì)象{value: x, done: true/false}，然后“暫停”。返回的value就是yield的返回值，done表示這個(gè)generator是否已經(jīng)執(zhí)行結(jié)束了。如果done為true，則value就是return的返回值。當(dāng)執(zhí)行到done為true時(shí)，這個(gè)generator對(duì)象就已經(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}

第二個(gè)方法是直接用for ... of循環(huán)迭代generator對(duì)象，這種方式不需要我們自己判斷done：

for (var x of fib(10)) {
  console.log(x); // 依次輸出0, 1, 1, 2, 3, ...
}

generator還有另一個(gè)巨大的好處，就是把異步回調(diào)代碼變成“同步”代碼。這個(gè)好處要等到后面學(xué)了AJAX以后才能體會(huì)到。

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);
}

看上去是同步的代碼，實(shí)際執(zhí)行是異步的。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論