js 中级面试题 （ 持续更新）

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。

1.var const let 之间的区别？

2.实现mergePromise函数，把传进来的数组按顺序先后执行，并且把返回的数据先后放到数组data中。

        // 实现mergePromise函数，把传进来的数组按顺序先后执行，并且把返回的数据先后放到数组data中。


        const request = (timer) => {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve()
                },timer)
            })
        }

        const ajax1 = () => request(2000).then(() => {
            console.log(1)
            return 1
        })
        const ajax2 = () => request(1000).then(() => {
            console.log(2)
            return 2
        })

        const ajax3 = () => request(3000).then(() => {
            console.log(3)
            return 3
        })
        
        const mergePromise = (ajaxArray) => {
            //存放ajax的结果
            const data  = [];
            let promise = Promise.resolve()
            ajaxArray.forEach(ajax => {
                promise = promise.then(ajax).then(res => {
                    data.push(res);
                    return data//[1,2,3] 下一个then 可以拿到结果
                })
               
            })
            return  promise // then返回的是Promise so 返回的是 Promise
          
        }


        mergePromise([ajax1,ajax2,ajax3]).then(data => {
            console.log('done');
            console.log(data);//[1, 2, 3]
        }) 

3.实现一个normalize 函数，能将输入的特定的字符串转化为特定的结构化数据

   // 实例： 'abc'
        // {
        //     value:'abc'
        // }
        // 示例二： '[abc[bcd[def]]]'
        // {
        //     value:'abc',
        //     children:{
        //         value:'bcd'
        //         children:{
        //          value:'def'
        //         }
        //     }
        // }


        var normalize = (str) => {
            var arr = str.split(/[\[\]]/g).filter(v => v);
            // console.log(str.split(/[\[\]]/g));//["", "abc", "bcd", "def", "", "", ""]
            // console.log(arr);// ["abc", "bcd", "def"]
            var result = {}

            arr.reduce((pre, cur, index, self) => {
                // {}.value = 'cur'
                pre.value = cur
                if (index !== self.length - 1) {
                    pre.children = {}
                    return pre.children // 下一轮就是pre就是 这个 pre.children { }
                    // return (pre.children = {} )
                }
            }, result)

            return result
        }
        console.log(normalize('[abc[bcd[def]]]'));
        console.log(normalize('[abc[bcd[def[123[456[789]]]]]]'));
        
        
        
            // 方法二：
        '[abc[bcd[def]]]'.split(/[\[\]]/g).filter(v => v)
        '[abc[bcd[def]]]'.split(/[\[\]]/g).filter(Boolean)
        '[abc[bcd[def]]]'.match(/\w+/g)
        var normalize = (str) => {
            var arr = str.match(/\w+/g)
            let result = {}
            let obj = result
            // 1. {}.value = abc {}.children = {}
            //2.  {}.value = bcd  {}.children = {} 
            while (key = arr.shift()) {
                obj.value = key;
                if(!arr.length) break;//最后一个
                obj.children = {}
                obj = obj.children
            }
            return result
        }

4.js判断数据类型相关方法

//是否字符串
export const isString = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'String'
}

//是否数字
export const isNumber = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Number'
}

//是否boolean
export const isBoolean = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Boolean'
}

//是否函数
export const isFunction = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Function'
}


//是否为null
export const isNull = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Null'
}

//是否undefined
export const isUndefined = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Undefined'
}

//是否对象
export const isObj = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Object'
}

//是否数组
export const isArray = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Array'
}

//是否时间
export const isDate = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Date'
}

//是否正则
export const isRegExp = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'RegExp'
}

//是否错误对象
export const isError = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Error'
}

//是否Symbol函数
export const isSymbol = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Symbol'
}

//是否Promise对象
export const isPromise = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Promise'
}

//是否Set对象
export const isSet = (val) => {
  return Object.prototype.toString.call(val).slice(8, -1) === 'Set'
}

