Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan ยท April More text challenge”, click to see the details of the activity.

preface

I saw a tweet

“50 Most Popular javascript Entry Level Interview Questions, This Post could Make or break your $100K a year Job Interview”

50 of the most popular javascript entry level interview questions. This thread could make or break your next interview for a $100k/year job

๐Ÿ‘‰ twitter address

The article lists 50 entry-level JavaScript questions that are low in difficulty but don’t provide answers.

Several topics also examine development specifications, such as GitFlow flow and RESTful architecture

After I collate, paste the answer to add some explanation, example.

directory

  1. What’s the difference between Java and JavaScript
  2. What data types JavaScript has
  3. What is the DOM
  4. What is a variable
  5. What is an array
  6. What is an object
  7. What is a function
  8. What is a higher-order function
  9. What is a JSON
  10. What’s the difference between a local variable and a global variable
  11. What is the difference between var, const, and let
  12. The difference between =, ==, ===
  13. Explains the.pop() and.push() methods of arrays
  14. What is arrow function =>
  15. What is Typescript and how is it different from JavaScript
  16. What is Promise, for example, chestnuts
  17. What is the async/await
  18. What is the difference between a “break” and a “continue” statement
  19. How do I check if an object has a property
  20. How do I check if an array contains a value
  21. How do I check the length of an array
  22. What’s the difference between a for loop and a while loop
  23. When to use “&”, when using “| |”
  24. What is a ternary operator
  25. How do I create an object in JavaScript
  26. How do I create an array in JavaScript
  27. What is this
  28. What is the callback
  29. What are the rules for naming variables
  30. How to read cookies
  31. What is the difference between localStorage and sessionStorage
  32. What’s the difference between null and undefined
  33. List some Javascript frameworks
  34. What are export and import
  35. How do I get HTML elements in Javascript
  36. How to invert strings
  37. What does ‘use strict’ do
  38. Describes the workflow of GitFlow
  39. How to update your local repository with Git
  40. What is clear cache and how is it implemented
  41. What is the NPM
  42. What is RESTful architecture
  43. What is XSS?
  44. Describes what “dynamic typing” means in JavaScript
  45. What’s wrong with JavaScript
  46. How do I write tests for Javascript code
  47. Write a loop that prints the numbers from 1 to 200 divisible by 5
  48. Write a function that takes two arguments and returns the product of the arguments
  49. Write an HTML page with a P tag
  50. Create a JS object with first name, last name, and ID attributes, and a function to return the full name

1. What is the difference between Java and JavaScript

๐Ÿคก Their relationship is just like Lei Feng and Lei Feng pagoda, wife and wife cake, cow and snail, except the name is like completely different.

  1. JavaScript doesn’t need a compiler to run; Java needs a compiler.
  2. JavaScript is a weakly typed language; Java is a strongly typed language, and variable types are checked at compile time
  3. JavaScript objects are based on prototypes; Java objects are based on classes
Java JavaScript
A programming language Scripting language
Need to compile You don’t need to compile
Strongly typed language Weakly typed language
Object based prototype Object based on class

2. What data types JavaScript has

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

๐Ÿ’ก Symbol is an ES6 new data type that represents unique values.

3. What is DOM

Full name Document Object Model (Document Object Model), is a tree with HTML elements as nodes.

Provides JavaScript with an interface to manipulate HTML, such as querying elements, modifying elements, creating elements, deleting elements, etc.

4. What are variables

Variables are containers used to store data and are divided into local and global variables in JavaScript, defined using let and var

5. What is an array

Arrays store multiple values in a variable

Var names = [‘ xiao Ming ‘, ‘Xiao Hong ‘,’ Xiao Gang ‘]

6. What is an object

An object is an unordered collection of data consisting of “key-value pairs” whose value can also be Function

const person = {
    uid: '1838039173968382'.name: 'Maokai'
}

console.log(person)  // ๐Ÿ‘‰ {name: "Maokai", uid: "1838039173968382"}
Copy the code

What is a function

A function is a “subroutine” (a set of tasks or statements that evaluate values) that can be called externally. The contents of the function are written inside {}, and the function must be defined before being used

/ / define
function add(){
    let rers = 1 +2
    console.log(rers)
}

add() / / ๐Ÿ‘‰ 3
Copy the code

8. What are higher-order functions

