- Notifications
You must be signed in to change notification settings - Fork42
Danh sách những câu hỏi trong phỏng vấn Javascript 📝
License
tuantvk/javascript-interview-questions-developer
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Những lý thuyết này cung cấp cho bạn danh sách các câu hỏi phỏng vấn JavaScript thường được hỏi với câu trả lời cho người mới bắt đầu. Các câu hỏi không sắp xếp theo thứ tự khó dần lên bạn có thể lướt hết qua mọi thứ để thử thách bản thân mình.
Nếu bạn có câu hỏi phỏng vấn JavaScript nào hay thì chia sẻ cho mọi người bằng cách bằng cách tạoissue hoặcpull request cho mình 🚀.
Danh sách các ngôn ngữ khác:
Let's go !!!
JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (vớiNodejs).
Đơn giản bạn có thể nói JScript giống như JavaScript, nhưng nó được cung cấp bởi Microsoft.
Đối tượng window được tạo tự động bởi trình duyệt đại diện cho một cửa sổ trình duyệt. Nó được sử dụng để hiển thị hộp thoại bật lên như hộp thoại alert, confirm, v.v. và mọi thứ trong Javascript nhưobject, functions, variables đều có thể trở thànhwindow object bao gồm cảHTML DOM.
Ví dụ:
window.document.getElementById("header");
hoặc:document.getElementById("header");
Toán tử== chỉ kiểm tra tính bằng nhau, còn=== kiểm tra tính bằng nhau và giá trị kiểu dữ liệu tức là phải cùng kiểu dữ liệu.
varnumber1=12;varnumber2='12';console.log('log 1: ',number1==number2)console.log('log 2: ',number1===number2)
Đáp án:
log 1: truelog 2: false
Negative Infinity là một số trong JavaScript có thể được bắt nguồn bằng cách chia số âm cho 0. Khi nào sử dụng nó, khi nó làmột số hoặcNumber object và nó sẽ return vềundefined.
varmy_number=100;my_number.NEGATIVE_INFINITY;console.log(my_number)
Đáp án:
undefined
Sử dụng khốitry/catch, chúng ta có thể xử lý các ngoại lệ trong JavaScript. JavaScript hỗ trợ các từ khóa try, catch, finally, throw để xử lý ngoại lệ.
functioncheck(x){try{if(x=="")throw"empty";if(isNaN(x))throw"not a number";x=Number(x);if(x<5)throw"too low";if(x>10)throw"too high";}catch(err){console.log("catch ",err)}}console.log(check(""))console.log(check("test"))console.log(check(55))
Đáp án:
catch emptyundefinedcatch not a numberundefinedcatch too highundefined
HàmisNaN() trả về true nếu giá trị của biếnkhông phải là một số.
console.log(isNaN(123))console.log(isNaN(0))console.log(isNaN('Hello'))console.log(isNaN('2005/12/12'))console.log(isNaN(''))console.log(isNaN(true))console.log(isNaN(undefined))
Đáp án:
falsefalsetruetruefalsefalse
Sử dụng// cho một dòng
hoặc
sử dụng/* nội dung */ cho nhiều dòng
// Khai báo biếnvarnumber=2;/* Đây là cách để comment nhiều dòng*/vargirl_friend=null;
Vấn đề này liên quan đến việc Javascript lưu trữ dữ liệu float ở dạng nhị phân chính xác tới từng con số sau dấu phẩy.
Giải pháp:
- Sử dụng hàmtoFixed()
- Mẹo nhỏ là nhân với 10 và chia cho 10
- Tham khảo các hàm làm tròn nhưround(), v.v.
console.log(0.1+0.2)// Amazing !varx=(0.2*10+0.1*10)/10;console.log(x)// Sử dụng toFixed()varnumber=0.1+0.2;console.log(number.toFixed(2))
Đáp án:
0.300000000000000040.30.3
Function declaration sử dụng từ khóa function rồi đến tên hàm. CònFunction expression bắt đầu bằngvar,let hoặcconst, theo sau là tên của hàm và toán tử=.
// Function Declarationfunctionsum(x,y){returnx+y;};// Function Expression: ES5varsum=function(x,y){returnx+y;};// Function Expression: ES6+constsum=(x,y)=>{returnx+y};
Khi chạy codeMath.max() > Math.min(), giá trị trả về làFalse, nghe có vẻ không hợp lý. Tuy nhiên, nếu không có tham số nào được truyền vào,Math.min() trả vềInfinity vàMath.max() trả về-Infinity. Vậy nênMath.max() < Math.min().
Nếu tham số xuất hiện là infinity và một số nào khác, kết quả trả về sẽ là số có giá trị đó.
varinfinity=5varvalue1=Math.min(1)varvalue2=Math.min(1,infinity)varvalue3=Math.min(1,-infinity)console.log(value1)console.log(value2)console.log(value3)
Đáp án:
11-5
Dể hiểu, closure là 1 hàm nội truy cập đến các biến bên ngoài phạm vi của nó. Closure có thể được sử dụng đểimplement privacy và tạo ra cácfunction factory.
constarr=[1,2,3,4];for(vari=0;i<arr.length;i++){setTimeout(function(){console.log(i);},10);}
Đáp án:
4444
Lý do là bởi vì hàm setTimeout sẽ tạo ra 1 function (closure) có thể truy cập phạm vi bên ngoài nó, vòng loop sẽ chứa index i. Sau 10ms, hàm được thực thi và nó sẽ log ra giá trị của i, là giá trị cuối cùng của vòng lặp (4).
Hàm này mã hóa các ký tự đặc biệt, ngoại trừ :, /? : @ & = + $ #
Để mã hóa ngược chuỗi đó lại mình sử dụng hàmdecodeURI().
varuri="my test.asp?name=ståle&car=saab";varres=encodeURI(uri);console.log(res)
Đáp án:
my%20test.asp?name=st%C3%A5le&car=saab
Nếu sử dụng cách tạo array initializer nó sẽ tạo ra danh sách các phần tử trong mảng và được ngăn cách bởi dấu phẩy.
vararr1=[5]vararr2=newArray(5)console.log(arr1)console.log(arr2)
Đáp án:
[ 5 ][ <5 empty items> ]
Strict theo nghĩa tiếng Việt là "nghiêm khắc". Strict Mode là một quy mẫu nghiêm khắc trong Javascript. Nếu như việc viết code bình thường là Normal mode, thì Strict Mode sẽ có thêm các quy định khác so với Normal mode.
"use strict";functionfoo(){varbar=0;returnbar;}bar=1;
Đáp án:
Xảy ra lỗi:ReferenceError: bar is not defined
JavaScript là một ngôn ngữ rất lỏng lẻo. Biến chỉ được xác định khi giá trị được gán và có thể thay đổi khi biến xuất hiện trong các ngữ cảnh khác nhau. Lên đơn giản nó là kiểu dữ liệu của biến đó.
Để kiểm tra kiểu dữ liệu của biến đó ta dùngtypeof trong Javascript.
varlength=16;varlastName="Johnson";varx={firstName:"John",lastName:"Doe"};console.log(typeoflength)console.log(typeoflastName)console.log(typeofx)
Đáp án:
numberstringobject
Javascript có những kiểu dữ liệu sau:
- Number
- String
- Boolean
- Object
- Undefined
vara=5;varb="Hello";varc=true;vard={id:1,name:"Lyly"};console.log(typeofa)console.log(typeofb)console.log(typeofc)console.log(typeofd)console.log(typeofe)
Đáp án:
numberstringbooleanobjectundefined
Từ khóathis dùng để chỉ đối tượng từ nơi nó được gọi.
varStudent={name:"Lyly",age:20,getName:function(){returnthis.name;}};console.log(Student.getName())
Đáp án:
Lyly
ViewState là dành riêng cho một trang trong phiên.
SessionState dành riêng cho dữ liệu cụ thể của người dùng có thể được truy cập trên tất cả các trang trong ứng dụng web.
Có thể sử dụng document để thay đổi style/class.
document.getElementById("myId").style.fontSize="20px";// ordocument.getElementById("myId").className="newclass";
Có các vòng lặp sau:
- for
- while
- do-while loops
vararr=["apple","banana","mango","cherry"]// Sử dụng forfor(leti=0;i<arr.length;i++){console.log(arr[i]);}// Sử dụng whileletj=0;while(j<arr.length){console.log(arr[j]);j++;}// Sử dụng do-while loopsletk=0;do{console.log(arr[k]);k++;}while(k<arr.length)
Đáp án:
cherryapplebananamango
Vì 3 và 2 là số nguyên, chúng sẽ cộng vào với nhau và kết quả là số. Còn 7 là một chuỗi, nên Javascipt sẽ hiểu thành nối chuỗi. Vì vậy, kết quả sẽ là 77.
console.log(5+2+"7");
Đáp án:
77
delete dùng để xóa các property cũng như các giá trị.
varstudent={name:'Lyly',age:20};deletestudent.age;console.log(student)
Đáp án:
{ name: 'Lyly' }
pop() trong Javascript dùng để lấy phần tử cuối cùng trong mảng. Điều này thì trái ngược với hàmshift().
varnumber=["one","two","three","four"]console.log(number.pop())console.log(number.shift())
Đáp án:
fourone
varmyArray=[[[]]];console.log(myArray)
Đáp án:
Là một mảng 3 chiều[ [ [] ] ]
Từ khóalet &const được giới thiệu trong phiên bản ES6 với tầm nhìn tạo ra hai loại biến khác nhau trong javascript, một loại là bất biến và loại khác là có thể thay đổi.
const: Nó được sử dụng để tạo ra một biến bất biến. Biến không thay đổi là các biến có giá trị không bao giờ thay đổi trong vòng đời hoàn chỉnh của chương trình.
let: let được sử dụng để tạo một biến có thể thay đổi. Các biến có thể thay đổi là các biến bình thường như var có thể thay đổi bất kỳ số lượng thời gian nào.
letname="Lyly";constage=18;name="John";age=20;console.log(name)console.log(age)
Đáp án:
JohnTypeError: Assignment to constant variable.
Ta có thể thêm một thuộc tính vào một đối tượng bằngobject.property_name = value,delete object.property_name để xóa một thuộc tính.
letuser=newObject();user.name='Lyly';user.age=20;console.log(user);deleteuser.age;console.log(user);
Đáp án:
{ name: 'Lyly', age: 20 }{ name: 'Lyly' }
Dưới đây là một số cách:
vararray=[1,2,6,5,3,2,6];// Sử dụng Setconsole.log(...newSet(array))// Sử dụng filterconsole.log(array.filter((item,index)=>array.indexOf(item)===index))// Sử dụng reduceconsole.log(array.reduce((uniq,item)=>uniq.includes(item) ?uniq :[...uniq,item],[]))
Đáp án:
1 2 6 5 3[ 1, 2, 6, 5, 3 ][ 1, 2, 6, 5, 3 ]
Khi bạn khởi tạo ra một biến nhưng không gán giá trị cho nó thì sẽ làundefined. Cònnull là mộtobject.
vara;console.log(typeofa)console.log(typeofnull)
Đáp án:
undefinedobject
Các framework phổ biến nhất hiện nay:
- Unit.js
- Jasmine
- Karma
- Chai
- AVA
- Mocha
- JSUnit
- QUnit
- Jest
// Sử dụng Chaivaranswer=43;expect(answer).to.equal(42);
Đáp án:
AssertionError: expected 43 to equal 42.
export hayimport là cách để ta tạo ra các module trong Javascript. Bằng cách đó, ta có thể chia các phần nhỏ trong dự án để dễ quản lý.import cho phép ta lấy một số biến hoặc một phương thức nào đó của file. Cònexport là biến một file thành một module. Xem ví dụ để hiểu hơn.
// person.jsletname='Lyly',occupation='developer',age=20;export{name,age,};//index.jsimport{name,age}from'./person';console.log(name);console.log(age);
Đáp án:
Lyly20
HàmtoISOString() được sử dụng để chuyển đổi ngày javascript thành tiêu chuẩn ISO. Nó chuyển đổi đối tượng Ngày JavaScript thành một chuỗi, sử dụng tiêu chuẩn ISO.
vardate=newDate();varn=date.toISOString();console.log(n);// YYYY-MM-DDTHH:mm:ss.sssZ
HàmObject.assign() được sử dụng để clone một đối tượng trong Javascript. Ngoài ra bạn cũng có thể sử dụng clone củalodash. Lodash là một framework sử lý mạnh mẽ mảng và object. Xem thêm tạiLodash
varx={name:"Lyly"};vary=Object.assign({},x);console.log(y)
Đáp án:
{ name: 'Lyly' }
Có 3 cách khác nhau để tạo mảng trong Javascript. Xem ví dụ
vararr1=[1,2,3,4];vararr2=newArray();vararr3=newArray(1,2,3,4);console.log(arr1)console.log(arr2)console.log(arr3)
Đáp án:
[ 1, 2, 3, 4 ][][ 1, 2, 3, 4 ]
Một số sự kiện chuột trong DOM như:
- onclick
- ondblclick
- mousemove
- mousedown
- mouseover
- mouseout
- mouseup
console.log(undefined*2)console.log(null*2)console.log(""*2)
Đáp án:
NaN00
Việc 018 - 017 trả về 3 là kết quả của chuyển đổi loại im lặng. Trong trường hợp này, ta nói về số bát phân.
console.log(018-017)
Đáp án:
3
Cảtest() vàexec() đều là biểu thứcRegExp.Xem chi tiết
Sử dụngtest() sẽ search chuỗi trong theo giá trị ta truyền vô, nếu chuỗi đó tồn tại thì sẽ return về Boolean giá trị là 'true' hoặc 'false'.
Sử dụngexec() sẽ search chuỗi trong theo giá trị ta truyền vô, nếu chuỗi đó tồn tại thì sẽ return về chuỗi đó, nếu không sẽ return về giá trị 'null'.
varstr="The best things in life are free";varpatt=newRegExp("b");varres_test=patt.test(str);varres_exec=patt.exec(str);console.log(res_test)console.log(res_exec)
Đáp án:
true[ 'b', index: 4, input: 'The best things in life are free' ]
setTimeout(function(){console.log('first line');},0);console.log('second line');console.log('third line');
Đáp án:
second linethird linefirst line
Khi có setTimeout() tiến trình trở thành bất đồng bộ. Ta cần chờ mọi thứ trong stack hoàn thành trước.
Có những cách sau:
- getElementById() lấy một element bằng tênid.
- getElementsByClass() lấy một element bằng tênclass.
- getElementsByTagName() lấy một element bằng tên củatag name.
- querySelector() đây là function css style selector và sẽ return về giá trị đầu tiên.
<!DOCTYPE html><html><body><pid="demo">Click the button to change the text in this paragraph.</p><pclass="demo">Click the button to change the text in this paragraph.</p><h5>Click the button to change the text in this paragraph.</h5><pclass="example">Click the button to change the text in this paragraph.</p><script>// Sử dụng getElementById()document.getElementById("demo").innerHTML="Hello World";// Sử dụng getElementsByClassName()document.getElementsByClassName("demo")[0].innerHTML="Hello World!";// Sử dụng getElementsByTagName()document.getElementsByTagName("h5")[0].innerHTML="Hello World!";// Sử dụng querySelector()document.querySelector(".example").style.backgroundColor="red";</script></body></html>
Có 3 cách sau:
- Inline
- Internal
- External
<!-- Inline --><ahref="#"onclick="(function(){alert('Hello world');})()">Click Me</a><!-- Internal --><script>console.log('Hello world')</script><!-- External --><scripttype="text/javascript"src="external.js">// file external.jsconsole.log('Hello world')
Một số framework UI nổi tiếng của Javascript hiện nay là:
- React
- Angular
- Vue
- Meteor
- Ember
// ReactclassHelloMessageextendsReact.Component{render(){return(<div> Hello{this.props.name}</div>);}}ReactDOM.render(<HelloMessagename="Taylor"/>,document.getElementById('hello-example'));
Đáp án:
Hello Taylor
vara=(!+[]+[]+![])console.log(a.length)
Đáp án:
9
Đây là điều thú vị của Javascript.
.forEach
- Vòng lặp dựa vào các phần tử có trong mảng.
- Thực hiện callback cho mỗi vòng lặp.
- Không trả về giá trị.
.map
- Vòng lặp dựa vào các phần tử có trong mảng.
- Hàm map sẽ lặp qua từng phần tử nhưng sẽ tạo ra một mảng mới dựa trên các giá trị trong vòng lặp.
consta=[1,2,3];constex1=a.forEach((num,index)=>{// Làm 1 điều gì đó});constex2=a.map(num=>{returnnum*2;});console.log(ex1)console.log(ex2)
Đáp án:
undefined[ 2, 4, 6 ]
JSON là một định dạng dữ liệu dựa trên văn bản theo cú pháp đối tượng JavaScript.
// Chuyển object qua JSONvarobj1=[{id:1,name:'Lyly'},{id:2,name:'May'}];console.log(JSON.stringify(obj1))// Chuyển JSON về objectvarobj2='{ "id": 9, "name": "Lyly", "age": "20", "city": "New York" }'console.log(JSON.parse(obj2))
Đáp án:
[{"id":1,"name":"Lyly"},{"id":2,"name":"May"}]{ id: 9, name: 'Lyly', age: '20', city: 'New York' }
| slice | splice |
|---|---|
| Không làm thay đổi mảng ban đầu | Có thể bị thay đổi mảng ban đầu |
| Trả về tập hợp con của mảng ban đầu | Trả về các phần tử bị xóa khỏi mảng ban đầu |
| Sử dụng để lấy các phần tử con trong mảng | Sử dụng để thêm hoặc xóa phần tử của mảng |
// Sử dụng slicevarfruits=["Banana","Orange","Lemon","Apple","Mango"];varcitrus=fruits.slice(1,3);console.log(fruits)console.log(citrus)// Sử dụng splicevarfruits=["Banana","Orange","Apple","Mango"];fruits.splice(2,0,"Lemon","Kiwi");console.log(fruits)
Đáp án:
[ 'Banana', 'Orange', 'Lemon', 'Apple', 'Mango' ][ 'Orange', 'Lemon' ][ 'Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango' ]
Higher order function là hàm chấp nhận hàm khác làm đối số hoặc trả về hàm dưới dạng giá trị trả về.
consthigherOrderFunc=()=>console.log("Hello world !");consthigherOrder=ReturnHigherOrderFunc=>ReturnHigherOrderFunc();higherOrder(higherOrderFunc);
Đáp án:
Hello world !
Hàmunary (monadic) là một hàm chấp nhận chính xác một đối số. Nó là viết tắt của một đối số được chấp nhận bởi một hàm.
constunaryFunction=a=>console.log(a+10);unaryFunction(5)
Đáp án:
15
IIFE (Immediately Invoked Function Expression) là một hàm JavaScript chạy ngay khi được định nghĩa.
Lý do chính để sử dụng IIFE là để có được quyền riêng tư dữ liệu vì bất kỳ biến nào được khai báo trong IIFE đều không thể được truy cập bởi bên ngoài. Tức là, nếu bạn cố gắng truy cập các biến bằng IIFE thì nó sẽ xuất hiện một lỗi như dưới đây:
// Ví dụ IIFE(function(){// logic here})();// Báo lỗi khi chạy(function(){varmessage="IIFE";console.log(message);})();console.log(message);
Đáp án:
ReferenceError: message is not defined
Ta có thể sử dụngEventSource để nhận thông báo sự kiện do máy chủ gửi.Xem chi tiết EventSource
// Ví dụ mẫuif(typeof(EventSource)!=="undefined"){varsource=newEventSource("sse_generator.js");source.onmessage=function(event){document.getElementById("output").innerHTML+=event.data+"<br>";};}
Promise.all là một hàm sẽ lấy một loạt các Promises làm đầu vào (có thể lặp lại). Phương thức này nhận vào một mảng các promises và chỉ resolve khi tất cả các promises này hoàn thành, hoặc reject khi một trong số chúng xảy ra lỗi.
Promise.all([Promise1,Promise2,Promise3]).then(result=>{console.log(result);}).catch(error=>{console.log(`Error in promises${error}`);})
Promise.race nghĩa là hàm promise chạy đua (LOL). Phương thức này nhận vào một mảng các promises và sẽ resolve/reject ngay khi một trong số các promises này hoàn thành/xảy ra lỗi.
varpromise1=newPromise(function(resolve,reject){setTimeout(resolve,500,'one');});varpromise2=newPromise(function(resolve,reject){setTimeout(resolve,100,'two');});Promise.race([promise1,promise2]).then(function(value){console.log(value);});
Đáp án:
two
Hàmeval() dùng để tính toán một chuỗi trong Javascript. Nó sẽ nhận vào một chuỗi và biến nó qua phép tính. Chuỗi có thể là biểu thức JavaScript, biến, câu lệnh hoặc chuỗi câu lệnh.
vara="1 + 5 - 3";varb="10 / 2"+6;console.log(eval(a))console.log(eval(b))
Đáp án:
30.38461538461538464
Để so sánh 2 object có khá nhiều cách khác nhau. Tuy nhiên có một cách rất đơn giản đó là parse qua JSON bằng cách sử dụngJSON.sstringify().
varuser1={name:"Lyly",org:"dev"};varuser2={name:"Lyly",org:"dev"};vardog={name:"dog",age:10};varcat={name:"cat",age:10};varcompare_user=JSON.stringify(user1)===JSON.stringify(user2);varcompare_animal=JSON.stringify(dog)===JSON.stringify(cat);console.log(compare_user);console.log(compare_animal);
Đáp án:
truefalse
Cácparameter là tên biến của định nghĩa hàm, trong khi cácargument là các giá trị được cung cấp cho hàm khi nó được gọi.
functionmyFunction(parameter1,parameter2){console.log(arguments[0])}myFunction("argument1","argument2")
Đáp án:
argument1
consta=[1,2,3]constb=[1,2,3]constc="1,2,3"console.log(a==c)console.log(a==b)
Đáp án:
truefalse
console.log đầu tiên sẽ trả về là đúng vì trình biên dịch của JavaScript thực hiện chuyển đổi type của biến và do đó, nó so sánh với các chuỗi theo giá trị của chúng. Mặt khác, console.log thứ hai sẽ trả về sai vì Mảng là object và object được so sánh bằng tham chiếu.
functiongreet(){return{message:"hello"}}vara=greet();console.log(a)
Đáp án:
undefined
Do tính năng chèn dấu chấm phẩy tự động (ASI) của JavaScript, trình biên dịch đặt dấu chấm phẩy sau từ khóa trả về và do đó, nó trả về undefined mà không bị lỗi.
console.log(typeoftypeof0);
Đáp án:
string
Do typeof 0 là "number" nên typeof của "number" sẽ là chuỗi. Javascript thật đáng sợ !!!
Có 2 thư viện xử lí array và object nổi tiếng nhất hiện nay là:
- lodashXem chi tiết
- underscore.jsXem chi tiết
// underscore.js_.map([1,2,3],num=>num*3);// lodash_.map([4,8],x=>x*2);// Cách sử dụng khá giống nhau
Đáp án:
[3, 6, 9][8, 16]
Khi xét thuộc tính cho object, JavaScript sẽ ngầm địnhstringify parameter. Trong trường hợp này, vì b và c là cả hai là object, nên sẽ được chuyển đổi thành "[Object Object]". Kết quả là, cả [b] và [c] đều tương đương với ["[Object Object]"] và có thể được sử dụng thay thế cho nhau. Do đó, khi ta tham chiếu [c] cũng giống như là tham chiếu [b].
vara={},b={key:'b'},c={key:'c'};a[b]=123;a[c]=456;console.log(a[b]);
Đáp án:
456
vara=[1,2,3];a[10]=99;console.log(a)console.log(a[6])
Đáp án:
[ 1, 2, 3, <7 empty items>, 99 ]undefined
varoutput=(function(x){deletex;returnx;})(0);console.log(output);
Đáp án:
0
Kết quả trả về là 0. Bởi vì delete dùng để xóa property của object. Nhưng ở đây x không phải là object, nó là biến local variable nên delete không thể xóa được.
varx=1;varoutput=(function(){deletex;returnx;})();console.log(output);
Đáp án:
1
Kết quả trả về là 1. Bởi vì delete dùng để xóa property của object. Nhưng ở đây x không phải là object, nó là biến global variable có typeof number.
About
Danh sách những câu hỏi trong phỏng vấn Javascript 📝
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
