Javascript focuses on organizing notes (to be supplemented and improved)

basic data type

Symbol is new

Break out of the loop by throw new Error

try {
    
     
    var array = ["first","second","third","fourth"]; 
    // 执行到第3次，结束循环 
    array.forEach(function(item,index){
    
     
        if (item == "third") {
    
     
            throw new Error("EndIterative"); 
        } alert(item);// first,sencond 
    }); 
} catch(e) {
    
     if(e.message!="EndIterative") throw e; };

Several attributes of position?

Official analysis:

​ static: Objects follow regular flow. At this time, the 4 positioning offset properties will not be applied.

​relative: The object follows the regular flow, and referring to its own position in the regular flow, it will not affect any elements in the regular flow when it is offset by the top, right, bottom, and left positioning offset attributes.

​ absolute: The object is out of the regular flow. At this time, the offset attribute refers to the nearest positioned ancestor element to itself. If there is no positioned ancestor element, it will go back to the body element. The box's offset position does not affect any elements in the normal flow, and its margins do not collapse with any other margins.

​ fixed: - Consistent with absolute, but the offset positioning is based on the window. Objects don't scroll when scroll bars appear.

​ sticky: The object follows the normal flow when it is normal. It is like a combination of relative and fixed. When it is in the screen, it will be formatted according to the normal flow, and when it is scrolled out of the screen, it will behave like fixed. The performance of this attribute is the adsorption effect you see in reality. (Css3)

Knowledge points: front-end engineer, 2020

^d: match "begins with d"

^d+: match "begins with 1 or n d": dxxx, ddxxx, ddddxx

[^d]: match "subtitles that are not d"

[^d]+: Match "1 or n non-d letters"

​

Ordinary functions can modify variable names, but immediate execution functions cannot modify variable names. I don't know why.

