测试题

1. What’s the time complexity of the following code, and why?

var a = 0;
for (var i = 0; i < N; i++) {   // first iteration
    for (var j = N; j > i; j--) // second iteration
    { 
        a = a + i + j;
    }
}

As far as I could see, there are two iterations above. Let’s run the code step by step. In first iteration, when i = 0, j will iterate from N to 1(N in total); when i = 1, j iterates from N to 2(N - 1 in total). So calculating 2 iterations complexity, will be

N + (N - 1)+ … 1 = (1 + N) * N / 2

Using Big O notation, the complexity is O(n*2);

2. Tell the differences between a byte, a character, and a string. Tell the differences between Unicode, UTF-8, UTF-16, GB2312, and GB18030.

A byte is formed by 8 bits. A bit is a binary digit.

A character is often one byte and in some contexts(e.g. ACSII) can be defined to be one byte in length. However, Unicode and UTF-8 and UTF-16 define expanded character sets wherein a single character can be defined by data payloads longer than one byte in length.

A string is a sequence of characters. Strings are only in human readable form.

The following are the differences between Unicode, UTF-8, UTF-16, GB2312, and GB18030. I found an article which has thorought explanation. So I decide refer the article here instead of ctrl C+V it.

3. What are the mobile and desktop operating systems you use everyday? What applications do you use frequently? Can you name a few of them and tell how they can be improved or have bugsfixed?

I frequently use MacOS, win 11, mac IOS and android system. I almost use them everyday. Further more, I use music/shopping/information App everyday. For example, Youtube, twitter, JD, Toutiao, NetEase Cloud Music/Spotify. Pretty love them.

However, some of the Apps are not very stable. For example, GaoDe Map, the navigation sometimes is not totally accurate. There are tons of reasons: the weak network connection, hardware performance of your phone, the numbers of background Apps(processes) running, the version of mobile system and so on. The solutions which improve the performance or fix the bug are varied, it depends on the specific problem while user meets.

4. What is the difference between Factory and Builder design patterns? What is the difference between Adapter and Decorator design patterns? Give an example for each above pattern.

A factory is simply a wrapper function around a constructor (possibly one in a different class). The key difference is that a factory method pattern requires the entire object to be built in a single method call, with all the parameters passed in on a single line. The final object will be returned.

// Factory
static class FruitFactory {
    static Fruit create(name, color, firmness) {
        // Additional logic
        return new Fruit(name, color, firmness);
    }
}

// Usage
Fruit fruit = FruitFactory.create("apple", "red", "crunchy");

A builder pattern, on the other hand, is in essence a wrapper object around all the possible parameters you might want to pass into a constructor invocation. This allows you to use setter methods to slowly build up your parameter list. One additional method on a builder class is a build() method, which simply passes the builder object into the desired constructor, and returns the result.

// Builder
class FruitBuilder {
    String name, color, firmness;
    FruitBuilder setName(name)         { this.name     = name;     return this; }
    FruitBuilder setColor(color)       { this.color    = color;    return this; }
    FruitBuilder setFirmness(firmness) { this.firmness = firmness; return this; }
    Fruit build() {
        return new Fruit(this); // Pass in the builder
    }
}

// Usage
Fruit fruit = new FruitBuilder()
        .setName("apple")
        .setColor("red")
        .setFirmness("crunchy")
        .build();

Decorator is also called “Smart Proxy.” This is used when you want to add functionality to an object, but not by extending that object’s type. This allows you to do so at runtime.

Adapter is used when you have an abstract interface, and you want to map that interface to another object which has similar functional role, but a different interface.

package Adapter;

public interface Pen {

    public void write(String str);
    
}
// WriteData class implements the Pen interface 
public class WriteData{

   private Pen pen;


    public Pen getPen() {
        return this.pen;
    }

    public void setPen(Pen pen) {
        this.pen = pen;
    }

    public void writeData(String data) {
        pen.write(data);
    }

}


package Adapter.MemoryCard;

public class PilotPen {

    public void writeMem(String str) {
        System.out.println(str);
    }

}


import Adapter.MemoryCard.PilotPen;

public class PenAdapter implements Pen{     // Implement an adapter of pen

    PilotPen pp = new PilotPen();

	@Override
	public void write(String str) {
		pp.writeMem(str);
	}
    
}

Decorator is used to decorate individual objects at run-time. Adapter is used to add features to the class and therefore to ALL of its objects.

5. What computer languages do you master? What’re the pros and cons of each of them?

I learned JS/TS, python and JAVA before. Actually, I’ll say I feel more comfortable using(or mastering) JS/TS than python and JAVA as a FE engineer.

Javascript is sort of interpreted programming language.

Pros:

