js 你不知道的 Array

1、在类数组对象上复用通用的数组方法

类数组有：arguments, NodeList, 字符串

什么是类数组？ 两个条件

1. 具备 length 属性

2. length 属性大于该对象的最大索引

好比：

var arrayLike = { 0: "a", 1: "b", 2: "c", length: 3};
  var result = Array.prototype.map.call(arrayLike, function(s) {
    return s.toUpperCase();
  });//["A", "B", "C"]

几乎全部的数组方法都是通用的（forEach，slice，map ...） 除了 concat。

由于 concat 在链接时，会检查其参数的 [[Class]] 属性。

一些方法，好比 join，仅仅读取他们被调用的对象的长度和数值属性。 另外，像 reverse 同样，要求对象的数值属性和长度属性是可变的；所以，这些方法不能在像 String 这样的对象上被调用，String不容许它的长度属性和synthesized的数值属性被设置。

function namesColumn() {
    return ['Names'].concat(arguments);
  }
  namesColumn("alice", "arale");//["Names", {0: "alice", 1: "arale"}]

  //解决办法：应先使用 slice 将 arguments 转为数组
  function namesColumn() {
    return ['Names'].concat([].slice.call(arguments));
  }

---

2、数组优先使用 for 循环，而不是 for in 循环。

for in 更多的是用于 遍历对象，可是 它也会去检查 对象的原型。

若是浏览器支持 for of （ES6）的话，最好是使用它，它不会去遍历原型。

---

3、迭代优于循环

一个缘由是，迭代能够消除不必的 终止条件 和 任何数组索引

好比：

for (var i = 0; n = players.length; i < n; i++) {
    players[i].score++;
  }

  //使用迭代
  players.forEach(function(p){
    p.score++;
  });

例1： 对数组每个元素操做后生成一个新的数组

//得到全部输入框去除多余空格后的值
  var trimmed = input.map(function(s) {
    return s.trim()
  })

例2： 获取价格在特定区间的列表

listings.filter(function(listing) {
    return listing.price >= min && listing.price <= max
  })

固然这都是 ES5 的方法，咱们也能够本身写一个。

function takeWhile(a, pred) {
    var result = []
    for (var i = 0; n = a.length; i < n; i++) {
      if (!pred(a[i], i)) {
       break
      }
      result[i] = a[i]
    }
    return result
  }

  var prefix = takeWhile([1, 2, 4, 8, 16, 32], function(n) {
    return n < 10
  }) // [1, 2, 4, 8]

把它加在 Array 上

Array.prototype.takeWhile = function(pred) {
    var result = []
    for (var i = 0; n = this.length; i < n; i++) {
      if (!pred(this[i], i)) {
        break
      }
      result[i] = this[i]
    }
    return result
  }

  [1, 2, 4, 8, 16, 32].takeWhile(function(n) {
    return n < 10
  }) // [1, 2, 4, 8]

循环仅一点优于迭代： 控制流操做 如 break 和 continue

ES5 中 只有 some 和 every 能够提早终止循环, 但设计他们的本意不是用来提早终止循环。

// some 一旦回调产生了一个真值，则当即返回，不会执行其他的元素
[1, 10, 100].some(function(x) { return x > 5 }) //true
[1, 10, 100].some(function(x) { return x < 0 }) //false
// every 相反, 一旦产生假值，则当即返回，不会执行其他元素
[1, 2, 3, 4, 5].every(function(x) { return x > 0 }) //true
[1, 2, 3, 4, 5].every(function(x) { return x < 3 }) //false

这种行为能够用来实现 forEach 提早终止循环的变种时派上用场

function takeWhile(a, pred) {
    var result = [];
    a.every(function(x, i) {
      if (!pred(x)) {
        return false //break
      }
      result[i] = x;
      return true; //continue
    })
    return result
  }

---

4、数组方法分类

1. Mutator 方法

这些方法能够改变数组自身

• pop : 移除数组的最后一个元素，返回值是被删除的元素。

• push : 在数组的末尾添加一个或者多个元素，返回值是新的数组的长度。

• reverse : 颠倒数组中元素的顺序，原先第一个元素如今变成最后一个，一样原先的最后一个元素变成了如今的第一个，也就是数组的索引起生了变化。

• shift : 删除数组的第一个元素，返回值是删除的元素

• sort : 对数组中的元素进行排序

• splice : 添加或删除数组中的一个或多个元素。

• unshift : （将废弃）添加一个或者多个元素在数组的开头，返回值是新的数组的长度。

---

2. Accessor 方法

这些方法不改变数组自身

• concat : 返回一个包含此数组和其余数组和/或值的结合的新数组

• indexOf : 返回第一个与给定参数相等的数组元素的索引，没有找到则返回-1

• join : 将全部的数组元素链接成一个字符串

• lastIndexOf : 返回在数组中搜索到的与给定参数相等的元素的最后（最大）索引

• slice : 返回数组中的一段。

• toString : 返回表明该数组及其元素的字符,重写Object.toString 过程.

• valueOf : 重写Object.valueOf过程。

---

3. 循环（迭代） 方法

• filter : 对数组中的每个元素调用参数中指定的过滤函数，并将对于过滤函数返回值为true的那些数组元素集合为新的数组返回。

• forEach : 对数组的每个元素依次调用参数中指定的函数。

• every : 若是数组中每个元素都知足参数中提供的测试函数，则返回真

• map : 建立一个新数组，新数组中含有，分别对于原来数组的每个元素调用一个给定函数的结果

• some : 若是数组中至少有一个元素知足参数函数的测试，则返回true。