Ordinary function:
function a(){ a = 34; console.log(a) // print result is 34 } a()

Execute the function immediately:
(function a(){ a = 34; console.log(a) //The print result is function a })()

In JavaScript, the following option is correct about this description (A)

• 在使用new实例化对象时,  this指向这个实例对象
  

• 将对象的方法赋值给变量A。执行A()时 该方法中的this指向这个对象。 eg:   var name='test' var a = {    name: 'ass',    getName: function() {    return this.name;   } } var b = a.getName; b();
  

• 在函数定义时,this指向全局变量
  

• 在浏览器下的全局范围内， this指向全局对象
  

Which of the following strings can be matched by the regular expression ^{d+[ d]+?} (C)

A 123

B 123a

C d123

D 123def

regular expression

It is good to master the following in the office. The examples after the up are more professional, you can skip it haha ​​Matching
symbols:
d? 6 times a{2,} a appears more than 2 times a{2,6} a appears 2-6 times Match multiple characters: (ab)+ ab appears more than once OR operation: a (cat|dog) matches a cat or a dog a cat|dog match a cat or dog character class: match data composed of abc [abc] + abc appears more than once abc aabbcc [a-zA-Z0-9] ABCabc123 ^ exclude [^0-9] match 0 Data other than -9 (including line breaks) Metacharacters \d Numeric characters \d+ Match more than one digit \D Non-numeric characters \w Word characters Word numbers Underscores are English characters \W Non-word characters \s Blank characters include spaces and newline \S non-whitespace character \b boundary of word beginning or end of word boundary before word ampersand \B non-word boundary ampersand word-word boundary . arbitrary character not including newline . Represented by \ Translated ^ matches the beginning of the line $ matches the end of the line


























＊+{} greedy matching
https://www.wondershare.com
<.+> will match the whole string because it is greedy matching
<.+?> only matches two tag codes, ➕? is set to lazy matching

One of the following statements about arrow functions is incorrect: (D)

A The point of this in the function body is the object where it is defined, not the object where it is used

B The arguments object cannot be used in the arrow function

C arrow function cannot use yield command

D can use new to create an instance of an arrow function

Methods in arrays — methods that do not change the original array

1.concat() connects the elements into the array.

The concat() method is used to concatenate two or more arrays.

This method does not change the existing array , but just returns a copy of the concatenated array.

2. The every() method uses the specified function to detect all elements in the array:

• ​ If an element in the array is detected to be unsatisfactory, the entire expression returns false , and the remaining elements will not be checked again.
• ​ Returns true if all elements satisfy the condition

3. filter() returns the array elements that satisfy the predicate function.

4. forEach() calls the specified function for each element of the array.

5. indexOf() finds the specified element in the array. Returns the index of the element if found, returns -1 if not found

6. join() converts all elements of the array into strings.

7.lastIndexOf() reverse lookup in the array.

8.map() calculates a new array from the elements of the array.

9.some() tests whether there is at least one array element that makes the predicate function true.

10.slice () returns a part of the array.

11.reduce() calculates a value from the elements of the array.

Parameters receive a function The function receives two parameters. The first is the value of the array, and the second is the initial value. If not passed, it will be 0. The return value of the previous function is the second parameter after the loop call

12.reduceRight() calculates the array from right to left

How to round 7.25 to the nearest whole number (A)

• Math.round(7.25)
  

• Math.ceil(7.25)
  

• Math.floor(7.25)
  

• Math.rnd(7.25)
  

The round() method rounds a number to the nearest integer:

ceil(x) rounds up a logarithm.
floor(x) rounds down x.

random() returns a random number between 0 and 1.

round(x) rounds up.

Official analysis: JS common inheritance methods

Including prototype chain inheritance, borrowing constructor inheritance, composite inheritance, prototypal inheritance, parasitic inheritance, parasitic composite inheritance, and ES6’s new class inheritance, but does not include associative inheritance. Option D is in line with the meaning of the question.

After executing the following statement, the value of a.length is

 a.push(1, 2); //[1,2] 数组末尾添加 1,2
 a.shift(3, 4); //[2]shift（）会删除数组的第一个元素，里面写啥都没用
 a.concat([5, 6]); //[2]拼接数组，会返回新的数组，这里没接收返回的新数组 ，a没变
 a.splice(0, 1, 2); //[2]   删除下标为0的元素，同时替换为 2 

The result of the following expression is true is (C,D)

A /^a[xyz]\d*/.test('^axd')

B /^a[xyz]\d*/.test('^axyz')

C /^a[xyz]\d*/.test('ax')

D /^a[xyz]\d*/.test('axyz123')

Link: https://www.nowcoder.com/questionTerminal/f25e30118d2d48f8a9fbc27142e48b9a?page=1&onlyReference=false
Source: Niuke.com

The foo object has an att attribute, so to obtain the value of the att attribute, which of the following methods are possible: (javascript) ADE

• foo["att"]
  

• foo("att")
  

• foo{"att"}
  

• foo.att
  

• foo[["a","t","t"].join("")]
  

call() and apply() methods in js

Generally speaking, thisit always points to the object that calls a certain method, but when using call()and apply()methods, it will change thisthe pointing, see an example:

function add(a, b) {
    
    
    return a + b;
}

function sub(a, b) {
    
    
    return a - b;
}

console.log(add.call(sub, 2, 1));//3

Why add.call(sub, 2, 1)is the execution result 3? Because call()the method changes thisthe direction, the method that subcan be called add, that is sub, addthe content that is used to execute, let's look at an example:

function People(name, age) {
    
    
    this.name = name;
    this.age = age;
}

function Student(name, age, grade) {
    
    
    People.call(this, name, age);
    this.grade = grade;
}

var student = new Student('小明', 21, '大三');
console.log(student.name + student.age + student.grade);//小明21大三

In this example, we didn't assign values Student​​to nameand age, but there are values ​​for these two properties, thanks to call()the method, which can change thisthe pointing to.
In this example, the representation People.call(this, name, age);of thisis Student, which is what I said before, so that the method in Studentcan be called , because there are etc. statements in it, so the and attributes are created in it.PeoplePeoplethis.name = name;nameageStudent

To sum up, the object in the bracketscall() can inherit the properties of the function outside the brackets .

In JavaScript, depending on how the function is called, this points to different objects

call()
calls a method of an object, replaces the current object with another object, and can inherit the properties of another object. Its syntax is: Function.call(
obj[, param1[, param2[, [,…paramN]]] ]);
obj: This object will replace the this object in the Function class
params: A string of parameter lists
Explanation: The call method can be used to call a method instead of another object, and the call method can change the object context of a function from the initial context to The new object specified by obj, if no obj parameter is provided, then the Global object is used for obj.
The apply()
method is the same as the call() method, except that the parameter list is different. The syntax is:
Function.apply(obj[, argArray]);
obj: This object will replace the this object in the Function class.
argArray: This is an array, which will be passed as a parameter Explanation to Function
: If argArray is not a valid array or not an arguments object, a TypeError will be raised. If neither argArray nor obj is provided, the Global object will be used as obj.

Author: You Xiaogui
Link: https://www.jianshu.com/p/625c35d84a80
Source: Jianshu
The copyright belongs to the author. For commercial reprint, please contact the author for authorization, for non-commercial reprint, please indicate the source.

Four cases of this:

1.以函数的形式调用时，this永远指向window（浏览器）或global（nodejs）
2.以方法的形式调用时，this就是调用方法的那个对象
3.当以构造函数的形式调用时，this就是新创建的那个对象
4.使用call（）和apply（）调用时，this是指定的那个对象

$.each

each traverses the dom object; $.each traverses the data source (array or object)

== and === and Object.is

The ECMAScript specification believes that since null and undefined behave similarly and both represent an invalid value, the content they represent is also similar, that is,

undefined == null;//true

The typeof of [], {} and null are all object.

The types that can be judged by typeof: number, boolean, string, function, object, undefined);

console.log([]===[]);//false
console.log([]==[]);//false

console.log([]==='');//false
console.log(''===[]);//false
console.log(''==[]);//true
console.log([]=='');//true

console.log(''==='');//true
console.log(''=='');//true

console.log(null=='');//false
console.log(''==null);//false
console.log(''===null);//false
console.log(null==='');//false

console.log(Symbol.for('a')===Symbol.for('a'));//true
console.log(Symbol('a')===Symbol('a'));//false
console.log(Symbol.for('a')==Symbol.for('a'));//true
console.log(Symbol('a')==Symbol('a'));//false

WebStorage and Cookies

WebStorage is composed of LocalStorage and SessionStorage

because the essence of localStorage is to read strings. If there is a lot of storage content, it will consume memory space and cause the page to become stuck; and localStorage is synchronous (it will block rendering).

Replenish

:nth-child(n), n starts counting from 1

:nth-child(odd) and :nth-child(even), counting from 1

:nth-child(an+b), n starts counting from 0

pseudo element

• Each selector can contain at most one pseudo-element
  

  pseudo class

• Each selector can contain multiple pseudo-classes
  

  Summarize

• The operation object of the pseudo-element is the newly generated DOM element, not the existing DOM structure; and the pseudo-class is just the opposite, the operation object of the pseudo-class is the element existing in the original DOM structure.

• The fundamental difference between a pseudo-element and a pseudo-class is: whether the object element to be manipulated exists in the original dom structure.

First understand what is sass and what is less

Both sass and less are dynamic style languages, which endow css with some dynamic language features, such as variables, inheritance, operations, functions, etc. 2. Their differences are roughly as follows:
1.
The compilation environment is different:
the installation of sass Those that require a Ruby environment are processed on the server side, while Less needs to introduce less.js to process Less code and output css to the browser. You can also use Less in the development process, and then compile it into a css file and put it directly into the project .
2. Variable symbols are different:
Less is @, while Scss is $
3. Output setting
Sass provides 4 output options: nested, compact, compressed and expanded.
4. Sass supports conditional statements, you can use if{}else{}, for{} loops and so on. And Less does not support it.
\5. Refer to the external CSS file
scss The name of the external file referenced must start with, if the file name starts with an underscore, Sass will consider the file as a reference file and will not compile it into a css file.
6. Sass and Less Different tool libraries
Sass has a tool library Compass
Less has a UI component library Bootstrap

Link: https://www.nowcoder.com/questionTerminal/476c244604d3491ab28cef8e2b8602b8?
Source: Niuke.com

Vue life cycle

Isn't it divided into 4 stages and 8 functions?

beforeCreate created

beforeMount mounted

beforeUpdate updated

beforeDestroy destroyed

arrow function

Arrow functions do not have their own this, but will inherit the this of the upper scope, just like other ordinary variables.
Arrow functions do not support dynamic changes to the value of this, so they cannot pass .call(), .apply(), .bind( ) method to rebind its this value.
Arrow functions do not have an arguments object.
Excessive pursuit of "one-line code" writing of
arrow functions may reduce code readability. The attribute name automatically infers the name attribute with the same name
Link: https://www.nowcoder.com/questionTerminal/476c244604d3491ab28cef8e2b8602b8?
Source: Niuke.com

Vue life cycle

Isn't it divided into 4 stages and 8 functions?

beforeCreate created

beforeMount mounted

beforeUpdate updated

beforeDestroy destroyed

arrow function

Arrow functions do not have their own this, but will inherit the this of the upper scope, just like other ordinary variables.
Arrow functions do not support dynamic changes to the value of this, so they cannot pass .call(), .apply(), .bind( ) method to rebind its this value.
Arrow functions do not have an arguments object.
Excessive pursuit of "one-line code" writing of
arrow functions may reduce code readability. The attribute name automatically infers the name attribute with the same name.
Arrow functions cannot be new, nor will they automatically have the prototype attribute like ordinary functions