Ten questions front end surface (3)

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/weixin_43572937/article/details/102681696

1. Handwritten look deep copy
2. The difference between == and ===
3. Write a method to extract what search parameters inside
4. I do not know about the write element width and height of the vertical and horizontal centering method
5. The difference between 301 and 302
6. git commands
7. JS basic data types
8. Css priority selector
9. Element, the difference block elements inline
10. What css pseudo-element

---

1. handwritten look deep copy

1. Shallow copy: just copy a reference to the address of the image, two objects point to the same address, in which a change, another change too.

2. Deep copy: refers to a change in a property of the object, another object does not change

Implement deep copy:

1. Create a new object, cycle recursive deep copy

Click determine a reference type is an array or object method

function deepClone(obj){
	let newObj;
	// 先判断数据类型
	if(obj.constructor === Array) {    // 数组
		newObj = [];
		for(const item of obj) {
			newObj.push(item);
		}
	} else if(obj.constructor === Object) {    // 对象
		newObj = {};
		for(let key in obj){
			newObj[key] = deepClone(obj[key]);
		}
	} else {
		return obj;
	}
	return newObj;
}

2. Using the JSON.parse(JSON.stringify(obj))method of implementation of deep copy

function deepClone(obj){
	return JSON.parse(JSON.stringify(obj));
}

---

2. The difference between == and ===

1. == comparison process

• If the two values of the same data type, and then compare the values, the same returns true, returns differentfalse
• If the two values ​​of different data types, data type conversion, conversion rules are as follows:

(1) If one is null, one is undefined, they are equal
(2) If a value is a string, then the string into a numerical comparison

null == undefined;   	 // true
'1' == 1;    			 // true
'true' == true;      	 // false

2. === comparison process

• If they are different from the data type returned directlyfalse

使用 === 返回true时，说明比较的两个数据不仅类型相同，而且值也相等

使用 == 返回true时，二者数据类型不一定相同，但是转换为相同类型后的值一定相等

⚠️ NaN不等于任何值，包括本身

---

3. search inside the parameters of a method of extracting write about

?id=1&num=123

Regular Expressions Gets the specified parameters

function getUrlParam(name, search){
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    let r = search.substr(1).match(reg);
    if (r!=null) {
   		 return unescape(r[2]);
    }
 return null;
}

getUrlParam('num', '?id=1&num=123');    // 123

---

4. Write not know about the width and height of vertical and horizontal centering element method

1. display:table-cell
   Combination display:table-celland vertical-align、text-alignthe horizontal and vertical elements in all rows in the middle of the parent element (internal divsettings display:inline-blockcan).

2. transform:translate(-50%,-50%)

3. Elastic layout

display:flex;
justify-content:center;
align-items:center;

---

The difference between 5.301 and 302

1. 301 is a permanent redirect. Indicate the requested resource has been moved permanently to a new URI, and returns the new URI, and the browser will be automatically directed to the new URI, any future new request, you should use the new URI
2. Temporary move. And 301 similar, temporary resources are moved, continue to use the original URI

Click for more http status codes

---

6. git commands (Click to view)

---

7. JS basic data types

1. String
2. Number
3. Boolean
4. null
5. undefined

---

Priority 8.css selector

css priority level sorting:! important> inline style> ID selector> class selector> tag> wildcard> inherited> Browser default property

---

9. The inner element row, the difference between block-level elements

1. Block elements will be on a separate line, the width of its parent element within the automatic fill line width of a line element is not exclusive, the adjacent row element will be arranged in the same row, the row line know less than, the line will change, with the width of the content element change

2. In general, the block elements may be provided width,heightattributes, the element is provided inline width, heightvoid (⚠️: block elements are provided, even if the width remains the exclusive line)

3. Block elements may be provided marginand paddingthe horizontal direction in the row of elements padding-left,padding-right,margin-left,margin-righthave the effect of generating margins, but the vertical direction padding-top,padding-bottom,margin-top,margin-bottomwill not produce the effect of the margins. (Horizontal active, inactive, vertical direction)

---

10. css pseudo-element which

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

1. :active Add style to an activated element.
2. :focus Add style to the element that has the keyboard input focus.
3. :hover When the mouse was suspended in the above elements, adding elements to the style.
4. :link Add style to unvisited links.
5. :visited Add style to the link has been visited.
6. :first-childAdd style to the first child element.
7. :lang Add style to the element with the specified lang attribute.
8. :first-letter Add special style to the first letter of the text.
9. :first-line Add special style to the first line of text.
10. :before Before adding content elements.
11. :after Add content after the element.