大佬说:“不想加班你就背会这 10 条 JS 技巧”

Chase620 等级 543 0 1
标签: js前端

大佬说:“不想加班你就背会这 10 条 JS 技巧”

为了让自己写的代码更优雅且高效,特意向大佬请教了这 10 条 JS 技巧

1. 数组分割

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. 求数组元素交集

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. 按下标重新组合数组

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. 按下标组合数组为对象

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. 检查对象属性的值

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. 获取对象属性

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. 将特殊符号转成字体符号

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. 利用注释创建一个事件监听器

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. 生成随机的字符串

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. 判断是否是指定的哈希值

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 

前端面试题汇总

前端面试题是我面试过程中遇到的面试题,每一次面试后我都会复盘总结。我做了一个整理,并且在技术博客找到了专业的解答,大家可以参考下:

大佬说:“不想加班你就背会这 10 条 JS 技巧”

大佬说:“不想加班你就背会这 10 条 JS 技巧”

大佬说:“不想加班你就背会这 10 条 JS 技巧”

想学习前端web的朋友,和需要PDF文档的朋友都可以加入这边的交流裙,前面:938,中间:051,最后:673,裙里从学生到大佬都有,资源免费分享,不见不散哦!

本文转自 https://www.jianshu.com/p/5e0eac374657,如有侵权,请联系删除。

收藏
评论区

相关推荐

😎手撕吊打面试官系列面试题
js基础 1. 用js打印一个乘法表 这一题面试官考察的是你关于js的打印相关基础api的熟悉程度,以及基本的数学常识,送分题 console.log( 111 212 224 313 326 339 414 428 4312 4416 515 5210 5315 5420 5525
《前端算法系列》如何让前端代码速度提高60倍
今天的问题从排序算法入手,来讲解如何根据业务需求,结合金典的算法,来实现js高性能开发。 情景 老板让小明给公司的20000条数据排个序,但是由于排序的操作会
项目实战之---AES 加密
ajax/index.js import axiosApi from '../js/fetch'; import { baseUrl, headerParams } from '../js/baseUrl'; // import引用AES源码js import CryptoJS from 'cryptojs/cryptojs'; console.lo
前端高效开发必备的 js 库梳理
前端高效开发必备的 js 库梳理 之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结. 首先我觉得在学习任何知识之前必须要有一个明确的学习目标, 知道自己为什么要学它, 而不是看网上说的一股脑的给你灌输各种知识, 让你学习各种库, 从而不断的制造大家的焦虑感.
面试之手撕 JS 继承
提到JS继承,你首先想到的什么? 面试 继承方式 优缺点...,js继承作为曾经的苦主,我看了忘,忘了看,看了又忘,OMG,都0212年了面试官还不放过我。 ok
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
大佬说:“不想加班你就背会这 10 条 JS 技巧”
(https://imghelloworld.osscnbeijing.aliyuncs.com/83909ede68f61936ac3ae10c9ce8b223.png) 为了让自己写的代码更优雅且高效,特意向大佬请教了这 10 条 JS 技巧 1\. 数组分割 const listChunk (list
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
这些JS工具函数够你用到2020年底了
前言活不多说,自己平时搜集的干货函数奉上。干货函数 找出数字在数组中下一个相邻的元素let i  ""; let rr  []; const name  (n, arr1)     let num  Number(n);     for (let i  0; i < arr1.length; i++)          const elemen
前端 - 常见的异常捕获方法
前端异常捕获在ES3之前js代码执行的过程中,一旦出现错误,整个js代码都会停止执行,这样就显的代码非常的不健壮。从ES3开始,js也提供了类似的异常处理机制,从而让js代码变的更健壮,程序执行的过程中出现了异常,也可以让程序具有了一部分的异常恢复能力。js异常的特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行的任务。回归正题,我们该如何在程序异常发生
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(
Python爬虫 | 批量爬取今日头条街拍美图
专栏作者:霖hero,在职爬虫工程师,熟悉JS逆向与分布式爬虫。喜欢钻研,热爱学习,乐于分享。公众号后台回复入群,拉你进技术群与大佬们近距离交流。 01前言 大家好,我是J哥🚀在以前的文章中我们学了Ajax数据爬取,这篇文章我们以今日头条为例,通过分析Ajax请求来抓取今日头条的街拍美图,并将图片下载到本地保存下来。准备好没,我们现在开始! 0
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持
javascript实践教程-07-分支结构
本节目标1. 掌握js中4种分支结构。 内容摘要本篇介绍了js中的4种分支结构:if、if else、else if、switch case,用来判断在不同的条件下运行不同的代码分支。阅读时间1015分钟。 分支结构js中分支结构总共有4种: if if else else if switch case ifif 用来判断某个条件是否成立,如果成立则执行条