mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-30 22:57:27 +00:00
edit set-map
This commit is contained in:
parent
a5e22562e4
commit
958f789f04
@ -258,7 +258,7 @@ let { log, sin, cos } = Math;
|
|||||||
|
|
||||||
上面代码将Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。
|
上面代码将Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。
|
||||||
|
|
||||||
## 函数参数的解构
|
## 函数参数的解构赋值
|
||||||
|
|
||||||
函数的参数也可以使用解构。
|
函数的参数也可以使用解构。
|
||||||
|
|
||||||
|
@ -607,10 +607,35 @@ var handler = {
|
|||||||
|
|
||||||
长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。箭头函数绑定this,很大程度上解决了这个困扰。
|
长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。箭头函数绑定this,很大程度上解决了这个困扰。
|
||||||
|
|
||||||
箭头函数内部,还可以再使用箭头函数。下面是一个部署管道机制(pipeline)的例子。
|
箭头函数内部,还可以再使用箭头函数。下面是一个ES5语法的多重嵌套函数。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
function insert(value) {
|
||||||
|
return {into: function (array) {
|
||||||
|
return {after: function (afterValue) {
|
||||||
|
array.splice(array.indexOf(afterValue) + 1, 0, value);
|
||||||
|
return array;
|
||||||
|
}};
|
||||||
|
}};
|
||||||
|
}
|
||||||
|
|
||||||
|
insert(2).into([1, 3]).after(1); //[1, 2, 3]
|
||||||
|
```
|
||||||
|
|
||||||
|
上面这个函数,可以使用箭头函数改写。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let insert = (value) => ({into: (array) => ({after: (afterValue) => {
|
||||||
|
array.splice(array.indexOf(afterValue) + 1, 0, value);
|
||||||
|
return array;
|
||||||
|
}})});
|
||||||
|
|
||||||
|
insert(2).into([1, 3]).after(1); //[1, 2, 3]
|
||||||
|
```
|
||||||
|
|
||||||
|
下面是一个部署管道机制(pipeline)的例子,即前一个函数的输出是后一个函数的输入。
|
||||||
|
|
||||||
|
```javascript
|
||||||
const pipeline = (...funcs) =>
|
const pipeline = (...funcs) =>
|
||||||
val => funcs.reduce((a, b) => b(a), val);
|
val => funcs.reduce((a, b) => b(a), val);
|
||||||
|
|
||||||
@ -620,10 +645,9 @@ const addThenMult = pipeline(plus1, mult2);
|
|||||||
|
|
||||||
addThenMult(5)
|
addThenMult(5)
|
||||||
// 12
|
// 12
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
上面的代码等同于下面的写法。
|
如果觉得上面的写法可读性比较差,也可以采用下面的写法。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const plus1 = a => a + 1;
|
const plus1 = a => a + 1;
|
||||||
|
@ -310,18 +310,19 @@ WeakSet不能遍历,是因为成员都是弱引用,随时可能消失,遍
|
|||||||
|
|
||||||
### Map结构的目的和基本用法
|
### Map结构的目的和基本用法
|
||||||
|
|
||||||
JavaScript的对象,本质上是键值对的集合,但是只能用字符串当作键。这给它的使用带来了很大的限制。
|
JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是只能用字符串当作键。这给它的使用带来了很大的限制。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var data = {};
|
var data = {};
|
||||||
var element = document.getElementById("myDiv");
|
var element = document.getElementById("myDiv");
|
||||||
|
|
||||||
data[element] = metadata;
|
data[element] = metadata;
|
||||||
|
data["[Object HTMLDivElement]"] // metadata
|
||||||
```
|
```
|
||||||
|
|
||||||
上面代码原意是将一个DOM节点作为对象data的键,但是由于对象只接受字符串作为键名,所以element被自动转为字符串`[Object HTMLDivElement]`。
|
上面代码原意是将一个DOM节点作为对象data的键,但是由于对象只接受字符串作为键名,所以element被自动转为字符串`[Object HTMLDivElement]`。
|
||||||
|
|
||||||
为了解决这个问题,ES6提供了map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应。
|
为了解决这个问题,ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var m = new Map();
|
var m = new Map();
|
||||||
@ -349,6 +350,26 @@ map.has("title") // true
|
|||||||
map.get("title") // "Author"
|
map.get("title") // "Author"
|
||||||
```
|
```
|
||||||
|
|
||||||
|
上面代码在新建Map实例时,就指定了两个键name和title。
|
||||||
|
|
||||||
|
如果对同一个键多次赋值,后面的值将覆盖前面的值。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let map = new Map();
|
||||||
|
map.set(1, 'aaa');
|
||||||
|
map.set(1, 'bbb');
|
||||||
|
map.get(1) // "bbb"
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码对键1连续赋值两次,后一次的值覆盖前一次的值。
|
||||||
|
|
||||||
|
如果读取一个未知的键,则返回undefined。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
new Map().get('asfddfsasadf')
|
||||||
|
// undefined
|
||||||
|
```
|
||||||
|
|
||||||
注意,只有对同一个对象的引用,Map结构才将其视为同一个键。这一点要非常小心。
|
注意,只有对同一个对象的引用,Map结构才将其视为同一个键。这一点要非常小心。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -391,13 +412,6 @@ map.set(-0, 123);
|
|||||||
map.get(+0) // 123
|
map.get(+0) // 123
|
||||||
```
|
```
|
||||||
|
|
||||||
如果读取一个未知的键,则返回undefined。
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
new Map().get('asfddfsasadf')
|
|
||||||
// undefined
|
|
||||||
```
|
|
||||||
|
|
||||||
### 实例的属性和操作方法
|
### 实例的属性和操作方法
|
||||||
|
|
||||||
Map结构的实例有以下属性和操作方法。
|
Map结构的实例有以下属性和操作方法。
|
||||||
|
Loading…
x
Reference in New Issue
Block a user