《jacascript高級(jí)程序設(shè)計(jì)》筆記：數(shù)組方法高級(jí)

yanbingyun1990 發(fā)布于2019-08-20 18:52 / 729人閱讀

摘要：位置方法為數(shù)組實(shí)例添加了兩個(gè)位置方法和。參數(shù)要查找的項(xiàng)和可選的表示查找起點(diǎn)位置的索引。函數(shù)接受個(gè)參數(shù)之前值當(dāng)前值索引值以及數(shù)組本身。

這一章節(jié)主要記錄的是ES5的方法，在低版本瀏覽器上存在一定的兼容，但是主流手機(jī)上使用大可放心。

位置方法

ECMAScript 5 為數(shù)組實(shí)例添加了兩個(gè)位置方法:indexOf()和 lastIndexOf()。

1.參數(shù): 要查找的項(xiàng)和(可選的)表示查找起點(diǎn)位置的索引。
2.indexOf()方法從數(shù)組的開頭(位置0)開始向后查找，lastIndexOf()方法則從數(shù)組的末尾開始向前查找
3.兩個(gè)方法都返回要查找的項(xiàng)在數(shù)組中的位置，或者在沒找到的情況下返回-1。
4.在比較第一個(gè)參數(shù)與數(shù)組中的每一項(xiàng)時(shí)，會(huì)使用全等操作符

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4));        //3

alert(numbers.lastIndexOf(4)); //5
alert(numbers.indexOf(4, 4));     //5
alert(numbers.lastIndexOf(4, 4)); //3

var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];
var morePeople = [person];
alert(people.indexOf(person));     //-1
alert(morePeople.indexOf(person)); //0

迭代方法

聲明：以下方法參數(shù)都是function類型，默認(rèn)有傳參，方法中的function回調(diào)支持3個(gè)參數(shù)，第1個(gè)是遍歷的數(shù)組內(nèi)容；第2個(gè)是對(duì)應(yīng)的數(shù)組索引，第3個(gè)是數(shù)組本身

1.forEach()方法
【遍歷】遍歷數(shù)組，沒有返回值！沒有返回值！沒有返回值！重要的事情說三遍
forEach()方法幾乎可以代替for的用法，如果對(duì)數(shù)組的返回或跳出沒有要求

用法：

[1, 2 ,3, 4].forEach(function(value, index, arr){
    console.log(value); // 當(dāng)前值
    console.log(index); // 當(dāng)前索引
    console.log(arr); // 指向當(dāng)前數(shù)組
});

// 等同于
var array = [1, 2, 3, 4];
for (var k = 0, length = array.length; k < length; k++) {
    //...
}

用法雖然簡(jiǎn)單，但在低版本的瀏覽器上存在兼容，下面提供一個(gè)兼容性的寫法：

// 對(duì)于古董瀏覽器，如IE6-IE8

if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function (fn, context) {
    for (var k = 0, length = this.length; k < length; k++) {
      if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, k)) {
        fn.call(context, this[k], k, this);
      }
    }
  };
}

2.map()方法

【映射】對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組，返回的數(shù)組長(zhǎng)度一定與原數(shù)組長(zhǎng)度相同，常用來改造某一數(shù)組，例如對(duì)某段數(shù)組進(jìn)行篩選或插入新的元素

基本用法：

// 含有return
[1, 2, 3, 4].map(function (item) {
  return item * item; // [1, 4, 9, 16]
});

// 不含return
[1, 2, 3, 4].map(function (item) {
  item * item; // [undefined, undefined, undefined, undefined]
});

用于篩選某一段數(shù)組，返回符合要求對(duì)元素組成的新數(shù)組：

var users = [
  {name: "佟麗婭", "email": "zhang@email.com"},
  {name: "趙麗穎",   "email": "jiang@email.com"},
  {name: "肉巴",  "email": "li@email.com"}
];

var emails = users.map(function (user) { return user.email; });
// ["zhang@email.com", "jiang@email.com", "li@email.com"]

用于插入新的元素：

var users = [
  {name: "佟麗婭", "email": "tongliya@email.com"},
  {name: "趙麗穎",   "email": "zhaoliying@email.com"},
  {name: "肉巴",  "email": "dilireba@email.com"}
];
users.map(function(v){
    v.enName = v.email.slice(0, v.email.indexOf("@"));
    return v
})

兼容性寫法：

if (typeof Array.prototype.map != "function") {
  Array.prototype.map = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
      for (var k = 0, length = this.length; k < length; k++) {      
         arr.push(fn.call(context, this[k], k, this));
      }
    }
    return arr;
  };
}

3.filter()方法

【篩選】對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回該函數(shù)會(huì)返回 true 的項(xiàng)組成的數(shù)組
與map()方法的用法較為相似，但是僅返回滿足要求的項(xiàng)，返回的新的數(shù)組一定是原數(shù)組中的元素，且數(shù)組長(zhǎng)度小于等于原數(shù)組長(zhǎng)度

