前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >不想加班,你就背会这 10 条 JS 技巧

不想加班,你就背会这 10 条 JS 技巧

作者头像
夜尽天明
发布2023-03-15 14:38:30
1820
发布2023-03-15 14:38:30
举报
文章被收录于专栏:全栈修炼

1. 数组分割

代码语言:javascript
复制
const listChunk = (list = [], chunkSize = 1) => {
    const result = [];
    const tmp = [...list];
    if (!Array.isArray(list) || !Number.isInteger(chunkSize) || chunkSize <= 0) {
        return result;
    };
    while (tmp.length) {
        result.push(tmp.splice(0, chunkSize));
    };
    return result;
};
listChunk(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
// [['a'], ['b'], ['c'], ['d'], ['e'], ['f'], ['g']]

listChunk(['a', 'b', 'c', 'd', 'e', 'f', 'g'], 3);
// [['a', 'b', 'c'], ['d', 'e', 'f'], ['g']]

listChunk(['a', 'b', 'c', 'd', 'e', 'f', 'g'], 0);
// []

listChunk(['a', 'b', 'c', 'd', 'e', 'f', 'g'], -1);
// []

2. 求数组元素交集

代码语言:javascript
复制
const listIntersection = (firstList, ...args) => {
    if (!Array.isArray(firstList) || !args.length) {
        return firstList;
    }
    return firstList.filter(item => args.every(list => list.includes(item)));
};
listIntersection([1, 2], [3, 4]);
// []

listIntersection([2, 2], [3, 4]);
// []

listIntersection([3, 2], [3, 4]);
// [3]

listIntersection([3, 4], [3, 4]);
// [3, 4]

3. 按下标重新组合数组

代码语言:javascript
复制
const zip = (firstList, ...args) => {
    if (!Array.isArray(firstList) || !args.length) {
        return firstList
    };
    return firstList.map((value, index) => {
        const newArgs = args.map(arg => arg[index]).filter(arg => arg !== undefined);
        const newList = [value, ...newArgs];
        return newList;
    });
};
zip(['a', 'b'], [1, 2], [true, false]);
// [['a', 1, true], ['b', 2, false]]

zip(['a', 'b', 'c'], [1, 2], [true, false]);
// [['a', 1, true], ['b', 2, false], ['c']]

4. 按下标组合数组为对象

代码语言:javascript
复制
const zipObject = (keys, values = {}) => {
    const emptyObject = Object.create({});
    if (!Array.isArray(keys)) {
        return emptyObject;
    };
    return keys.reduce((acc, cur, index) => {
        acc[cur] = values[index];
        return acc;
    }, emptyObject);
};
zipObject(['a', 'b'], [1, 2])
// { a: 1, b: 2 }
zipObject(['a', 'b'])
// { a: undefined, b: undefined }

5. 检查对象属性的值

代码语言:javascript
复制
const checkValue = (obj = {}, objRule = {}) => {
    const isObject = obj => {
        return Object.prototype.toString.call(obj) === '[object Object]';
    };
    if (!isObject(obj) || !isObject(objRule)) {
        return false;
    }
    return Object.keys(objRule).every(key => objRule[key](obj[key]));
};

const object = { a: 1, b: 2 };

checkValue(object, {
    b: n => n > 1,
})
// true

checkValue(object, {
    b: n => n > 2,
})
// false

6. 获取对象属性

代码语言:javascript
复制
const get = (obj, path, defaultValue) => {
    if (!path) {
        return;
    };
    const pathGroup = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
    return pathGroup.reduce((prevObj, curKey) => prevObj && prevObj[curKey], obj) || defaultValue;
};

const obj1 = { a: { b: 2 } }
const obj2 = { a: [{ bar: { c: 3 } }] }

get(obj1, 'a.b')
// 2
get(obj2, 'a[0].bar.c')
// 3
get(obj2, ['a', '0', 'bar', 'c'])
// 2
get(obj1, 'a.bar.c', 'default')
// default
get(obj1, 'a.bar.c', 'default')
// default

7. 将特殊符号转成字体符号

代码语言:javascript
复制
const escape = str => {
    const isString = str => {
        return Object.prototype.toString.call(str) === '[string Object]';
    };
    if (!isString(str)) {
        return str;
    }
    return (str.replace(/&/g, '&amp;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#x27;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/\//g, '&#x2F;')
      .replace(/\\/g, '&#x5C;')
      .replace(/`/g, '&#96;'));
};

8. 利用注释创建一个事件监听器

代码语言:javascript
复制
class EventEmitter {
    #eventTarget;
    constructor(content = '') {
        const comment = document.createComment(content);
        document.documentElement.appendChild(comment);
        this.#eventTarget = comment;
    }
    on(type, listener) {
        this.#eventTarget.addEventListener(type, listener);
    }
    off(type, listener) {
        this.#eventTarget.removeEventListener(type, listener);
    }
    once(type, listener) {
        this.#eventTarget.addEventListener(type, listener, { once: true });
    }
    emit(type, detail) {
        const dispatchEvent = new CustomEvent(type, { detail });
        this.#eventTarget.dispatchEvent(dispatchEvent);
    }
};

const emmiter = new EventEmitter();
emmiter.on('biy', () => {
    console.log('hello world');
});
emmiter.emit('biu');
// hello world

9. 生成随机的字符串

代码语言:javascript
复制
const genRandomStr = (len = 1) => {
    let result = '';
    for (let i = 0; i < len; ++i) {
        result += Math.random().toString(36).substr(2)
    }
    return result.substr(0, len);
}
genRandomStr(3)
// u2d
genRandomStr()
// y
genRandomStr(10)
// qdueun65jb

10. 判断是否是指定的哈希值

代码语言:javascript
复制
const isHash = (type = '', str = '') => {
    const isString = str => {
        return Object.prototype.toString.call(str) === '[string Object]';
    };
    if (!isString(type) || !isString(str)) {
        return str;
    };
    const algorithms = {
        md5: 32,
        md4: 32,
        sha1: 40,
        sha256: 64,
        sha384: 96,
        sha512: 128,
        ripemd128: 32,
        ripemd160: 40,
        tiger128: 32,
        tiger160: 40,
        tiger192: 48,
        crc32: 8,
        crc32b: 8,
    };
    const hash = new RegExp(`^[a-fA-F0-9]{${algorithms[type]}}$`);
    return hash.test(str);
};

isHash('md5', 'd94f3f016ae679c3008de268209132f2');
// true
isHash('md5', 'q94375dj93458w34');
// false

isHash('sha1', '3ca25ae354e192b26879f651a51d92aa8a34d8d3');
// true
isHash('sha1', 'KYT0bf1c35032a71a14c2f719e5a14c1');
// false

后记

全文完


本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-11-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈修炼 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 2. 求数组元素交集
  • 3. 按下标重新组合数组
  • 4. 按下标组合数组为对象
  • 5. 检查对象属性的值
  • 6. 获取对象属性
  • 7. 将特殊符号转成字体符号
  • 8. 利用注释创建一个事件监听器
  • 9. 生成随机的字符串
  • 10. 判断是否是指定的哈希值
  • 后记
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档