JavaScript For Beginners (Part 2)

JavaScript data types

Basic data type

NaN: Not a number Infinity Boolean: True,false or a type that can be implicitly converted to true or false

0, empty string, NULL,undinfed,NaN,false string: characters defined with ” or “”, or ”
Var str2= 'hello,${STR}' var str3= 'hello,${STR}' null:typeof null Object undefined: undefined: undefinedCopy the code
The difference between the null, and undefined: www.ruanyifeng.com/blog/2014/0… Symbol: new data type in ES6, defined using the Symbole() function to represent the uniqueness of the value of the defined variable

Reference data types (complex data types)

Object,Array,Function,RegExp,String

An object type can add properties to check whether an object is a property of the object itself: hasOwnProperty

for(var key in obj) {

if(obj.hasOwnProperty(key)) {
  console.log(obj[key]) }
Copy the code
}

2, Array: Array

Array methods stack methods: push() : add tail pop: delete tail unshift: add head shift: delete head splice: add, delete, and replace any part of the array

Arr. splice(2,0,' full stack 1909A') Arr.splice (4,2,' I'm going to ali ')Copy the code

The built-in array traversal method:

The forEach () : ForEach returns undeifned filter(): filters, iterates over the elements of the array that meet the condition, returns the new array map(): processes the original array to get a new array Reduce (): merges, FindIndex () finds the subindex find() finds every element in the array that matches every() returns true, Otherwise, false some() returns true as long as one of them is true. Otherwise, false includes() determines if the array contains a value. If yes, returns true, and if no, returns false

Flattening methods: 1. The toString implementation For example: var arr = [5,5,5,5, [2, 4, [2, (23, 5), 6], 7], 3,2,2,5] arr. The toString (). The split (', '). The map (item = > item * 1) 2. Function flatFn(arr) {var result=[]; if(! (arr instanceof Array)) return; for(var key in arr) { result=result.concat(Array.isArray(arr[key]) ? flatFn(arr[key]) : arr[key] ) } return result; } 3. Flat () //ES2019 publishing methodCopy the code

Array reference: developer.mozilla.org/zh-CN/docs/… ce

2. Class array:

What is a class array? Also known as pseudo array LikeArray, can only get the number by length, and specify a specific element by subscript, but can not use array API methods

Array-like usage scenarios: get the DOM collection, arguments,…

How to convert a class array to an array

1. Array. The from (Array) or […] class Array (2) Array. The prototype. Slice. Call (Array)

ES1.0 1997 ES2.0 1998 ES3.0 1999 ES4.0 failed ES5.0 2009 ES5.1 2011 ES6 2015. Since then, a new version has been released every year ES7 2016 ES8 2017……

The official ECMA Script repository can be updated at github.com/tc39/propos…

3. String: String

Trim () removes the left and right Spaces from the string

Don’t trim, you encapsulate a trim function trim (STR) {var reg = / ^ \ s + | \ s + $/ g return STR. Replace (reg, ‘ ‘)}

String.prototype.quchukongge=function() { var reg=/^\s+|\s+$/g return this.replace(reg,”) }

ToUpperCase () toUpperCase toLowerCase() toLowerCase substr() to take substring str.substr(start position, take several) substring(start substring, Split () turn the string to array join: turn the array to string slice(start subscript, end subscript) Turn the substring replace(find the string or match the re, replace the content) replace indexOf() find, return the subscript, Does not return -1 includes()

4. Math Object

Math.abs() : Take the absolute value

Math.random() Random value range: 0~~~~1

Return do any numeric range start-end range

Number = y – x + 1

X =10,y=20 11 num=y-x+1 Quantity =11 Start value: 10 Formula: math.floor (math.random ()* quantity)+ start value

// end: function randomIndex(start,end) {

var num=end-start+1
Copy the code

return Math.floor(Math.random()*num)+start }

Math.foor() is rounded down

Math.ceil() is rounded up

Math.round() to round

Math. Max () of great value

Var arr = 32,34,54,234,234,235,534,235,2] [23,3,34,23,24, –

Math.max.apply(Math,arr) Math.min.apply(Math,arr) Math.min.call(Math,… arr) Math.max.call(Math,… arr)

Math. Min (small) value

A. this b. this C. this D. this

Check whether it is a mobile terminal, if it is, jump to the mobile page

try {
  if (location.search.indexOf('? pc')! = =0 && /Android|Windows Phone|iPhone|iPod/i.test(navigator.userAgent)) {
    window.location.href = 'https://xw.qq.com?f=qqcom'; }}catch (e) {}
this*///1. Call this (window) directly
//console.log(this===window)

/* function Fn() { console.log('Fn:',this) //this.name='1909A' } //Fn()Copy the code

Var f1=new Fn(); //2.

//3. Functions belong to objects

/* var obj={ name:'1909A', Fn:function() { var hehe=function() { console.log('this===window:',this===window) console.log('this===obj:',this===obj) //console.log('this===Fn:',this===Fn) } hehe() } } obj.Fn(); * /
Copy the code

//4. This on the timer
/* var obj={ name:'1909A', Fn:function() { setTimeout(function() { console.log('this===window:',this===window) console.log('this===obj:',this===obj) },0) } } obj.Fn(); *Copy the code

/ / 5. DOM in this

var btn=document.querySelector('#btn')
btn.onclick=function() {
  // let _this=this;
   setTimeout(() = > {

        console.log(this===btn)
   },0)
Copy the code

}

Summary: : This is usually who calls, who this refers to, is it really so?

var name='ok'

var obj={
   name:'alice'.getName:function() {

     console.log(this.name)

  }
 
}

(false || obj.getName)()
Copy the code

Six, call, apply, bind

Call,apply, and bind are all used to change the point to this

The difference between:

The different refs

Call is passed as a comma-separated parameter

Call (target object, parameter 1, parameter 2… Parameters n)

Call (obj, obj, obj, obj, obj, obj)

The apply parameter is passed as an array

The function name. The apply (target, [parameters parameters 1, 2,… n]), for example: getName. Apply (obj, [‘ fifty and 11, 25, ‘Shanghai’])

Bind passes arguments in the form of commas

Getname.bind (obj,’ obj 11′,25,’ Shanghai ‘)() or getName.bind(obj)(‘ obj 11′,25,’ Shanghai ‘) is executed

Call getname.bind (obj)() call getname.bind (obj)()

Call implementation principle (do not call, their own manual simulation to achieve a call function)

Call is a function-based implementation that adds a temporary function to the target object, handles the assignment, receives the parameters, and then deletes the temporary function instantiating the object =newConstructor ()// The constructor is also called a class. A class can generate multiple instantiated objects

var f1=new Function(a)// In the constructor this===f1 is always equal
var p1=new Person() // This ===p1 is always equal
// Call simulation code:
Function.prototype.call2 = function (context) {
    // The target object
    context = context || window;

    //this=== the instantiated function, which is essentially an object

    // Add a temporary function to context
    context.fn = this;

    // Accept arguments to handle arguments
    console.log('arguments:'.arguments)
    var args = [];
    for (var i = 1; i < arguments.length; i++) {

       // ["arguments[0]", "arguments[1]", "arguments[2]"]
        args.push('arguments['+i+'] ')
       // args.push(arguments[i])
    }

     // Execute the context.fn() function by passing the arguments
     eval('context.fn(' + args + ') ')
    
    
    // Delete the temporary function
    delete context.fn

    
}
Copy the code

Apply principle Function. The prototype. Apply2 = Function (context, arr) {/ / target object context = context | | window;

// add a temporary function context.fn = this; // add a temporary function context.fn = this; if (! Arr) {context.fn()} else {var args = []; for (var i = 0; i < arr.length; i++) { // ["arguments[0]", "arguments[1]", "The arguments [2]"] args. Push (' arr [' + I + '] ') / / the args. Push (the arguments) [I]} / / the execution context. The refs fn eval () function (' context. The fn (' + + args } // Delete the temporary function delete context.fnCopy the code

}

Principle of BIND

var obj = {
    init: 1.add: function(a, b) {
        return a + b + this.init;
    }
}
obj.add(1.2); / / 4
 
var plus = obj.add;
plus(3.4); // NaN, because this. Init does not exist, where this refers to window/global
 
plus.call(obj, 3.4) / / 8
plus.apply(obj, [3.4]); // 8. The difference between apply and call is that the second argument is an array
plus.bind(obj, 3.4); // Return a function. This is one of the differences between bind and call/apply. Bind does not execute immediately
Copy the code

To sum up, simply use bind to change the point to this, and the difference between this and call/apply has a deferred effect

7. The realization principle of new

The characteristics of the new

New a constructor that automatically reutrn an instantiated object
The new completed instantiation object ____proto___ automatically points to the constructor’s prototype
The new constructor passes arguments that are automatically assigned to the currently instantiated object

Eight, shake and throttling

If the concept

If no event is triggered within a fixed time, it will be triggered after the end of the fixed time. If the event is triggered within a fixed time, it will be triggered after the extended fixed time

// Use the timer to realize shaking
function debounce(func,wait) {
    var timer=null;
    return function() {
    // Save the currently invoked DOM object
     var _this=this;
     // Save the event object
     var args=arguments;
     clearTimeout(timer)
     timer=setTimeout(function() {
         func.apply(_this,args)
     },wait)
    }

}
Copy the code

Throttling concept:

Regardless of whether an event is triggered within a fixed time, it will be triggered at a fixed time

There are two ways to do this

The first is timestamp

// The timestamp version implements throttling
function throttle(func,wait) {
    // Define the initial time
    var oldTime=0;

    return function() {
        var _this=this;
        var args=arguments;

        // The current timestamp
        var newTime=+new Date(a);// The current time is subtracted from the old time. If the time is greater than the time specified in wait, it is triggered
        if(newTime-oldTime>wait) {
            // Execute the triggered function
            func.apply(_this,args)
            // Update the old timeoldTime=newTime; }}Copy the code

Second: timer

// The timestamp version implements throttling
function throttle(func,wait) {
    var timer=null;

    return function() {
        var _this=this;
        var args=arguments;
       if(! timer) { timer=setTimeout(function() {
                timer=null;
                func.apply(_this,args)
            },wait)
       }
    }
}
Copy the code

Of course, if you are not proficient in the above, you can use the current market mainstream tool library: Lodash already provides a comprehensive tool method

For details, please refer to the Lodash website: www.lodashjs.com/

2, Array: Array

3. String: String

4. Math Object

A. this b. this C. this D. this

Six, call, apply, bind

7. The realization principle of new

Eight, shake and throttling

Related Posts

Write a simple vuex to understand the principle of VUex

NodeJs Interactive command line tool Inquirer. Js – Unboxing guide

ES Modules are now supported in Node.js V13.2.0