阅读数:147 评论数:0

JavaScript 中的数据通常由一个数组来表示, 所以当可视化或分析数据时往往也会操作数组。

一、JavaScript中修改数组自身的方法

1、array.pop

移除最后一个元素并将它返回，这个方法会改变array的长度。

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

2、array.push

这个方法向数组中添加一个或多个元素，并返回新的数组的长度。

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

3、array.reverse

此方法在原空间中对数组进行反转，即第一个元素变成最后一个，最后一个元素变成第一个。

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]

4、array.shift

此方法移除数组中第一个元素，并返回它，这个方法会影响数组的长度。

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

5、array.sort

此方法在原空间对数组中的元素进行排序，默认是升序，以UTF-16编码的字符为标准。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

6、array.splice

此方法可以添加新元素、删除元素、替换元素。

（1）删除

可以删除任意数量的项，只需要指定两个参数：要删除的第一项的位置和要删除项的项数。

（2）插入

需要指定三个参数：插入起始位置，0和要插入的项。

（3）替换

需要指定三个参数：起始位置、要删除的项数和要插入的任意数量项，插入的项数是不必与删除的项数相等。

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

7、array.unshift

向一个数组的开头添加一个或多个元素，并返回数组的新长度。

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

二、Javascrip中数组的存储方法

1、array.concat

此方法用于合并多个数组，它不会修改已经存在数组，而是返回一个新数组。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

2、array.join

此方法会把数组的元素用逗号或其它分隔符串成一个字符串，如果只有一个元素，则不添加分隔符。

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

3、array.slice

此方法截取一个数组的一部分。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

4、array.indexOf

此方法从数组中查找给定的元素第一次出现的索引值，如果不存在返回-1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

5、array.lastIndexOf

找出指定元素的最后一个索引。

三、Javascript中数组的迭代方法

1、array.filter

此方法返回原数组中通过过滤函数的元素组成的新数组。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

2、array.forEach

此方法对数组中的每个元素执行一个给定的函数。

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

3、array.every

此方法用来验证数组中的所有元素是否都能通过给定函数的验证。

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

4、array.map

此方法对原数组中的元素执行给定的函数，以执行结果组成一个新数组返回。

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

5、array.some

此方法用于验证数组中是否有元素通过给定的验证函数。

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

6、array.reduce

从左到右执行reduce操作并返回一个值。

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

7、array.reduceRight

从右往左执行reduce操作并返回一值。

四、安装d3-array

npm install d3-array

五、d3-array的统计方法

1、d3.min(array[,accessor])

对指定的 array 进行自然排序返回最小值. 如果数组为空则返回 undefined. 可选的参数 accessor 可以用来自定义如何访问数组中的元素. accessor 将会被传递给 map 以在数组的每个元素上进行调用, 返回值将会被作为对比依据.

与内置的Math.min不同，这个方法可以忽略undefined、null和NaN等特殊值。

在可视化中用来忽略缺失数据是很有用的. 需要注意的是, 对比是以自然排序进行的, 而非数值对比. 比如对字符串 ['20', '3'] 进行 min 操作返回 20, 而对数值 [20, 3] 进行 min 操作则返回 3

2、d3.max(array[,accessor])

3、d3.sum(array[,accessor])

4、d3.mean(array[,accessor]) 均值

5、d3.median(array[,accessor])  中位数

6、d3.quantile(array[,accessor])

返回有序数组的p-分位数

var a = [0, 10, 30];
d3.quantile(a, 0); // 0
d3.quantile(a, 0.5); // 10
d3.quantile(a, 1); // 30
d3.quantile(a, 0.25); // 5
d3.quantile(a, 0.75); // 20
d3.quantile(a, 0.1); // 2

7、d3.variance(array[,accessor])

返回数组的无偏估计方差。如果元素个数小于2，则返回undefined。

8、d3.deviation(array[,accessor])

标准方差。

六、d3-array的查找类方法

1、d3.scan(array[,comparator])

对指定的数组执行线性扫描, 根据指定的比较器返回最小元素的索引. 如果给定的数组中没有可比较的元素 ( 比如比较时返回 NaN ) 则返回 undefined.

如果没有指定comparator，则默认为ascending。

var array = [{foo: 42}, {foo: 91}];
d3.scan(array, function(a, b) { return a.foo - b.foo; }); // 0
d3.scan(array, function(a, b) { return b.foo - a.foo; }); // 1

2、d3.bisectLeft(array,x[,lo[,hi]])

返回指定的 x 在已有 array 中的插入位置并保证依然有序. lo 和 hi 参数用来在 array 中指定一个查找子集以在寻找插入点时只考虑子集. 默认情况下考虑所有的元素. 如果 x 已经存在原有的数组中, 则插入点会在已有的元素前面(在已有元素的左侧). 返回值可以用来对数组进行splice操作。返回的值将原数组分为两部分, 假设 v 为原数组中的值, 则 v < x 的值包含在 array.slice(lo, i) 中(左半部分), v >= x 的值包含在 array.slice(i, hi) 中(右半部分).