// 判断是否为空对象   返回true/false
export function isNullObjectFn(value) {
  let arr = Object.keys(value)
  if (arr.length === 0) {
    return true
  } else {
    return false
  }
}

// 从数组中删除某元素
function deleteFromArray(arr, compare) {
  const index = arr.findIndex(compare)
  if (index > -1) {
    arr.splice(index, 1)
  }
}

5.js 终止 forEach 循环

 
        try {
            var array = ["first", "second", "third", "fourth"];
            // 执行到第3次,结束循环
            array.forEach(function (item, index) {
                if (item == "third") {
                    throw new Error("EndIterative");
                }

                console.log(item); // first second
            });
        } catch (e) {
            if (e.message != "EndIterative") throw e;
            // throw e

            // console.log(e);
        }

6.随机生成十个随机数

      const hash = ()=>{
            let s = ''
            const strs = [
                'a','b','c','d','e','f','g',
                'h','i','j','k','l','m','n',
                'o','p','q','r','s','t','u',
                'v','w','x','y','z','0','1',
                '2','3','4','5','6','7','8',
                '9',
            ]
            for(let i = 0;i<10;i++) {
                s += strs[Math.floor(Math.random() * strs.length)]
            }
            return s;
        }

        console.log("传统的生成随机数字符串",hash());//ppzj4607yz


        // 如果radix是36，就会把数字表示为由0-9, a-z组成的的36进制字符串。10 + 26 = 36
        // 不用管36进制是什么，只要知道，由Math.random产生的数字会被表示成看起来随机的字符串，
        // 类似hg7znok52x，就像10表示成二进制是1010一个道理。
        const str = Math.random().toString(36).substr(2,10)

        console.log( Math.random());//0.48007240336017354  0~1之间的数
        console.log( Math.random().toString());//0.6052488690144391
        console.log(Math.random().toString(36));//0.hujws395isw
        console.log(str);//ggc7kfol0l

7.把中文属性换成英文：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const useRelations = {
        入职日期: "timeOfEntry",
        手机号: "mobile",
        姓名: "name",
        转正日期: "correctionTime",
        工号: "workNumber",
      };

      var arr = [
        {
          入职日期: "2022/12/12",
          手机号: 13929782427,
          姓名: "lulu",
          转正日期: "2024/12/12",
          工号: "007",
        },
        {
          入职日期: "2021/2/12",
          手机号: 13629782427,
          姓名: "lulu",
          转正日期: "2021/8/12",
          工号: "008",
        },
        {
          入职日期: "2021/1/12",
          手机号: 13929782427,
          姓名: "张华",
          转正日期: "2024/5/12",
          工号: "010",
        },
      ];

      // 方法一：
      // let newArr = [];
      // arr.forEach((item, index) => {
      //   let userInfo = {};
      //   Object.keys(item).forEach((key) => {
      //     userInfo[useRelations[key]] = item[key];
      //   });
      //   newArr.push(userInfo);
      // });
      // console.log(newArr);

      //另一种写法用map

      var Arr = arr.map((item) => {
        let userInfo = {};
        Object.keys(item).forEach((key) => {
          userInfo[useRelations[key]] = item[key];
        });
        return userInfo;
      });

      console.log(Arr);
    </script>
  </body>
</html>

8.JavaScript的delete和Vue.delete的区别.html

 /**
       delete 和 Vue.delete 删除数组的区别
       1.delete只是被删除的元素变成了 empty/undefined  其他的元素 的键值还是不变.
       2.Vue.delete 直接删除了数组 改变数组的键值
       
        */

        const arr1 = [1,2,3,4,5]
        delete arr1[0];
        console.log('arr1',arr1,arr1.length);//arr1 (5) [empty, 2, 3, 4, 5] 5


        const arr2 = [1,2,3,4,5]
        Vue.delete(arr2,0)
        console.log('arr2',arr2,arr2.length);//arr2 (4) [2, 3, 4, 5] 4