What is the difference between using link and @import when importing styles?

“Correct answer” :

  1. Link is an HTML tag, and @import is provided by CSS.

  2. The style introduced by link is loaded at the same time as the page is loaded, and the style introduced by @import is loaded after the page is loaded.

  3. Link has no compatibility issues, @import is not compatible with IE5 below.

  4. Link can dynamically introduce stylesheets to change styles by manipulating the DOM with JS, whereas @import cannot.

2 Why does float cause the parent element to collapse?

“Correct answer” :

“When the element is set to float, it automatically leaves the document flow.”

The height of the parent element is adaptive. After the child element is floated, the parent element has no content to support the height, thus causing the height of the parent element to be zero, resulting in the height of the parent element to be zero. (If the parent element is not set to a fixed height, this will not happen if the parent element itself has a fixed height.)

3 how does REM achieve adaptive layout?

“Correct answer” :

Rem is relative to the root element, which means we only need to specify a px font size on the root element to calculate the element’s width and height.

① We can change the size of the button by using JS to control the size of the HTML font in the root element.

② You can also use your own knowledge, using CSS media query to set the page root element font size attribute.

Write a method to reduce the dimension of a multidimensional array

“Correct answer” :

1. With arr. Flat (depth), this method recurses through the array at a specified depth and returns a new array that combines all elements with the elements in the traversed subarray.

let arr = [1, 2, [3, 4, [5, 6, 7]]]

arr.flat(Infinity)

// [1, 2, 3, 4, 5, 6, 7]

Copy the code

Parameters: the depth

Optionally specify the structural depth at which you want to extract the nested array. The default value is 1.

The return value:

A new array containing all the elements of the array and its subarrays.

2. Using reduce, MDN definition: Reduce () method executes a Reducer function (ascending execution) provided by you for each element in the array and summarizes its results into a single return value.

function flattenDeep(arr) {

   return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);

}

Copy the code

3. Use recursion

let arr = [1, 2, [3, 4, [5, 6, 7]]]

/ / recursion

function flat (arr) {

  let ret = []

  for (let i = 0; i < arr.length; i++) {

    if (arr[i] instanceof (Array)) {

      ret = ret.concat(flat(arr[i]))

    }

    else {

      ret.push(arr[i])

    }

  }

  return ret

}

Copy the code

​

5 What is the difference between Document Load and Document Ready?

“Correct answer” :

$(document). Load is a function that is executed after all the page resources are loaded (including DOM document tree, CSS file, JS file, image resource, etc.). The load method is onload event.

$(document).ready() is drawn and executed after the DOM structure is drawn. This ensures that the JS code will execute even if a large number of media files are not loaded.

What is the difference between a window object and a document object?

“Correct answer” :

① Window object:

In client-side JavaScript, the Window object is the global object. All expressions are evaluated in the current environment. No special syntax is required to refer to the current window. You can use that window property as a global variable, for example, you can just write document instead of window.document. You can also use window object methods as functions, such as alert() instead of window.alert. The Window object implements the global properties and methods defined by the core JavaScript.

② Document object:

Represents the entire HTML document and can be used to access all elements in the page. Every HTML document loaded into the browser becomes a Document object. The Document object allows us to access all elements of an HTML page using scripts (JS). The Document object is part of the Window object and can be accessed through the window.document attribute. The HTMLDocument interface is extended to define htML-specific properties and methods. Many of these properties and methods are HTMLCollection objects. It holds references to anchors, forms, links, and other scriptable elements.

How to convert a pseudo-array into a real array

First, let’s talk about what a pseudo-array is.

A pseudo-array is an array-like object also called a class array, and it has a length property.

Typically the argument to the function, and calls to things like getElementsByTagName, document.childNodes, all return NodeList objects that are pseudo-arrays.

It has no array splice, concat, pop, etc.

Now, how do I turn a pseudo-array into a real array?

Suppose you have the following array

let obj = {

    "0": "Little blue".

    "1": "Female".

    "2": 18.

    length: 3

}

Copy the code

1. []. Slice. Call (obj) this is equal to the Array. The prototype. Slice. Call (obj), the method does not modify the original Array, just return a new subarray. Call will put this point to preach in obj instead.

var newArr = [].slice.call(obj)

Copy the code

2.Array.form(obj), new syntax for ES6. The array.from () method creates a new, shallow-copy Array instance from an array-like or iterable.

var newArr = Array.from(obj)

Copy the code

conclusion

Part of the article is quoted from the Internet, if there is any error welcome to point out.

Learning without thought is useless; thought without learning is perilous. – Confucius