美文网首页
Face JS(一)(字符串反转、防抖、数组去重、实现new)

Face JS(一)(字符串反转、防抖、数组去重、实现new)

作者: 再见地平线_e930 | 来源:发表于2020-08-05 10:14 被阅读0次

1.字符串反转

const str = 'I am a big boy';
const result = str.split('').reverse().join('');
console.log(result);

*split(): 把字符串根据分隔符转化成数组
*reverse(): 反转数组
*join(): 把数组根据分隔符转化为字符串

结果: image.png

2.防抖

        // fn为用户传入的需要防抖的函数或方法
        // wait 是需要等待的时间
        const debounce = (fn, wait = 300) => {
            let timer = 0; // 设置定时器
            return function(...args) { // args为fn的参数
                if(timer) { // 如果已经过了规定延迟的时间,则清空定时器
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fn.apply(this, args); 
                }, wait)
            }
        }
        // 防抖的意义就在于每次用户调用一个方法,这个方法都必须等待相应延迟时间(wait)后才会执行

3.数组去重(只列举部分方法)

1.两个 for 循环去重

        let arr = [1, 1, 1, 'qq', 'cc', 1, 'qq', undefined, 'cc', undefined, 2, 3, 'qq'];
        for(let i=0; i<arr.length; i++) {
            for(let j=i+1; j<arr.length; j++) {
                if(arr[i] === arr[j]) {
                    arr.splice(j, 1);
                    j--;
                }
            }
        }
        console.log(arr);
结果: image.png

但是这个方法有局限性(无法去除 {} 和 NaN):

        let arr = [{}, {}, NaN, NaN, 1, 1, 1, 'qq', 'cc', 1, 'qq', undefined, 'cc', undefined, 2, 3, 'qq'];
        for(let i=0; i<arr.length; i++) {
            for(let j=i+1; j<arr.length; j++) {
                if(arr[i] === arr[j]) {
                    arr.splice(j, 1);
                    j--;
                }
            }
        }
        console.log(arr);
结果: image.png

2.ES6 的 Set 去重(可去除重复的NaN,但无法去重多余的 {})

        let arr = [1, 1, 1, 'qq', 'cc', 1, 'qq', undefined, 'cc', undefined, 2, 3, 'qq'];
        let result = Array.from(new Set(arr));
        console.log(result);
结果: image.png

4.实现 new

// 创建一个新的对象,这个对象的__proto__要指向构造函数的原型对象
// 执行构造函数
// 返回值如果为 object 类型则作为 new 方法的返回值返回,否则返回上述全新对象
        function myNew(fn, ...args) {
            let instance = Object.create(fn.prototype);
            let res = fn.apply(instance, args);
            return typeof res === 'object' ? res: instance;
        }

Object.create() 创建一个新对象
参数:proto(必须),该参数会被赋值到新建对象的原型上。
返回值:在指定原型对象上添加新属性后的对象

相关文章

  • Face JS(一)(字符串反转、防抖、数组去重、实现new)

    1.字符串反转 *split(): 把字符串根据分隔符转化成数组*reverse(): 反转数组*join(): ...

  • 前端高频面试题-编程题

    防抖和节流 深拷贝 数组扁平化 数组去重 单例模式 手写promise 模拟new 实现call apply bi...

  • js中的几点常用知识

    1.js中的字符串反转输出 js中的字符串反转输出的N种方法: 2.js中数组转字符串和字符串转数组 javasc...

  • 笔试题

    实现继承 防抖 节流 reduce实现map 二叉树遍历 数组去重 斐波那契数列 调度器 数组快排 洗牌算法 (打...

  • ES6学习笔记之数组

    使用set对象给数组去重[...new Set(array)] 字符串数组转数字数组['1', '2', '3']...

  • js中处理数组小技巧

    1、数组去重 1、from()叠加new Set()方法 字符串或数值型数组的去重可以直接使用from方法。 2、...

  • 63、十三个JavaScript数组的方法

    1、数组去重from()叠加new Set()方法。 字符串或数值型数组的去重可以直接使用from方法。 2、sp...

  • 2018-12-02

    数组 数组常用方法 通过标签获取元素 循环语句 数组去重 字符串处理的方法 字符串反转 计算器 定时器弹框

  • 数组和字符串的处理方法

    数组 数组常用方法 数组去重 通过标签获取元素 字符串处理方法 字符串反转 定时器的基础用法 定时器动画 时钟 倒...

  • 字符串、定时器、数组

    字符串处理的方法 字符串反转 定时器弹框 定时器使用方法 定时器动画 数组 数组的常用方法 数组去重 作业 for...

网友评论

      本文标题:Face JS(一)(字符串反转、防抖、数组去重、实现new)

      本文链接:https://www.haomeiwen.com/subject/cjjnrktx.html