1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00

edit Array/hole

This commit is contained in:
ruanyf 2015-10-04 07:44:04 +08:00
parent 6c3396809c
commit 498db6f954
3 changed files with 142 additions and 9 deletions

View File

@ -345,6 +345,103 @@ contains(["foo", "bar"], "baz"); // => false
- Map结构的`has`方法,是用来查找键名的,比如`Map.prototype.has(key)``WeakMap.prototype.has(key)``Reflect.has(target, propertyKey)` - Map结构的`has`方法,是用来查找键名的,比如`Map.prototype.has(key)``WeakMap.prototype.has(key)``Reflect.has(target, propertyKey)`
- Set结构的`has`方法,是用来查找值的,比如`Set.prototype.has(value)``WeakSet.prototype.has(value)` - 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转码器已经支持这个功能。 数组推导array comprehension提供简洁写法允许直接通过现有数组生成新数组。这项功能本来是要放入ES6的但是TC39委员会想继续完善这项功能让其支持所有数据结构内部调用iterator对象不像现在只支持数组所以就把它推迟到了ES7。Babel转码器已经支持这个功能。

View File

@ -5,12 +5,15 @@
ES6允许直接写入变量和函数作为对象的属性和方法。这样的书写更加简洁。 ES6允许直接写入变量和函数作为对象的属性和方法。这样的书写更加简洁。
```javascript ```javascript
var foo = 'bar';
var baz = {foo};
// 等同于
var baz = {foo: foo};
function f(x, y) { function f(x, y) {
return {x, y}; return {x, y};
} }
// 等同于 // 等同于
function f(x, y) { function f(x, y) {
return {x: x, y: y}; return {x: x, y: y};
} }
@ -56,7 +59,6 @@ var Person = {
function getPoint() { function getPoint() {
var x = 1; var x = 1;
var y = 10; var y = 10;
return {x, y}; 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语言定义对象的属性有两种方法。 JavaScript语言定义对象的属性有两种方法。
@ -142,6 +164,19 @@ let obj = {
obj.hello() // hi obj.hello() // hi
``` ```
注意,属性名表达式与简洁表示法,不能同时使用,会报错。
```javascript
// 报错
var foo = 'bar';
var bar = 'abc';
var baz = { [foo] };
// 正确
var foo = 'bar';
var baz = { [foo]: 'abc'};
```
## 方法的name属性 ## 方法的name属性
函数的`name`属性,返回函数名。对象方法也是函数,因此也有`name`属性。 函数的`name`属性,返回函数名。对象方法也是函数,因此也有`name`属性。

View File

@ -58,6 +58,7 @@
- Axel Rauschmayer, [ECMAScript 6s new array methods](http://www.2ality.com/2014/05/es6-array-methods.html): 对ES6新增的数组方法的全面介绍 - Axel Rauschmayer, [ECMAScript 6s 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方法的规格 - 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): 数组的空位问题
## 函数 ## 函数