分享近日发现好用的javascript代码

115 阅读1分钟

1. 生成数组

//创建数组生成器
const createValues = (creator, length = 10) => Array.from({ length }, creator);

const createRange = (start, stop, step) =>
    createValues((_, i) => start + i * step, (stop - start) / step + 1);

// 生成数组,里面元素是 1 ~ 100 以内每次从 1 开始每次递增 3 的数字
const values = createRange(1, 100, 3);

2.函数累加

let str = 'a';
function add1(str) {
    return str + 1;
}
function add2(str) {
    return str + 2;
}
function add3(str) {
    return str + 3;
}
function flow(...fns) {
    return fns.reduceRight((a, b)=>{
        return (...args)=>{
            return a(b(...args))
        }
    })
}
let flowed = flow(add3,add2,add1)

3.数组对象去除重复属性

let arr1 = [
    {'张三': 13, '李五': 20},
    {'张三': 20},
    {'李四': 20},
    {'李四': 30},
]
let arr2 = arr1.reduce((a, k) => {
    let v = Object.entries(k);
    let arr = a;
    v.map(item => {
        arr[item[0]] ? arr : (arr[item[0]]=item[1], arr);
    })
    return arr;
}, {});

4.去除对象属性为空的值

let obj = {
    name: '',
    age: 1
}
let o = Object.entries(obj).reduce((a,[k,v]) => {
    return !v ? a : (a[k]=v, a)
}, {});

5. 深克隆

(function (_) {
    var types = 'String Object Array Date RegExp Number Boolean Null Undefined Symbol'.split(' ');
    function type() {
        return Object.prototype.toString.call(this).slice(8, -1);
    }
    for(var i = 0; i < types.length; i++){
        _['is'+types[i]] = (function () {
            return function (elem) {
                return type.call(elem) === self;
            }
        })(types[i])
    }
    return _;
})(_={})
function deepClone(source) {
    var parents = [];
    var children = [];
    function getRegExp(reg) {
        var result = '';
        if(reg.ignoreCase){
            result += 'i';
        }
        if(reg.global){
            result += 'g';
        }
        if(reg.multiline){
            result += 'm';
        }
        return result;
    }
    function _clone(parent) {
        if(parent === null) return null;
        if(typeof parent !== 'object') return parent;
        var child,proto;
        if(_.isArray(parent)){
            child = [];
        }else if(_.isRegExp(parent)){
            child = new RegExp(parent.source, getRegExp(parent));
            if(parent.lastIndex) child.lastIndex = parent.lastIndex;
        }else if(_.isDate(parent)){
            child = new Date(parent.getTime());
        }else{
            proto = Object.getPrototypeOf(parent);
            child = Object.create(proto);
        }
        var index = parents.indexOf(parent);
        if(index !== -1){
            return children[index];
        }
        parents.push(parent);
        children.push(child);
        for(var prop in parent){
            if(parent.hasOwnProperty(prop)){
                child[prop] = _clone(parent[prop]);
            }
        }
        return child;
    }
    return _clone(source);
}

6.图片上传加富文本组件

<template>
    <div class="quill-editor">
        <!-- 图片上传组件辅助-->
        <el-upload class="avatar-uploader" :action="uploadUrl" name="img" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
        </el-upload>
        <!--富文本编辑器组件-->
        <quill-editor v-model="content" :content="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" ref="QuillEditor">
        </quill-editor>
        <div v-html="content" />
    </div>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor'
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';

    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // 加粗,斜体,下划线,删除线
        ['blockquote', 'code-block'],                      //引用,代码块
        [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],     // 有序列表,无序列表
        [{ 'script': 'sub' }, { 'script': 'super' }],      // 下角标,上角标
        [{ 'indent': '-1' }, { 'indent': '+1' }],          // 缩进
        [{ 'direction': 'rtl' }],                         // 文字输入方向
        [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
        [{ 'color': [] }, { 'background': [] }],          // 颜色选择
        [{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }],// 字体
        [{ 'align': [] }], // 居中
        ['clean'],                                       // 清除样式,
        ['link', 'image'],  // 上传图片、上传视频
    ]
    export default {
        components: {
            quillEditor
        },
        data () {
            return {
                name: 'register-modules-example',
                content: '',
                editorOption: {
                    placeholder: '请在这里输入',
                    theme: 'snow', //主题 snow/bubble
                    modules: {
                        history: {
                            delay: 1000,
                            maxStack: 50,
                            userOnly: false
                        },
                        toolbar: {
                            container: toolbarOptions,
                            handlers: {
                                image: function (value) {
                                    if (value) {
                                        // 调用element的图片上传组件
                                        document.querySelector('.avatar-uploader input').click()
                                    } else {
                                        this.quill.format('image', false)
                                    }
                                }
                            }
                        }
                    }
                },
                uploadUrl: `XXXXXXXX`  // 服务器上传地址
            }
        },
        methods: {
            // 失去焦点
            onEditorBlur (editor) { },
            // 获得焦点
            onEditorFocus (editor) { },
            // 开始
            onEditorReady (editor) { },
            // 值发生变化
            onEditorChange (editor) {
                this.content = editor.html;
                console.log(editor);
            },
            beforeUpload (file) { },
            uploadSuccess (res) {
                // 获取富文本组件实例
                let quill = this.$refs.QuillEditor.quill
                // 如果上传成功
                if (res) {
                    // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片,res为服务器返回的图片链接地址
                    quill.insertEmbed(length, 'image', res.result.url)
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    // 提示信息,需引入Message
                    this.$message.error('图片插入失败!')
                }
            }
        }
    }
</script>

7.数组去重

unique(arr, key = 'id'){
    var obj = {};
    arr = arr.reduce(function(item, next){
        obj[next[key]] ? '' : obj[next[key]] = true && item.push(next);
        return item;
    }, []);
    return arr;
}