JavaScript Array-like 的对象集合_arraylike 不能用foreach 吗-CSDN博客

Array-like 的对象集合

JavaScript 有一种“类似数组的对象”，它是一个对象的数组，并且带有一个length的属性。比如：

var realArray = ['a', 'b', 'c'];
var arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

最普通的例子是html中的 document.getElementByTagName 或 document.querySelectorAll 返回的 NodeList 或 HTMLCollection。

但是，Arrays 和 Array-like 的对象集合有一个关键的不同点是：Array-like 的对象集合继承于 object.prototype 而不是 Array.prototype。这意味着 Array-like 的对象集合不能访问通用的数组方法，比如： foreach(), push(), map(), filter(), slice()。

var parent = document.getElementById('myDropdown');
var desiredOption = parent.querySelector('option[value="desired"]');
var domList = parent.children;

domList.indexOf(desiredOption); // Error! indexOf is not defined.
domList.forEach(function() { 
  arguments.map(/* Stuff here */) // Error! map is not defined.
}); // Error! forEach is not defined.

function func() {
  console.log(arguments);
}
func(1, 2, 3);   // → [1, 2, 3]

把 Array-like 的对象集合转换成数组的方式如下：

Array.from

const arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};
arrayLike.forEach(value => {/* Do something */}); // Errors
const realArray = Array.from(arrayLike);
realArray.forEach(value => {/* Do something */}); // Works

for…of

var realArray = [];
for(const element of arrayLike) {
  realArray.append(element);
}

Spread operator

[...arrayLike]

归纳多个值

reduce() 方法用一个函数累加数组中的每个值（从左到右）从而得到一个新值。

求合：

[1, 2, 3, 4].reduce(function(a, b) {
  return a + b;
});
// → 10

第2个可选参数可以传递给reduce()，它的值将可以用作第一次调用回调函数（也就是function(a, b)）的第一个参数（也就是a）：

[2].reduce(function(a, b) {
  console.log(a, b); // prints: 1 2
  return a + b;
}, 1);
// → 3

把对象集合变成一个单独的对象：

var array = [
  {
    key: 'one',
    value: 1
  },
  {
    key: 'two',
    value: 2
  },
  {
    key: 'three',
    value: 3
  }
];

>=ES5.1
array.reduce(function(obj, current) {
  obj[current.key] = current.value;
  return obj;
}, {});

>=ES6
array.reduce((obj, current) => Object.assign(obj, {
  [current.key]: current.value
}), {});

>=ES7
array.reduce((obj, current) => ({...obj, [current.key]: current.value}), {});

结果是：

{
  one: 1,
  two: 2,
  three: 3
}

使用 Map 进行 Reduce

另一个使用初始化参数的例子是：在一个数组上调用一个函数，在一个新数组中返回结果。因为数组都是普通的值，而列表级连（list concatenation ）是一个普通的函数，我们可以用 reduce 累加一个列表，比如这样：

function map(list, fn) {
  return list.reduce(function(newList, item) {
    return newList.concat(fn(item));
  }, []);
}

// Usage:
map([1, 2, 3], function(n) { return n * n; });
// → [1, 4, 9]

找最大值或最小值：

var arr = [4, 2, 1, -10, 9]

arr.reduce(function(a, b) {
  return a < b ? a : b
}, Infinity);
// → -10

找唯一值：
空数组作为第2个参数，被prev引用：

var arr = [1, 2, 1, 5, 9, 5];

arr.reduce((prev, number) => {
  if(prev.indexOf(number) === -1) {
    prev.push(number);
  }
  return prev;
}, []);
// → [1, 2, 5, 9]

Mapping

通常需要根据一个现有的数组生成一个新的数组，比如，生成一个字符串的数组的有关其字符串长度的数组：

>=ES5.1
['one', 'two', 'three', 'four'].map(function(value, index, arr) {
  return value.length;
});
// → [3, 3, 5, 4]

>=ES6
['one', 'two', 'three', 'four'].map(value => value.length);
// → [3, 3, 5, 4]

匿名函数提供给 map() 函数，map 函数将会为数组中的每个元素调用它，提供的参数按如下顺序：

元素自己；
元素的索引（0，1…）；
整个数组；

另外，map() 提供一个可选的第2参数，作用是设置 mapping 中 this 的值。取决于执行环境，默认的 this的值可能区别很大：

默认值

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // window (the default value in browsers)
  return value.length;
});

改成自定义的对象：

var obj = {
  documentation: 'randomObject'
};

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // Object { documentation: "randomObject" }
  return value.length;
}, obj);