🔥刷题秘籍！解锁JS高手之路：[牛客网]91道能力测评题攻略大全（二）三、中等 21、数组扁平化描述：请补全Jav

三、中等

21、数组扁平化

描述：

请补全JavaScript代码，要求将数组参数中的多维数组扩展为一维数组并返回该数组。
注意：

数组参数中仅包含数组类型和数字类型

示例

输入：[1,[2,[3,[4]]]]

输出：[1,2,3,4]

const _flatten = arr => {
   return arr.join().split(",").map(item=>Number(item))
}
console.log(_flatten([1, [2, 3, [4, 5]]]))

const _flatten = arr => {
   return arr.toString().split(",").map(item=>Number(item))
}
console.log(_flatten([1, [2, 3, [4, 5]]]))

const _flatten = arr => {
     return arr.reduce((target, item) => {//reduce 方法接受一个回调函数和一个初始值[]
        return target.concat(Array.isArray(item) ? _flatten(item) : item);//回调函数：target（累加器，用于收集结果）和 item（当前正在处理的数组元素）
     }, [])
}
console.log(_flatten([1, [2, 3, [4, 5]]]))

const _flatten = arr => {
   //  递归实现
    let res = [];
    arr.forEach(item => {
        if (Array.isArray(item)) {
            res = res.concat(_flatten(item))
        } else {
            res.push(item);
        }
    });
    return res;
}
console.log(_flatten([1, [2, 3, [4, 5]]]))

