edit object & array & math

This commit is contained in:
ruanyf
2015-09-24 09:55:14 +08:00
parent aae41fcb21
commit 1ed5dfa1f3
4 changed files with 180 additions and 59 deletions
+64 -25
View File
@@ -2,7 +2,7 @@
## Array.from()
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
`Array.from`方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
```javascript
Array.from('hello')
@@ -20,26 +20,40 @@ Array.from(ps).forEach(function (p) {
});
```
上面代码中,querySelectorAll方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach方法。
上面代码中,`querySelectorAll`方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach方法。
Array.from方法可以将函数的arguments对象,转为数组。
`Array.from`方法可以将函数的`arguments`对象,转为数组。
```javascript
function foo() {
var args = Array.from( arguments );
var args = Array.from(arguments);
}
foo( "a", "b", "c" );
foo('a', 'b', 'c');
```
任何有length属性的对象,都可以通过Array.from方法转为数组。
值得提醒的是,扩展运算符(`...`)也可以将某些数据结构转为数组。
```javascript
// arguments对象
function foo() {
var args = [...arguments];
}
// NodeList对象
[...document.querySelectorAll('div')]
```
扩展运算符背后调用的是遍历器接口(`Symbol.iterator`),如果一个对象没有部署这个接口,就无法转换。`Array.from`方法就不存在这个问题,比如下面的这个例子,扩展运算符就无法转换。
任何有`length`属性的对象,都可以通过`Array.from`方法转为数组。
```javascript
Array.from({ 0: "a", 1: "b", 2: "c", length: 3 });
// [ "a", "b" , "c" ]
```
对于还没有部署该方法的浏览器,可以用Array.prototype.slice方法替代。
对于还没有部署该方法的浏览器,可以用`Array.prototype.slice`方法替代。
```javascript
const toArray = (() =>
@@ -47,7 +61,7 @@ const toArray = (() =>
)();
```
Array.from()还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理。
`Array.from`还可以接受第二个参数,作用类似于数组的`map`方法,用来对每个元素进行处理。
```JavaScript
Array.from(arrayLike, x => x * x);
@@ -58,14 +72,26 @@ Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
```
下面的例子将数组中布尔值为false的成员转为0
下面的例子将数组中布尔值为`false`的成员转为`0`
```javascript
Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]
```
`Array.from()`可以将各种值转为真正的数组,并且还提供map功能。这实际上意味着,你可以在数组里造出任何想要的值
另一个例子是返回各种数据的类型
```javascript
function typesOf () {
return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// ['object', 'object', 'number']
```
如果`map`函数里面用到了`this`关键字,还可以传入`Array.from`的第三个参数,用来绑定`this`
`Array.from()`可以将各种值转为真正的数组,并且还提供`map`功能。这实际上意味着,你可以在数组里造出任何想要的值。
```javascript
Array.from({ length: 2 }, () => 'jack')
@@ -74,7 +100,7 @@ Array.from({ length: 2 }, () => 'jack')
上面代码中,`Array.from`的第一个参数指定了第二个参数运行的次数。这种特性可以让该方法的用法变得非常灵活。
`Array.from()`的另一个应用是,将字符串转为数组,然后返回字符串的长度。这样可以避免JavaScript将大于`\uFFFF`的Unicode字符,算作两个字符的bug。
`Array.from()`的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种Unicode字符,可以避免JavaScript将大于`\uFFFF`的Unicode字符,算作两个字符的bug。
```javascript
function countSymbols(string) {
@@ -84,7 +110,7 @@ function countSymbols(string) {
## Array.of()
Array.of方法用于将一组值,转换为数组。
`Array.of`方法用于将一组值,转换为数组。
```javaScript
Array.of(3, 11, 8) // [3,11,8]
@@ -92,17 +118,26 @@ Array.of(3) // [3]
Array.of(3).length // 1
```
这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
这个方法的主要目的,是弥补数组构造函数`Array()`的不足。因为参数个数的不同,会导致`Array()`的行为有差异。
```javascript
Array() // []
Array(3) // [undefined, undefined, undefined]
Array(3,11,8) // [3, 11, 8]
Array(3, 11, 8) // [3, 11, 8]
```
上面代码说明,只有当参数个数不少于2个,Array()才会返回由参数组成的新数组。
上面代码说明,只有当参数个数不少于2个,`Array()`才会返回由参数组成的新数组。
Array.of方法可以用下面的代码模拟实现
`Array.of`基本上可以用来替代`new Array()`,并且不存在`new Array(length)`导致的重载。它的行为非常统一
```javascript
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
```
`Array.of`方法可以用下面的代码模拟实现。
```javascript
function ArrayOf(){
@@ -112,12 +147,16 @@ function ArrayOf(){
## 数组实例的copyWithin()
数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。
数组实例的`copyWithin`方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。
```javascript
Array.prototype.copyWithin(target, start = 0, end = this.length)
```
它接受三个参数。
- target(必需):从该位置开始复制数据。
- start必需):从该位置开始读取数据。如果为负值,表示倒数。
- target(必需):从该位置开始替换数据。
- start可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
- end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
这三个参数都应该是数值,如果不是,会自动转为数值。
@@ -157,7 +196,7 @@ i32a.copyWithin(0, 2);
## 数组实例的find()和findIndex()
数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
数组实例的`find`方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为`true`的成员,然后返回该成员。如果没有符合条件的成员,则返回`undefined`
```javascript
[1, 4, -5, 10].find((n) => n < 0)
@@ -172,9 +211,9 @@ i32a.copyWithin(0, 2);
}) // 10
```
上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
上面代码中,`find`方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
数组实例的`findIndex`方法的用法与`find`方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回`-1`
```javascript
[1, 5, 10, 15].findIndex(function(value, index, arr) {
@@ -198,7 +237,7 @@ i32a.copyWithin(0, 2);
## 数组实例的fill()
fill()使用给定值,填充一个数组。
`fill`方法使用给定值,填充一个数组。
```javascript
['a', 'b', 'c'].fill(7)
@@ -208,9 +247,9 @@ new Array(3).fill(7)
// [7, 7, 7]
```
上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。
上面代码表明,`fill`方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。
fill()还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
`fill`方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
```javascript
['a', 'b', 'c'].fill(7, 1, 2)