Author: Kenmen

Translator: Front-end wisdom

Source: hackr. IO

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Question 1: What is the difference between Java and JavaScript

Java JavaScript
Java is an OOP programming language. JavaScript is an OOP scripting language.
It creates applications that run in a virtual machine or browser. The code runs in a browser or node environment.
Java code needs to be compiled. JS code is all text.

Question 2: What Javascript

JavaScript is a lightweight interpreted programming language with object-oriented features that allow you to build interactivity in otherwise static HTML pages. The common core of the language is embedded in Netscape, Internet Explorer, and other Web browsers.

Question 3: What data types are supported by JS

JS supports the following data types:

  • Undefined
  • Null
  • Boolean
  • String
  • Symbol
  • Number
  • Object

Question 4: What are the features of JavaScript

Here are the features of JS:

  • JS is a lightweight, interpreted programming language.
  • Designed to create network-centric applications.
  • Complement and integrate Java
  • HTML is complemented and integrated
  • Open and cross-platform

Problem 5: JavaScript is case sensitive

Yes, JS is a case sensitive language. Keywords, variables, function names, and any other identifiers must always be used in consistent uppercase letters.

Question 6: What are the advantages of JS

The following advantages of using JS:

  • Fewer server interactions – User input can be validated before pages are sent to the server, saving server traffic and meaning less load on the server

  • Immediate feedback – Users don’t have to wait for the page to reload to see if they forgot to type something.

  • Enhanced interaction – In the interface, users respond when they hover over them or activate them via the keyboard.

  • Rich interface – You can use JS to include drag-and-drop components and sliders to provide a rich interface to your site.

Q7: How do I create objects with JS

JS thieves support the concept of objects, which can be created as follows:

var emp = {
name: "Daniel",
age: 23
};
Copy the code

Q8: How to create an array with JS

Creating an array is also simple:

var x = [];
var y = [1, 2, 3, 4, 5];
Copy the code

Question 9: What is a named function in JS and how to define it:

Named functions declare names immediately after they are defined, using the function keyword:

function named(){
// write code here
}
Copy the code

Question 10: Can you assign an anonymous function to a variable and pass it as an argument to another function

You can. An anonymous function can be assigned to a variable, and it can also be passed as an argument to another function.

Question 11: What is a parameter object in JS & how do I get the type of parameter passed to a function

The JS variable arguments represents the arguments passed to the function. Using the typeof operator, you can get the typeof argument passed to the function. As follows:

function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(7); //==> "number", 1
func("1", "2", "3"); //==> "string", 3
Copy the code

Question 12: What is the scope of a variable in JS

The scope of a variable is the area in the program where it is defined. JS variables have only two scopes:

  • Global variables – A global variable has global scope, which means it is visible anywhere in JS code.
  • Local variables – A local variable is only visible in the function that defines it, and function arguments are always local to that function.

Question 13: In JSthisWhat is the purpose of the “operator”?

The this keyword refers to the object to which it belongs. It has different values depending on where it is used. In a method, this refers to the owner object, and in a function, this refers to the global object.

14. What is a callback

Callbacks are ordinary JS functions passed as arguments or options to a method. It is a function that executes after another function has finished executing, and is therefore called a callback. In JS, functions are objects, so functions can take functions as arguments and can be returned by other functions.

15. What is a closure? For example

The closure is created whenever a variable defined outside the current scope is accessed within an internal scope. It allows you to access the scope of an external function from an inner function. In JS, closures are created every time a function is created. To use closures, you simply define a function within another function and expose it.

Question 16: List some built-in methods and the values they return.

Built-in methods The return value
CharAt() It returns the character at the specified index.
Concat() It concatenates two or more strings.
forEach() It calls a function for each element in the array.
indexOf() It returns the index in the string object called when the specified value first occurs.
pop() It removes the last element from the array and returns it.
push() It adds one or more elements to the end of the array and returns the new length of the array.
reverse() Reverses the order of array elements.

Question 17: What is the variable naming convention in JS?

Follow these rules when naming variables in JS:

  1. We should not use any JS reserved keywords as variable names. For example, the break or Boolean variable name is invalid.

  2. JS variable names should not start with a number (0-9). They must begin with a letter or underscore. For example, 123name is an invalid variable name, but 123name or name123 is a valid variable name.

  3. JS variable names are case sensitive. For example, Test and Test are two different variables.

Question 18: How does the TypeOf operator work

The typeof operator is the data type used to get its operands. Operands can be literal or data structures, such as variables, functions, or objects. It is a unary operator that precedes its single operand and can be of any type. Its value is a string that represents the data type of the operand.

Question 19: How do I create cookies using JS

The simplest way to create a cookie is to assign a string value to the Document. cookie object as follows:

document.cookie = "key1 = value1; key2 = value2; expires = date";
Copy the code

Question 20: How do I use JS to read cookies

Reading cookies is as simple as writing cookies, because the value of the Document. cookie object is cookie.

  • document.cookieValues of are separated by semicolonsname=valueList of pairs, wherenameIs the name of the cookie,valueIs its string value.
  • You can usesplit()Method splits a string into keys and values.

