website·Indexed 29 days ago
https://mzhujihui.github.ioA comprehensive guide for front-end developers covering JavaScript fundamentals, including data types, inheritance patterns, and sorting algorithms, as well as development norms, Git and GitHub usage, and various front-end utility tools.
Two key concepts in sorting algorithms:
There are several ways to determine the type of a value in JavaScript, depending on whether you are checking for a primitive or a specific object instance:
typeof: Used for basic type checking (e.g., checking if a value is a string or number).instanceof: Used to check if an object is an instance of a specific class or constructor.Object.prototype.toString: Used for more precise type detection of object classes.isXXX methods: Specialized utility methods such as Array.isArray() for checking if a value is an array.Commit messages must follow the @commitlint/config-conventional specification.
Key workflow details:
commitizen tool to assist in writing standardized commit messages.fix or feat are used to automatically generate the changelog.pre-commit hook is active; you must resolve all ESLint errors before a commit can be successfully pushed.develop branch. Feature branches should follow the naming convention feature/<component-name> (e.g., feature/button).Insertion Sort builds the final sorted array one item at a time by taking an element from the unsorted part and inserting it into its correct position within the sorted part.
const insertionSort = (arr) => {
const a = [...arr]
if (a.length <= 1) return a
for (let i = 1; i < a.length; i++) {
const temp = a[i]
let j = i - 1
// Shift elements to the right to create space for temp
for (j; j >= 0; j--) {
if (a[j] > temp) {
a[j + 1] = a[j]
} else {
break
}
}
a[j + 1] = temp
}
return a
}This is the most optimized pattern. It uses a borrowed constructor for instance properties and a parasitic approach (Object.create) to inherit the prototype without executing the supertype constructor twice.
Pros:
Supertype is only called once, avoiding unnecessary properties on the prototype.instanceof and isPrototypeOf() to work correctly.function inheritPrototype(subType, superType){
// Create a copy of the supertype prototype
var prototype = Object.create(superType.prototype)
// Restore the constructor property
prototype.constructor = subType
// Assign the new prototype to the subtype
subType.prototype = prototype
}
function Supertype(name) {
this.name = name
this.colors = ['white', 'black']
}
Supertype.prototype.getName = function() {
console.log('name', this.name)
}
function Subtype(name) {
Supertype.call(this, name)
}
inheritPrototype(Subtype, Supertype);
Subtype.prototype.sayName = function(){
console.log('sayName', this.name)
}
const instance1 = new Subtype('奔驰 S')
instance1.colors.push('blue')
const instance2 = new Subtype('奔驰 G')Bubble Sort repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order. This process is repeated until the list is sorted.
const bubbleSort = arr => {
let swapped = false
const a = [...arr]
for (let i = 1; i < a.length; i++) {
swapped = false
for (let j = 0; j < a.length - i; j++) {
if (a[j + 1] < a[j]) {
[a[j], a[j + 1]] = [a[j + 1], a[j]]
swapped = true // swap data
}
}
if (!swapped) return a // sorting complete if no swaps occurred in this pass
}
return a;
};Quick Sort is a divide-and-conquer algorithm that picks a 'pivot' element and partitions the array into two sub-arrays: elements less than the pivot and elements greater than or equal to the pivot.
const quickSort = (arr) => {
const a = [...arr];
if (a.length < 2) return a;
// Use the middle element as the pivot
const pivotIndex = Math.floor(a.length / 2)
const pivot = a.splice(pivotIndex, 1)[0]
let leftArray = []
let rightArray = []
for (var i = 0; i < a.length; i++){
if (a[i] < pivot) {
leftArray.push(a[i]);
} else {
rightArray.push(a[i]);
}
}
return [...quickSort(leftArray), pivot, ...quickSort(rightArray)]
}Selection Sort repeatedly finds the minimum element from the unsorted part and puts it at the beginning of the sorted part.
const selectionSort = arr => {
const a = [...arr]
for (let i = 0; i < a.length; i++) {
let minIndex = i
for (let j = i + 1; j < a.length; j++) { // find index of minimum value
if (a[ j ] < a[ minIndex ]) {
minIndex = j
}
}
if (minIndex !== i) [a[i], a[minIndex]] = [a[minIndex], a[i]];
}
return a;
}Combination inheritance combines the prototype chain (for methods/prototype properties) and the borrowed constructor (for instance properties).
Caveat: The supertype constructor is called twice (once during new Supertype() for the prototype and once via call() in the subtype constructor), resulting in redundant property assignments on both the prototype and the instance.
function Supertype(name) {
this.name = name
this.colors = ['white', 'black']
}
Supertype.prototype.getName = function() {
console.log('name', this.name)
}
function Subtype(name) {
Supertype.call(this, name)
}
Subtype.prototype = new Supertype()
Subtype.prototype.constructor = Subtype
const instance1 = new Subtype('奔驰 S')
instance1.colors.push('blue')
const instance2 = new Subtype('奔驰 G')This pattern calls the supertype constructor inside the subtype constructor using call() or apply() to inherit instance properties.
Pros:
Cons:
Supertype.prototype).function Supertype(name) {
this.name = name
this.colors = ['white', 'black']
}
Supertype.prototype.getName = function() {
console.log('name', this.name)
}
function Subtype(name) {
Supertype.call(this, name)
}
const instance1 = new Subtype('奔驰 S')
instance1.colors.push('blue')
const instance2 = new Subtype('奔驰 G')