基本用法

[0, 1, 2, 3].filter(function(item) {
    return item; // [1, 2, 3]
});

var users = [
  {name: "佟麗婭", "email": "tongliya@email.com", age: 24},
  {name: "趙麗穎",   "email": "zhaoliying@email.com", age: 18},
  {name: "肉巴",  "email": "dilireba@email.com", age: 17}
];
users.map(function(v){
    return v.age > 18// {name: "佟麗婭", email: "tongliya@email.com", age: 24}
})

兼容性寫法：

if (typeof Array.prototype.filter != "function") {
  Array.prototype.filter = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
       for (var k = 0, length = this.length; k < length; k++) {
          fn.call(context, this[k], k, this) && arr.push(this[k]);
       }
    }
    return arr;
  };
}

every()方法

【全滿足返回true】對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)每一項(xiàng)都返回 true，則返回 true

基本用法：

// 數(shù)組中所有項(xiàng)滿足要求時(shí)返回true，否則為false
[1,2,3,4,5,6,7].every(function(v){
    return v > 2; // false
})

兼容性寫法：

if (typeof Array.prototype.every != "function") {
  Array.prototype.every = function (fn, context) {
    var passed = true;
    if (typeof fn === "function") {
       for (var k = 0, length = this.length; k < length; k++) {
          if (passed === false) break;
          passed = !!fn.call(context, this[k], k, this);
      }
    }
    return passed;
  };
}

some()方法

【某項(xiàng)滿足返回true】對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)任一項(xiàng)返回 true，則返回 true

基本寫法

// 數(shù)組中某一項(xiàng)滿足要求時(shí)返回true，否則為false
[1,2,3,4,5,6,7].some(function(v){
    return v > 2; // true
})

兼容性寫法：

if (typeof Array.prototype.some != "function") {
  Array.prototype.some = function (fn, context) {
    var passed = false;
    if (typeof fn === "function") {
         for (var k = 0, length = this.length; k < length; k++) {
          if (passed === true) break;
          passed = !!fn.call(context, this[k], k, this);
      }
    }
    return passed;
  };
}

歸并方法

歸并方法包括reduce()和reduceRight()兩種，寫法同上面的方式相似。函數(shù)接受4個(gè)參數(shù)：之前值、當(dāng)前值、索引值以及數(shù)組本身。initialValue參數(shù)可選，表示初始值。若指定，則當(dāng)作最初使用的previous值；如果缺省，則使用數(shù)組的第一個(gè)元素作為previous初始值，同時(shí)current往后排一位，相比有initialValue值少一次迭代

1.reduce()方法

基本用法：

var sum = [1, 2, 3, 4].reduce(function (previous, current, index, array) {
  return previous + current;
});

console.log(sum); // 10

// 執(zhí)行過程
// 初始設(shè)置
previous = initialValue = 1, current = 2
// 第一次迭代
previous = (1 + 2) =  3, current = 3
// 第二次迭代
previous = (3 + 3) =  6, current = 4
// 第三次迭代
previous = (6 + 4) =  10, current = undefined (退出)

var sum = [1, 2, 3, 4].reduce(function (previous, current, index, array) {
  return previous + current;
}, 10);

console.log(sum); // 20
// 執(zhí)行過程
// 初始設(shè)置
initialValue = 10, previous = 1, current = 2
// 第一次迭代
previous = (10 + 1) =  11, current = 2
// 第二次迭代
previous = (11 + 2) =  13, current = 3
// 第三次迭代
previous = (13 + 3) =  16, current = 4
// 第四次迭代
previous = (16 + 4) =  20, current = undefined

數(shù)組扁平化

var matrix = [
  [1, 2],
  [3, 4],
  [5, 6]
];

// 二維數(shù)組扁平化
var flatten = matrix.reduce(function (previous, current) {
  return previous.concat(current);
});

console.log(flatten); // [1, 2, 3, 4, 5, 6]

兼容寫法：

if (typeof Array.prototype.reduce != "function") {
  Array.prototype.reduce = function (callback, initialValue ) {
     var previous = initialValue, k = 0, length = this.length;
     if (typeof initialValue === "undefined") {
        previous = this[0];
        k = 1;
     }
     
    if (typeof callback === "function") {
      for (k; k < length; k++) {
         this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
      }
    }
    return previous;
  };
}

2.reduceRight()方法

與reduce()方法相同，只是執(zhí)行順序是從右往左

兼容性寫法：

if (typeof Array.prototype.reduceRight != "function") {
  Array.prototype.reduceRight = function (callback, initialValue ) {
    var length = this.length, k = length - 1, previous = initialValue;
    if (typeof initialValue === "undefined") {
        previous = this[length - 1];
        k--;
    }
    if (typeof callback === "function") {
       for (k; k > -1; k-=1) {          
          this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
       }
    }
    return previous;
  };
}

參考：ES5中新增的Array方法詳細(xì)說明