1. It’s most widely used for web programming, and the web is all-pervasive.
2. It’s ubiquitous, being built into every web browser (remember, the web is all-pervasive). No setup is required to use JavaScript.
3. It’s popular server-side with Node.js.
4. It’s popular for writing cross-platform mobile apps.
5. It’s popular for writing desktop apps.
6. It has a rich ecosystem of frameworks and tools.
7. It has a vast user community.
   …

Cons:

1. Its semantics is very inconsistent. It has numerous flaws that hard to understand.
2. The front-end web framework landscape is such a mess. There are at least a dozen frameworks vying for attention, and it seems like a new framework pops up every month!
3. The update of front-end web framework landscape is very fast, even faster than you expect. It leads to the fact that as a FE developer, one should keep learning otherwise he/she will fall behind.
4. Browser support, a huge headache.
5. For backend applications, Node.js is not widely used like JAVA Spring do.

6. Explain the differences between mutable and immutable objects.

Defination: A mutable object is an object whose state can be modified after it is created. Immutables are the objects whose state cannot be changed once the object is created. Strings and Numbers are Immutable.

In JS, we got Primitive Data types and Non-Primitive Data types. Primitive Data types are been stored on the Stack in our memory. The stack is simply a stack of data that has a “LIFO” (last in, first out) data structure. The following types are Primitive types(Value types):

Numbers, Boolean, String, Null, Undefined, Symbol

The Non-Primitive Data types, also known as reference types, are been stored on the Heap. The Heap, indifference from the stack, has no order of how to store the data. You can think of it as it stores the data randomly, where each of the data has its own address. It is slower to access but has much more space since it handles more complex variables. When storing a reference type in memory, it adds a new element to the top of the stack when its value is a pointer/reference to the address of the object that has been stored on the heap.
Non-Primitive Data types(reference types):

Array, Object, Function, Date, Regex

Each time a value type is been created, a new element gets into the top of the stack and stores the data of that variable. On the other hand, when creating a reference type a new element gets into the top of the stack but this time, it stores the reference/pointer to the address location of the object in the heap. Then, when we assign the created object to a new object variable a new element gets into the top of the stack BUT with the same reference/pointer to the first object.

Therefore, when changing the data of a created object, all other objects that point to the same address location on the heap are being changed also. With that in mind, we can say that a value type is immutable where a reference type is mutable.

7. Use JavaScript to implement the ‘reactive’ and ‘computed’ functions so that the following code works as expected.

const node = reactive({
leftChildren: 1,
// rightChildren: 0
})
console.log(node.leftChildren, node.rightChildren) // 1 undefined
const children = computed(() => node.leftChildren + (parseInt(node.rightChildren) ||
0))
console.log(children.value) // 1
node.leftChildren = 10
console.log(children.value) // 10
node.rightChildren = 2
console.log(children.value) // 12

Answer:

const reactive = (childrenObj) => {
    const _node = {};
    let left = undefined;
    let right = undefined;
    
    Object.defineProperty(_node, 'leftChildren', {
        get() {
            return left;
        },
        set(newVal) {
            left = newVal;
        }
    });
    Object.defineProperty(_node, 'rightChildren', {
        get() {
            return right;
        },
        set(newVal) {
            right = newVal;
        }
    });

    _node.leftChildren = childrenObj.leftChildren;
    _node.rightChildren = childrenObj.rightChildren;

    return _node;
}

const computed = (fn) => {
    const _obj = {};
    let _value = 0;
    const func = fn;
    _value = func.apply(this);

    Object.defineProperty(_obj, 'value', {
        get() {
            if(node && func) {
                _value = func.apply(this, node);
            }
            return _value;
        },
    });

    return _obj;
}

const node = reactive({
    leftChildren: 1, // rightChildren: 0
    })
console.log(node.leftChildren, node.rightChildren) // 1 undefined
const children = computed(() => (parseInt(node.leftChildren) || 0) + (parseInt(node.rightChildren) || 0))

console.log(children.value) // 1
node.leftChildren = 10
console.log(children.value) // 10
node.rightChildren = 2
console.log(children.value) // 12

8. Given a number of rectangles defined by their width, height, and location (x, y) of their top-left corners, how can we insert a new rectangle(with a fixed size) as close as possible to a desired target location, without making it intersect with any existing rectangles?

这道题我选择用中文来回答。

我理解的题意是：有一些长方形（长，宽，位置排列信息）在容器内排列，如何在这个排列内的位置插入一个新的长方形，使它尽量不与其他的长方形相交叠。

大概的思路就是，

1. 按照要插入的位置的（x, y），来计算在容器中的实际位置；
2. 根据实际坐标，能够大概计算到相邻的矩形
3. 根据相邻上矩形和左矩形的相对位置，根据现有矩形的长和宽来绘制当前矩形；最右和下矩形位置，根据长度和宽度来等量的位移。
4. 绘制好当前矩形后，相当于定点（x, y）插入了当前矩形，换句话说，当前插入的矩形覆盖了target location坐标；原来的矩形排列涉及重新绘制

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 miaozixiong@gmail.com