前端笔试题-CSDN博客

本文链接：https://blog.csdn.net/wjh1840226173/article/details/123084293

提示：

文章目录

前言
一、统计字符个数（hasOwnProperty ）
二、vue 2、3 生命周期、对象添加值
- 1.vue2 中输出什么
- 2.vue3 中输出什么
三、js 对象类型
- 1、对象的defineProperty
- 2、对象的存储（引用类型）
四、闭包考察
总结

前言

提示：这里可以添加本文要记录的大概内容：

提示：以下是本篇文章正文内容，下面案例可供参考

一、统计字符个数（hasOwnProperty ）

1、每个字符出现的情况

给一个字符串，让你统计一些这些字符对于出现的次数

----------------示例-------------
1、
输入： s1 = ‘aabbbbbccddd’
输出：{ a: 2, b: 5, c: 2, d: 3 }
2、
输入：s2 = ‘ssstttyyyybbs’
输出：{ s: 4, t: 3, y: 4, b: 2 }

提示：使用对象的hasOwnProperty 属性，键唯一性。

let Count = (str) => {
  let obj = {}
  for (let i = 0; i < str.length; i++) {
    let elem = str[i];
    if(obj.hasOwnProperty(elem)) {
      obj[elem] ++
    } else {
      obj[elem] = 1
    }
  }
  console.log(obj)
}

let s1 = 'aabbbbbccddd'
let s2 = 'ssstttyyyybbs'
Count(s1)
Count(s2)

输出----------
在这里插入图片描述

2、最高频的那个字符是那个？出现了几次？

相信到这一步应该就比较简单了吧，只要拿到上面对象里的最大值的属性，和属性的值就可以了，我们可以使用( for key in obj ) 来拿到属性，属性拿到了，值自然就可以拿到了噢。当然还要定义两个变量来保存他们。

代码：

let couter = function (str) {
  let obj = {}
  for (let i = 0; i < str.length; i++) { 
    obj.hasOwnProperty(str[i]) ? obj[str[i]] ++ : obj[str[i]] = 1
  }
  let maxCount = 0
  let maxString = ''
  for (let key in obj) {
    if(maxCount < obj[key]) {
      maxCount = obj[key]
      maxString = key 
    }
  }
  console.log(obj, `出现最多的字符为 ${maxString} 出现了${maxCount}次`);
  
}

couter('zzzyyxxr')
couter('ddhhshidbb')

输出
在这里插入图片描述

3、使用数组的特性排序计数

function couter(str) {
  let maxCount = 0
  let couter = 1
  let maxString = ''

  let strList= str.split('').sort();
  
  for(let i = 0; i < strList.length; i++) {
    if(strList[i] === strList[i + 1]) {
      couter ++
      if(couter > maxCount) {
        maxCount = couter
        maxString = strList[i]
      } 
    } else {
      couter = 1
    }
  }
  console.log(`出现最多的字符为 ${maxString} 出现了${maxCount}次`);
}

couter('zzzyaaaaaaaaayxxr')
couter('ddhhsfffffffffffffhidbb')

输出
在这里插入图片描述

4、三的倍数

// 写一个程序，输出从1到 n 数字的字符串表示。
// 1.如果 n 是3的倍数，输出“Fizz”；
// 2.如果 n 是5的倍数，输出“Buzz”；
// 3.如果 n 同时是3和5的倍数，输出“FizzBuzz”。

function test(n) {
 for (let i = 1; i <= n; i++) {
  if (i % 3 === 0 && i % 5 === 0) console.log("FizzBuzz"); 
  else if (i % 3 === 0 ) console.log("Fizz");
  else if (i % 5 === 0)  console.log("Buzz");
  else console.log(i);
 }
}
console.log(test(15));

输出
在这里插入图片描述

二、vue 2、3 生命周期、对象添加值

1.vue2 中输出什么

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vue 2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
    <div id="app">
        <div>{{animal.dog}}</div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data(){
                return {
                    animal: {}
                }
            },
           created(){
               this.animal.dog = 1
           },
            mounted(){
               this.animal.dog = 2
            },
        })
    </script>
</body>
</html>

输出：网页显示 1

为什么？

2.vue3 中输出什么

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vue3</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root">
        
        <div>{{animal.dog}}</div> 
    </div>

    <script>
        const app = Vue.createApp({
            data(){
                return {
                    animal: {}
                }
            },
           created(){
               this.animal.dog = 1
           },
            mounted(){
               this.animal.dog = 2
            },
        })
        app.mount('#root')
    </script>
</body>
</html>

输出：网页显示 2

为什么？

答案下期一定！

三、js 对象类型

1、对象的defineProperty

参考MDN文档的介绍

下面输出什么，为什么？


let obj = {name: "foo", sex:'men'}
Object.defineProperty(obj,"age",{value:18})
console.log(obj);

输出

{ name: 'foo', sex: 'men' }

下面会输出什么


let obj = {name: "foo", sex:'men'}
Object.defineProperty(obj,"age",{value:18,writable:true, enumerable:true,configurable:true});
console.log(obj);

输出

{ name: 'foo', sex: 'men', age: 18 }

因为对象的defineProperty定义的属性默认的writable、enumerabe、configurable 都是false。

2、对象的存储（引用类型）

对象的赋值是新对象指向所赋值对象的地址
如：下面会输出什么

 var setPerson = function (person) {
      person.name = "111111";
      person = { name: "222222" };
    };
    var person = { name: "333333" };
    setPerson(person);
    console.log(person.name);

输出》》》》》》》
在这里插入图片描述

为什么，先看看下面的例子

let obj = { name: "foo" }
let newObj = obj
newObj = { name: "bar" }

console.log(obj);
console.log(newObj);

输出

因为对象是引用类型，所以当newObj = {name:‘bar’} 相当于newObj的指针指向了这个新的地址，因此旧的obj 的属性和值不会受到影响

在这里插入图片描述

let obj = { name: "foo" }
let newObj = obj

newObj.name = "bar"
console.log(obj);
console.log(newObj);

输出

因为newObj 改变的是对象的属性值，这里name是值类型的，因此obj的name的值也直接被改动了

在这里插入图片描述

四、闭包考察

  let outer = function (num) {
      let inter = function () { return alert(num) }
      num++
      console.log(num);
      return inter()
    }

    outer(1)