diff --git a/docs/array.md b/docs/array.md index f6ab0c9..1d00058 100644 --- a/docs/array.md +++ b/docs/array.md @@ -345,6 +345,103 @@ contains(["foo", "bar"], "baz"); // => false - Map结构的`has`方法,是用来查找键名的,比如`Map.prototype.has(key)`、`WeakMap.prototype.has(key)`、`Reflect.has(target, propertyKey)`。 - Set结构的`has`方法,是用来查找值的,比如`Set.prototype.has(value)`、`WeakSet.prototype.has(value)`。 +## 数组的空位 + +数组的空位指,数组的某一个位置没有任何值。比如,`Array`构造函数返回的数组都是空位。 + +```javascript +Array(3) // [, , ,] +``` + +上面代码中,`Array(3)`返回一个具有3个空位的数组。 + +注意,空位不是`undefined`,一个位置的值等于`undefined`,依然是有值的。空位是没有任何值,`in`运算符可以说明这一点。 + +```javascript +0 in [undefined, undefined, undefined] // true +0 in [, , ,] // false +``` + +上面代码说明,第一个数组的0号位置是有值的,第二个数组的0号位置没有值。 + +ES5对空位的处理,已经很不一致了,大多数情况下会忽略空位。 + +- `forEach()`, `filter()`, `every()` 和`some()`都会跳过空位。 +- `map()`会跳过空位,但会保留这个值 +- `join()`和`toString()`会将空位视为`undefined`,而`undefined`和`null`会被处理成空字符串。 + +```javascript +// forEach方法 +[,'a'].forEach((x,i) => log(i)); // 1 + +// filter方法 +['a',,'b'].filter(x => true) // ['a','b'] + +// every方法 +[,'a'].every(x => x==='a') // true + +// some方法 +[,'a'].some(x => x !== 'a') // false + +// map方法 +[,'a'].map(x => 1) // [,1] + +// join方法 +[,'a',undefined,null].join('#') // "#a##" + +// toString方法 +[,'a',undefined,null].toString() // ",a,," +``` + +ES6则是明确将空位转为`undefined`。 + +`Array.from`方法会将数组的空位,转为`undefined`,也就是说,这个方法不会忽略空位。 + +```javascript +Array.from(['a',,'b']) +// [ "a", undefined, "b" ] +``` + +扩展运算符(`...`)也会将空位转为`undefined`。 + +```javascript +[...['a',,'b']] +// [ "a", undefined, "b" ] +``` + +`copyWithin()`会连空位一起拷贝。 + +```javascript +[,'a','b',,].copyWithin(2,0) // [,"a",,"a"] +``` + +`fill()`会将空位视为正常的数组位置。 + +```javascript +new Array(3).fill('a') // ["a","a","a"] +``` + +`entries()`、`keys()`、`values()`、`find()`和`findIndex()`会将空位处理成`undefined`。 + +```javascript +// entries() +[...[,'a'].entries()] // [[0,undefined], [1,"a"]] + +// keys() +[...[,'a'].keys()] // [0,1] + +// values() +[...[,'a'].values()] // [undefined,"a"] + +// find() +[,'a'].find(x => true) // undefined + +// findIndex() +[,'a'].findIndex(x => true) // 0 +``` + +由于空位的处理规则非常不统一,所以建议避免出现空位。 + ## 数组推导 数组推导(array comprehension)提供简洁写法,允许直接通过现有数组生成新数组。这项功能本来是要放入ES6的,但是TC39委员会想继续完善这项功能,让其支持所有数据结构(内部调用iterator对象),不像现在只支持数组,所以就把它推迟到了ES7。Babel转码器已经支持这个功能。 diff --git a/docs/object.md b/docs/object.md index 25d6704..f802f73 100644 --- a/docs/object.md +++ b/docs/object.md @@ -5,14 +5,17 @@ ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 ```javascript -function f( x, y ) { - return { x, y }; -} - +var foo = 'bar'; +var baz = {foo}; // 等同于 +var baz = {foo: foo}; -function f( x, y ) { - return { x: x, y: y }; +function f(x, y) { + return {x, y}; +} +// 等同于 +function f(x, y) { + return {x: x, y: y}; } ``` @@ -56,7 +59,6 @@ var Person = { function getPoint() { var x = 1; var y = 10; - return {x, y}; } @@ -81,6 +83,26 @@ var cart = { } ``` +模块输出变量,就非常合适使用简洁写法。 + +```javascript +var ms = {}; + +function getItem (key) { + return key in ms ? ms[key] : null; +} + +function setItem (key, value) { + ms[key] = value; +} + +function clear () { + ms = {}; +} + +module.exports = { getItem, setItem, clear }; +``` + ## 属性名表达式 JavaScript语言定义对象的属性,有两种方法。 @@ -90,7 +112,7 @@ JavaScript语言定义对象的属性,有两种方法。 obj.foo = true; // 方法二 -obj['a'+'bc'] = 123; +obj['a' + 'bc'] = 123; ``` 上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。 @@ -111,7 +133,7 @@ let propKey = 'foo'; let obj = { [propKey]: true, - ['a'+'bc']: 123 + ['a' + 'bc']: 123 }; ``` @@ -142,6 +164,19 @@ let obj = { obj.hello() // hi ``` +注意,属性名表达式与简洁表示法,不能同时使用,会报错。 + +```javascript +// 报错 +var foo = 'bar'; +var bar = 'abc'; +var baz = { [foo] }; + +// 正确 +var foo = 'bar'; +var baz = { [foo]: 'abc'}; +``` + ## 方法的name属性 函数的`name`属性,返回函数名。对象方法也是函数,因此也有`name`属性。 diff --git a/docs/reference.md b/docs/reference.md index 7024441..b99e644 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -58,6 +58,7 @@ - Axel Rauschmayer, [ECMAScript 6’s new array methods](http://www.2ality.com/2014/05/es6-array-methods.html): 对ES6新增的数组方法的全面介绍 - TC39, [Array.prototype.includes](https://github.com/tc39/Array.prototype.includes/): 数组的includes方法的规格 +- Axel Rauschmayer, [ECMAScript 6: holes in Arrays](http://www.2ality.com/2015/09/holes-arrays-es6.html): 数组的空位问题 ## 函数