Question 21. How do I delete cookies using JS

If you want to delete the cookie for subsequent attempts to read it, you simply set the expiration date to the past time. We should define the cookie path to ensure that the correct cookie is deleted. If the path is not specified, some browsers will not allow us to delete cookies.

Question 22. What is the difference between an Attribute and a Property

  • Attribute – Provides more details about elements, such as ID, type, value, and so on.

  • Property — Values assigned to attributes, such as type = “text”, value =’Name’, etc.

Question 23: List the different ways to access HTML elements in JS code

Here is a list of methods to access HTML elements in JS code:

  • GetElementById (” idname): according to theidName fetch element
  • GetElementsByClass (‘ classname ‘): gets all elements with the given classname
  • GetElementsByTagName (‘ tagname ‘): gets all elements with the given tagname
  • QuerySelector (): This function takes a CSS style selector and returns the first selected element

Question 24: How many ways can JS code be used in AN HTML file

There are three main types:

  • inline
  • internal
  • external

In-line mode:

. < input type = "button" value = "click a surprise" onclick = "javascript: alert (' ha ha ha ha ')" >...Copy the code

Internal mode:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript"> Function surprise() {alert(' Congratulations on getting a million ')/* popup box */} </script> </head>... </html>Copy the code

External mode:

. <! <script SRC =".. /.. /js/js4.js" type="text/javascript" charset="utf-8"> ...Copy the code

Question 25: What are the methods for defining variables in JS

There are three ways to declare variables in JS:

  • Var – The var statement is used to declare a variable, and we can optionally initialize the value of the variable. Example :var a =10; Variable declarations are processed before code execution.

  • The value of a const-constant cannot be changed by reassignment and cannot be redeclared.

  • The let – statement declares a block-scoped local variable and optionally initializes it to a value.

26. What is a typed language

In typed languages, values are associated with values, not variables, and have two types:

  • Dynamic: In this case, a variable can contain multiple types, such as number, string in JS.

  • Static: In this case, a variable can contain only one type, just as a variable declared as string in Java can contain only one set of characters and no other types.

Problem 27: Cookies are different from Local storage and Session storage

features Cookie localStorage sessionStorage
The lifetime of the data Generally, it is generated by the server. You can set the expiration time. If cookies are generated on the browser side, they are invalid after the browser is closed by default It is stored permanently unless it is removed This parameter is valid only in the current session and is cleared after you close the page or browser
Data storage size About 4 k As a general rule, be 5 MB
Communicates with the server This is carried each time in HTTP headers, and using cookies to store too much data can cause performance problems It is saved only in the client (browser) and does not communicate with the server
Ease of use Requires the programmer to encapsulate, the source Cookie interface is not friendly The source Cookie interface is not friendly. The source Cookie interface can be accepted. It can be encapsulated again to provide better support for Object and Array

Question 28: The difference between ‘==’ and ‘===’

== : If the two values have different types, perform type conversion before comparison. === : do not do type conversion, different types must vary.

In a word: == first converts the type and then compares, === first determines the type, if not the same type directly false.

Question 29: Null and undefined difference

Undefined is the basic data type meaning undefined missing.

Null is a reference data type, is an object, represents an empty object

Undefined is derived from null so undefined==null is true

30. What is the difference between undeclared and undefined?

An undeclared variable is a variable that does not exist and is not declared in a program. If a program tries to read the value of an undeclared variable, it encounters a runtime error. A variable of undefined is declared in a program but given no value. If a program tries to read the value of an undefined variable, the value of undefined is returned.

Question 31: List some JS frameworks

The JS framework is an application framework written in JavaScript, which is different from the JS libraries in control flow. Some of the most commonly used frameworks are:

  • Vue
  • Angular
  • React

Question 32: The difference between Window and Document:

Window :JS window is a global object that contains variables, functions, history, and location.

Document: Document is also under window and can be considered a property of window.

Question 33: The difference between innerHTML and innerText

InnerHTML: The entire content of an object, including the Html tag, from the start position to the end position.

InnerText: The content from the start position to the end position, but it removes the Html tag

Question 34: What is event bubbling in JS

Event bubbling is the way events are propagated in the HTML DOM API when an event occurs within an element of another element and both elements register handles to the event. With bubbling, events are first captured and processed by the innermost element and then propagated to the outer element. Execution starts with this event and goes to its parent element. It then performs the pass to the parent element, and so on, up to the body element.

Question 35: What is NaN

NaN is Not a Number, and the NaN attribute is used to refer to a special non-number value that does Not specify an invalid Number.

The NaN property is the same as the number.nan property.

Tip: Use isNaN() to determine if a value is a number. The reason is that NaN is not equal to all values, including itself.

Question 36: How are JS primitive/object types passed in functions?

One difference between the two is that primitive data types are passed by value and objects are passed by reference.

  • Value passing: means creating a copy of the original file. Think of it like twins: they were identical when they were born, but the oldest of the twins lost a leg in the war, and the second didn’t.
  • Reference-passing: means to create an alias for the original file. When my mother was named Sand Eagle, it wasn’t like I was suddenly a clone of myself, even though my name was Xiaozhi: I was still me, but I could be called a different name.

