Table of contents
1. Multi-dimensional to one-dimensional
2. One-dimensional to multi-dimensional
One-dimensional to multi-dimensional - usage scenario: pagination
3. Determine whether the current element is an array
Fourth, determine whether the current element is an empty object
5. Number Separator: Improve Number Readability
6. Fuzzy box (weird box) and standard box model
This filter can be used to gray out the global page,
Failed to transfer, re-upload, cancelEditEditEdit
8. Find the maximum/minimum value in an array
10. The rendering process of vue's template template
11. Grayscale release (canary release, progressive release)
1. Multi-dimensional to one-dimensional
一、使用forEach 结合 递归处理
function flatData(list,children){
let resList = []
list.forEach(ele => {
if(ele[children]&&ele[children].length>0){
resList=resList.concat(flatData(ele[children]))
}else {
resList.push(ele)
}
});
return resList
}
二、[1,[2,[3]]].join().split(',')
三、[1,[2,[3]]].flat()2. One-dimensional to multi-dimensional
One-dimensional to multi-dimensional - usage scenario: pagination
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var row = 3; var multiArr = []; for (var i = 0; i < arr.length; i += row) { multiArr.push(arr.slice(i, i + row)); } console.log(multiArr);3. Determine whether the current element is an array
[1,2,3] instanceof Array
Array.isArray([1,2,3])
[1,2].constructor ===ArrayFourth, determine whether the current element is an empty object
Object.key/entries/value({}).length>0
console.log(JSON.stringify({})=='{}')5. Number Separator: Improve Number Readability
It is a new addition to ES and may not be supported by old projects. To improve the readability of numbers, you can use underscores as separators to better distinguish the various parts of numbers. Doing so will make the numbers easier to read and understand at a glance, and it will show off to Xiaobai.
var num == 1_110_000;//equal to 1110000
6. Fuzzy box (weird box) and standard box model
The width of the fuzzy box includes padding, content, and border. When padding and border are set, the content will be compressed because the width includes padding/border. Attribute box-sizing: border-box;
The width of the standard box model is only one content, so when we set padding/border, the entire element will expand, and the content will not be compressed. Attribute: box-sizing: content-box;
Seven, css filter attribute
blurry picture
Set attributes for the img tag
filter: blur(5px);
This filter can be used to gray out the global page,
filter: grayscale(1);
Do you still remember that when important festivals such as National Memorial Day, all major websites and software pages are grayed out, this is the
8. Find the maximum/minimum value in an array
Nine, virtual dom
Why is there a virtual dom? Many years ago, when there was no vue and react, after modifying the data, the page was rendered through a large-scale global dom cycle to query the dom to update the data, which consumed a lot of computing resources, a lot more There is no unnecessary performance consumption, so what is the virtual dom, the virtual dom will abstract the page dom element into a nested object (recursively obtained from the dom root node), when we modify the data value, it will be in the virtual dom object What is searched and modified is the attribute of the virtual dom object, and the rendering of the real dom will only be performed after comparing the virtual dom before and after with the diff algorithm.
10. The rendering process of vue's template template
First convert the content in the template into a render function, then mount the instance, recursively form the virtual dom from the render function from the root node, and update the real dom by comparing the new and old virtual dom with the diff algorithm
11. Grayscale release (canary release, progressive release)
Grayscale release is a release method that releases an unstable version for users to use for testing. We often see that the game will select some users to issue some accounts so that everyone can experience new content in advance, and we often see software reminding whether to update to the latest version. It is completely voluntary whether users want to be guinea pigs or not. Developers can test the stability of the server and the fluency of new functions to avoid risks, and then make further adjustments based on user feedback, and then there will be stability. Version release is a win-win strategy.