介绍
在 MDN 的基础上附加一些想法及常用示例。
为了减少描述,省略
console
语句。
Array
JavaScript 的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。
1. 语法
DANGER
Array(element0, element1[, ...[, elementN]]) Array(arrayLength)
参数:
elementN:
Array 构造器会根据给定的元素创建一个数组,但当仅有一个参数且该参数为数字时除外,参见 arrayLength 参数;
arrayLength:
一个范围在 0 到 232-1 之间的整数,此时将返回一个
length
的值等于arrayLength
的空数组对象,如果不是有效值则抛出RangeError
异常。
返回值:
一个新的数组实例。
2. 描述
描述如上。
个人在日常开发中常用场景:
- 创建数组。
3. 示例
generate undefined array
Array.apply(null, {length: 5}); // [undefined, undefined, undefined, undefined, undefined]
Array.from
用于从一个类似数组或可迭代对象中创建一个新的,浅拷贝的数组实例。
1. 语法
DANGER
Array.from(arrayLike[, mapFn[, thisArg]])
参数:
- arrayLike:想要转换成数组的类数组对象或可迭代对象;
- mapFn(可选参数):如果制定了该参数,新数组中的每个元素都会执行该回调函数;
- thisArg(可选参数):执行回调函数 mapFn 时 this 对象。
返回值:
一个新的数组实例。
2. 描述
Array.from()
可以通过以下方式来创建数组对象:
- 类数组对象(拥有一个
length
属性和若干索引属性的任意对象); - 可迭代对象(可以获取对象中的元素,如 Map 和 Set 等)。
Array.from()
方法有一个可选参数 mapFn
,可以在生成的数组上再执行一次 map
方法后返回。也就是说 Array.from(obj, mapFn, thisArg)
就相当于 Array.from(obj).map(mapFn, thisArg)
,除非创建的是不可用的中间数组。
from()
的 length 属性为 1,即 Array.from.length === 1
。
在 ES2015 中,Class
语法允许我们为内置类型(比如 Array)和自定义类新建子类(比如叫 SubArray)。这些子类也会继承父类的静态方法,比如 SubArray.from()
,调用该方法后会返回子类 SubArray
的一个实例,而不是 Array
的实例。
个人在日常开发中常用场景:
- 将获取的 DOM 类数组转为数组;
- 将一串字符串转为数组;
- 将 Map 类数组转为数组。
3. 示例
Array from a String
Array.from('foo'); // ["f", "o", "o"]
Array from a Set
let s = new Set(['foo', window]); Array.from(s); // ["foo", window]
Array from a Map
let m = new Map([[1, 2], [2, 4], [4, 8]]); Array.from(m); // [[1, 2], [2, 4], [4, 8]]
Array from an Array-like object (arguments)
function f() { return Array.from(arguments); } f(1, 2, 3); // [1, 2, 3]
Using arrow functions and Array from
Array.from([1, 2, 3], x => x + x); // [2, 4, 6] Array.from({length: 5, 0: 'a'}); // ["a", undefined, undefined, undefined, undefined] Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]
Sequence generator (range)
这是一个非常有意思的写法,很值得学习。
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step)); range(0, 4, 1); // [0, 1, 2, 3, 4] range(1, 10, 2); // [1, 3, 5, 7, 9] range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x)); // ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
Array.of
用于创建一个具有可变数量参数的新数组实例,而不需要考虑参数的数量或类型。与 Array 方法的区别是当处理单个参数且该参数为正整数类型时(负整数 Array 会报错),Array 方法会创建对应长度的空数组(空数组是指对应长度空位“empty”的数组),该行为会影响 map 方法无法生效。
其实我一直很好奇为什么被命名为 of。
1. 语法
DANGER
Array.of(element0[, element1[, ...[, elementN]]])
参数:
- elementN:任意个参数,将按顺序称为返回数组中的元素。
返回值:
一个新的数组实例。
2. 描述
此函数是 ECMAScript 2015 标准的一部分。
个人在日常开发中常用场景:
- 尚未使用过。
3. 示例
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]
Array.of(1, [2]); // [1, [2]]
Array.of(1, {a: "1"}); // [1, {a: "1"}]
数组实例方法
数组实例方法分为: