ECMAScript6(es6） 规格：数组的空位（map方法）

下面再看另一个例子。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

const a1 = [undefined, undefined, undefined];
const a2 = [, , ,];

a1.length // 3
a2.length // 3

a1[0] // undefined
a2[0] // undefined

a1[0] === a2[0] // true

上面代码中，数组a1的成员是三个undefined，数组a2的成员是三个空位。这两个数组很相似，长度都是3，每个位置的成员读取出来都是undefined。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

但是，它们实际上存在重大差异。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

0 in a1 // true
0 in a2 // false

a1.hasOwnProperty(0) // true
a2.hasOwnProperty(0) // false

Object.keys(a1) // ["0", "1", "2"]
Object.keys(a2) // []

a1.map(n => 1) // [1, 1, 1]
a2.map(n => 1) // [, , ,]

上面代码一共列出了四种运算，数组a1和a2的结果都不一样。前三种运算（in运算符、数组的hasOwnProperty方法、Object.keys方法）都说明，数组a2取不到属性名。最后一种运算（数组的map方法）说明，数组a2没有发生遍历。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

为什么a1与a2成员的行为不一致？数组的成员是undefined或空位，到底有什么不同？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

规格的12.2.5小节《数组的初始化》给出了答案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

“Array elements may be elided at the beginning, middle or end of the element list. Whenever a comma in the element list is not preceded by an AssignmentExpression (i.e., a comma at the beginning or after another comma), the missing array element contributes to the length of the Array and increases the index of subsequent elements. Elided array elements are not defined. If an element is elided at the end of an array, that element does not contribute to the length of the Array.”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

翻译如下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

"数组成员可以省略。只要逗号前面没有任何表达式，数组的length属性就会加1，并且相应增加其后成员的位置索引。被省略的成员不会被定义。如果被省略的成员是数组最后一个成员，则不会导致数组length属性增加。”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

上面的规格说得很清楚，数组的空位会反映在length属性，也就是说空位有自己的位置，但是这个位置的值是未定义，即这个值是不存在的。如果一定要读取，结果就是undefined（因为undefined在JavaScript语言中表示不存在）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

这就解释了为什么in运算符、数组的hasOwnProperty方法、Object.keys方法，都取不到空位的属性名。因为这个属性名根本就不存在，规格里面没说要为空位分配属性名(位置索引），只说要为下一个元素的位置索引加1。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

至于为什么数组的map方法会跳过空位，请看下一节。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

数组的map方法

规格的22.1.3.15小节定义了数组的map方法。该小节先是总体描述map方法的行为，里面没有提到数组空位。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

后面的算法描述是这样的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

1. Let O be ToObject(this value).
2. ReturnIfAbrupt(O).
3. Let len be ToLength(Get(O, "length")).
4. ReturnIfAbrupt(len).
5. If IsCallable(callbackfn) is false, throw a TypeError exception.
6. If thisArg was supplied, let T be thisArg; else let T be undefined.
7. Let A be ArraySpeciesCreate(O, len).
8. ReturnIfAbrupt(A).
9. Let k be 0.
10. Repeat, while k < len
    a. Let Pk be ToString(k).
    b. Let kPresent be HasProperty(O, Pk).
    c. ReturnIfAbrupt(kPresent).
    d. If kPresent is true, then
    d-1. Let kValue be Get(O, Pk).
    d-2. ReturnIfAbrupt(kValue).
    d-3. Let mappedValue be Call(callbackfn, T, «kValue, k, O»).
    d-4. ReturnIfAbrupt(mappedValue).
    d-5. Let status be CreateDataPropertyOrThrow (A, Pk, mappedValue).
    d-6. ReturnIfAbrupt(status).
    e. Increase k by 1.
11. Return A.

翻译如下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

1. 得到当前数组的this对象
2. 如果报错就返回
3. 求出当前数组的length属性
4. 如果报错就返回
5. 如果map方法的参数callbackfn不可执行，就报错
6. 如果map方法的参数之中，指定了this，就让T等于该参数，否则T为undefined
7. 生成一个新的数组A，跟当前数组的length属性保持一致
8. 如果报错就返回
9. 设定k等于0
10. 只要k小于当前数组的length属性，就重复下面步骤
    a. 设定Pk等于ToString(k)，即将K转为字符串
    b. 设定kPresent等于HasProperty(O, Pk)，即求当前数组有没有指定属性
    c. 如果报错就返回
    d. 如果kPresent等于true，则进行下面步骤
    d-1. 设定kValue等于Get(O, Pk)，取出当前数组的指定属性
    d-2. 如果报错就返回
    d-3. 设定mappedValue等于Call(callbackfn, T, «kValue, k, O»)，即执行回调函数
    d-4. 如果报错就返回
    d-5. 设定status等于CreateDataPropertyOrThrow (A, Pk, mappedValue)，即将回调函数的值放入A数组的指定位置
    d-6. 如果报错就返回
    e. k增加1
11. 返回A

仔细查看上面的算法，可以发现，当处理一个全是空位的数组时，前面步骤都没有问题。进入第10步的b时，kpresent会报错，因为空位对应的属性名，对于数组来说是不存在的，因此就会返回，不会进行后面的步骤。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

const arr = [, , ,];
arr.map(n => {
  console.log(n);
  return 1;
}) // [, , ,]

上面代码中，arr是一个全是空位的数组，map方法遍历成员时，发现是空位，就直接跳过，不会进入回调函数。因此，回调函数里面的console.log语句根本不会执行，整个map方法返回一个全是空位的新数组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

V8引擎对map方法的实现如下，可以看到跟规格的算法描述完全一致。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/177.html

function ArrayMap(f, receiver) {
  CHECK_OBJECT_COERCIBLE(this, "Array.prototype.map");

  // Pull out the length so that modifications to the length in the
  // loop will not affect the looping and side effects are visible.
  var array = TO_OBJECT(this);
  var length = TO_LENGTH_OR_UINT32(array.length);
  return InnerArrayMap(f, receiver, array, length);
}

function InnerArrayMap(f, receiver, array, length) {
  if (!IS_CALLABLE(f)) throw MakeTypeError(kCalledNonCallable, f);

  var accumulator = new InternalArray(length);
  var is_array = IS_ARRAY(array);
  var stepping = DEBUG_IS_STEPPING(f);
  for (var i = 0; i < length; i++) {
    if (HAS_INDEX(array, i, is_array)) {
      var element = array[i];
      // Prepare break slots for debugger step in.
      if (stepping) %DebugPrepareStepInIfStepping(f);
      accumulator[i] = %_Call(f, receiver, element, i, array);
    }
  }
  var result = new GlobalArray();
  %MoveArrayContents(accumulator, result);
  return result;
}