Function arguments that can be passed to another function are higher-order functions, commonly used higher-order functions: map(), reduce(), filter()

const arr = [1.2.3]

const arr2 = arr.map(item= > item * 2)

console.log(arr2) / / ๐Ÿ‘‰ [2, 4, 6]
Copy the code

9. What is JSON

JSON is a data format consisting of unordered key-value pairs, similar to JavaScript object syntax.

  • JSON strings must be quoted in double quotes
  • JSON does not represent functions
  • JSON cannot represent undefined
{
	"name": "Maokai"."uid": "1838039173968382"
}
Copy the code

10. What is the difference between a local variable and a global variable

Different scope

Global variables: Defined outside the function and accessible anywhere in the JavaScript code.

Local variables: Defined inside a function and can only be accessed inside a function, i.e. in {}.

// Global variables
var uid = '1838039173968382'

// Local variables
function action(){
	let user = 'Maokai'
}

console.log(uid)  / / ๐Ÿ‘‰ '1838039173968382'
console.log(user) // ๐Ÿ‘‰ user is not defined
Copy the code

What is the difference between var, const, and let

The scope of the var declaration is global or within a function, and there is variable promotion

The scope of the let declaration is within the code block {}, and there is no variable promotion

Const declares a constant and cannot change its value

Const The declared constant, which can be modified if it is a reference type

12. The difference between =, =, ==

= is the assignment operator

Both == and === are comparison operators. The main difference is that the == operator only compares two values for equality, whereas the === operator requires not only equality but also the same type.

For example, when comparing the number 1 with the string ‘1’, == returns true and === returns false. The reason is that == was cast first

var a = 1
var b = '1'

console.log(a == b)  / / ๐Ÿ‘‰ true
console.log(a === b)  / / ๐Ÿ‘‰ false
Copy the code

13. Explain the.pop() and.push() methods of arrays

The pop() method removes and returns the last element of the array

The push() method adds one or more elements to the end of the array, returning the new length

๐Ÿ’ก adds two array methods

The shift() method removes and returns the first element of the array

Unshift () adds one or more elements to the beginning of the array, returning the new length

const names = ['Ming'.'little red'.'xiao gang'.'xiaohua']

names.pop()
console.log(names) // ๐Ÿ‘‰ [' Xiao Ming ', 'Xiao Hong ',' Xiao Gang ']

names.push('jack')
console.log(names) // ๐Ÿ‘‰ [' Xiao Ming ', 'Xiao Hong ',' Xiao Gang ', 'Xiao Qiang ']

names.shift()
console.log(names) // ๐Ÿ‘‰ [' xiao Hong ', 'Xiao Gang ',' Xiao Qiang ']

names.unshift('the little light'.'small three')
console.log(names) // ๐Ÿ‘‰ [' Xiao Liang ', 'Xiao SAN ',' Xiao Hong ', 'Xiao Gang ',' Xiao Qiang ']
Copy the code

14. What is arrow function =>

Arrow functions are more concise function definitions, but don’t have their own this, arguments, super.

Omit return and curly braces {} when arrow functions have only one return

const arr = [1.2.3]

const arr2 = arr.map(item= > { return item * 2})

// omit return and {}
const arr3 = arr.map(item= > item * 2)

console.log(arr2) / / ๐Ÿ‘‰ [2, 4, 6]
console.log(arr3) / / ๐Ÿ‘‰ [2, 4, 6]
Copy the code

15. What is Typescript and how is it different from JavaScript

TypeScript is an open source programming language developed by Microsoft. It is a superset of JavaScript. Understood as JavaScript with a type system added, TypeScript can be compiled into JavaScript.

The difference between

  • TS is a programming language that needs to be compiled; JS is a scripting language that does not require compilation
  • TS provides compile-time static type checking; JS does not support static typing
  • Data in TS requires an explicit type; JS does not require

16. What is Promise, for example, chestnuts

The Promise object is used to represent the final completion (or failure) of an asynchronous operation and its resulting value.

There are three states

Pending ** is the initial state of a Promise

This is a big pity. ** * signifies the state of successful operation

Rejected Indicates the status of the failed operation

new Promise((resolve, reject) = > {
  setTimeout(() = > {
    resolve('complete');
  }, 1000);
})
.then(value= > value + 'First time' )
.then(value= > value + 'The second time')
.then(value= > console.log(value)) //๐Ÿ‘‰ complete first and second times
Copy the code

