Interview Miss check 1

Keywords: Front-end Interview

1. About css style penetration

When we use UI library components, scopeds isolate styles and sometimes modify them without removing the scopeds property to cause style overrides between components. At this point we can penetrate scoped in a special way

Outer Container >>> assembly { }

Outer Container /deep/ assembly { }

Outer Container ::v-deep assembly { }  // Recommend

2. Note the important writing in sass

// Writing of pairs
overflow:(hidden !important);
text-overflow:(ellipsis !important);
white-space:(nowrap !important) ;
// No more than one space for wrong writing
overflow: (hidden !important);
text-overflow: (ellipsis !important);
white-space: (nowrap !important) ;

3.css variable global pollution problem (CSS-module)

Configuration Method Specific Baidu

Since css is global, conflicts occur when the variable className is the same.
You can use CSS-module in a webpack file to eliminate global pollution by compiling only style files in the referenced directory.

+ have access to css module Form
+ have access to css in js Form
+ css And like vue Write as a component, but use tools to transform it
1.Fully inline style

2. j-vue 
   [j-vue address](

3. sass Of CSS-BEM Naming Specification

4.Vue watch subcomponent listens for props, the parent component's first rendering cannot be triggered, what to do

Untriggered, no callback, first time
props: {
     name: {
          type: String,
watch: {
     'name': function (value) {
Write complete will trigger immediately
props: {
     name: {
          type: String,
watch: {

5. Talk about how forEach and map stop looping

1. Normal for loop

 When the program runs to continue; Statement terminates the current loop and enters the next one.
It applies to all circular structures.
 When the program runs to break; When you execute a statement, you end the current loop and execute the statement that follows (outside) the loop.
If you have a multi-level loop, only the current loop will exit, executing the statement after that loop, and the outer loop will not be affected.
Generally used with judgment statements
3.return Terminate this method, and subsequent logic will not execute

2. Differences between forEach and map

  • forEach does not support return returns, which are undefined and cannot be called in a chain.
  • map returns a function, the original array is unchanged.
  • There is no way to terminate or jump out of the forEach() loop unless an exception is thrown, so if you want to execute an array and return a Boolean value, you can use a general for loop, or Array.every() or Array.some();
map and forEach You can actually jump out of the loop, but not by yourself
 But throw it out new throw error() adopt try catch To catch this error, you can terminate the loop.

Refer to the Big Slave Blog, please move to the specific analysis

Classic Written Test
["1", "2", "3"].map(parseInt); //Result [1, NaN, NaN]
If you want to[1, 2,3]This should be done
function returnInt(element){
  return parseInt(element,10);

["1", "2", "3"].map(returnInt);  

This is mainly because parseInt()There are two parameters by default, and the second parameter is a binary number. When parsrInt When no parameters are passed in, and map()In the callback function, it will be passed three parameters, the second parameter is the index, obviously incorrect, so return NaN Yes.
forEach()and map()yes ECMA5 Newly introduced, which may not exist in other implementations of the standard, may be required before use Ployfill Once.

$.each()The method specifies the function to run for each matching element and returns false Can be used to stop the cycle early.
var myerror = null;  
          if (el==20) {  
              console.log("try Medium 20,Can I quit??");//  
              foreach.break=new Error("StopIteration");  
         if(e.message==="foreach is not defined") {  
             console.log("Jump out?");//  
         }else throw e;  
     }//Can jump out

3. Substitutes

The difference between for in and for of

  • for in traverses the index (that is, the key name) of the array, while for of traverses the array element values.
for in Trouble traversing arrays
	1.index Index is a string number and cannot be directly geometric
	2.Traversal order may not be in the internal order of the actual array
	3.Use for in All enumerable properties of the array, including the prototype, are traversed. For example, the prototype method of Chestnut method and name attribute
	therefore for in Better for traversing objects, do not use for in Traverse through the array.

for in The index (that is, the key name) of the array is traversed, and for of Array element values are traversed.
for of Iterates through elements within an array, not its prototype properties method And index name

Please move on for more details

6. Shallow and deep copies

6.1 deep copy
1.Circular assignment
2.JSON.stringify(JSON.parse()),But not in objects Function and undefined Can't copy, find pair get Direct conversion of return values inside
 6.shallow copy
1.Object.assign Unable to copy deep content,For shallow copies.
Cannot be applied to objects inside set(),get()Copy with function
2.Object.create Prototype chain inheritance, or shallow copy of content, only copy set and get attribute

const ObjA = Object.create(obj) = 'a' = 'b'

console.log(ObjA) // a
console.log(ObjA.__proto__) //Print an obj object
6.3 Deep copy function
function checkType(any) {
  return, -1)
function clone(any){
  if(checkType(any) === 'Object') { // Copy Object
    let o = {};
    for(let key in any) {
      o[key] = clone(any[key])
    return o;
  } else if(checkType(any) === 'Array') { // Copy Array
    var arr = []
    for(let i = 0,leng = any.length;i<leng;i++) {
      arr[i] = clone(any[i])
    return arr;
  } else if(checkType(any) === 'Function') { // copying functions
    return new Function('return '+any.toString()).call(this)
  } else if(checkType(any) === 'Date') { // Copy Date
    return new Date(any.valueOf())
  } else if(checkType(any) === 'RegExp') { // Copy Regular
    return new RegExp(any)
  } else if(checkType(any) === 'Map') { // Copy Map Collection
    let m = new Map()
      m.set(k, clone(v))
    return m
  } else if(checkType(any) === 'Set') { // Copy Set Collection
    let s = new Set()
    for(let val of any.values()) {
    return s
  return any;

7. Is it possible to write asynchronous in computed properties

computed The result of the property is cached and changes depend on the responsive data
 Defined Function Receive return As a result, return Asynchronous request results are not available when executed synchronously

Learn more about the Event Loop JavaScript runtime: Event Loop

8. Has browser compatibility been written?

Recommended Articles

9.css Centering Problem

  1. flex layout
  2. display: table-cell
  3. Absolute father, two
  4. (with absolute layout) the absolute parent of the child, and the child elements are styled as follows
.father {
  width: 500px;
  height: 500px;
  position: relative;
  background-color: red;
.son {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: black;

10. Differences in how events are monitored in js

Mode 1:
window.addEventListener('click', clickHandler, false);

Mode 2:
window.onclick = clickHandler;
Mode 1 can specify the stage in which the event is triggered (capture or bubble), but mode 2 cannot.
Mode 1 can specify more than one callback function for each event; Mode 2 can only specify one callback function for each event, after which the specified callback function will override the previous callback function

Just record some of the places you think are remote and important during the interview. If there are any errors, please correct them!

Posted by brianb on Fri, 05 Nov 2021 10:02:25 -0700