const  _flatten = arr => {
   // 扩展运算符实现
    while(arr.some(item => Array.isArray(item))){
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(_flatten([1, [2, 3, [4, 5]]]))

const _flatten = arr => {
   return arr.flat(Infinity);
  //flat() 方法可以接受一个参数，该参数指定要展平的嵌套数组层数。当传递 Infinity 作为参数时，它表示无论嵌套有多深，都会将所有层级的数组展平。
}
console.log(_flatten([1, [2, 3, [4, 5]]]))

const  _flatten = arr => {
    let str = JSON.stringify(arr)
    let res = str.replace(/([|])/g, '')
    return JSON.parse('['+res+']')
}
console.log(_flatten([1, [2, 3, [4, 5]]]))

22、数组过滤

描述：

请补全JavaScript代码，要求根据下拉框选中的条件变换重新渲染列表中展示的商品，且只展示符合条件的商品。
注意：

必须使用DOM0级标准事件（onchange）
建议使用ES6的filter方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <select name="" id="" >
            <option value="0">请选择价格范围</option>
            <option value="1">&lt100</option>
            <option value="2">100~500</option>
            <option value="3">&gt500</option>
        </select>
        <ul>
            <li>牛客logo马克杯</li>
            <li>无盖星空杯</li>
            <li>老式茶杯</li>
            <li>欧式印花杯</li>
        </ul>

        <script>
            var cups = [
                { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
                { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
                { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
                { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
            ]
            var select = document.querySelector('select');
            var ul = document.querySelector('ul');
            // 补全代码
			select.onchange = function(){
                ul.innerHTML = "";
			   
			   let newArr = [];
			   if(this.value == 0){
				newArr = cups;
			   }else if(this.value == 1){
				newArr = cups.filter(item=> item.sales<100)
			   }else if(this.value == 2){
				newArr = cups.filter(item=> item.sales>=100&&item.sales<=500)
			   }else if(this.value == 3){
				newArr = cups.filter(item=> item.sales>500)
			   }
			   newArr.map(item=>{
			   let li = document.createElement("li");
			   li.textContent = item.name;
			   ul.appendChild(li)
			   })  
            }
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <select name="" id="" >
            <option value="0">请选择价格范围</option>
            <option value="1">&lt100</option>
            <option value="2">100~500</option>
            <option value="3">&gt500</option>
        </select>
        <ul>
            <li>牛客logo马克杯</li>
            <li>无盖星空杯</li>
            <li>老式茶杯</li>
            <li>欧式印花杯</li>
        </ul>

        <script>
            var cups = [
                { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
                { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
                { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
                { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
            ]
            var select = document.querySelector('select');
            var ul = document.querySelector('ul');
            // 补全代码
			select.onchange = function(){
            ul.innerHTML = ''
            switch(parseInt(this.value)){
                case 1 :
                    var newArr = cups.filter((item)=>{return item.sales < 100})
                    break
                case 2:
                    var newArr = cups.filter((item)=>{return item.sales <= 500 && item.sales >= 100})
                    break
                case 3:
                    var newArr = cups.filter((item)=>{return item.sales > 500})
                    break
            }
            listRendering(newArr)
}

          function listRendering(arr) {
              var str = ''
              arr.forEach(element => {
                  str += `<li>${element.name}</li>`
              })
          
              ul.innerHTML = str
          }

            
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <select name="" id="">
            <option value="0">请选择价格范围</option>
            <option value="1">&lt100</option>
            <option value="2">100~500</option>
            <option value="3">&gt500</option>
        </select>
        <ul>
            <li>牛客logo马克杯</li>
            <li>无盖星空杯</li>
            <li>老式茶杯</li>
            <li>欧式印花杯</li>
        </ul>

        <script>
            var cups = [
                { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
                { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
                { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
                { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
            ]
            var select = document.querySelector('select');
            var ul = document.querySelector('ul');
            // 补全代码
            select.onchange = function(){
                ul.innerHTML = cups.filter(item =>{
                    switch(select.value){
                        case'0':
                        return true
                        case'1':
                        return item.sales < 100
                        case'2':
                        return item.sales >=100 && item.sales <= 500
                        case'3':
                        return item.sales > 500
                    }
                }).map(item => `<li>${item.name}</li>`).join('')
            }
        </script>
    </body>
</html>

23、判断质数

描述：

请补全JavaScript代码，要求在Number对象的原型对象上添加"_isPrime"函数，该函数判断调用的对象是否为一个质数，是则返回true，否则返回false。

Number.prototype._isPrime=function(){
    // 质数大于1
    let num = +this
    if (num <= 1) {
        return false;
    }

    // 检查从2到sqrt(num)的因数
    for (let i = 2; i <= Math.sqrt(num); i++) {
        if (num % i === 0) {
            return false;
        }
    }
    return true;
 }
var aa= 4; aa._isPrime()

Number.prototype._isPrime=function(){
let number = this.valueOf()
    if(number < 2) return false
    for(let i=2 ; i<=number ; i++) {
        if(i === number) return true
        if(number%i === 0) return false
        if(number%i !== 0) continue
    }
 }
var aa= 23; aa._isPrime()

24、验证是否是身份证

描述：

请补全JavaScript代码，要求以Boolean的形式返回字符串参数是否符合身份证标准。
注意：

无需考虑地区信息、出生日期、顺序码与校验码的验证

示例

输入：_isCard('21062319980907888X')

输出：true

const _isCard = number => {
    var regx = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    return regx.test(number)
}
console.log(_isCard('21062319980907888X'))

25、Symbol

描述：

请补全JavaScript代码，要求以键/值对的对象形式返回参数数组。要求如下：

键名的数据类型为Symbol
键值为当前数组项
Symbol的描述为当前数组项
返回普通对象

function _symbolKey(arr) {
    const result = {}; 
    for (const item of arr) {
        // 创建一个描述为当前数组项的Symbol
        const symbolKey = Symbol(item);
        // 将Symbol作为键，数组项作为值，存入结果对象中
        result[symbolKey] = item;
    }    
    return result;
}

const exampleArray = ['apple', 'banana', 'cherry'];
const symbolKeyedObject = _symbolKey(exampleArray);
console.log(symbolKeyedObject);

function arrayToSymbolKeyedObject(arr) {
        let obj = new Object();
        arr.forEach(v=>{
            obj[Symbol(v)]=v;
        })
        return obj;
}
const exampleArray = ['apple', 'banana', 'cherry'];
const symbolKeyedObject = arrayToSymbolKeyedObject(exampleArray);
console.log(symbolKeyedObject);

26、相同的Set

描述：请补全JavaScript代码，要求以boolean的形式返回两个Set对象参数是否一样，是则返回true，否则返回false。

const _isSameSet = (set1, set2) => {
    if (set1.size !== set2.size) {//如果两个 Set 的大小不同，它们肯定不相同
        return false;
    }
    for (const item of set1) {      
        if (!set2.has(item)) {//如果 item 不在第二个 Set 中，则它们不相同
            return false;
        }
    }
    return true;                
}
const setA = new Set([1, 2, 3]);
const setB = new Set([1, 2, 3]);
const setC = new Set([1, 2, 4]);
console.log(_isSameSet(setA, setB)); // 输出: true
console.log(_isSameSet(setA, setC)); // 输出: false

const _isSameSet = (s1, s2) => {
    if (s1.size !== s2.size) {
        return false
    }
    //通过ES6[...]扩展字符将set对象的伪数组转换为数组再调用every进而判断该数组中的每一项是否存在于另一个set对象中
    return [...s1].every(i => s2.has(i))
}

const setA = new Set([1, 2, 3]);
const setB = new Set([1, 2, 3]);
const setC = new Set([1, 2, 4]);
 
console.log(_isSameSet(setA, setB)); // 输出: true
console.log(_isSameSet(setA, setC)); // 输出: false

const _isSameSet = (s1, s2) => {
                // 补全代码
                return Array.from(s1).sort().toString() === Array.from(s2).sort().toString();
            }
const setA = new Set([1, 2, 3]);
const setB = new Set([1, 2, 3]);
const setC = new Set([1, 2, 4]);
 
console.log(_isSameSet(setA, setB)); // 输出: true
console.log(_isSameSet(setA, setC)); // 输出: false

 const _isSameSet = (s1, s2) => {
                // 补全代码
    return [...s1].sort().toString() === [...s2].sort().toString();
            }
const setA = new Set([1, 2, 3]);
const setB = new Set([1, 2, 3]);
const setC = new Set([1, 2, 4]);
 
console.log(_isSameSet(setA, setB)); // 输出: true
console.log(_isSameSet(setA, setC)); // 输出: false

27、Getter

描述：

请补全JavaScript代码，完成名为"Rectangle"的矩形类。要求如下：

构造函数只包含两个参数，依次为"height"、"width"
设置Getter，当获取该对象的"area"属性时，返回该对象"height"与"width"属性的乘积

示例

输入：new Rectangle(12,12).area

输出：144

class Rectangle {
    // 构造函数，包含两个参数：height 和 width
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    // Getter 方法，用于获取矩形的面积
    get area() {
        return this.height * this.width;
    }
}

// 示例1
const rect = new Rectangle(12, 12);
console.log(rect.area); // 输出：144

class Rectangle {
  constructor(height, width) {
      this.area = height * width
  }         
}
const rect = new Rectangle(12, 12);
console.log(rect.area);

28、控制动画

描述：

请补全代码，要求当滑动id为"range"的滑块控件时可以改变id为"rect"的矩形旋转速度。要求如下：

id为"rect"的矩形初始动画周期为10秒
id为"range"的滑块控件默认值为1、最小值为、最大值为10、滑动间隔为1
当滑动滑块值为1时，矩形动画周期为10秒、当...，为...、当滑动滑块值为10时，矩形动画周期为1秒
注意：
必须使用DOM0级标准事件（onchange）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        #rect {
            width: 120px;
            height: 100px;
            background-color: black;
            margin: 50px auto; 
            animation-name: rect;
            animation-duration: 10s;
            animation-iteration-count: infinite; 
            animation-timing-function: linear; 
        }

        @keyframes rect {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="rect"></div>
    <input type="range" id="range" min="1" max="10" step="1" value="1" onchange="changeRotationSpeed()" />

    <script type="text/javascript">
        function changeRotationSpeed() {
            var range = document.getElementById('range');
            var rect = document.getElementById('rect');
            var speed = 10 - range.value + 1; 
            rect.style.animationDuration = speed + 's'; 
        }

        window.onload = function() {
            var range = document.getElementById('range');
            changeRotationSpeed(); 
        }
    </script>
</body>
</html>

29、Map保存节点

描述：请补全JavaScript代码，要求将页面中的"p"标签以键名的形式保存在Map对象中，键名所对应的键值为该"p"标签的文字内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    <p>1</p>
    <script type="text/javascript">
       const _elementKey = () => {
		debugger
        let p = document.querySelectorAll('p')
        let m = new Map()
        Array.from(p).forEach((i) => {
            m.set(i, i.textContent)
        })
        return m
    }
const map = _elementKey();
console.log(map)
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
</head>
<body>
    <p>1</p>
  <script type="text/javascript">
      const _elementKey = () => {
      let p = document.querySelector('p')
      return new Map([[p,p.innerText]])
     }
    const map = _elementKey();
    console.log(map)
   </script>
    </body>
</html>

30、全选

描述：

请补全JavaScript代码，实现以下效果：

选中"全选"框，以下所有选项全部勾选。
把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。
当其他复选框全部选中，"全选框"为选中状态。
当其他复选框有一个未选中，"全选框"取消选中状态。
注意：
必须使用DOM0级标准事件（onchange）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkbox Example</title>
    <style>
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
  <ul>
      <li>全选<input type='checkbox' id='all'></li>
      <li>Java<input type='checkbox' class='item'></li>
      <li>JavaScript<input type='checkbox' class='item'></li>
      <li>C++<input type='checkbox' class='item'></li>
      <li>Python<input type='checkbox' class='item'></li>
      <li>.NET<input type='checkbox' class='item'></li>
  </ul>

 <script>
  var all = document.querySelector('#all')
  var options = Array.from(document.querySelectorAll('.item'))
  all.onchange = () => {
      options.forEach(x => x.checked = all.checked)
  }
  options.forEach((item)=>{
      item.onchange = function() {
          if(!this.checked){
              all.checked = false
          }else{
              if(options.every(x => x.checked)){
                  all.checked = true
              }else{
                  all.checked = false
              }
          }
      }
  })
    </script>
</body>
</html>

31、回文字符串

描述：请补全JavaScript代码，要求以boolean的形式返回参数字符串是否为回文字符串。

const _isPalindrome = string => {
    return string == string.split().reverse().join();          
}
console.log(_isPalindrome("erre"))

 const _isPalindrome = string => {
    const len = string.length
    let left = 0
    let right = len - 1
    let res = true
    while(left < right){
        if(string[left] === string[right]){
            left++;
            right--;
        }else{
            res= false
        }
    }
    return res
}
console.log(_isPalindrome("erre"))

32、Proxy计数器

描述：请补全JavaScript代码，请给参数对象添加拦截代理功能，并返回这个代理，要求每当通过代理调用该对象拥有的属性时，"count"值加1，否则减1。

let count = 0
const _proxy = object => {
    let proxy = new Proxy(object, {
        get: function(target, propKey) {
            if(propKey in target) {
                count ++
            } else {
                count --
            }
        }
    })
    return proxy
}
var me = {name:'me'};
var proxy = _proxy(me);    proxy.name;proxy.name;proxy.name;proxy.name;proxy.name;proxy.name;proxy.name;
console.log(count)

let count = 0;
const _proxy = (object) => {
  return new Proxy(object, {
    get(target, prop, receiver) {
      if (prop in target) {
        count++;
      } else {
        count--;
      }
      // 使用 Reflect.get 来正确返回属性值
      return Reflect.get(target, prop, receiver);
    }
  });
};

var me = { name: 'me' };
var proxy = _proxy(me); 
proxy.name; // 访问 name 属性，count 增加
proxy.age; // count 减少
console.log(count);

33、Proxy拦截器

描述：

请补全JavaScript代码，请给参数对象添加拦截代理功能并返回这个代理。要求如下：

该函数接收多个参数，首个参数为对象，从第二个参数（包括）往后皆是该对象的属性名
通过该函数给首个参数对象添加拦截器功能，每当该对象访问到该函数第二个参数（包括）往后的属性时，返回"noright"字符串，表示无权限。

const _proxy = (target,...properties) => {
  return new Proxy(target, {
    get(targetObj, propKey) {
      // 检查属性是否在要拦截的属性列表中
      if (properties.includes(propKey.toString())) {
        return "noright";
      }
      return Reflect.get(targetObj, propKey);
    }
  });
}
const originalObject = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};
const restrictedProxy = _proxy(originalObject, "age", "job");
console.log(restrictedProxy.name);  // 输出: Alice
console.log(restrictedProxy.age);   // 输出: noright
console.log(restrictedProxy.job);   // 输出: noright

34、监听对象

描述：

请补全JavaScript代码，要求如下：

监听对象属性的变化
当"person"对象的属性发生变化时，页面中与该属性相关的数据同步更新
注意：
必须使用Object.defineProperty实现且触发set方法时更新视图
可以使用预设代码"_render"函数

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            ul {
                list-style: none;
            }
        </style>
        <ul></ul>

        <script>
            var ul = document.querySelector('ul');
            var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
            function _render(element) {
                var str = `<li>姓名：<span>${person.name}</span></li>
                           <li>性别：<span>${person.sex}</span></li>
                           <li>年龄：<span>${person.age}</span></li>
                           <li>身高：<span>${person.height}</span></li>
                           <li>体重：<span>${person.weight}</span></li>`
                element.innerHTML = str;
            }
            _render(ul);
            function Observe(target) {
                if (typeof target !== 'object' || target == null) {
                    return target
                }
                for (var key in target) {
                    defineReactive(target, key, target[key])
                }
            }
            function defineReactive(target, key, value) {
                Object.defineProperty(target, key, {
                    get: function () {
                        return value
                    },
                    set: function (newVal) {
                        if (newVal !== value) {
                            value = newVal
                            _render(ul)
                        }
            
                    }
            
                })
            }
            Observe(person);
            person.age = 44;
        </script>
    </body>
</html>

35、购物面板

描述：

请补全JavaScript代码，要求如下：

当点击"-"按钮时，商品数量减1
当点击"+"按钮时，商品数量加1
每当点击任意按钮时，购物面板中相关信息必须同步更新
注意：
必须使用DOM0级标准事件（onclick）

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	<table>
            <thead>
                <caption>
                    商品
                </caption>
            </thead>
            <tbody>
                <tr>
                    <td>炸鸡</td>
                    <td>28元</td>
                    <td><button id="zjtaiduola" onclick="updateQuantity('zj', -1)">-</button></td>
                    <td><span id="zjsl">0</span></td>
                    <td><button id="zjtaishaola" onclick="updateQuantity('zj', 1)">+</button></td>
                </tr>
                <tr>
                    <td>可乐</td>
                    <td>5元</td>
                    <td><button id="kltaiduola" onclick="updateQuantity('kl', -1)">-</button></td>
                    <td><span id="klsl">0</span></td>
                    <td><button id="kltaishaola" onclick="updateQuantity('kl', 1)">+</button></td>
                </tr>
                <tr>
                    <td>总价：</td>
                    <td><span id="total">0</span></td>
                </tr>
            </tbody>
        </table>
        
        <script type="text/javascript">
            function updateQuantity(productId, change) {
                // 获取当前数量
                var quantityElement = document.getElementById(productId + 'sl');
                var currentQuantity = parseInt(quantityElement.textContent, 10);
                
                // 更新数量
                var newQuantity = currentQuantity + change;
                if (newQuantity < 0) {
                    newQuantity = 0; // 数量不能小于0
                }
                quantityElement.textContent = newQuantity;
                
                // 更新总价
                updateTotal();
            }

            function updateTotal() {
                // 获取炸鸡和可乐的数量
                var zjQuantity = parseInt(document.getElementById('zjsl').textContent, 10);
                var klQuantity = parseInt(document.getElementById('klsl').textContent, 10);
                
                // 计算总价
                var total = (zjQuantity * 28) + (klQuantity * 5);
                document.getElementById('total').textContent = total;
            }
        </script>
    </body>

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	<table>
            <thead>
                <caption>
                    商品
                </caption>
            </thead>
            <tbody>
                <tr>
                    <td>炸鸡</td>
                    <td>28元</td>
                    <td><button id="zjtaiduola">-</button></td>
                    <td><span id="zjsl">0</span></td>
                    <td><button id="zjtaishaola">+</button></td>
                </tr>
                <tr>
                    <td>可乐</td>
                    <td>5元</td>
                    <td><button id="kltaiduola">-</button></td>
                    <td><span id="klsl">0</span></td>
                    <td><button id="kltaishaola">+</button></td>
                </tr>
                <tr>
                    <td>总价：</td>
                    <td><span id="total">0</span></td>
                </tr>
            </tbody>
        </table>
        
        <script type="text/javascript">
            // 补全代码
            var zjtaiduola=document.querySelector('#zjtaiduola');
            var zjsl=document.querySelector('#zjsl');
            var zjtaishaola=document.querySelector('#zjtaishaola');
            var kltaiduola=document.querySelector('#kltaiduola');
            var klsl=document.querySelector('#klsl');
            var kltaishaola=document.querySelector('#kltaishaola');
            var total=document.querySelector('#total');
            function sum(){//求总价格的函数
                total.innerHTML=28*zjsl.innerHTML+5*klsl.innerHTML;
            }
            zjtaiduola.onclick=function(){//减少按钮的事件
                if(zjsl.innerHTML>0){
                    zjsl.innerHTML--;
                    sum(); 
                }
         
            }
            zjtaishaola.onclick=function(){//增加按钮的事件
                zjsl.innerHTML++;
                sum();
            }

            kltaiduola.onclick=function(){//减少按钮的事件
                if(klsl.innerHTML>0){
                    klsl.innerHTML--;
                    sum(); 
                }
         
            }
            kltaishaola.onclick=function(){//增加按钮的事件
                klsl.innerHTML++;
                sum();
            }

        </script>
    </body>
</html>

36、接口

描述：

请补全JavaScript代码，完成函数的接口功能。要求如下：

函数接收两种类型的参数，分别为"get?"和"update?name=xxx&to=yyy"，"name"、"to"为参数，"xxx"、"yyy"分别为参数对应的值。
当参数为"get?"时，返回data数据
当参数为"update?name=xxx&to=yyy"时，将data中所有"name"为"xxx"的项，更改为"name"值为"yyy"

let data = [
                {name: 'nowcoder1'},
                {name: 'nowcoder2'}
            ];
            
const _api = string => {
    let method = string.split('?')[0]
    switch(method) {
        case 'get': {
            return data
            break
        }
        case 'update': {
            let query = string.split('?')[1]
            let name = query.split('&')[0].split('=')[1]
            let to = query.split('&')[1].split('=')[1]
            for(item of data) {
                if(item.name === name) item.name = to
            }
            break
        }
        default: {
            return ''
        }
    }
}

console.log(_api('get?'))
_api('update?name=nowcoder1&to=nowcoder999');let data1 = _api('get?');
console.log(data1[0].name === 'nowcoder999')

let data = [
                {name: 'nowcoder1'},
                {name: 'nowcoder2'}
            ];
            const _api = string => {
                // 补全代码
                const reg = /([^?=&]+)=([^?=&]+)/g
                if (string=="get?")
                    return data
                else if(reg.test(string)){
                    const result = {}
                    string.replace(reg,(_,$1,$2)=>{
                        result[$1] = $2
                    })
                    if ('name' in result && 'to' in result){
                        data.forEach(element=>{
                            if (element.name==result.name){
                                element.name = result.to
                            }
                        })
                    }
                    return data
                }
            }


console.log(_api('get?'))
_api('update?name=nowcoder1&to=nowcoder999');let data1 = _api('get?');
console.log(data1[0].name === 'nowcoder999')

37、切换Tab栏目

描述：

请补全JavaScript代码，实现效果如下：

当点击某个栏目（题库、面试、学习、求职）时，该栏目背景色变为'#25bb9b'，其它栏目背景色位'#fff'。
当选中某个栏目时，下方内容就展示索引值相同的类名为".items"的"li"元素
注意：
必须使用DOM0级标准事件（onclick）
已使用自定义属性存储了栏目的索引值。点击栏目获取索引值，使用索引值控制类名为"items"下的"li"元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            .options li {
                float: left;
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border: solid 1px #ddd;
                cursor: pointer; /* Add cursor pointer for better UX */
            }

            .options li.active {
                background-color: #25bb9b; /* Highlight the active option */
            }

            .items li {
                width: 405px;
                height: 405px;
                display: none;
                border: solid 1px #ddd;
            }
        </style>
    </head>
    <body>
        <ul class='options'>
            <li data-type="0" style='background-color: #25bb9b;'>题库</li>
            <li data-type="1">面试</li>
            <li data-type="2">学习</li>
            <li data-type="3">求职</li>
        </ul>
        <ul class='items'>
            <li style="display: block;">牛客题库，包含编程题、选择题等</li>
            <li>为你的面试提供一站式服务</li>
            <li>校招学习来牛客</li>
            <li>求职中有什么难题，可以联系我们</li>
        </ul>

        <script>
            var options = document.querySelector('.options');
            var optionItems = [].slice.call(document.querySelectorAll('.options li'));
            var items = [].slice.call(document.querySelectorAll('.items li'));

          options.onclick = function(e) {
          optionItems.map((item, index) => {
              if (index == e.target.getAttribute('data-type')) {
                  item.style.backgroundColor = '#25bb9b';
                  items[index].style.display = 'block';
              } else {
                  item.style.backgroundColor = '#fff';
                  items[index].style.display = 'none';
              }
          })
        }

        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            .options li {
                float: left;
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border: solid 1px #ddd;
                cursor: pointer; /* Add cursor pointer for better UX */
            }

            .options li.active {
                background-color: #25bb9b; /* Highlight the active option */
            }

            .items li {
                width: 405px;
                height: 405px;
                display: none;
                border: solid 1px #ddd;
            }
        </style>
    </head>
    <body>
        <ul class='options'>
            <li data-type="0" style='background-color: #25bb9b;'>题库</li>
            <li data-type="1">面试</li>
            <li data-type="2">学习</li>
            <li data-type="3">求职</li>
        </ul>
        <ul class='items'>
            <li style="display: block;">牛客题库，包含编程题、选择题等</li>
            <li>为你的面试提供一站式服务</li>
            <li>校招学习来牛客</li>
            <li>求职中有什么难题，可以联系我们</li>
        </ul>

        <script>
            var options = document.querySelector('.options');
            var optionItems = [].slice.call(document.querySelectorAll('.options li'));
            var items = [].slice.call(document.querySelectorAll('.items li'));

            optionItems.forEach((item, index) => {
                  item.addEventListener('click', () => {
                    optionItems.forEach((t, i) => {
                      t.style.backgroundColor = '#fff'
                      items[i].style.display = 'none'
                    })
                    item.style.backgroundColor = '#25bb9b'
                    items[index].style.display = 'block'
                  })
                })

        </script>
    </body>
</html>

38、双向绑定

描述：

请补全JavaScript代码，要求如下：

监听对象属性的变化
当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新
将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新
注意：
必须使用Object.defineProperty实现且触发set方法时更新视图
必须使用DOM0级标准事件（oninput）
可以使用预设代码"_render"函数

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            ul {
                list-style: none;
            }
        </style>
        <input type="text">
        <ul></ul>

        <script>
            var ul = document.querySelector('ul');
            var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
            var inp = document.querySelector('input');
            inp.value = person.weight;
            const _render = () => {
                var str = `<li>姓名：<span>${person.name}</span></li>
                           <li>性别：<span>${person.sex}</span></li>
                           <li>年龄：<span>${person.age}</span></li>
                           <li>身高：<span>${person.height}</span></li>
                           <li>体重：<span>${person.weight}</span></li>`
                ul.innerHTML = str;
                inp.value = person.weight;
            }
           
            // 补全代码
            observe(person);
			_render(ul);
			function  observe (person){
				if (typeof person !== 'object' || person == null) {
					return person
				}
				Object.keys(person).forEach(key =>{
				let value = person[key];
					Object.defineProperty(person,key,{
					   get(){
					   return value
					   },
					   set(newvalue){
					      value = newvalue;
						   _render(ul);
					   }
					
					})
					
				})
			}
			 inp.oninput = function () {
				person.weight = +inp.value;
			 };
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            ul {
                list-style: none;
            }
        </style>
        <input type="text">
        <ul></ul>

        <script>
            var ul = document.querySelector('ul');
            var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
            var inp = document.querySelector('input');
            inp.value = person.weight;
            const _render = () => {
                var str = `<li>姓名：<span>${person.name}</span></li>
                           <li>性别：<span>${person.sex}</span></li>
                           <li>年龄：<span>${person.age}</span></li>
                           <li>身高：<span>${person.height}</span></li>
                           <li>体重：<span>${person.weight}</span></li>`
                ul.innerHTML = str;
                inp.value = person.weight;
            }
           
            // 补全代码
            observe(person);
			_render(ul);
			function observe(target) {
			if (typeof target !== 'object' || target == null) {
				return target
			}
			for (var key in target) {
				defineReactive(target, key, target[key])
			}
			}
			function defineReactive(target, key, value) {
			Object.defineProperty(target, key, {
				get: function () {
					return value
				},
				set: function (newVal) {
					if (newVal !== value) {
						value = newVal
						_render()
					}

				}

			})
			}
			 inp.oninput = function () {
				person.weight = +inp.value;
			 };
        </script>
    </body>
</html>

39、高频数据类型

描述：

请补全JavaScript代码，要求找到参数数组中出现频次最高的数据类型，并且计算出出现的次数，要求以数组的形式返回。
注意：

基本数据类型之外的任何引用数据类型皆为"object"
当多种数据类型出现频次相同时将结果拼接在返回数组中，出现次数必须在数组的最后

示例

输入：__findMostType([0,0,'',''])

输出：['number','string',2]或['string','number',2]

const _findMostType = arr => {
    // 创建一个对象来存储每种数据类型的出现次数
    const typeCount = {};

    // 遍历数组，统计每种数据类型的出现次数
    for (let i = 0; i < arr.length; i++) {
        const type = typeof arr[i];
        if (type in typeCount) {
            typeCount[type]++;
        } else {
            typeCount[type] = 1;
        }
    }

    // 找到出现次数最多的类型及其次数
    let maxCount = 0;
    let maxTypes = [];

    for (const type in typeCount) {
        if (typeCount[type] > maxCount) {
            maxCount = typeCount[type];
            maxTypes = [type];
        } else if (typeCount[type] === maxCount) {
            maxTypes.push(type);
        }
    }

    // 将结果拼接成数组并返回
    return [...maxTypes, maxCount];
}

console.log(_findMostType([0, 0, '', ''])); // 输出：['number', 'string', 2]

const _findMostType = array => {
	 let max = 0;
     let res = [];
     let map = new Map();
  
  	 // 统计各类型数量
     for(let ele of array){
     	let type = typeof ele;
        if(map.has(type)){
        	let count = map.get(type);
        	map.set(type, ++count);
        	max = Math.max(max, count);
        }else{
          map.set(type, 1);
        }
      }
  	debugger
     // 计入数量最多的类型
     let keys = map.keys();
     for(let k of keys){
        if(map.get(k) === max){
            res.push(k);
        }
     }
  
     // 最大值
     res.push(max);   
     return res; 
 }

console.log(_findMostType([0, 0, '', ''])); // 输出：['number', 'string', 2]

const _findMostType = array => {
    let tem = {}
    let arr = []
    let num = 0;
    debugger
    for(key of array) {
        let type = typeof key
        if(tem[type]) {
            tem[type] ++
        } else {
            tem[type] = 1
        }
        num = tem[type] > num ? tem[type] : num
    }
    for(key in tem) {
        arr = tem[key] === num ? [...arr,key] : arr
    }
    return [...arr,num]
}
console.log(_findMostType([0, 0, '', ''])); // 输出：['number', 'string', 2]

const _findMostType = array => {
  // 补全代码
  const result = array.reduce((data,element)=>{
      if (data.res!=null&&typeof element in data.res){
        data.res[typeof element] ++
      } else {
        data.res[typeof element] = 1
      }
      data.num = data.res[typeof element]>data.num ? data.res[typeof element]:data.num
      return data
  },{res:{},num:0})

  const ans = Object.keys(result.res).filter(key=>result.res[key]==result.num)

  return [...ans,result.num]
}

console.log(_findMostType([0, 0, '', ''])); // 输出：['number', 'string', 2]

40、字体高亮

描述：

请补全JavaScript代码，实现一个搜索字体高亮的效果。要求如下：

在input框中输入要搜索的内容，当点击查询按钮时，被搜索的字体样式变为加粗，背景色变为'yellow'
重新输入搜索文字，点击查询按钮时，去掉上一次的搜索效果，高亮显示效果只加在本次搜索文字上
如果搜索不到相关内容，清除之前的效果
注意：
需要加粗的文字请使用b标签包裹
必须使用DOM0级标准事件（onclick）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <input type="text">
        <button style="margin-right: 80px">查询</button>
        <div class="text" style="margin-top: 70px">
            牛客网隶属于北京牛客科技有限公司，牛客网成立于 2014 年 9 月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习到职业的良性生态圈。
    发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。
        </div>

        <script>
            var text = document.querySelector(".text");
            var search = document.querySelector("input");
            const btn = document.querySelector("button");
            
            btn.onclick = () => {
                // 补全代码
                let searchValue = search.value
                let content = text.innerText
                const result = content.split(searchValue).join(`<b style="background:        yellow;">${searchValue}</b>`)
                text.innerHTML = result
                }
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <input type="text">
        <button style="margin-right: 80px">查询</button>
        <div class="text" style="margin-top: 70px">
            牛客网隶属于北京牛客科技有限公司，牛客网成立于 2014 年 9 月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习���职业的良性生态圈。
    发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。
        </div>

        <script>
           			var text = document.querySelector(".text");
            var search = document.querySelector("input");
            const btn = document.querySelector("button");
            var article=String(text.innerText)//保存原文本
            btn.onclick = () => {
                // 补全代码
                var key=new String(search.value)
                var newHtml=article.replace(new RegExp(key,'g'),`
                    <b style="background-color:yellow">${key}</b>
                `)
                text.innerHTML=newHtml
            }

        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<input type="text">
<button style="margin-right: 80px">查询</button>
<div class="text" style="margin-top: 70px">
    牛客网隶属于北京牛客科技有限公司，牛客网成立于 2014 年 9 月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习���职业的良性生态圈。
    发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。
</div>

<script>
    var text = document.querySelector(".text");
    var search = document.querySelector("input");
    const btn = document.querySelector("button");
    btn.onclick = () => {
        // 补全代码
        let keyword = search.value
        let textContent = text.innerText
        let plainTextContent = textContent.replace(/(<b style="background-color: yellow">)|(</b>)/g, '')
        let pattern = new RegExp(keyword, 'g')
        let newTextContent = plainTextContent.replace(pattern, `<b style="background-color: yellow">${keyword}</b>`)
        text.innerHTML = newTextContent
    }
</script>
</body>
</html>

41、虚拟DOM

描述：

请补全JavaScript代码，要求将对象参数转换为真实的DOM结构并返回。
注意：

tag为标签名称、props为属性、children为子元素、text为标签内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>

        <script>
            var vnode = {
                tag: 'ul',
                props: {
                    class: 'list'
                },
                text: '',
                children: [
                    {
                        tag: "li",
                        props: {
                            class: "item"
                        },
                        text: '',
                        children: [
                            {
                                tag: undefined,
                                props: {},
                                text: '牛客网',
                                children: []
                            }
                        ]
                    },
                    {
                        tag: "li",
                        props: {},
                        text: '',
                        children: [
                            {
                                tag: undefined,
                                props: {},
                                text: 'nowcoder',
                                children: []
                            }
                        ]
                    }
                ]
            }
               const _createElm = vnode => {
                if (typeof vnode === 'string' || vnode === null) {
                    return document.createTextNode(vnode || '');
                }
                const el = document.createElement(vnode.tag);
                for (let key in vnode.props) {
                    if (vnode.props.hasOwnProperty(key)) {
                        el.setAttribute(key, vnode.props[key]);
                    }
                }
                (vnode.children || []).forEach(childVnode => {
                    el.appendChild(_createElm(childVnode));
                });
                if (vnode.text && vnode.children.length === 0) {
                    el.appendChild(document.createTextNode(vnode.text));
                } else if (vnode.text) {
                
                    console.warn('Both text and children are specified for vnode:', vnode);
                }

                return el;
            }

            const realElement = _createElm(vnode);
            document.body.appendChild(realElement);
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>

        <script>
            var vnode = {
                tag: 'ul',
                props: {
                    class: 'list'
                },
                text: '',
                children: [
                    {
                        tag: "li",
                        props: {
                            class: "item"
                        },
                        text: '',
                        children: [
                            {
                                tag: undefined,
                                props: {},
                                text: '牛客网',
                                children: []
                            }
                        ]
                    },
                    {
                        tag: "li",
                        props: {},
                        text: '',
                        children: [
                            {
                                tag: undefined,
                                props: {},
                                text: 'nowcoder',
                                children: []
                            }
                        ]
                    }
                ]
            }

          const _createElm = vnode => {
    let { tag, props, children, text } = vnode
    if (typeof tag == "string") {
        vnode.el = document.createElement(tag)
        _setAttr(vnode.el,props)
        vnode.el.appendChild(document.createTextNode(text))
        children.forEach(child => {
            vnode.el.appendChild(_createElm(child))
        })
    } else {
        vnode.el = document.createTextNode(text)
    }
    return vnode.el
}
const _setAttr = (elem, attrs) => {
    for(key in attrs){
        elem.setAttribute(key,attrs[key])
    }
}

            const realElement = _createElm(vnode);
            document.body.appendChild(realElement);
        </script>
    </body>
</html>

42、修改 this 指向

描述：封装函数 f，使 f 的 this 指向指定的对象

function bindThis(f, oTarget) {
        return function () {
            return f.apply(oTarget,arguments)
        }
}
function greet() {
    console.log(`Hello, my name is ${this.name}`);
}

const person = {
    name: 'Alice'
};

// 使用 bindThis
const greetAlice = bindThis(greet, person);
greetAlice();  // 输出: Hello, my name is Alice

function bindThis(f, oTarget) {
    return f.bind(oTarget)
}
function greet() {
    console.log(`Hello, my name is ${this.name}`);
}

const person = {
    name: 'Alice'
};

// 使用 bindThis
const greetAlice = bindThis(greet, person);
greetAlice();  // 输出: Hello, my name is Alice

function bindThis(f, oTarget) {
 return function() {
     return f.call(oTarget, ...arguments)
 }
}
function greet() {
    console.log(`Hello, my name is ${this.name}`);
}

const person = {
    name: 'Alice'
};

// 使用 bindThis
const greetAlice = bindThis(greet, person);
greetAlice();  // 输出: Hello, my name is Alice

function bindThis(f, oTarget) {
    return function(...args){//返回一个函数--封装；。。。arg用于将数据都接收到数组args中
        oTarget.f=f;//利用对象的方法中的this指向对象原理，将f中的this指向对象
        return oTarget.f(...args);//函数的最终结果返回函数指向结果。。。args将参数展开传入

    }

}
function greet() {
    console.log(`Hello, my name is ${this.name}`);
}

const person = {
    name: 'Alice'
};

// 使用 bindThis
const greetAlice = bindThis(greet, person);
greetAlice();  // 输出: Hello, my name is Alice

43、数组去重

描述：为 Array 对象添加一个去除重复项的方法

示例：

输入：[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN]

输出：[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']

Array.prototype.uniq = function () {
    return Array.from(new Set(this))
}
let arr = [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN];
arr.uniq()

Array.prototype.uniq = function () {
    return [...new Set(this)];
}
let arr = [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN];
arr.uniq()

Array.prototype.uniq = function () {
    let arr = this;
    let res = [];//要返回的没有重复元素的数组
    let set = new Set();//利用set记录数组中的元素，是否出现过
    for (let i = 0; i < arr.length; i++) {
        if (!set.has(arr[i])) {
            res.push(arr[i]);
            set.add(arr[i]);
        }
    }
    return res;
}
let arr = [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN];
arr.uniq()

Array.prototype.uniq = function () {
        let result = this.reduce((pre,cur)=>{
            if(pre.includes(cur)){
                return pre;
            }else{
                return pre.concat(cur);
            }
        },[])
        return result;
    }

let arr = [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN];
arr.uniq()

Array.prototype.uniq = function () {
    var resArr = [];
   var flag = true;
     
   for(var i=0;i<this.length;i++){
       if(resArr.indexOf(this[i]) == -1){
           if(this[i] != this[i]){   //排除 NaN
              if(flag){
                   resArr.push(this[i]);
                   flag = false;
              }
           }else{
                resArr.push(this[i]);
           }
       }
   }
    return resArr;
}
let arr = [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN];
arr.uniq()

44、时间格式化输出

描述：

按所给的时间格式输出指定的时间
格式说明
对于 2014.09.05 13:14:20
yyyy: 年份，2014
yy: 年份，14
MM: 月份，补满两位，09
M: 月份, 9
dd: 日期，补满两位，05
d: 日期, 5
HH: 24制小时，补满两位，13
H: 24制小时，13
hh: 12制小时，补满两位，01
h: 12制小时，1
mm: 分钟，补满两位，14
m: 分钟，14
ss: 秒，补满两位，20
s: 秒，20
w: 星期，为 ['日', '一', '二', '三', '四', '五', '六'] 中的某一个，本 demo 结果为五

示例：

输入：formatDate(new Date(1409894060000), 'yyyy-MM-dd HH:mm:ss 星期w')

输出：2014-09-05 13:14:20 星期五

function formatDate(date, format) {
    let addZero = function (data) {
        if (data < 10) {
            return '0' + data
        }
        return data
    }
    let obj = {
        'yyyy': date.getFullYear(),
        'yy': date.getFullYear() % 100,
        'MM': addZero(date.getMonth() + 1),
        'M': date.getMonth() + 1,
        'dd': addZero(date.getDate()),
        'd': date.getDate(),
        'HH': addZero(date.getHours()),
        'H': date.getHours(),
        'hh': addZero(date.getHours() % 12),
        'h': date.getHours() % 12,
        'mm': addZero(date.getMinutes()),
        'm': date.getMinutes(),
        'ss': addZero(date.getSeconds()),
        's': date.getSeconds(),
        'w': function () {
            arr = ['日', '一', '二', '三', '四', '五', '六']
            return arr[date.getDay()]
        }()
    }
    for (let i in obj) {
        format = format.replace(i, obj[i])
    }
    return format
}
var localOffset = new Date().getTimezoneOffset()*60*1000; 
var sResult = formatDate(new Date(1409894060000+localOffset), 'yyyy-MM-dd HH:mm:ss 星期w');
console.log(sResult)

45、邮箱字符串判断

描述：判断输入是否是正确的邮箱格式

输入描述：邮箱字符串

输出描述：true表示格式正确

function isAvailableEmail(sEmail) {
    let reg=/^[\w.]+@[\da-z.-]+.([a-z]+|[\u4E00-\u9FFF]+)$/
    return reg.test(sEmail);
}
console.log(isAvailableEmail("123_333@qq.com"))

46、查找重复元素

描述：找出数组 arr 中重复出现过的元素（不用考虑返回顺序）

示例：

输入：[1, 2, 4, 4, 3, 3, 1, 5, 3]

输出：[1, 3, 4]

function duplicates(arr) {
    var temp = [];
    arr.forEach(function(elem){
        if(arr.indexOf(elem) != arr.lastIndexOf(elem) && temp.indexOf(elem) == -1){
            temp.push(elem);
        }
    });
        
    
    return temp;
}
let arr = [1, 2, 4, 4, 3, 3, 1, 5, 3]
duplicates(arr);

function duplicates(arr) {
    const setter = new Set();
    const temp = new Set();
    for (const item of arr) {
       if (setter.has(item)) {
           temp.add(item);
       }else {
           setter.add(item);
       }
    }
    return Array.from(temp);
}
let arr = [1, 2, 4, 4, 3, 3, 1, 5, 3]
duplicates(arr);

// /利用数组排序，然后通过对比当前元素与后一个相同但与前一个不同去找到重复出现的元素
function duplicates(arr) {
    let newArr = arr.sort();
    return newArr.filter((el, index)=> el == newArr[index+1] && el != newArr[index-1])
}
let arr = [1, 2, 4, 4, 3, 3, 1, 5, 3]
duplicates(arr);

function duplicates(arr) {
    return arr.filter((el, i)=>arr.lastIndexOf(el) != i  &&  i == arr.indexOf(el))
}
let arr = [1, 2, 4, 4, 3, 3, 1, 5, 3]
duplicates(arr);

47、计时器

描述：

实现一个打点计时器，要求
1、从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1
2、返回的对象中需要包含一个 cancel 方法，用于停止定时操作
3、第一个数需要立即输出

function count(start, end) {
    console.log(start++)
    let timer = setInterval(function () {
        if (start <= end) {
            console.log(start++)
        } else {
            clearInterval(timer)
        }
    }, 100)
    return {
        cancel: function () {
            clearInterval(timer)
        }
    }
}
const timerObject = count(1, 1000)
 setTimeout(timerObject.cancel, 1000);

48、流程控制

描述：

实现 fizzBuzz 函数，参数 num 与返回值的关系如下：
1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz
2、如果 num 能被 3 整除，返回字符串 fizz
3、如果 num 能被 5 整除，返回字符串 buzz
4、如果参数为空或者不是 Number 类型，返回 false
5、其余情况，返回参数 num

示例：

输入：15

输出：fizzbuzz

        function fizzBuzz(num) {
            if(!num||isNaN(num)){
                return false
            }
            if(num%3===0&&num%5===0){
                return "fizzbuzz";
            }else  if(num%5===0){
                return "buzz";
            }else  if(num%3===0){
                return "fizz";
            }else{
                return num
            }
}
console.log(fizzBuzz(15))
console.log(fizzBuzz(1))
console.log(fizzBuzz(null))
console.log(fizzBuzz("2dsd"))

function fizzBuzz(num) {
    let res = ''
    if(typeof num !== 'number') {
        return false
    }
    res = (num % 5 === 0 && num % 3 === 0) ? 'fizzbuzz' : (num % 5 === 0) ? 'buzz' : (num % 3 === 0) ? 'fizz' : num
    return res 
}
console.log(fizzBuzz(15))
console.log(fizzBuzz(1))
console.log(fizzBuzz(null))
console.log(fizzBuzz("2dsd"))

49、使用闭包

描述：

实现函数 makeClosures，调用之后满足如下条件：
1、返回一个函数数组 result，长度与 arr 相同

2、运行 result 中第 i 个函数，即 resulti，结果与 fn(arr[i]) 相同

示例：

var arr = [1,2,3]; 
var fn = function (x) { 
    return x * x; 
}
var result = makeClosures(arr,fn);
(result[1]() === 4) === (fn(arr[1]) === 4) === true

       function makeClosures(arr, fn) {
            let arrNew =[];
            arr.map(num=>{
                arrNew.push(fn.bind(this,num))

            });
            return arrNew

}
var arr = [1,2,3]; 
var fn = function (x) { 
    return x * x; 
}
var result = makeClosures(arr,fn);

function makeClosures(arr, fn) {
    return arr.map(el=>{
        return function(){ 
            return fn(el);
        }
    })
}
var arr = [1,2,3]; 
var fn = function (x) { 
    return x * x; 
}
var result = makeClosures(arr,fn);

50、判断是否符合 USD 格式

描述：

给定字符串 str，检查其是否符合美元书写格式
1、以 $开始 2、整数部分，从个位起，满 3 个数字用 , 分隔 3、如果为小数，则小数部分长度为 2 4、正确的格式如：$ 1,023,032.03 或者 $2.03，错误的格式如：$ 3,432,12.12 或者 $34,344.3

示例：

输入：'$20,933,209.93'

输出：true

function isUSD(str) {
  return /^$\d{1,3}(,\d{3})*(.\d{2})*$/.test(str)
}
isUSD('$20,933,201,302.43')

function isUSD(str) {
  // 判断第一位是不是$
  if (str.slice(0,1) !== '$') return false;
      //如果是小数=> 有点没有小数位或 有小数位值非数字或 有小数位长度不是2位 =>返false
  if (str.split('.').length>1 && (!str.split('.')[1] || Number(str.split('.')[1]).toString() == 'NaN' || str.split('.')[1].length != 2)){
    return false
  }
  // 判断，号分隔后的所得是否符合要求
   return getStatus(str)
}

function getStatus(str) {
  // 取到去掉$和小数位后以‘，’号分隔后的数组
  let arr = str.slice(1,str.length).split('.')[0].split(',')
  //遍历该数组，every方法如果有一项条件为false终止循环，并且返回false
  return arr.every((item, i)=>{
    // 所有项长度小于等于3并且长度大于零，如果不是第一项每一个项长度只能为3
    return item.length <= 3 && item.length > 0 &&  (i !== 0 ? item.length == 3 : true)
  })
}
isUSD('$20,933,201,302.4333')

51、颜色字符串转换

描述：

将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff

rgb 中每个 , 后面的空格数量不固定
十六进制表达式使用六位小写字母
如果输入不符合 rgb 格式，返回原始输入

示例：

输入：'rgb(255, 255, 255)'

输出：#ffffff

function rgb2hex(sRGB) {
    // 去除 sRGB 的空格
    const newSRGB = sRGB.replace(/\s+/g,"");
    // 定义 rbg 的正则表达式
    const exp = /rgb((0|1\d{0,2}|2[0-5]{2}),(0|1\d{0,2}|2[0-5]{2}),(0|1\d{0,2}|2[0-5]{2}))/;
    // 若不符合规则，则返回原字符串
    if (!exp.test(newSRGB)) return sRGB
    // 剔除 'rgb(' 和 ')', 剩下 'xx,xx,xx' 的字符串
    const rgbString = newSRGB.substring(4, newSRGB.length - 1)
    // 拆分上述字符串，生成数组
    const arr = rgbString.split(',')
    let color = '#'
    // 遍历数组，将每个元素转成16进制的字符串
    for (const item of arr) {
        const str = Number(item).toString(16)
        color += str.length === 2 ? str : `0${str}` 
    }
    return color
}
console.log(rgb2hex('rgb(255, 255, 255)'));  // 输出：#ffffff
console.log(rgb2hex('rgb(0, 0, 0)'));       // 输出：#000000
console.log(rgb2hex('rgb(123, 45, 67)'));    // 输出：#7b2d43
console.log(rgb2hex('invalid_rgb'));         // 输出：invalid_rgb

function rgb2hex(sRGB) {
    try{
        return eval(sRGB)
    }
    catch(err){
        return sRGB
    }
}
function rgb(r,g,b){
    let rH=r.toString(16)
    let gH=g.toString(16)
    let bH=b.toString(16)
    rH=rH.length==1?'0'+rH:rH
    gH=gH.length==1?'0'+gH:gH
    bH=bH.length==1?'0'+bH:bH
    return "#"+rH+gH+bH
}
console.log(rgb2hex('rgb(255, 255, 255)'));  // 输出：#ffffff
console.log(rgb2hex('rgb(0, 0, 0)'));       // 输出：#000000
console.log(rgb2hex('rgb(123, 45, 67)'));    // 输出：#7b2d43
console.log(rgb2hex('invalid_rgb'));         // 输出：invalid_rgb

52、将字符串转换为驼峰格式

描述：

css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能

以 - 为分隔符，将第二个起的非空单词首字母转为大写
-webkit-border-image 转换后的结果为 webkitBorderImage

示例：

输入：'font-size'

输出：fontSize

function cssStyle2DomStyle(sName) {
  let strNew = sName.split("-").filter(item => item);
  return  strNew.map((item,index)=>{
        if(index!=0){
            debugger
            item = item.charAt(0).toUpperCase() + item.slice(1)
        }
        return item
    }).join("")      
}
console.log(cssStyle2DomStyle("font-size"))

function cssStyle2DomStyle(sName)
{ 
  return sName.replace(/^-/, '').replace(/-([a-z])/g, (_, $) => $.toUpperCase()); 
  // 第一个 replace 调用移除字符串开头的连字符（如果有的话）
  // 第二个 replace 调用使用正则表达式查找连字符后跟一个小写字母的模式，并将其替换为只包含大写字母的部分（去除了连字符）
}
console.log(cssStyle2DomStyle("font-size"))

53、倒计时

描述:

倒计时是web开发中常见的组件，请完成second和render两个函数，完成倒计时的显示部分

1、second函数的输入为整数，返回{day: Int, hour: Int, min: Int, second: Int}

2、render函数的输入为second函数的输出，将数据在页面对应的DOM元素上显示出来，格式如html所示

3、如果day为0，隐藏对应的DOM元素，否则显示（请直接使用已经实现的css代码）

4、数值不足两位，前面补充0

function second(second) {
    let sec = 1
    let mintue = 60 * sec
    let hour = 60 * mintue
    let day = 24 * hour
    let rs = {
        day: parseInt(second / day),
        hour: parseInt(second % day / hour),
        min: parseInt(second % hour / mintue),
        second: second % mintue,
    }
    return rs
}

function render(data) {
    function len2(d) {
        d = '00' + d
        return d[d.length-2]+d[d.length-1]
    }
    let ids = document.querySelector('#jsCountdown')
    let html = `
        <span class="${data.day ==0? 'hide': ''}">${len2(data.day)}天</span>
        <span>${len2(data.hour)}:</span>
        <span>${len2(data.min)}:</span>
        <span>${len2(data.second)}</span>
        `
    ids.innerHTML = html
}

54、文字输出

描述：

页面上存在id为jsBlink的下划线闪动节点，请按照如下需求实现 output 函数
1、函数 output 接收一个字符串参数，每隔200毫秒在闪动节点之前逐个显示字符
2、请新建span节点放置每个字符，其中span必须存在class "word"，并随机加上 color1 ~ color24 中的任一个class（请使用系统随机函数）
3、每次输出指定字符串前，请将闪动节点之前的所有其他节点移除
4、不要销毁或者重新创建闪动节点
5、如果输出字符为空格、<、>，请分别对其进行HTML转义，如果是\n请直接输出
，其他字符不需要做处理
6、请不要手动调用output函数
7、当前界面为系统执行 output('hello world\n你好世界') 之后，最终的界面，过程请参考以下图片
8、请不要手动修改html和css

9、不要使用第三方插件

10、请使用ES5语法

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       html, body {margin: 0;}
.color1 {color: #E60012;}
.color2 {color: #EB6100;}
.color3 {color: #F39800;}
.color4 {color: #FCC800;}
.color5 {color: #FFF100;}
.color6 {color: #CFDB00;}
.color7 {color: #8FC31F;}
.color8 {color: #22AC38;}
.color9 {color: #009944;}
.color10 {color: #009B6B;}
.color11 {color: #009E96;}
.color12 {color: #00A0C1;}
.color13 {color: #00A0E9;}
.color14 {color: #0086D1;}
.color15 {color: #0068B7;}
.color16 {color: #00479D;}
.color17 {color: #1D2088;}
.color18 {color: #601986;}
.color19 {color: #920783;}
.color20 {color: #BE0081;}
.color21 {color: #E4007F;}
.color22 {color: #E5006A;}
.color23 {color: #E5004F;}
.color24 {color: #E60033;}
.word {font-size: 20px;}
.content {text-align: center;font-size:0;}
.blink {
    font-size: 20px;
    animation: fade 500ms infinite;
    -webkit-animation: fade 500ms infinite;
}
@keyframes fade {
    from {opacity: 1.0;}
    50% {opacity: 0;}
    to {opacity: 1.0;}
}
    </style>
</head>

<body>
   <div class="content">
    <span class="word color23">h</span>
    <span class="word color22">e</span>
    <span class="word color4">l</span>
    <span class="word color24">l</span>
    <span class="word color17">o</span>
    <span class="word color2">&nbsp;</span>
    <span class="word color9">w</span>
    <span class="word color3">o</span>
    <span class="word color1">r</span>
    <span class="word color23">l</span>
    <span class="word color15">d</span>
    <br>
    <span class="word color15">你</span>
    <span class="word color13">好</span>
    <span class="word color16">世</span>
    <span class="word color19">界</span>
    <span class="blink" id="jsBlink">|</span>
</div>
    <script type="text/javascript">
      // 动画的字符串，和目标元素
function output(str) {
    //删除原有结点
    var contents = document.getElementsByClassName('content');
    var jsBlink = document.getElementById('jsBlink');
    var childs = contents[0].childNodes;
    while(childs.length > 0){
        if(childs[0] == jsBlink){
            break;
        }
        contents[0].removeChild(childs[0]);
    }
    var i = 0;
    //每隔200毫秒输出字符
    var fun = setInterval(function(){
        if(i == str.length) clearInterval(fun);
        else{
            var c = str[i];
            if(c == '\n'){
                console.log(c);
                var br = document.createElement('br');
                contents[0].insertBefore(br, jsBlink);
            }else{
                var newSpan = document.createElement('span');
                newSpan.className = "word color" + (Math.floor(Math.random() * 24) + 1);
                if(c == '<'){
                    c = '&lt';
                }else if(c == '>'){
                    c = '&gt';
                }else if(c == ' '){
                    c = '&nbsp';
                }
                newSpan.innerHTML = c;
                contents[0].insertBefore(newSpan, jsBlink);
            }
            i++;
        }
    }, 200);
	
	
}
output("333333333333")

    </script>
</body>

</html>

四、较难

1、模块

描述：

完成函数 createModule，调用之后满足如下要求：
1、返回一个对象
2、对象的 greeting 属性值等于 str1， name 属性值等于 str2
3、对象存在一个 sayIt 方法，该方法返回的字符串为 greeting属性值 + ', ' + name属性值

function createModule(str1, str2) {
      return {
          greeting:str1,
          name:str2,
          sayIt:function(){
              return this.greeting+", "+this.name
          }
      }
}
var o = createModule('hello', 'matt');   
o.sayIt();

🔥刷题秘籍！解锁JS高手之路：[牛客网]91道能力测评题攻略大全（二）

三、中等

21、数组扁平化

22、数组过滤

23、判断质数

24、验证是否是身份证

25、Symbol

26、相同的Set

27、Getter

28、控制动画

29、Map保存节点

30、 全选

31、回文字符串

32、Proxy计数器

33、Proxy拦截器

34、 监听对象

35、 购物面板

36、接口

37、切换Tab栏目

38、 双向绑定

39、高频数据类型

40、字体高亮

41、虚拟DOM

42、修改 this 指向

43、数组去重

44、 时间格式化输出

45、邮箱字符串判断

46、查找重复元素

47、 计时器

48、流程控制

49、使用闭包

50、判断是否符合 USD 格式

51、颜色字符串转换

52、将字符串转换为驼峰格式

53、倒计时

54、 文字输出

四、较难

1、模块

30、全选

34、监听对象

35、购物面板

38、双向绑定

44、时间格式化输出

47、计时器

54、文字输出