Question 37: How do I convert an arbitrary base string to an integer in JS

ParseInt (string, radix) converts a string string to integers with radix radix between 2-36, as follows:

parseInt("4F", 16)
Copy the code

Question 38: What is the result of 2+5+ ‘3’

Since 2 and 5 are integers, they will add numerically. Since 3 is a string, it will be concatenated with 7, resulting in 73.

Question 39: What are export and import

Import and export help us write modular JS code. Using import and export, we can split the code into multiple files as follows:

//------ lib.js ------</span> export const sqrt = Math.sqrt; </span> export function square(x) {</span> return x * x; </span> } export function diag(x, y) { return sqrt(square(x) + square(y)); } //------ main.js ------</span> { square, diag } from 'lib'; console.log(square(5)); // 25 console.log(diag(4, 3)); / / 5Copy the code

Question 40: What is “strict” mode in JS and how can it be enabled?

Strict mode is one way to introduce better error checking into your code.

  • When using strict mode, you cannot use implicitly declared variables, assign values to read-only attributes, or add attributes to non-extensible objects.

  • You can enable strict mode by adding “Use strict” to the beginning of a file, program, or function

Question 41: What is the prompt box in JS

A prompt box is a box that allows the user to enter by providing text box input. The prompt() method displays a dialog box that prompts the visitor for input. If you want the user to enter a value before entering the page, a prompt box is usually used. When a dialog box is displayed, you must enter the input value and click OK or Cancel to continue.

Question 42: What is the output of the following code?

var Y = 1;
if (eval(function f(){}))
{
  y += typeof F;
}
console.log(y);
Copy the code

Print 1 undefined. The if conditional statement evaluates using eval, so eval(function f(){}) returns function f(){}(true). Therefore, in an if statement, typeof F returns undefined, because the if statement code is executed at run time, whereas statements in an if condition are evaluated at run time.

Question 43. What is the difference between call and apply

Call and apply can be used to redefine the execution environment of functions, that is, to which this points; Call and apply both exist to change the context in which a function is run, in other words, to change the reference to this within the function body.

Call () calls a method on one object, replaces the current object with another, and inherits the properties of another object. The syntax is:

Function.call(obj[, param1[, param2[, [,...paramN]]]]);
Copy the code

The call method can be used to call a method instead of another object. The call method can change the object context of a function from its original context to the new object specified by obj. If no obj argument is provided, the Global object is used for obj

The apply() method is the same as the call() method, except that the argument list is different.

Function.apply(obj[, argArray]);
Copy the code

Note: If argArray is not a valid array or arguments object, a TypeError will result. If neither argArray nor obj is supplied, the Global object will be used as obj.

Question 44: How do I empty an array in JS

There are a number of ways to empty an array:

Method one:

arrayList = []
Copy the code

The above code sets the variable arrayList to a new empty array. If there is no reference to the original arrayList anywhere else, this is recommended, because it actually creates a new empty array. We should be careful with this method of emptying the array, because if you reference the array from another variable, the original array of references remains unchanged.

Method 2:

arrayList.length = 0;
Copy the code

The above code clears the existing array by setting its Length to 0. This emptying of the array also updates all references to the original array. Therefore, this method is useful when you want to update all reference variables to an arrayList.

Method 3:

arrayList.splice(0, arrayList.length);
Copy the code

This method will also work, of course, emptying the array will also update all references to the original array.

Method 4:

while(arrayList.length)
{
  arrayList.pop();
}
Copy the code

The above implementation can also empty arrays, but it is generally not recommended to use this approach too often.

Question 45: What is the output of the following code

var output = (function(x)
{
  delete x;
  return x;
}
)(0);
console.log(output);
Copy the code

Type 0. The delete operator is used to delete an attribute from an object. Here x is not an object, but a local variable, which is not affected by the delete operator.

Question 46: What is the output of the following code

var X = { foo : 1}; 
var output = (function() 
{ 
  delete X.foo; 
  return X.foo; 
} 
)(); 
console.log(output);
Copy the code

The output is undefined. The delete operator is used to delete attributes of an object. X is an object with a property foo, and since it is a self-calling function, we will remove the property foo from object X. After doing so, when we try to reference a deleted foo attribute, the result is undefined.

Question 47: What does the following code output

var foo = function Bar()
{
  return 7;
};
typeof Bar();
Copy the code

The output will be a reference error. A function definition can have only one reference variable as its function name.

Question 49: Why wrap the entire contents of a JS source file in a function

This is an increasingly common practice, adopted by many popular JS libraries. This technique creates a closure around the entire contents of a file, and most importantly, it creates a private namespace, which helps avoid potential name conflicts between different JS modules and libraries.

Another feature of this technique, which is often used in jQuery plug-ins, is the ability to provide a simple alias for global variables.

Question 50: What are escape characters in JS

The JS escape character allows us to write special characters without breaking the application. The escape character (\) is used to handle special characters, such as single quotes, double quotes, apostrophes, and ampersand, by placing a backslash before the character to make it appear.

Document. Write (“I am a \”good\” boy”)

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: hackr. IO/blog/javasc…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.