17. What is async/await

Async is used to declare that a function is asynchronous, and await is to wait for an asynchronous function to complete.

Async returns a Promise object and await returns the value without writing then

/ / chestnut
async function load(){
    const name = await getName()
    const id = await getId()
}
Copy the code

18. What is the difference between “break” and “continue” statements

The continue statement terminates the loop only; the break statement terminates the entire loop.

for (let i = 0; i < 3; i++) {
    if (i === 1) {
        break
    }
    console.log(i) 
}
/ / ๐Ÿ‘‰ 0
Copy the code
for (let i = 0; i < 3; i++) {
    if (i === 1) {
        continue
    }
    console.log(i) 
}
/ / ๐Ÿ‘‰ 0 2
Copy the code

19. How do I check whether an object has an attribute

Method 1 (without inheritance attributes)

Object.keys(checked Object).includes(‘ attributes ‘)

Method 2 (without inheritance attributes)

Object.hasownproperty (‘ property ‘)

Method 3 (including inherited attributes)

‘property’ in Specifies the object to be checked

const person = {
    uid: '1838039173968382'.name: 'Maokai'
}

console.log(Object.keys(person).includes('uid')) / / ๐Ÿ‘‰ true
console.log(person.hasOwnProperty('uid')) / / ๐Ÿ‘‰ true
console.log('uid' in person) / / ๐Ÿ‘‰ true
Copy the code

20. How do I check if an array contains a value

Method 1

Array.indexof (Find values)

Returns the index value found, -1 means not found

Method 2

Array.includes (Find values, the index to start the search)

Return true/false

Index may be omitted

Methods 3

Array. Some (item => search criteria)

Returns true if found/false otherwise

const names = ['Ming'.'little red'.'xiao gang'.'xiaohua']

console.log(names.indexOf('little red')) / / ๐Ÿ‘‰ 1
console.log(names.includes('little red')) / / ๐Ÿ‘‰ true
console.log(names.some(item= > item === 'the little light')) / / ๐Ÿ‘‰ false
Copy the code

21. How to check the length of an array

Array. length Gets the length of the array

const names = ['Ming'.'little red'.'xiao gang'.'xiaohua']

console.log(names.length) / / ๐Ÿ‘‰ 4
Copy the code

22. What’s the difference between a for loop and a while loop

For is used when the number of cycles is certain, while is used when the number of cycles is uncertain. We use while when we want to change the condition of the loop

All for can be written as while, while needs to pay attention to the loop condition, if not handled properly, the loop will be dead

const names = ['Ming'.'little red'.'xiao gang'.'xiaohua']

for (let i = 0; i < 4; i++) {
  console.log(names[i])
}
// ๐Ÿ‘‰ "Xiao Ming" "Xiao Hong" "Xiao Gang" "Xiao Hua"

let i = 0
while (i < 4) {
  console.log(names[i])
  i++
}
// ๐Ÿ‘‰ "Xiao Ming" "Xiao Hong" "Xiao Gang" "Xiao Hua"
Copy the code

23. When to use “&”, when to use “| |”

&& and | | is the logical operators, when need to judge the multiple conditions, use logical operators

Use logic && when multiple conditions are true

A condition is true with logic or | |

Add a logical non! , take the

/ / logic
if (2 > 1 && 3 > 1) {console.log('Condition is true')}// ๐Ÿ‘‰ 'all conditions are true'

/ / logical or
if (0 > 1 || 3 > 1) {console.log('One condition is true')}// ๐Ÿ‘‰ 'One condition is true'

/ / logic
if(! (0 > 1)) {console.log('The condition is flase, the opposite is true')}// ๐Ÿ‘‰ 'flase'

Copy the code

24. What is a ternary operator

The ternary operator is a shorthand for if else

Conditions? Executed when the condition is true: executed when the condition is false

const names = ['Ming'.'little red'.'xiao gang'.'xiaohua']

names.includes('Ming')?console.log('Found') : console.log('Not found')

// ๐Ÿ‘‰ 'found'
Copy the code

25. How to create an object in JavaScript

Method 1

const user = { name:'Maokai' }
Copy the code

Method 2

const user = new Object(a); user.name ='Maokai'
Copy the code

