npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dz-transform

v1.0.2

Published

超轻量、好用的 JavaScript 转换器!

Downloads

9

Readme

DzTransform

超好用、轻量的 JavaScript 转换器!

DzTransform 是能够优雅解决 Cannot read properties of undefined (reading 'name') 等诸如此类问题的一款超轻量的 npm 模块包。它支持以下功能:

  • 通过传入一个属性验证器,移除一个对象或对象数组的多余属性。
  • 通过属性验证器扫描一个对象或对象数组缺失的值或属性,并进行补全。注:可支持传入默认值来补全,或由插件自动补全。
  • 在不影响最终数据转换的同时,它还会提示你有哪些属性没有通过校验。

Table of Contents

Install

yarn add dz-transform
# or
npm i dz-transform -S

Usage

import Transform from 'dz-transform'

const info = {name: 'bob', test: 999}
const infoType = {name: String, age: Number, sex: String, list: Array, info: Object}
const defaultInfo = {name: 'hello', age: 20}
const newInfo = new Transform(infoType, info, defaultInfo).getData()

// 转换后的值如下
// {
//     "name": "bob",
//     "age": 20,
//     "sex": "-",
//     "list": [],
//     "info": {}
// }

需要说明一点的是,defaultInfo 也可以不用传,这样插件会选择一个合适的值用来补全。再来看看转换数组的表现:

import Transform from 'dz-transform'

const arr = [
    {age: 18},
    {sex: "man"}
];
const arrItemType = {
    name: String,
    age: Number,
    sex: String,
    list: Array,
    info: Object
};
const defaultArrItem = {
    name: "Bob",
    age: 20,
    sex: "Women",
    list: [
        "Hello",
        "World"
    ],
    info: {slogan: "Hello world!"}
};
const newArr = new Transform(arrItemType, arr, defaultArrItem).getData();

// 转换后的值如下
// [
//     {
//         "name": "Bob",
//         "age": 18,
//         "sex": "Women",
//         "list": [
//             "Hello",
//             "World"
//         ],
//         "info": {
//             "slogan": "Hello world!"
//         }
//     },
//     {
//         "name": "Bob",
//         "age": 20,
//         "sex": "man",
//         "list": [
//             "Hello",
//             "World"
//         ],
//         "info": {
//             "slogan": "Hello world!"
//         }
//     }
// ]

More

编写 DzTransform 的初衷就是我们平时开发时后端的接口会返回大量的不需要的垃圾数据,以及我们前端需要的数据后端返回为 null 或者直接就不存在。为了避免这样的问题出现,我们前端需要写很多不优雅的判断,于是心血来潮写了这一款插件。初版的功能实现大概花了两三个小时,心里还有很多想法,由于时间的原因没能想出更优雅、简洁的 api 调用。后期有机会会持续更新下去,只有一个遵旨——简单好用。 更多信息请前往我的 博客