This keyword

  1. This window in a normal function
  2. In the constructor, this is the object created by the current constructor and when we create a new constructor we create an object in memory, and we make this point to the object that we just created
  3. Method refers to whoever calls this method
  4. The source of this event in the event handler will point to whoever called this event and in this case will point to this event source

Call, apply, bind

  • Change the this pointer inside the function

  • call()

    The call method takes the first argument as an object in the function context, but is followed by a list of arguments, not an array.

    functiona(xx) { this.b = xx; } var o = {}; a.call(o, 5); console.log(a.b); // undefined console.log(o.b); / / 5Copy the code

  • apply()

    The Apply method takes two parameters: an object as a function context and an array as function parameters.

    functionadd(a,b) { this.sum = a + b; } var o = {}; The add. Call (o, 5, 5); console.log(o.sum); / / 10. Add the apply (o, (3, 5)); console.log(o.sum); / / 8Copy the code

  • bind()

    Bind () works the same way as call() and apply() to change the context at which a function is run. The difference between bind() and call() is that call() and apply() execute immediately after calling a function, whereas bind() calls and changes the context at run time. Return a new function and call it where we need to.

    var a = 1;
var obj = {
    a=9;
};
function example(b){
    returnthis.a+b }; console.log(example.bind(obj,2)); Var newexample = example(); newexample(); // Call it where it is calledCopy the code

Cross-domain problem

  • Cross-domain cause: The same origin policy of the browser.

    • What is the same origin policy? The same domain name, protocol, and port are the same.

    • Example:

      www.jianshu.com and jianshu.com are different sources because the domain name is different

      www.bilibili.tv and http://www.bilibili.com are different sources because domain names are different

      http://localhost:3000 and http://localhost:3001 are different sources because of different ports

      Qq.com and https://qq.com are different sources, because the agreement is different

      www.pixiv.net and www.pixiv.net/manage/illu. Same origin, because the domain name, protocol, port are all the same

  • How to resolve cross-domain

    1. Backend proxy: There is no cross-domain at the backend
    2. Cros (XHR2) : Sets the request header
    3. Jsonp: there is no cross-domain feature using the SRC attribute of script; Request mode: get
    4. Nginx (the best)

Event delegation (proxy)

  • Event delegation: Using the principle of event bubbling, the child element’s events are delegated to the parent element.

  • The following properties of the event object:

    Target: Gets the element object of the current operation. Compatibility issue: srcElement

  • var oUl = document.querySelector('ul');
 oUl.onclick = function(ev) { var ev = ev || window.event; var element = ev.target || ev.srcElement; // Get the element object of the current operation, alert(element.innerhtml); }Copy the code

for… In iteration and for… Of +forEach

  • The for… The in loop iterates over the property names of the object.

    var a = ['A'.'B'.'C'];
a.name = 'Hello';
for (var x in a) {
    alert(x); // '0'.'1'.'2'.'name'
}
Copy the code

  • The for… The of loop only loops through the elements of the collection itself (cannot traverse objects)

    var a = ['A'.'B'.'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A'.'B'.'C'
}
Copy the code

  • The forEach method

    var a = ['A'.'B'.'C'];
a.forEach(function(element, index, array) {// Element: points to the current element. // index: points to the current index. // array: points to the array object itself. });Copy the code

Array to heavy

  • Deconstruct assignments using ES6 set +

    let arr = [1.2.2.3.3.3.4.4.4.5.6.6.7.8.8.9.9.9.9]
console.log([...new Set(arr)])
Copy the code

  • indexOf

  • Makes use of the unique key-value pair of the object

     var arr = [1.2.3.2.3.4.5.6.7.8.9.8.5];
 
 // Convert an array to an object
 // This property cannot be repeated with object keys
 var toObject = function (array) {
 	var obj = {};
 	for (var i = 0, j = array.length; i < j; i++) {
		obj[array[i]] = true;
    	}
    return obj;
}
// Convert the object to an array
var toArray = function (obj) {
	var arr = [];
    for (var i in obj) {
		arr.push(i);
    }
    return arr;
}

var uiq = function (arr) {
   return toArray(toObject(arr));
}
var arr1 = uiq(arr);
console.log(arr1);
Copy the code

Array flattening

  • reduce

    function flatten(arr) {  
    return arr.reduce((result, item)=> {
        returnresult.concat(Array.isArray(item) ? flatten(item) : item); } []); }Copy the code

    Reduce is a method of arrays that accepts a function as an accumulator, where each value in the array (from left to right) starts to shrink and eventually evaluates to a value.

    Reduce takes two parameters: a callback function and an initial value passed to total

  • toString & split

    function flatten(arr) {
    return arr.toString().split(', ').map(function(item) {
        returnNumber(item); })}Copy the code

  • join & split

    function flatten(arr) {
    return arr.join(', ').split(', ').map(function(item) {
        returnparseInt(item); })}Copy the code

  • recursive

    function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else{ res.push(item); }});return res;
}
Copy the code

  • Extended operator

    function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) { arr = [].concat(... arr); }return arr;
}
Copy the code