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:
parent
6c3396809c
commit
498db6f954
@ -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转码器已经支持这个功能。
|
||||||
|
@ -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`属性。
|
||||||
|
@ -58,6 +58,7 @@
|
|||||||
|
|
||||||
- Axel Rauschmayer, [ECMAScript 6’s new array methods](http://www.2ality.com/2014/05/es6-array-methods.html): 对ES6新增的数组方法的全面介绍
|
- 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方法的规格
|
- 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): 数组的空位问题
|
||||||
|
|
||||||
## 函数
|
## 函数
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user