Arr = [a1, A2, A3, B1, B2, b3, c1, c2, c3…] , the array is split by algorithm and converted into arrays a1, B1, C1], [A2, B2, C2], [A3, B3, C3] in the following format, and the universal formula is realized.
Reference answer:
/** * arr array to sort * result Array of calculated results */
function rangeArr(arr = [], result = []) {
arr.forEach(item= > {
let i = /\d*$/.exec(item)[0]
result[i] ? result[i].push(item) : (result[i] = [item])
})
return result.filter(Boolean)}Copy the codeQuality answer:
2. Assume that set A = {A, b}, set b = {0, 1, 2}, the two sets of cartesian product for {(A, 0), (A, 1), (A, 2), (b, 0), (b, 1), (b, 2)}. When A={A, b… , n}, B={0, 1, 2, … The Cartesian product at n}.
The Cartesian product is, in mathematics, the Cartesian product of two sets X and Y, also known as the direct product, expressed as X × Y, where the first object is a member of X and the second object is a member of all possible ordered pairs of Y.
Reference answer:
/* * @Author: Mr Jiang.Xu * @Date: 2019-08-31 00:05:33 * @Last Modified by: Mr Jiang.Xu * @Last Modified time: The 2019-08-31 00:05:33 * /
function cartesian(arr) {
if (arr.length < 2) return arr[0] | | [];return [].reduce.call(arr, function (col, set) {
let res = [];
col.forEach(c= > {
set.forEach(s= > {
let t = [].concat(Array.isArray(c) ? c : [c]); t.push(s); res.push(t); })});return res;
});
}
Copy the code3. Native JS implements a Set data type, and realizes the difference Set, union Set, complement Set and intersection of sets
// Create set and implement intersection, difference, complement, and union
function MySet() {
let items = {}
// Check whether the value exists
this.has = function(val) {
return val in items
}
/ / add
this.add = function(val) {
if(!this.has(val)) {
items[val] = val
return true
}
return false
}
/ / remove
this.remove = function(val) {
if(this.has(val)) {
delete items[val]
return true
}
return false
}
/ / to empty
this.clear = function() {
items = {}
}
/ / size
this.size = function() {
return Object.keys(items).length
}
/ / value
this.values = function() {
return Object.keys(items)
}
/ / and set
this.union = function(otherSet) {
let unionSet = new Set(a)let values = this.values()
for(let i=0; i < values.length; i++) {
unionSet.add(values[i])
}
values = otherSet.values()
for(let i=0; i < values.length; i++) {
unionSet.add(values[i])
}
return unionSet
}
/ / intersection
this.intersection = function(otherSet) {
let intersectionSet = new Set(a)let values = this.values()
for(let i=0; i<values.length; i++) {
if(otherSet.has(values[i])) {
intersectionSet.add(values[i])
}
}
return intersectionSet
}
/ / difference set
this.difference = function(otherSet) {
let differenceSet = new Set(a)let values = this.values()
for(let i = 0; i < values.length; i++) {
if(! otherSet.has(values[i])) { differenceSet.add(values[i]) } }return differenceSet
}
/ / the subset
this.subset = function(otherSet) {
if(this.size() > otherSet.size()) {
return false
}else {
let values = this.values()
for(let i=0; i<values.length; i++) {
if(! otherSet.has(values[i])) {return false}}return true}}}Copy the codeOther good answers:
4. Given an object of arbitrary nested structure, use your familiar algorithm to output the properties of the object hierarchically into an array. As follows:
Reference answer:
[1,2,2,3,4,5,4] => [2,4]
6. Input a positive number N and output all consecutive sequences of positive numbers whose sum is N. For example, enter 15. The result is [[1, 2, 3, 4, 5], [4, 5, 6], [7, 8]].
[High quality solution]
7. Given that the radius of the circle is 1, javascript algorithm is used to realize that different coordinate values are returned each time, and the coordinate values are all in the circle.
[Reference method]
function generateRandomPos() {
// Cache existing coordinates
const cache = {}
// Circular boundary
const boundRect = [-1.1]
// Generate random values between -1 and 1
const random = () = > boundRect[+(Math.random() > 0.5)] * Math.random()
return generate()
function generate() {
// Generate x,y coordinates
let x = random(),
y = random()
// According to Pythagorean theorem, the sum of squares of xy should be less than or equal to 1, and the same coordinates have not been generated before
if(Math.pow(x, 2) + Math.pow(y, 2) < =1 && !cache[`${x}${y}`]) {
return cache[`${x}${y}`] = [x, y]
}else {
return generate()
}
}
}
Copy the code8. Use native javascript to implement a virtual DOM and its basic rendering API.
[Reference method]
Implementation steps:
- Using JavaScript object structure to represent the DOM tree structure; You then use that object to build a real DOM tree and plug it into the document
- When the state changes, a new object tree is rebuilt. Then compare the new tree with the old one, and note the differences between the two trees
- The differences recorded in step 2 are applied to the real DOM tree built in Step 1, and the view is updated
The Virtual DOM is essentially a cache between JS and DOM. The implementation code is as follows:
Function Element (tagName, props, Children) {this.tagName = tagName this.props = props this.children = children Function () {let el = document.createElement(this.props) // Build let props = this.props for (let propName in Props) {// set the DOM attribute of the object. Let propValue = props[propName] el.setAttribute(propName, propValue) } let children = this.children || [] children.forEach(function (child) { let childEl = (child instanceof Element) ? Child.render () // If the child node is also a virtual DOM, recursively build the DOM node: Document.createtextnode (child) Only build a text node el. The appendChild (childEl) return el}}) / / update logic Element. The prototype. UpdateElement = function (root, newEl, oldEl. index = 0) { if (! oldEl){ root.appendChild(newEl.render()); } else if (! newEl) { root.removeChild(root.childNodes[index]); } else if ((typeof newEl ! == typeof oldEl) || (typeof newEl === 'string' && newEl ! == oldEl) || (newEl.type ! == oldEl.type)) { if (typeof newEl === 'string') { root.childNodes[index].textContent = newEl; } else { root.replaceChild(newEl.render(), root.childNodes[index]); } } else if (newEl.tagName) { let newLen = newEl.children.length; let oldLen = oldEl.children.length; for (let i = 0; i < newLen || i < oldLen; i++) { this.updateElement(root.childNodes[index], newEl.children[i], oldEl.children[i], i) } } }Copy the codeThe last
If you want to know more about H5 games, Webpack, Node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and practice, welcome to join us in the public account “Interesting Talk Front-end” to learn and discuss, explore the frontier of the front-end together.