Front-end interview interview questions about js

type of data

a. What is a reference type/value type?

1. The value type key and value are stored in the stack (small amount)
2. The application type of the reference type is expanding and storing data in the stack (large amount)
3. Assigning the reference type to a variable is the reference of the variable The address points to the address in the reference type heap

b. What are the value types?

String character, Number number, Boolean Boolean, undefined undefined, null empty, Symbol symbol

c. What are the reference types?

Object object, Array number, Function function, Map diagram, Set collection

d. How to judge the data type?
  1. typeof type
typeof “abc” ----------- string
typeof 123 ----------- number
typeof true ----------- boolean
typeof undefined ----------- undefined
typeof null ----------- object(null空指针)
typeof {
    
    } ----------- object
typeof [] ----------- object
typeof function() ----------- function
//引用类型出函数外 返回的是object
//适合判断值类型与引用类型,不能判断具体引用类型
  1. instanceof instance
[] instanceof Array ----------- true
[] instanceof Object ----------- true
{
    
    } instanceof Array ----------- false
{
    
    } instanceof Object ----------- true
//判断是否是其原型链上的实例,只要构造函数在原型链上都返回true
//[]由Array创建的,Array是Object的子类,instanceof Array和Object都返回true

  1. constructor constructor
//判断实例对象构造函数 
[] constantor === Array  true                                                                  
  1. Whether Array.isArray() is an array
  2. Object.prototype.toString.call(obj) prototype
  3. most accurate judgment
Object,prototype.toString.call(obj).slice(8,-1)                                        
//返回最精准的数据类型

shallow copy and deep copy

Can you cite a few shallow copy methods?
  1. expand {...obj}
  2. for traversal (shallow copy (if the attribute value is a reference type, the attributes of both variables point to the same memory address))
  3. Object.assign() (Merge the two objects of the parameter, and the same attribute will overwrite the front)
// js拷贝对象
    // 浅拷贝,只能拷贝值类型,引用类型数据还是指向地址
    var obj1 = {
    
    
        name:"mumu",
        age:18,
        friend:["小红","小蓝",{
    
    
            name:"小绿",
            job:"teacher"
        }]
    }
    // ES6扩展
    var obj2 = {
    
    ...obj1}
    // 循环
    var obj3 = {
    
    }
    for(var k in obj1){
    
    
        obj3[k] = obj1[k];
    }
    // Object.assign把参数的两个对象进行合并,属性相同后面覆盖前面
    var obj4 = Object.assign(obj1,{
    
    });
b. What do you know about deep copy?

Deep copy, the target object and the source object are cut off from each other

  1. JSON.parse(JSON.stringify(data)):
    The json data type only supports unique, string, number, null, undefined, array, object will ignore functions and other types of data
  2. Recursive deep copy by judging the type (recursion means that the function calls itself, and there must be an end condition)
// js拷贝对象
    // 深拷贝,目标对象与元对象相互之间切断联系
    var obj1 = {
    
    
        name:"mumu",
        age:18,
        friend:["小红","小蓝",{
    
    
            name:"小绿",
            job:"teacher",
            say(){
    
    
                alert("你好,我是"+this.name)
            }
        }]
    }
    // JSON转字符串,字符串转对象
    var obj2 = JSON.parse(JSON.stringify(obj1))
    // json字符串的值指挥保留数组、对象、字符串、数字、null、undefined
    // 对象中的函数会被过滤掉(一般数据也是不带函数的)
//通过递归自己调用自己
var obj1 = {
    
    
        name:"mumu",
        age:18,
        friend:["小红","小蓝",{
    
    
            name:"小绿",
            job:"teacher",
            say(){
    
    
                alert("你好,我是"+this.name)
            }
        }]
    }
    function deepCopy(obj){
    
    
        if(typeof obj == "object" && obj!= null){
    
    
            var temp = null;
            if(obj instanceof Array){
    
    
                temp = [];
                for(var i=0;i<obj.length;i++){
    
    
                    temp[i] = deepCopy(obj[i])
                }
            }else{
    
    
                temp = {
    
    };
                for(var k in obj){
    
    
                    temp[k] = deepCopy(obj[k]);
                }
            }
            return temp;
        }else{
    
    
            return obj;
        }
    }
    var obj2 = deepCopy(obj1);

