mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
修改array
This commit is contained in:
parent
0c99976064
commit
caa4f9e993
@ -37,6 +37,16 @@ Array.from({ 0: "a", 1: "b", 2: "c", length: 3 });
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
对于还没有部署该方法的浏览器,可以用Array.prototyp.slice方法替代。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const toArray = (() =>
|
||||||
|
Array.from ? Array.from : obj => [].slice.call(obj)
|
||||||
|
)();
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
Array.from()还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理。
|
Array.from()还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理。
|
||||||
|
|
||||||
```JavaScript
|
```JavaScript
|
||||||
@ -170,6 +180,40 @@ for (let [index, elem] of ['a', 'b'].entries()) {
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 数组实例的includes()
|
||||||
|
|
||||||
|
Array.protypeto.includes方法返回一个布尔值,表示某个数组是否包含给定的值。该方法属于ES7。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
[1, 2, 3].includes(2); // true
|
||||||
|
[1, 2, 3].includes(4); // false
|
||||||
|
[1, 2, NaN].includes(NaN); // true
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
该方法的第二个参数表示搜索的起始位置,默认为0。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
[1, 2, 3].includes(3, 3); // false
|
||||||
|
[1, 2, 3].includes(3, -1); // true
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
下面代码用来检查当前环境是否支持该方法,如果不支持,部署一个简易的替代版本。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const contains = (() =>
|
||||||
|
Array.prototype.includes
|
||||||
|
? (arr, value) => arr.includes(value)
|
||||||
|
: (arr, value) => arr.some(el => el === value)
|
||||||
|
)();
|
||||||
|
contains(["foo", "bar"], "baz"); // => false
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
## 数组推导
|
## 数组推导
|
||||||
|
|
||||||
ES6提供简洁写法,允许直接通过现有数组生成新数组,这被称为数组推导(array comprehension)。
|
ES6提供简洁写法,允许直接通过现有数组生成新数组,这被称为数组推导(array comprehension)。
|
||||||
|
@ -203,7 +203,22 @@ add(2, 5, 3) // 10
|
|||||||
|
|
||||||
上面代码的add函数是一个求和函数,利用rest参数,可以向该函数传入任意数目的参数。
|
上面代码的add函数是一个求和函数,利用rest参数,可以向该函数传入任意数目的参数。
|
||||||
|
|
||||||
前面说过,rest参数中的变量代表一个数组,所以数组特有的方法都可以用于这个变量。下面是一个利用rest参数改写数组push方法的例子。
|
下面是一个rest参数代替arguments变量的例子。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
// arguments变量的写法
|
||||||
|
const sortNumbers = () =>
|
||||||
|
Array.prototype.slice.call(arguments).sort();
|
||||||
|
|
||||||
|
// rest参数的写法
|
||||||
|
const sortNumbers = (...numbers) => numbers.sort();
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码的两种写法,比较后可以发现,rest参数的写法更自然也更简洁。
|
||||||
|
|
||||||
|
rest参数中的变量代表一个数组,所以数组特有的方法都可以用于这个变量。下面是一个利用rest参数改写数组push方法的例子。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
||||||
@ -510,6 +525,17 @@ var getTempItem = id => ({ id: id, name: "Temp" });
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
箭头函数使得表达更加简洁。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const isEven = n => n % 2 == 0;
|
||||||
|
const square = n => n * n;
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。
|
||||||
|
|
||||||
箭头函数的一个用处是简化回调函数。
|
箭头函数的一个用处是简化回调函数。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -585,3 +611,31 @@ var handler = {
|
|||||||
由于this在箭头函数中被绑定,所以不能用call()、apply()、bind()这些方法去改变this的指向。
|
由于this在箭头函数中被绑定,所以不能用call()、apply()、bind()这些方法去改变this的指向。
|
||||||
|
|
||||||
长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。箭头函数绑定this,很大程度上解决了这个困扰。
|
长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。箭头函数绑定this,很大程度上解决了这个困扰。
|
||||||
|
|
||||||
|
箭头函数内部,还可以再使用箭头函数。下面是一个部署管道机制(pipeline)的例子。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const pipeline = (...funcs) =>
|
||||||
|
val => funcs.reduce((a, b) => b(a), val);
|
||||||
|
|
||||||
|
const plus1 = a => a + 1;
|
||||||
|
const mult2 = a => a * 2;
|
||||||
|
const addThenMult = pipeline(plus1, mult2);
|
||||||
|
|
||||||
|
addThenMult(5)
|
||||||
|
// 12
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
上面的代码等同于下面的写法。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const plus1 = a => a + 1;
|
||||||
|
const mult2 = a => a * 2;
|
||||||
|
|
||||||
|
mult2(plus1(5))
|
||||||
|
// 12
|
||||||
|
|
||||||
|
```
|
||||||
|
@ -271,7 +271,23 @@ function clone(origin) {
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
**(4)为属性指定默认值**
|
**(4)合并多个对象**
|
||||||
|
|
||||||
|
将多个对象合并到某个对象。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const merge =
|
||||||
|
(target, ...sources) => Object.assign(target, ...sources);
|
||||||
|
```
|
||||||
|
|
||||||
|
如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const merge =
|
||||||
|
(...sources) => Object.assign({}, ...sources);
|
||||||
|
```
|
||||||
|
|
||||||
|
**(5)为属性指定默认值**
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
||||||
|
@ -21,6 +21,8 @@
|
|||||||
- Axel Rauschmayer, [ECMAScript 6: what’s next for JavaScript?](https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript-august-2014): 关于ES6新增语法的综合介绍,有很多例子
|
- Axel Rauschmayer, [ECMAScript 6: what’s next for JavaScript?](https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript-august-2014): 关于ES6新增语法的综合介绍,有很多例子
|
||||||
- Toby Ho, [ES6 in io.js](http://davidwalsh.name/es6-io)
|
- Toby Ho, [ES6 in io.js](http://davidwalsh.name/es6-io)
|
||||||
- Guillermo Rauch, [ECMAScript 6](http://rauchg.com/2015/ecmascript-6/)
|
- Guillermo Rauch, [ECMAScript 6](http://rauchg.com/2015/ecmascript-6/)
|
||||||
|
- Charles King, [The power of ECMAScript 6](http://charlesbking.com/power_of_es6/#/)
|
||||||
|
- Benjamin De Cock, [Frontend Guidelines](https://github.com/bendc/frontend-guidelines): ES6最佳实践
|
||||||
|
|
||||||
## 语法点
|
## 语法点
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user