preface

Tip: The following is the body of this article, the following cases for reference

HasOwnProperty (hasOwnProperty)

1. The occurrence of each character

Given a string, let you count the number of occurrences of some of these characters

— — — — — — — — — — — — — — — – the sample — — — — — — — — — — — — —

S2 = ‘ssstTTYYYYbbs’ {s: 4, t: 3, y: 4, b: 2}

Tip: Use the hasOwnProperty property of the object. The key is unique.

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)
Copy the code

Output — — — — — — — — — —

2. What is the character with the highest frequency? How many times?

We can use (for key in obj) to get the value of the property. If the property is obtained, the value of the property can be obtained naturally. Of course, you have to define two variables to hold them.

Code:

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, The most common character is${maxString}the${maxCount}Time `);
  
}

couter('zzzyyxxr')
couter('ddhhshidbb')
Copy the code

The output

3. Use array properties to sort counts

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(The most common character is${maxString}the${maxCount}Time `);
}

couter('zzzyaaaaaaaaayxxr')
couter('ddhhsfffffffffffffhidbb')
Copy the code

The output

4. A multiple of three

// Write a program that outputs a string representation of numbers from 1 to n.

// 1. If n is a multiple of 3, output “Fizz”; // 2. If n is a multiple of 5, output “Buzz”; // 3. If n is a multiple of 3 and 5, output “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));
Copy the code

The output

Vue 2, 3 Life cycle, object add value

1. What is output in vue2

The code is as follows (example) :

<! DOCTYPE html><html lang="en">
<head>
    <title>Vue 2</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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>
Copy the code

Output: web page display 1

Why is that?

2. What does vue3 output

The code is as follows (example) :

<! 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>
Copy the code

Output: Web page display 2

Why is that?

The answer is definitely next time!

Js object type

DefineProperty of the object

Refer to the MDN documentation

What is output next and why?


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

Copy the code

The output

{ name: 'foo'.sex: 'men' }
Copy the code

What will be output next


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

The output

{ name: 'foo'.sex: 'men'.age: 18 }
Copy the code

The defineProperty of the object defines a new property, writable, Enumerabe, and 64x that is false by default.

2. Object storage (reference type)

The assignment of an object is the address at which the new object points to the assigned object

For example: What is output next

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

Output 》》》》》》》

Why? Let’s look at the following example. Okay

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

console.log(obj);
console.log(newObj);
Copy the code

The output

Because the object is a reference type, newObj = {name:’bar’} corresponds to newObj’s pointer to the new address, so the properties and values of the old obj are not affected

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

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

The output

Because newObj changes the property value of the object, where name is of value type, the value of obj’s name is also directly changed

4. Closure inspection

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

    outer(1)
Copy the code

Type 2, because there is a closure, the return function contains this variable, its execution context will not be cleared, so num++, the result is 2!

conclusion

Tip: these front-end pen questions, mainly function and object investigation.