implicit conversion

tip: data type conversion is divided into: mandatory conversion, implicit conversion;

a. What are the emphasis conversions? :
  • Number() converts to a number
  • String() to String Boolear()
    to Boolean
b. What are the implicit conversion symbols? :
  • The + string concatenation symbol will try to convert other types to strings;
  • ± * / == will try to convert other types to numbers;
    conversion failure NaN;
  • false is converted to 0; true is converted to 1;
  • <,>,>= ,<=, ! !,= == Judgment and logic return will try to convert other types of boolean values ​​(falsely variables into false; empty strings, null, NaN, undefined, 0, into false )
c. Strictly equal to and relative equal to meaning?
  • = = =
    Judging whether the type and value are relative
    should be used at any time = = = (when judging whether it is null or undefined can be a special case)
    null === null true

  • ==
    Judge the value "100" after implicit conversion
    == 100 // true
    null == undefined //true
    0 == false //true

  • Special case: NaN === null // false
    {} == {} // false
    [] == {} //false
    points to a different memory address

What does the if judgment do?

  1. Whether the judgment in if() is a truely variable

  2. Falsely variable: false empty string 0 NaN undefined null (Twice negated !!a to get the result is false)

  3. In addition to the falsely variable, all others are truely variables

Logical and logical or perform the distinction?

1. A||B

A is true (truly) the result is A, otherwise the result is B

2. A&&B

A is false (falsely) the result is A, otherwise the result is B

3. Judgment object

if(a&&a.b&&a.bc){}
if(a?.b?.c){}
If there is a and there is ab and there is abc
if(abc){} This is wrong

Prototypes and Prototype Chains

a. What is a prototype and what is a prototype chain?
  1. Display prototype: class/constructor is an explicit prototype ptotype, which is essentially an object
  2. Implicit Prototype: Every instance has an implicit prototype __proto__
  3. Explicit and implicit relationship: the class shows that the prototype prototype is equal to the implicit prototype of the instance it creates __proro__
b. What is a prototype chain? (Icons can be drawn)
  1. When looking for the methods and properties of an object instance, first look for it yourself, if you can’t find it, look up along __proro__, the chain relationship formed by __proro__ is called the prototype chain
    insert image description here

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>原型</title>
	</head>
	<body>
		<script>
			// 01 创建People类
			function People(name,age){
      
      
				this.name = name;
				this.age = age;
			}
			// 02 给pepole显示原型添加 eat方法
			People.prototype.eat = function(){
      
      
				console.log(this.name+"正在吃饭")
			}
			
			// 03  创建学生类继承 People类
			function Student(name,age,no){
      
      
				// 执行People构造按函数(执行people函数并把当前的this传入函数,当前peoplethis)
				People.call(this,name,age);
				// 定义学号
				this.no =no;
			}
			// 04 让Student原型链继承People的原型链
			Student.prototype = Object.create(People.prototype);
			// 05  修正 Student 显示原型上的构造函数
			Student.prototype.constructor = Student;
			// 06 在Student显示原型链添加方法
			Student.prototype.study = function(){
      
      
				console.log(this.name+"正在好好学习,dayday up");
			}
			// 07 构建Student的实例 s1
			var s1 = new Student("小曾",18,9527);		
		</script>
	</body>
</html>
c. The role of prototype and prototype chain?
  1. Realized the inheritance of js
    1.1 The extends method of class
//- class 的 extends方法
class Student extends People{
    
    
constructor(name,age,no){
    
    
//类中继承构造函数
super(name,age)}
}

1.2 Using the prototype chain

1. Stuent构造函数中继承
function Student(name,age,no){
    
     People.call(this,name,age) .... }
2.继承原型链
Student.prototype = Object.create(People.prototype)
2. 修正Student构造函数
Stuent.prototype.constructor = Student
  1. Instance method extensions for implementing classes
  • Array.prototype.max = function(){return Math.max(…this))}
    All arrays will have max method
  • String.prototype.reverse = function(){ return this.split("").reverse().join("")}
    all strings will have the reverse method
    Notice: Generally do not modify the methods on the default object, and be cautious when extending

Guess you like

Origin blog.csdn.net/promise466/article/details/127975279