本文介绍了如何使用npm 包 @antv/util，帮助前端开发人员更好的快速开发和定制自己的交互数据可视化应用。
简介
@antv/util 是一个 AntV 数据可视化库的工具集，提供了许多有用的工具类函数和组件，进行绘制、布局、样式等方面的处理，并且能与数据可视化其他组件完美结合。
安装
在使用 @antv/util 处理数据之前，需要通过 npm 同步依赖到代码中。
npm install @antv/util --save
如果您正在使用 yarn，可以使用以下命令安装。
yarn add @antv/util
npm同步后，在代码中引入 @antv/util，您可以通过 import 或者 require 引入：
import { deepMix } from '@antv/util';
const { deepMix } = require('@antv/util');
模块介绍
object
常用于 object 的操作函数，例如 isArray、keys 和 values 等。
const { object } = require('@antv/util');
extend
函数说明：
将源对象的所有成员都复制到目标对象中，返回目标对象，用于将多个对象整合为一个对象。
使用方法：
const { extend } = require('@antv/util').object; const obj1 = { a: 1 }; const obj2 = { b: 2 }; const obj3 = { c: 3 }; const obj = extend({}, obj1, obj2, obj3); // 应该等于 { a: 1, b: 2, c: 3 }
isArray
函数说明：
判断一个对象是否是数组。
使用方法：
const { isArray } = require('@antv/util').object; const arr = [1, 2, 3]; const result = isArray(arr); // true
array
常用于数组的操作函数，例如 flatten、shuffle 等。
const { array } = require('@antv/util');
flatten
函数说明：
将一个多维数组“压平”。
使用方法：
const { flatten } = require('@antv/util').array; const arr = [1, [2, [3, [4]], 5]]; const result = flatten(arr); // 应该等于 [1, 2, 3, 4, 5]
firstValue
函数说明：
返回数组中的第一个非空值，而且在访问数组前，自动地将其“压平”。
使用方法：
const { firstValue } = require('@antv/util').array; const arr = [ null, undefined, NaN, [], {}, 'LeeXin' ]; const result = firstValue(arr); // 应该等于 'LeeXin'
mix
常用于数据的深度处理函数，例如 deepMix 和 deepClone 等。
const { mix } = require('@antv/util');
deepMix
函数说明：
深度合并两个对象的属性，来自相同键的任一属性都将被移动到合并值上层的任何层级。
使用方法：
-- -------------------- ---- ------- ----- - ------- - - -------------------------- ----- ------ - - ------ --- -- - ---- ----- --- ----- ------- -- ----- ------ - - ------ --- - ---- ----- -- --- ---- -- -- ----- ------ - --------------- -------- -- - ------ - -- -- - ---- ----- -- - -- ----- ------- ---- -- - --展开代码
deepClone
函数说明：
深度克隆一个对象以及对象属性，并返回一个新的对象。
使用方法：
-- -------------------- ---- ------- ----- - --------- - - -------------------------- ----- ------ - - --- -- - -- --- - - -- ----- ------ - ---------------展开代码
Conclusion
@antv/util 为我们提供了丰富的工具处理函数，帮助我们更加高效处理数据，让我们的前端开发更加快速。完整的 API 参见 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab4ab5cbfe1ea06106ea