3、d3.bisect(array,x[,lo[,hi]])

4、d3.bisectRight(array,x[,lo[,hi]])

遍历方向是自右向左, 如果 x 和 array 中的值一样则插入点会定位在已有元素的右侧. 返回的插入点会将原数组分为两部分: v <= x 的值会包含在 array.slice(lo, i) 中(左侧半部分), v > x 包含在 array.slice(i, hi) 中(右半部分).

5、d3.bisector(accessor)

6、d3.bisector(comparator)

根据指定的 accessor 或 comparator 返回一个新的二分查找对象. 这个方法可以被用来二等分对象数组, 而不会仅仅局限于基本的数组(基础数据类型组成的数组).

7、bisector.left(array,x[,lo[,hi]])

等价于bisectLeft，但是使用的是 bisector 的访问比较器.

8、bisector.right(array,x[,lo[,hi]])

等价于bisectRight，但是使用的是 bisector 的访问比较器.

9、d3.ascending(a,b)

如果 a 小于 b 则返回 -1, 如果 a 大于 b 返回 1 否则返回 0. 这是自然排序的比较器, 如果没有为内置的排序函数指定比较器则会默认安装字典顺序排序,

10、d3.descending(a,b)

七、d3-array数组变换类方法

1、d3.cross(a,b[,reducer])

返回两个数组 a 和 b的笛卡尔积，对于 a 中的每个元素 i 以及数组 b 中的每个元素 j, 有序的调用指定的 reducer 函数, 元素 i 和 j 作为 reducer 的两个参数. 如果没有指定 reducer 则默认为每一个组创建一个包含两个元素的二元数组。

2、d3.merge(arrays)

将指定的一系列 arrays 合并为一个单独的数组. 这个方法与内置的 concat 方法类似, 但是当你有一个数组的数组时会更方便:

d3.merge([[1], [2, 3]]); // returns [1, 2, 3]

3、d3.pairs(array[,reducer])

对数组中的每两个相邻的元素, 一次调用指定的 reducer 函数并传递当前的两个元素 i 和 i -1. 如果没有指定 reducer 则默认为每一个组合创建一个二元数组

4、d3.permute(array,indexes)

使用指定的 indexes 数组返回重新排列后的 array. 返回的数组包含原数组对应索引的元素. 比如 permute(["a", "b", "c"], [1, 2, 0]) 返回 ["b", "c", "a"]. indexes 的长度可以与 array 的长度可以不一致, 并且可以接受重复索引值或忽略某些索引值.

var object = {yield: 27, variety: "Manchuria", year: 1931, site: "University Farm"},
    fields = ["site", "variety", "yield"];

d3.permute(object, fields); // returns ["University Farm", "Manchuria", 27]

5、d3.shuffle(array[，lo[,hi]]）

将数组的顺序随机打乱

6、d3.ticks(start,stop.count)

在 start 和 stop (包含)之间返回大约 count + 1 个等间隔的数组序列, 每个值都是 10 的 1, 2 或 5 的次幂

7、d3.tickIncrement(start,stop,count)

要求 start 总是小于等于 step

8、d3.tickStep(start,stop,count)

返回刻度之间的差值

9、d3.range([start, ]stop[, step])

返回一个等差数列数组

10、d3.tranpose(matrix)

矩阵转置。

11、d3.zip(arrays...)

返回一个数组的数组, 其中第 i 个数组包含来自每个参数数组的第 i 个元素. 返回的数组的长度被截断为数组中最短的数组. 如果 arrays 只包含一个数组, 则返回的数组包含一个元素的数组. 没有参数时, 返回的数组是空的.

d3.zip([1, 2], [3, 4]); // returns [[1, 3], [2, 4]]

八、d3-array直方图

1、d3.histogram

使用默认的设置构建一个新的直方图生成器.

2、histogram(data)

根据指定的 data 样本计算直方图. 返回一个 bins (分箱)数组, 每个分箱都是一个包含一组来自 data 的数据的数组. 分箱的 length 属性用来表示当前分箱中包含输入数据的个数, 每个分箱还包含两个f附加属性:

• x0 - 当前分箱的最小值(包含).
• x1 - 当前分箱的最大值(不包含, 除非是最后一个分箱).

3、hisogram.value([value])

这类似于在对数据进行分组前将原数据映射到一个值,

4、histogram.domain([domain])

如果指定了 domain 则设置当前直方图生成器的输入区间为指定的 domain 并返回直方图生成器. 如果没有指定 domain 则返回当前的输入区间, 默认为 extent。 直方图的输入区间由数组 [min, max] 定义. min 表示直方图生成器可以读取的最小值, max 表示直方图生成器可以读取到的最大值. 任何不属于 [min, max] 的值将会被忽略.

var histogram = d3.histogram()
    .domain(x.domain())
    .thresholds(x.ticks(20));

5、histogram.thresholds([count])

6、histogram.thresholds([thresholds])

阈值生成器