Recite 5 every day, be sure to memorize, I hope to find a little help for the small front end of the job

1. Why is JavaScript single-threaded

One of the hallmarks of the JavaScript language is single-threaded, which means you can only do one thing at a time. So why can’t JavaScript have multiple threads? It’s more efficient. The single thread of JavaScript, relative to its purpose. As a browser scripting language, JavaScript’s primary purpose is to interact with users and manipulate the DOM. This means that it has to be single-threaded, which can cause complex synchronization problems. For example, if there are two threads of JavaScript at the same time, one thread adds content to a DOM node, and the other thread removes that node, which thread should the browser use? So, to avoid complexity, JavaScript has been single-threaded since its inception, and this has been a core feature of the language and will not change. In order to make use of the computing power of multi-core CPU, HTML5 proposes the Web Worker standard, which allows JavaScript scripts to create multiple threads, but the child threads are completely controlled by the main thread and cannot operate DOM. So, this new standard doesn’t change the single-threaded nature of JavaScript.

Shallow copy and deep copy

Deep and shallow copies are only for reference data types such as Object and Array. Basic types do not have this problem.

In simple terms, there are two objects A and B, B = A, when you change the properties or methods of A, the value of B also changes, this is called shallow copy. If it doesn’t change, it’s called a deep copy. In reference data types, shallow copies are a problem.

How to implement deep copy?

(1) Use recursive way to achieve deep copy

Parse (json.stringify (obj))** to complete the deep copy, but this method does not solve the function, undefined, circular reference

Object.assign() newObj = object.assign ({}, obj). This method is fine for layer 1 objects, but if the Object attributes are still objects or arrays, it is shallow copy.

var obj = { a: {a: "kobe", b: 39} }; var initalObj = Object.assign({}, obj); initalObj.a.a = "wade"; console.log(obj.a.a); // Wade is a shallow copy of the original objectCopy the code

The situation on the first floor

let obj = { username: 'kobe' }; let obj2 = Object.assign({},obj); obj2.username = 'wade'; console.log(obj); //{username: "kobe"} the original object is not changed, it is a deep copyCopy the code

3. Array deduplication

Method 1: Define a new array, and store the first element of the original array, and then compare the array of elements with the elements of the new array, if not, store in the new array

Method 2: First sort the original array, then compare with the adjacent array, if different, store the new array.

Method 3: Take advantage of the fact that an object property exists, and store it in a new array if it doesn’t.

Array.prototype.unique = function () { var arr = this, obj = {}, result = []; for (var i = 0; i < arr.length; i++) { if (! Obj [arr[I]]) {obj[arr[I]] = 1; result.push(arr[i]); } } return result; }; var a = [1, 2, 3, 1, 2, 3]; var b = a.unique(); console.log(b); // print the result :(3) [1, 2, 3]Copy the code

Method 4 (most commonly used) : Use es6 set, a set data structure that is similar to an array in that the values of its members are unique

let arr= [1, 2, 3, 3, 5, 7, 2, 6, 8];
console.log([...new Set(arr)]);
Copy the code

Method 5: Use the filter function to remove the weight.

var arr = [1, 2, 3, 1, 2, 3]; The console. The log (arr. Filter (= (v, I, arr) > arr. IndexOf (v) = = = I)) / / print the results (3) [1, 2, 3]Copy the code

4, shake, throttling

Buffering: After triggering the high frequency function event, the function can only be executed once within n seconds. If the event is triggered again within n seconds, the time will be recalculated. Generally, the scenario is: user input, only need to re-input after completion of input verification. Throttling: By throttling, we mean that events are fired continuously but the function is executed only once in n seconds. Throttling dilutes the execution frequency of the function. Common usage scenario: the scrollbar event or resize event is executed every 100 to 500 ms

Function debounce(func, wait){let timeout; return function(){ if(timeout){ clearTimeout(timeout) } timeout = setTimeout(() => { func.apply(this, arguments) }, Function throttle(func, wait){let timeout; return function(){ if(! timeout){ timeout = setTimeout(() => { timeout = null; func.apply(this, arguments) }, wait) } }}Copy the code

5. Array manipulation

  • Map 【 commonly used 】: Traverses an array of numbers, returning a new array of callback returns

  • ForEach 【 commonly used 】: cannot break; can be stopped by throwing new Error in a try/catch

  • Filter 【 commonly used 】: Filter

  • Some: If one of the entries returns true, the whole is true

  • Every: One of the items returns false, the whole is false

  • Join [often used] : Generates a string by specifying a join

  • Push/POP: Push and pop at the end to change the array, push returns the length of the array, pop returns the last item of the array;

  • Unshift/shift: Push and pop the header to change the array. Unshift returns the length of the array, shift returns the first item of the array.

  • Sort (fn)/reverse: sort(fn)/reverse

  • Concat 【 commonly used 】 concatenate an array, not affecting the original array, shallow copy

  • Slice (start, end): Returns the truncated array without changing the original array

  • splice(start, number, value…) 【 common 】: Returns an array of deleted elements, value is the insert item, change the original array

  • IndexOf/lastIndexOf(value, fromIndex): Finds an array entry and returns the corresponding subscript

  • Reduce/reduceRight(fn(Prev, cur), defaultPrev): Perform in pairs, prev is the return value of the last reduction function, and cur is the current value

    • When defaultPrev is passed in, start with the first item;

    • When not passed in, the second item

In line with the front end of the job for a little help in the original intention, learn from the nuggets inside a lot of big man’s article, if there is infringement please inform