Methods 3

function User(name){
    this.name = name
}

const user1 = new User('Maokai')
Copy the code

26. How to create an array in JavaScript

Method 1

const names = ['Ming'.'little red']
Copy the code

Method 2

const names = Array.of('Ming'.'little red')
Copy the code

Methods 3

const names = []
names.push('Ming')
names.push('little red')
Copy the code

27. What is this

This indicates the object to which it belongs and has different values depending on where it is used

Globally, this represents the window object, and inside the function body {} this represents the object to which the function belongs

console.log(this) / / ๐Ÿ‘‰ window

const user = {
    uid: '1838039173968382'
    name: 'Maokai'.getNameAndID(){
        return `The ${this.name}๐Ÿ“The ${this.uid}`}}console.log(user.getNameAndID())/ / ๐Ÿ‘‰ 'Maokai ๐Ÿ“ 1838039173968382'
Copy the code

28. What is callback

Callback is a callback function that is executed after a function has been executed.

In general, if an argument is a function, the function is a callback

function getUser(name, callback){
    console.log(name)
    callback()
}

getUser('Maokai'.() = > {
    console.log('I'm a callback function')})//๐Ÿ‘‰ 'Maokai' 'I am a callback'
Copy the code

29. What are the rules for naming variables

  • Must begin withThe letter ๏ผŒ_ ๏ผŒ$One of the
  • JavaScript variables are case sensitive
  • You cannot use keywords or reserved words

30. How do I read cookies

Read all cookie values using document.cookie

const myCookie = document.cookie
Copy the code

It is recommended to use Js-cookie to operate cookies

Read using.get()

31. What is the difference between localStorage and sessionStorage

Different data validity periods

LocalStorage closing window also works; SessionStorage closes the window and the data is cleared

Different scope

LocalStorage data sharing in the same origin window; SessionStorage cannot be shared within Windows, even if it is cognate

๐Ÿ’ก If there are multiple iframes on a page and they are of the same origin, sessionStorage can be shared

What is the difference between null and undefined

Null is an artificially set value for “none”, which is an object. It turns into a number of 0

Undefined means “default value”, which should have a value but is not defined. The number is NaN

33. List some Javascript frameworks

  • Vue
  • React
  • Angular
  • Svelte
  • Next.js
  • Nuxt.js

34. What are export and import

The modular syntax of JavaScript, using export and import can split the code into multiple files, which is conducive to engineering development

35. How do I get HTML elements in Javascript

Method 1 (by ID)

// <input type="text" id="user"/>

document.getElementById('user')
Copy the code

Method 2 (via the name attribute)

// <input type="text" name="userName" />

document.getElementsByName('userName')
Copy the code

Method 3 (by tag name)

// <input type="text" />

document.getElementsByTagName('input')
Copy the code

Method 4 (by class name)

// <input type="text" class="user-name"/>

document.getElementsByClassName('user-name')
Copy the code

Method 5 (Get an element through a selector)

// <input type="text" class="user-name"/>

document.querySelector('.user-name')
Copy the code

Method 6 (Get a set of elements through a selector)

// <input type="text" class="user-name"/>
// <input type="text" class="user-name"/>

document.querySelectorAll('.user-name')

//๐Ÿ‘‰ returns an array
Copy the code

36. How do I invert strings

The simplest way to reverse a string is through the for loop, which takes minimal code

const name = 'Maokai'
const reverse = str= > str.split(' ').reverse().join(' ')

console.log( reverse(name) ) / / ๐Ÿ‘‰ 'iakoaM'
Copy the code

37. What does ‘use strict’ do

JavaScript strict mode introduces better error checking, eliminates loose code, and reduces weird behavior.

  • Variables that are not declared are not allowed
  • Disallow this from pointing to a global object
  • The eval() scope is created

38. Describe the workflow of GitFlow

Gitflow is a git development specification that uses two branches, Master and Develop. The Master branch is read-only and cannot be committed

  1. Create a new feature-1 branch from Develop and merge it back into Develop

  2. Once the functionality is complete, create a new Release branch from Develop, Release the test version, and then use the Release branch to fix bugs

  3. Once stable, merge from Release to Master and Develop at the same time, and type the version number on Master

  4. Hotfixes are used to fix urgent bugs in the production environment and are merged into the Master and Develop branches when completed

How to update your local repository with Git

Method 1 (easiest)

git pull
Copy the code

Method 2 (Safest)

#Create a local temp branch from the remote master branch
git fetch origin master:temp

#Compare the local master branch with the Temp branch
git diff temp

#Merge the Temp branch into the local master branch
git merge temp

#Delete temp branch
git branch -d temp
Copy the code

40. What is clear cache and how is it implemented

Caching in Javascript development usually refers to browser caching, which can improve site performance, but can also affect site updates.

Sometimes you need to prevent the browser from caching data

Method 1 (Using meta tags)

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Copy the code

Method 2 (Add random number)

// Add a parameter (name optional) to the url of the request or reference file

const url = 'http://xxx.com'

const noCacheUrl = str= > `${str}? t=The ${Math.random()}`

console.log(noCacheUrl(url)) / / ๐Ÿ‘‰ "http://xxx.com?t=0.4186289414907023"
Copy the code

Approach 3 (Add request headers)

// Add an uncached request header to the request
// 'Cache-Control': 'no-cache'
Copy the code

41. What is NPM

NPM (Node Package Manager) is the Package Manager of Node.js, which makes it easier for Javascript developers to share code

42. What is RESTful Architecture

๐Ÿ˜œ For details, please go out and turn left. Ruan Yifeng’s “Understanding RESTful Architecture”

Representational State Transfer (REST) is translated into a sentence

URL locates resources and describes operations using HTTP verbs (GET,POST,DELETE,DETC)

Use put, deleten, post, get for add, delete, change, check

// Invalid interface definition
GET xxx.com/getUser

// REST interface definition (no action in URL)
GET xxx.com/user
Copy the code

43. What is XSS?

Cross-site scripting (XSS) is a kind of malicious scripting that hackers inject into uHTML or DOM to attack users while they browse the page

๐ŸŒฐ for example

The attacker wrote a piece of code on the message board to keep alert, and successfully submitted.

Then other users browsing messages will keep popover, affecting the normal use.

44. Describe what “dynamic typing” means in JavaScript

“Dynamic typing” means that variables are declared without specifying a data type, which is automatically detected when the code is run and can be converted at any time.

const a = 'Maokai'  / / string
const b = 100 / / digital

console.log(a + b) / / ๐Ÿ‘‰ 'Maokai100'
Copy the code

45. What’s wrong with JavaScript

Teacher Ruan Yifeng listed 10 flaws in his 2011 post

  1. Not suitable for developing large programs
  2. Very small standard library
  3. Null, and undefined
  4. Global variables are difficult to control
  5. Automatic insertion of end-of-line semicolons
  6. The plus operator
  7. NAN
  8. Distinction between arrays and objects
  9. = = and = = =
  10. Wrapper object of basic type

The original

๐Ÿ’ก I also found some other opinions

  • The configuration process of large front-end projects is tedious

  • The source code can be seen directly in the browser and cannot be encrypted

  • DOM parsing is slow

  • JavaScript errors stop rendering the entire site

  • Compatibility varies from browser to browser, and it takes time for developers to figure it out

  • Editor debugging is not as efficient as C++/JAVA

46. How do I write tests for Javascript code

Use testing frameworks such as Jest, Mocha, Chai, Vitest, etc

  1. Install test frame
  2. Write test cases
  3. Run tests to check test results

47. Write a loop that outputs the numbers from 1 to 200 divisible by 5

for (let i = 1; i <= 200; i++) {
    const res = i % 5= = =0
    if (res) console.log(i)
}
Copy the code

48. Write a function that takes two arguments and returns the product of the arguments

function multiply(a, b) {
    return a * b
}
Copy the code

49. Write an HTML page with a P tag

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Maokai</title>
</head>
<body>
  <h1>50 Popular JavaScript Interview Questions</h1>
  <p>50 questions from Twitter</p>
</body>
</html>
Copy the code

50. Create a JS object with first name, last name, and ID attributes and a function to return the full name

function Person(a, b, c){
    this.id = a
    this.firstName = b
    this.LastName = c
	this.fullName = () = > this.LastName + this.firstName
}

const my = new Person('1838039173968382'.'Maokai'.'lin')

console.log(my.fullName())
Copy the code

The last

๐Ÿคก problem I can, excuse me where does the job of 10 thousand annual salary look for?