ES6与ES5对数组空位是如何处理的?丨技术开发分享录

ES6与ES5对数组空位是如何处理的?

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"数组的空位指,数组的某一个位置没有任何值。比如,`Array`构造函数返回的数组都是空位。\n\n```\nArray(3) // [, , ,]\n```\n\n上面代码中,Array(3)返回一个具有 3 个空位的数组。\n\n注意,空位不是`undefined`,一个位置的值等于`undefined`,依然是有值的。空位是没有任何值,`in`运算符可以说明这一点。\n\n```\n0 in [undefined, undefined, undefined] // true\n0 in [, , ,] // false\n```\n上面代码说明,第一个数组的 0 号位置是有值的,第二个数组的 0 号位置没有值。\n\nES5 对空位的处理,已经很不一致了,大多数情况下会忽略空位。\n\n- `forEach()`, `filter()`, `reduce()`, `every()` 和`some()`都会跳过空位。\n- `map()`会跳过空位,但会保留这个值\n- `join()`和`toString()`会将空位视为`undefined`,而`undefined`和`null`会被处理成空字符串。\n\n```\n// forEach方法\n[,'a'].forEach((x,i) => console.log(i)); // 1\n\n// filter方法\n['a',,'b'].filter(x => true) // ['a','b']\n\n// every方法\n[,'a'].every(x => x==='a') // true\n\n// reduce方法\n[1,,2].reduce((x,y) => x+y) // 3\n\n// some方法\n[,'a'].some(x => x !== 'a') // false\n\n// map方法\n[,'a'].map(x => 1) // [,1]\n\n// join方法\n[,'a',undefined,null].join('#') // \"#a##\"\n\n// toString方法\n[,'a',undefined,null].toString() // \",a,,\"\n```\n\nES6 则是明确将空位转为`undefined`。\n\n`Array.from`方法会将数组的空位,转为`undefined`,也就是说,这个方法不会忽略空位。\n\n```\nArray.from(['a',,'b'])\n// [ \"a\", undefined, \"b\" ]\n```\n\n扩展运算符(`...`)也会将空位转为`undefined`。\n\n```\n[...['a',,'b']]\n// [ \"a\", undefined, \"b\" ]\n```\n\n`copyWithin()`会连空位一起拷贝。\n\n```\n[,'a','b',,].copyWithin(2,0) // [,\"a\",,\"a\"]\n```\n\n`fill()`会将空位视为正常的数组位置。\n\n```\nnew Array(3).fill('a') // [\"a\",\"a\",\"a\"]\n```\n\n`for...of`循环也会遍历空位。\n\n```\nlet arr = [, ,];\nfor (let i of arr) {\n  console.log(1);\n}\n// 1\n// 1\n```\n\n上面代码中,数组arr有两个空位,`for...of`并没有忽略它们。如果改成`map`方法遍历,空位是会跳过的。\n\n`entries()`、`keys()`、`values()`、`find()`和`findIndex()`会将空位处理成`undefined`。\n\n```\n// entries()\n[...[,'a'].entries()] // [[0,undefined], [1,\"a\"]]\n\n// keys()\n[...[,'a'].keys()] // [0,1]\n\n// values()\n[...[,'a'].values()] // [undefined,\"a\"]\n\n// find()\n[,'a'].find(x => true) // undefined\n\n// findIndex()\n[,'a'].findIndex(x => true) // 0\n```\n\n由于空位的处理规则非常不统一,所以建议避免出现空位。"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看