who wants to be a javascriptaire
1.0.0
วิธีสนุก ๆ ในการเรียนรู้ JavaScript สำหรับการสัมภาษณ์การเขียนโค้ดส่วนหน้า/เว็บของคุณ คำถามทั้งหมดได้รับคำตอบที่นี่ในข้อความและมีวิดีโอในช่อง YouTube ของเรา คลิกที่
อย่าลังเลที่จะติดต่อเราบนแพลตฟอร์มโซเชียลของเรา! -
Discord || Instagram || Twitter || tiktok || บล็อก || Facebook
สนับสนุน
โปรด️แสดงโครงการนี้และแบ่งปันกับผู้อื่นเพื่อแสดงการสนับสนุนของคุณ ติดตามฉัน❤สำหรับการอัปเดตเกี่ยวกับโครงการและบทเรียนในอนาคต!
พื้นฐานภาษา - อาร์เรย์ - วันที่และเวลา - JavaScript เชิงวัตถุ - โมดูล - เบ็ดเตล็ด
console . log ( new Date ( 2023 , 1 , 31 ) )Tue Jan 31 2024Tue Jan 31 2023Fri Mar 03 2023Errorใน JavaScript ในขณะที่สร้างวันที่โดยใช้วัตถุวันที่เดือนจะอยู่ที่ 0 ซึ่งหมายความว่า 0 คือสำหรับเดือนมกราคมและ 1 สำหรับเดือนกุมภาพันธ์
ดังนั้นในกรณีนี้เรากำลังขอให้ JavaScript กำหนดวันที่ 2023 กุมภาพันธ์ 31 ซึ่งไม่มีอยู่จริง
แต่แทนที่จะโยนข้อผิดพลาด JavaScript จะล้นไปในเดือนถัดไปซึ่งก็คือเดือนมีนาคม
และตั้งแต่เดือนกุมภาพันธ์ในปี 2566 มีเพียง 28 วันรหัสจะล้น 3 วันทำให้ผลลัพธ์เป็นวันที่ 3 มีนาคม 2566
var username = 'kirandash'
var username = 'bgwebagency'
console . log ( username )bgwebagencykirandashReferenceErrorSyntaxError เราสามารถประกาศตัวแปรเดียวกันหลายครั้งโดยใช้คำหลัก var และตัวแปรจะถือค่าที่ได้รับมอบหมายในที่สุด
แต่เราไม่สามารถประกาศตัวแปรเดียวกันหลายครั้งโดยใช้ let หรือ const
const user = {
username : 'kirandash' ,
updateUsername : newName => {
this . username = newName
} ,
}
user . updateUsername ( 'bgwebagency' )
console . log ( user . username )bgwebagencyReferenceErrorkirandashundefined เนื่องจากฟังก์ชั่น updateUsername ไม่ทำงานอย่างถูกต้องและไม่สามารถอัปเดต username ของ user
ฟังก์ชั่น updateUsername ใน object ผู้ใช้เป็นฟังก์ชันลูกศรและไม่ผูกพันกับวัตถุ user
ดังนั้นคำหลัก this ภายในฟังก์ชั่น UpdateUserName ไม่ได้อ้างถึงวัตถุ user แต่หมายถึงขอบเขตส่วนกลาง
เพื่อแก้ไขปัญหานี้เราควรเปลี่ยนฟังก์ชั่นลูกศรเป็นฟังก์ชั่นปกติ
const len1 = 'kiran' . length
const len2 = '?' . length
console . log ( len1 , len2 )5, 25, 15, undefined5, SyntaxErrorใน JavaScript คุณสมบัติความยาวสตริงจะส่งคืนจำนวนไบต์และไม่ใช่จำนวนอักขระอย่างที่เราคาดหวัง
อิโมจิเป็นตัวละคร Unicode ซึ่งเข้ารหัสในสองไบต์ ดังนั้นคำตอบคือ 2 สำหรับคำถามนี้
ความยาวสตริงสำหรับ kiran ส่งคืน 5 เพราะในสตริงแต่ละอักขระคือ 1 ไบต์
console . log ( undefined == null , undefined === null )true, truetrue, falsefalse, falsefalse, trueก่อนอื่นให้ฉันอธิบายความแตกต่างระหว่างตัวดำเนินการที่เท่าเทียมกันและเข้มงวด
ตัวดำเนินการที่เท่าเทียมกันจะตรวจสอบเฉพาะว่าทั้งสองค่าเท่ากัน ตัวดำเนินการที่เท่าเทียมกันอย่างเข้มงวดตรวจสอบว่าทั้งค่าและประเภทมีค่าเท่ากันหรือไม่
ดังนั้นในรหัสนี้คำสั่งแรก undefined == null จะส่งคืน true เนื่องจากทั้ง undefined และ null มีค่าเดียวกันซึ่งว่างเปล่า
แต่คำสั่งที่สอง undefined === null ส่งคืน false เนื่องจาก typeof undefined นั้น undefined ในขณะที่ typeof null เป็น object
คุณอาจสงสัยว่าทำไม typeof null เป็น object เมื่อ null เป็นชนิดข้อมูลดั้งเดิม นี่เป็นความผิดพลาดใน JavaScript ตั้งแต่ต้น
ตอนนี้อีกหนึ่งเคล็ดลับสำหรับคุณ: เมื่อคุณต้องการตั้งค่าว่างสำหรับตัวแปรใช้ null แทน undefined เนื่องจาก undefined ส่วนใหญ่จะใช้เพื่อตรวจสอบว่าตัวแปรไม่มีค่าที่กำหนดให้หรือไม่
function getFruits ( x , ... multi , y ) {
console . log ( x , y , multi ) ;
}
getFruits ( "?" , "?" , "?" , "?" , "?" )? ? ["?", "?", "?"]SyntaxErrorผู้ให้บริการ REST ถูกเพิ่มเข้ามาเป็นส่วนหนึ่งของคุณสมบัติ ES6
ต้องใช้ข้อโต้แย้งทั้งหมดที่ส่งผ่านไปยังฟังก์ชั่นและวางไว้ในอาร์เรย์
หากอาร์กิวเมนต์หลายรายการถูกส่งผ่านไปยังฟังก์ชั่นผู้ให้บริการ REST จะต้องมาถึงจุดสิ้นสุด นั่นเป็นเหตุผลที่โค้ดตัวอย่างนี้จะทำให้เกิดข้อผิดพลาด
ในการแก้ไขปัญหานี้โปรดย้ายผู้ให้บริการ REST ไปยังจุดสิ้นสุดแล้วควรทำงาน
let x = Number . NEGATIVE_INFINITY
let y = Number . POSITIVE_INFINITY
let z = x + y
console . log ( z )0undefinedNaNTypeErrornegative_infinity และ positive_infinity เป็นคุณสมบัติของวัตถุจำนวนในจาวาสคริปต์ที่แสดงถึงแนวคิดทางคณิตศาสตร์ของอินฟินิตี้เชิงลบและอินฟินิตี้เชิงบวก
เมื่อคุณเพิ่ม number.negative_infinity และ number.positive_infinity ผลลัพธ์คือ NAN
การเพิ่มค่าที่ไม่มีที่สิ้นสุดในเชิงบวกให้กับค่าที่ไม่มีที่สิ้นสุดเชิงลบไม่ได้ส่งผลให้ค่าตัวเลขที่มีความหมาย
ดังนั้นในกรณีนี้ Z จะเป็น NAN
โปรดทราบว่ารหัสจะไม่โยน typeError เนื่องจาก JavaScript สามารถดำเนินการเพิ่มเติมระหว่าง number.negative_infinity และ number.positive_infinity
console . log ( 'BG Web Agency' === NaN , isNaN ( 'BG Web Agency' ) )true, truefalse, truetrue, falsefalse, false ใช้ === NaN เพื่อตรวจสอบว่าค่าเป็นตัวเลขจะไม่ทำงานหรือไม่
ใน JavaScript, NaN (ไม่ใช่ตัวเลข) เป็นค่าพิเศษที่แสดงถึงหมายเลขที่ไม่ถูกต้อง
NAN ไม่เท่ากับสิ่งใดรวมถึงตัวมันเองดังนั้นนิพจน์ "BG Web Agency" === NaN จะกลับมา false เสมอ
ในการตรวจสอบว่าค่าเป็นตัวเลขใน JavaScript คุณสามารถใช้ฟังก์ชัน isNaN() ได้หรือไม่ ฟังก์ชั่นนี้จะส่งคืน true หากอาร์กิวเมนต์ส่งผ่านไปยัง NaN หรือไม่สามารถแปลงเป็นตัวเลขได้
console . log ( isFinite ( Infinity ) , isNaN ( Infinity ) )false, falsefalse, truetrue, falsefalse, false ฟังก์ชั่น isFinite() ใช้เพื่อตรวจสอบว่าค่าที่กำหนดเป็นจำนวน จำกัด หรือไม่
มันจะส่งคืนเท็จถ้าค่าคือ NAN, Infinity หรือ -infinity และ TRUE ถ้าค่าเป็นจำนวน จำกัด
ดังนั้นในตัวอย่างนี้ isFinite(Infinity) จะกลับมาเป็นเท็จเนื่องจากอินฟินิตี้ไม่ใช่หมายเลข จำกัด
ในทางกลับกันฟังก์ชั่น ISNAN () ใช้เพื่อตรวจสอบว่าค่าที่กำหนดไม่ใช่ตัวเลข (NAN) หรือไม่
มันจะส่งคืนจริงถ้าค่าเป็น NAN และเท็จหากค่าเป็นตัวเลขหรือชนิดข้อมูลอื่น ๆ
ดังนั้นในตัวอย่างนี้ isNaN(Infinity) จะกลับมาเป็นเท็จด้วยเพราะอินฟินิตี้ไม่ใช่น่าน
ดังนั้นจึงใช้ฟังก์ชัน isFinite แทนฟังก์ชัน isNaN เสมอเมื่อคุณต้องการตรวจสอบความถูกต้องหากตัวเลขมี จำกัด
const user = {
name : 'John' ,
age : 30 ,
getName : ( ) => {
return this . name
} ,
getAge : function ( ) {
return this . age
} ,
}
const getName = user . getName
const getAge = user . getAge
console . log ( getName ( ) )
console . log ( getAge ( ) ) ฟังก์ชั่น getName Arrow ใช้คำหลัก this เพื่ออ้างถึงคุณสมบัติชื่อของวัตถุ แต่เนื่องจากฟังก์ชั่นลูกศรมีคำศัพท์ที่มีผลผูกพัน this ค่าของคำหลัก this ภายในฟังก์ชั่นลูกศรจะเป็นวัตถุ global ซึ่งเป็น window ในเบราว์เซอร์
เนื่องจากไม่มีคุณสมบัติชื่อบนวัตถุ global ฟังก์ชั่น undefined
ฟังก์ชั่น getAge ใช้นิพจน์ฟังก์ชั่นปกติและหมายถึงคุณสมบัติอายุของวัตถุ user อย่างถูกต้องโดยใช้คำหลัก this
แต่เมื่อ getAge ถูกกำหนดให้กับตัวแปร getAge มันจะสูญเสียการอ้างอิงไปยังวัตถุ user ดังนั้นเมื่อฟังก์ชั่นถูกเรียกใช้โดยใช้ getAge() สิ่งนี้จะอ้างถึงวัตถุทั่วโลกอีกครั้งและเนื่องจากไม่มีคุณสมบัติอายุในวัตถุทั่วโลกฟังก์ชั่นจะกลับมาที่ไม่ได้กำหนด
for ( var i = 0 ; i < 3 ; i ++ ) {
setTimeout ( function ( ) {
console . log ( i )
} , 0 )
}การปิดเป็นฟังก์ชั่นที่ยังคงเข้าถึงตัวแปรในขอบเขตด้านนอกแม้หลังจากฟังก์ชั่นด้านนอกกลับมาแล้ว
ในตัวอย่างนี้คำตอบคือ B เนื่องจากฟังก์ชั่น settimeout เป็นแบบอะซิงโครนัสและไม่ดำเนินการทันที
เมื่อถึงเวลาที่ฟังก์ชั่นการโทรกลับผ่านไปยัง SettimeOut จะถูกดำเนินการลูปเสร็จสมบูรณ์แล้วและตัวแปร I มีค่า 3
ดังนั้นการโทรแต่ละครั้งไปยัง console.log (i) ภายในฟังก์ชั่นการโทรกลับจะพิมพ์ 3
เพื่อแก้ปัญหานี้และพิมพ์ 0, 1, 2 เราสามารถใช้ IIFE (นิพจน์ฟังก์ชั่นเรียกใช้ทันที) เพื่อสร้างขอบเขตใหม่สำหรับการวนซ้ำแต่ละครั้ง
สิ่งนี้จะสร้างตัวแปรใหม่ j ภายใน IIFE แต่ละตัวพร้อมกับสำเนาของค่าปัจจุบันของฉันที่การวนซ้ำของลูป
เมื่อฟังก์ชั่นการโทรกลับผ่านไปยัง SettimeOut จะถูกดำเนินการจะสามารถเข้าถึงตัวแปร J ในการปิดซึ่งมีค่าที่คาดหวังไว้ที่ 0, 1 หรือ 2 สำหรับการวนซ้ำแต่ละครั้งของลูป
function add ( x ) {
return function ( y ) {
if ( y !== undefined ) {
x += y
return arguments . callee
} else {
return x
}
}
}
console . log ( add ( 1 ) ( 2 ) ( 3 ) ( ) )คำตอบที่ถูกต้องคือ A. รหัสกำหนดฟังก์ชันเพิ่มที่ใช้อาร์กิวเมนต์เดียว x และส่งคืนฟังก์ชันอื่นที่ใช้อาร์กิวเมนต์เดียว y
ฟังก์ชั่นภายในนี้จะตรวจสอบว่ามีการกำหนด y หากมีการกำหนดไว้จะเพิ่ม y เป็น x และส่งคืนการอ้างอิงไปยังตัวเองโดยใช้อาร์กิวเมนต์คุณสมบัติของ Callee ซึ่งอนุญาตให้ฟังก์ชันเรียกใช้ซ้ำกับอาร์กิวเมนต์ถัดไป
หากไม่ได้กำหนด y จะส่งคืนค่าปัจจุบันของ x
จากนั้นการเรียกใช้รหัสเพิ่ม (1) (2) (3) () การโทรครั้งแรกนี้เพิ่ม (1) ด้วย 1 เป็นอาร์กิวเมนต์ซึ่งส่งคืนฟังก์ชันที่ใช้อาร์กิวเมนต์เดียว y
จากนั้นมันเรียกฟังก์ชั่นนี้ด้วย 2 เป็นอาร์กิวเมนต์ซึ่งเพิ่ม 2 ถึง 1 และส่งคืนการอ้างอิงไปยังฟังก์ชั่น
ในที่สุดมันเรียกฟังก์ชั่นนี้ด้วย 3 เป็นอาร์กิวเมนต์ซึ่งเพิ่ม 3 ถึง 3 และส่งคืนการอ้างอิงไปยังฟังก์ชั่น
เนื่องจากไม่มีการโต้แย้งใด ๆ ในการโทรครั้งสุดท้ายจึงส่งคืนค่าปัจจุบันของ x ซึ่งเป็น 6
รหัสนี้แสดงให้เห็นถึงตัวอย่างที่ซับซ้อนมากขึ้นของการแกงกะโหลกในจาวาสคริปต์ซึ่งฟังก์ชั่นแกงกะหรี่ส่งคืนการอ้างอิงไปยังตัวเองทำให้มันถูกเรียกซ้ำกับอาร์กิวเมนต์ถัดไป
function multiply ( x ) {
return function ( y ) {
return x * y
}
}
const double = multiply ( 2 )
console . log ( double ( 5 ) )คำตอบที่ถูกต้องคือ B. รหัสกำหนดฟังก์ชั่นคูณที่ใช้อาร์กิวเมนต์เดียว x และส่งคืนฟังก์ชันอื่นที่ใช้อาร์กิวเมนต์เดียว y ฟังก์ชั่นภายในนี้คูณ X และ Y และส่งคืนผลลัพธ์
จากนั้นรหัสจะสร้างฟังก์ชั่นใหม่เป็นสองเท่าโดยเรียกคูณด้วย 2 เป็นอาร์กิวเมนต์ ฟังก์ชั่นคู่ตอนนี้เป็นฟังก์ชั่นแกงกะหรี่ที่สามารถเรียกได้ด้วยอาร์กิวเมนต์เดียวเพื่อเพิ่มค่าเป็นสองเท่า
ในที่สุดรหัสเรียกสองเท่าด้วย 5 เป็นอาร์กิวเมนต์ซึ่งส่งผลให้ 10 ถูกบันทึกไปยังคอนโซล
รหัสนี้แสดงให้เห็นถึงแนวคิดของการแกว่งในจาวาสคริปต์ซึ่งฟังก์ชั่นส่งคืนฟังก์ชั่นอื่นที่สามารถนำไปใช้กับอาร์กิวเมนต์บางส่วนได้
ข้อความใดต่อไปนี้เป็นจริงเกี่ยวกับวิธี next() ของตัววนซ้ำใน JavaScript
คำตอบที่ถูกต้องคือ A.
ใน JavaScript การวนซ้ำเป็นวัตถุที่กำหนดลำดับและสามารถทำซ้ำได้มากกว่าการใช้ลูป
ตัววนซ้ำเป็นวัตถุที่รู้วิธีการเข้าถึงองค์ประกอบของการทำซ้ำในแต่ละครั้ง
วัตถุที่วนซ้ำมีวิธีการที่มี Symbol.iterator ซึ่งส่งคืนวัตถุตัววนซ้ำ
วัตถุ Iterator มีวิธี next() ซึ่งส่งคืนวัตถุที่มีคุณสมบัติสองคุณสมบัติ: value ซึ่งเป็นองค์ประกอบถัดไปในลำดับและ done ซึ่งเป็นบูลีนที่ระบุว่าตัววนซ้ำมาถึงจุดสิ้นสุดของลำดับ
Iterables มักใช้ในแอปพลิเคชันแบบเรียลไทม์หลายรายการในขณะที่ทำงานกับชุดข้อมูลขนาดใหญ่หรือในขณะที่ใช้โครงสร้างข้อมูลที่กำหนดเอง
function * counter ( ) {
let i = 0
while ( true ) {
yield i ++
}
}
const gen = counter ( )
console . log ( gen . next ( ) . value )
console . log ( gen . next ( ) . value )
console . log ( gen . next ( ) . value )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
คำตอบที่ถูกต้องคือ D.
ฟังก์ชั่น counter เป็นฟังก์ชั่นเครื่องกำเนิดไฟฟ้าที่สร้างลูปอนันต์ที่ให้ค่าเพิ่มขึ้นของ i
ตัวแปร gen ถูกตั้งค่าเป็นฟังก์ชันเครื่องกำเนิดไฟฟ้าและการเรียกแต่ละครั้งไปยัง gen.next() ส่งคืนวัตถุด้วยคุณสมบัติค่าที่ตั้งค่าเป็นค่าที่ให้ผลตอบแทนถัดไป
คำสั่ง console.log จากนั้นพิมพ์ค่าที่ส่งคืนโดย gen.next()
ฟังก์ชั่นเครื่องกำเนิดไฟฟ้าเป็นฟังก์ชันพิเศษที่สามารถใช้ในการควบคุมการวนซ้ำตามลำดับของค่า
ฟังก์ชั่นดั้งเดิมฟังก์ชั่นเครื่องกำเนิดไฟฟ้าช่วยให้คุณหยุดชั่วคราวและดำเนินการดำเนินการต่อและให้ค่าหลายค่าเมื่อเวลาผ่านไป
สถานการณ์ใดต่อไปนี้ที่อาจทำให้หน่วยความจำรั่วในจาวาสคริปต์
การอ้างอิงแบบวงกลมเกิดขึ้นเมื่อวัตถุสองชิ้นขึ้นไปอ้างอิงซึ่งกันและกันสร้างลูปที่ป้องกันไม่ให้วัตถุถูกเก็บรวบรวมขยะ
สิ่งนี้อาจทำให้หน่วยความจำรั่วไหลหากไม่จำเป็นต้องใช้วัตถุอีกต่อไป แต่ไม่สามารถเป็นอิสระได้เนื่องจากการอ้างอิงแบบวงกลม
ตัวเลือก A, C และ D มักจะไม่ทำให้หน่วยความจำรั่วในจาวาสคริปต์
Garbage Collection เป็นกระบวนการของการปล่อยหน่วยความจำโดยอัตโนมัติซึ่งไม่ได้ใช้งานโดยโปรแกรมอีกต่อไป
ใน JavaScript อัลกอริทึมเครื่องหมายและการกวาดมักใช้สำหรับการรวบรวมขยะ
อัลกอริทึมนี้ใช้งานได้โดยการทำเครื่องหมายวัตถุทั้งหมดในหน่วยความจำที่ยังคงอ้างอิงโดยโปรแกรมจากนั้นกวาดผ่านและปลดปล่อยหน่วยความจำใด ๆ ที่ไม่ได้ทำเครื่องหมายว่าเป็นการใช้งาน
function getData ( ) {
return new Promise ( ( resolve , reject ) => {
setTimeout ( ( ) => {
resolve ( 'Data retrieved successfully' )
} , 1000 )
} )
}
async function main ( ) {
try {
const data = await getData ( )
console . log ( data )
throw new Error ( 'Something went wrong' )
} catch ( err ) {
console . log ( 'Caught an error:' , err . message )
return 'Error occurred'
} finally {
console . log ( 'Finally block executed.' )
return 'Finally block value'
}
}
; ( async ( ) => {
console . log ( await main ( ) )
} ) ( )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
เมื่อมีการเรียกใช้รหัสฟังก์ชั่นหลัก () เรียกว่าซึ่งเป็นฟังก์ชั่น async ที่ใช้รอเพื่อรับข้อมูลจากฟังก์ชัน getData()
เมื่อดึงข้อมูลแล้วคำสั่ง console.log(data) จะบันทึก "ข้อมูลดึงข้อมูลสำเร็จ" ไปยังคอนโซล
หลังจากนั้น throw new Error("Something went wrong") คำสั่งทำให้เกิดข้อผิดพลาด
บล็อก catch จับข้อผิดพลาดและบันทึก "Caught an error: Something went wrong" ไปยังคอนโซลจากนั้นส่งคืนสตริง "Error occurred"
ในที่สุดบล็อกในที่สุดจะถูกดำเนินการและบันทึก "Finally block executed." ไปยังคอนโซลจากนั้นส่งคืนสตริง "Finally block value"
เมื่อเรียกฟังก์ชั่น main() มันจะส่งคืนสัญญาเพราะมันเป็นฟังก์ชัน async เนื่องจากบล็อก finally ก็ส่งคืนค่าค่านั้นจะเป็นค่าที่ได้รับการแก้ไขขั้นสุดท้ายของสัญญา
ดังนั้นเมื่อ console.log(main()) ถูกเรียกว่า "Finally block executed." และ "Finally block value" จะถูกบันทึกไปยังคอนโซล
ลองจับและในที่สุดก็เป็นคำหลักที่ใช้ใน JavaScript เพื่อจัดการกับข้อผิดพลาดรันไทม์
const arr = [ 1 , 2 , 3 , 4 , 5 ] ;
let sum = 0 ;
for ( let num of arr ) {
sum += num ;
if ( sum >= 6 ) break ;
}
console . log ( sum ) ;
const arr2 = [ 1 , 2 , 3 , 4 , 5 ] ;
let sum2 = 0 ;
arr . forEach ( ( num ) => {
sum2 += num ;
if ( sum2 >= 6 ) break ;
} ) ;
console . log ( sum2 ) ;เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
เนื่องจากคำสั่ง break ไม่ถูกต้องภายในฟังก์ชั่นการโทรกลับผ่านไปยัง forEach
forEach ไม่สนับสนุนการเลิกจ้างในช่วงต้นโดยใช้คำสั่ง break ดังนั้นจึงมีข้อผิดพลาดเกิดขึ้น: "Uncaught SyntaxError: Illegal break statement".
ในกรณีของการวนรอบจะอนุญาตให้ break ได้
ในการแก้ไขปัญหาให้ลบคำสั่ง break ออกจาก foreach และควรทำงาน
โดยทั่วไปแล้ว for of คำแนะนำ for in หรือ forEach
let arr = [ 1 , 2 , 3 , 4 ]
let result = arr . push ( 5 )
console . log ( 'result: ' , result , 'arr: ' , arr )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
เมธอด array.push() ใน JavaScript เพิ่มองค์ประกอบอย่างน้อยหนึ่งอย่างในตอนท้ายของอาร์เรย์และส่งคืนความยาวใหม่ของอาร์เรย์
ในรหัสที่กำหนด arr เป็นอาร์เรย์ที่มีค่า [1, 2, 3, 4] วิธีการ push() ถูกเรียกด้วยอาร์กิวเมนต์ 5 ซึ่งเพิ่ม 5 ถึงจุดสิ้นสุดของอาร์เรย์ arr
วิธี push() ส่งคืนความยาวใหม่ของอาร์เรย์หลังจากการเพิ่มองค์ประกอบ ในกรณีนี้ความยาวใหม่ของ ARR จะเป็น 5 เนื่องจาก 5 ถูกเพิ่มลงในตอนท้ายของอาร์เรย์
let arr = [ 3 , 5 , 7 , 9 ]
let result = arr . unshift ( 1 , 2 )
console . log ( 'result: ' , result , 'arr: ' , arr )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
เมธอด array.unshift() ใน JavaScript เพิ่มองค์ประกอบอย่างน้อยหนึ่งองค์ประกอบให้กับจุดเริ่มต้นของอาร์เรย์และส่งคืนความยาวใหม่ของอาร์เรย์
ในรหัสที่กำหนด arr เป็นอาร์เรย์ที่มีค่า [3, 5, 7, 9] วิธี unshift() ถูกเรียกด้วยอาร์กิวเมนต์ 1 และ 2 ซึ่งเพิ่ม 1 และ 2 ถึงจุดเริ่มต้นของอาร์เรย์ arr
วิธี unshift() ส่งคืนความยาวใหม่ของอาร์เรย์หลังจากการเพิ่มองค์ประกอบ ในกรณีนี้ความยาวใหม่ของ arr จะเป็น 6 เนื่องจาก 1 และ 2 ถูกเพิ่มเข้ากับจุดเริ่มต้นของอาร์เรย์เปลี่ยนองค์ประกอบที่มีอยู่ไปทางขวา
const myArray = [ 1 , 2 , 3 , 4 , 5 ]
const poppedValue = myArray . pop ( )
console . log ( poppedValue )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
เมธอด Array.pop() ใน JavaScript ลบองค์ประกอบสุดท้ายออกจากอาร์เรย์และส่งคืนองค์ประกอบนั้น
ในกรณีนี้ myArray เป็นอาร์เรย์ที่มีองค์ประกอบ [1, 2, 3, 4, 5] และ myArray.pop() เรียกว่าซึ่งจะลบองค์ประกอบ 5 ออกจากอาร์เรย์และส่งคืน
const arr = [ 10 , 20 , 30 , 40 , 50 ]
const removedElement = arr . shift ( )
console . log ( 'removedElement: ' , removedElement , 'arr: ' , arr )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
เมธอด Array.shift() จะลบองค์ประกอบแรกออกจากอาร์เรย์ arr ซึ่งคือ 10 และส่งคืน อาร์เรย์ arr ที่ได้จะเป็น [20, 30, 40, 50]
ดังนั้นตัวเลือก A คือคำตอบที่ถูกต้องเนื่องจากสะท้อนถึงค่าที่ถูกต้องของ removedElement และสถานะที่อัปเดตของ arr หลังจาก Array.shift() เรียกว่า ตัวเลือก B ไม่ถูกต้องเนื่องจากระบุว่า removedElement จะเป็น 50 ซึ่งไม่เป็นความจริง ตัวเลือก C ก็ไม่ถูกต้องเนื่องจากระบุว่า arr ยังคงไม่เปลี่ยนแปลงซึ่งไม่ถูกต้อง ตัวเลือก D มีความสับสนเล็กน้อยเนื่องจากระบุว่า Array.shift() ส่งคืนอาร์เรย์ซึ่งไม่เป็นความจริง
let arr = [ 1 , 2 , 3 , 4 , 5 ]
let removed = arr . splice ( 1 , 2 , 'a' , 'b' )
console . log ( 'removed:' , removed , 'arr: ' , arr )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
เมธอด Array.splice() ใช้เพื่อแก้ไขอาร์เรย์โดยการเพิ่มลบหรือแทนที่องค์ประกอบ
ในกรณีนี้โค้ดตัวอย่างใช้ arr.splice(1, 2, 'a', 'b') ซึ่งเริ่มต้นจากดัชนี 1 (ลบ 2 องค์ประกอบ) และแทรกองค์ประกอบ a และ b ในสถานที่ของพวกเขา องค์ประกอบที่ถูกลบออก (เช่น 2 และ 3) จะถูกส่งคืนและกำหนดให้กับตัวแปรที่ถูกลบออก หลังจากดำเนินการแล้วจะถูกลบออกจะเป็น [2, 3] และ arr จะเป็น [1, 'a', 'b', 4, 5] ตัวเลือก C ไม่ถูกต้องเนื่องจากมีองค์ประกอบที่แทรกอยู่ในอาร์เรย์ที่ถูกลบซึ่งไม่ถูกต้อง ตัวเลือก D ยังไม่ถูกต้องเนื่องจากองค์ประกอบที่ไม่ถูกต้องซึ่งถูกลบออกจากอาร์เรย์
const fruits = [ 'apple' , 'banana' , 'orange' , 'grape' , 'apple' , 'kiwi' ]
const index = fruits . indexOf ( 'orange' )
const lastIndex = fruits . lastIndexOf ( 'apple' )
const result = fruits . includes ( 'grape' )
console . log ( 'index: ' , index , 'lastIndex: ' , lastIndex , 'result: ' , result )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
เมธอด Array.indexOf() ค้นหาดัชนีของการเกิดขึ้นครั้งแรกของค่าที่ระบุในผลไม้อาร์เรย์ ในกรณีนี้ "Orange" พบได้ที่ INDEX 2 ดังนั้น index จะเป็น 2
เมธอด Array.lastIndexOf() ค้นหาดัชนีของการเกิดขึ้นครั้งสุดท้ายของค่าที่ระบุในผลไม้อาร์เรย์ ในกรณีนี้ "Apple" ปรากฏขึ้นสองครั้งในอาร์เรย์และเหตุการณ์ครั้งสุดท้ายคือที่ดัชนี 4 ดังนั้น lastIndex จะเป็น 4
ในทางกลับกันเมธอด Array.includes() ตรวจสอบว่ามีค่า "องุ่น" ที่ระบุไว้ในผลไม้อาร์เรย์หรือไม่และเนื่องจาก "องุ่น" มีอยู่ในอาร์เรย์ result จะเป็นจริง
function isDivisibleBy7 ( num ) {
return num % 7 == 0
}
const nums = [ 28 , 7 , 3 , 29 , 15 , 1 , 2 , 23 ]
const filterResult = nums . filter ( isDivisibleBy7 )
const findResult = nums . find ( num => num < 10 )
const findIndexResult = nums . findIndex ( num => num / 2 == 14 )
console . log (
'filterResult:' ,
filterResult ,
'findResult:' ,
findResult ,
'findIndexResult:' ,
findIndexResult ,
)เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
เมธอด Array.filter() ส่งคืนอาร์เรย์ที่มีองค์ประกอบทั้งหมดที่ฟังก์ชั่นส่งผ่านไปยังจริง ในกรณีนี้ฟังก์ชั่น isDivisibleBy7 จะส่งคืนจริงสำหรับหมายเลขใด ๆ ที่หารด้วย 7. ในอาร์เรย์ nums , 7 และ 28 สามารถหารด้วย 7 ดังนั้น nums.filter(isDivisibleBy7) กลับมา [28, 7]
เมธอด Array.find() ส่งคืนองค์ประกอบแรกในอาร์เรย์ที่ฟังก์ชั่นส่งผ่านไปยังจริง ในกรณีนี้ฟังก์ชั่นที่ส่งกลับไปยังจริงสำหรับหมายเลขใด ๆ ที่น้อยกว่า 10 มีตัวเลขหลายตัวใน nums ที่น้อยกว่า nums.find((num) => num < 10) แต่เนื่องจาก Array.find() จะส่งคืนค่าแรกเท่านั้นที่เป็นจริง
เมธอด Array.findIndex() คล้ายกับเมธอด Array.find() แต่ส่งคืนดัชนีขององค์ประกอบแรกในอาร์เรย์ที่ฟังก์ชั่นส่งผ่านไปยังมันส่งคืนจริงแทนที่จะเป็นองค์ประกอบเอง ในกรณีนี้ฟังก์ชั่นที่ส่งกลับไปที่จริงสำหรับ 28 เนื่องจาก 28 /2 == 14. 28 อยู่ในอาร์เรย์ nums และอยู่ที่ดัชนี 0 ดังนั้น nums.find((num) => num / 2 == 14) ส่งคืน 0
const numbers = [ 1 , 2 , 3 , 4 , 5 ]
const doubledNumbers = numbers . map ( num => num * 2 )
console . log ( doubledNumbers )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
เมธอด Array.map() ใน JavaScript สร้างอาร์เรย์ใหม่โดยใช้ฟังก์ชั่นที่ให้ไว้กับแต่ละองค์ประกอบของอาร์เรย์ดั้งเดิม
ในกรณีนี้ฟังก์ชั่นที่ให้มา num => num * 2 คูณแต่ละหมายเลขในอาร์เรย์ตัวเลขด้วย 2 ส่งผลให้อาร์เรย์ใหม่ [2, 4, 6, 8, 10]
const numbers = [ 1 , 2 , 3 , 4 , 5 ]
const sum = numbers . reduce ( ( acc , val ) => acc + val )
console . log ( sum )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
Array.reduce() ใช้อาร์เรย์และ "ลด" เป็นค่าเดียวโดยใช้ฟังก์ชั่นซ้ำ ๆ กับแต่ละองค์ประกอบและติดตามผลลัพธ์ที่สะสม มันมักจะใช้สำหรับงานเช่นการรวมอาร์เรย์ของตัวเลขค้นหาค่าสูงสุดหรือการเชื่อมต่ออาเรย์ของสตริงลงในสตริงเดียว
ในกรณีนี้วิธีการลด () ใช้ฟังก์ชันการโทรกลับที่ดำเนินการสำหรับแต่ละองค์ประกอบของอาร์เรย์ ฟังก์ชั่นการเรียกกลับใช้พารามิเตอร์สองตัวคือ acc และ val ซึ่งเป็นตัวแทนของตัวสะสมและค่าปัจจุบันของอาร์เรย์ตามลำดับ
ภายในฟังก์ชั่นการโทรกลับค่าปัจจุบันของอาร์เรย์จะถูกเพิ่มลงในตัวสะสมและผลลัพธ์จะถูกส่งคืน วิธี reduce() จะอัปเดตค่าของตัวสะสมด้วยการวนซ้ำแต่ละครั้งจนกว่าจะมีการวนซ้ำมากกว่าองค์ประกอบทั้งหมดของอาร์เรย์
ในที่สุดวิธี reduce() จะส่งคืนค่าสุดท้ายของตัวสะสมซึ่งเป็นผลรวมของตัวเลขทั้งหมดในอาร์เรย์นั่นคือ 15
const arr = [ 1 , 2 , 3 , 4 ]
const result = arr . reduceRight ( ( acc , curr ) => acc + curr )
console . log ( result )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
วิธี reduceRight() นั้นคล้ายกับวิธี reduce() ยกเว้นว่าจะเริ่มลดอาร์เรย์จากองค์ประกอบขวาสุดไปยังองค์ประกอบซ้ายสุด เมธอด reduceRight() ใช้ฟังก์ชั่นกับตัวสะสมและแต่ละค่าของอาร์เรย์ (จากขวาไปซ้าย) เพื่อลดลงเป็นค่าเดียว
ในตัวอย่างโค้ดที่กำหนดอาร์เรย์ arr มีค่า [1, 2, 3, 4] วิธี reduceRight() เรียกใช้ในอาร์เรย์นี้ด้วยฟังก์ชั่นการโทรกลับที่เพิ่ม acc สะสมด้วย curr องค์ประกอบปัจจุบัน
ในการทำซ้ำครั้งแรกค่า curr จะเป็น 4 และค่า ACC จะ undefined เนื่องจากไม่มีค่าเริ่มต้น ดังนั้นผลลัพธ์ของการทำซ้ำครั้งแรกจะเป็น 4
ในการทำซ้ำครั้งที่สองค่า curr จะเป็น 3 และค่า acc จะเป็นผลมาจากการวนซ้ำก่อนหน้านี้ซึ่งคือ 4 ดังนั้นผลลัพธ์ของการทำซ้ำครั้งที่สองจะเป็น 7
ในการทำซ้ำครั้งที่สามค่า curr จะเป็น 2 และค่า acc จะเป็นผลมาจากการวนซ้ำก่อนหน้านี้ซึ่งคือ 7 ดังนั้นผลลัพธ์ของการทำซ้ำครั้งที่สามจะเป็น 9
ในการทำซ้ำครั้งที่สี่และครั้งสุดท้ายค่า curr จะเป็น 1 และค่า acc จะเป็นผลมาจากการทำซ้ำก่อนหน้านี้ซึ่งคือ 9 ดังนั้นผลลัพธ์ของการทำซ้ำครั้งที่สี่จะเป็น 10
ดังนั้นผลลัพธ์สุดท้ายของรหัสจะเป็น 10 ดังนั้นตัวเลือกที่ถูกต้องคือ A.
const arr = [ 'Centauri' , 3.14159 , 'canine' , 11235 , undefined ]
const result = arr . sort ( )
console . log ( result )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
โดยค่าเริ่มต้นเมธอด sort() เรียงลำดับองค์ประกอบตามอักขระดังนั้น 11235 มาก่อน 3.14159 เพราะ 1 มาก่อน 3
คำและตัวอักษรถูกจัดเรียงตามตัวอักษรโดยรหัส ASCII ดังนั้น "centauri" ซึ่งเริ่มต้นด้วยตัวพิมพ์ใหญ่ C (ASCII Code 67) เรียงลำดับก่อน "สุนัข" ซึ่งเริ่มต้นด้วยตัวพิมพ์เล็ก C (ASCII Code 99)
องค์ประกอบที่ไม่ได้กำหนดจะเรียงลำดับไปยังจุดสิ้นสุดของอาร์เรย์เสมอ
ดังนั้นผลลัพธ์สุดท้ายของรหัสจะเป็น [11235, 3.14159, 'centauri', 'canine', ไม่ได้กำหนด] ซึ่งเป็นตัวเลือก D.
let numbers = [ 1 , 2 , 3 , undefined , 6 , 7 , 8 , 9 ]
let [ a , , b , c = 2 , ... rest ] = numbers
console . log ( a , b , c , rest )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
ด้วยการทำลายโครงสร้างอาเรย์เป็นไปได้ที่จะแกะค่าบางอย่างจากอาร์เรย์ลงในตัวแปรแต่ละตัว ค่าที่เราสร้างขึ้นในด้านซ้ายมือ ( a, b, c, rest ) สอดคล้องกับค่าและลำดับของอาร์เรย์ที่เรากำหนดไว้ในด้านขวามือ ( numbers )
ตัวแปร a สอดคล้องกับองค์ประกอบแรกของอาร์เรย์ซึ่งคือ 1
เนื่องจากเราไม่ได้ระบุตัวแปรสำหรับค่าถัดไป 2 ค่าไม่ได้ถูกนำมาพิจารณาในการประเมินผลและถูกข้าม
ตัวแปร b สอดคล้องกับองค์ประกอบที่สามของอาร์เรย์ซึ่งคือ 3
เป็นไปได้ที่จะตั้งค่าเริ่มต้นสำหรับตัวแปรหากองค์ประกอบในอาร์เรย์ undefined เนื่องจากองค์ประกอบที่สี่ในอาร์เรย์ undefined ตัวแปร c จึงมีค่าเริ่มต้น 2
ด้วยตัวดำเนินการสเปรด ( ... ) เราสามารถกำหนดค่าที่เหลือของอาร์เรย์ให้กับตัวแปร เนื่องจากค่า [ 6, 7, 8, 9 ] เป็นค่าที่เหลือของอาร์เรย์จึงถูกกำหนดให้กับ rest ตัวแปร
ดังนั้นผลลัพธ์สุดท้ายคือ: 1 3 2 [ 6, 7, 8, 9 ] ซึ่งเป็นตัวเลือก B
const date1 = new Date ( )
const date2 = new Date ( '1995-12-17T05:10:00' )
const date3 = new Date ( '1995-10-15T08:12:15+02:00' )
console . log ( date1 , '' , date2 , '' , date3 )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
new Date() จะส่งคืนวันที่และเวลาปัจจุบันตามด้วยสองวันที่ระบุในรูปแบบ "yyyy-mm-ddthh: mm: ss.sssz" โดยที่ "z" หมายถึงเขตเวลา UTC ชดเชย
YYYY-MM-DDTHH:mm:ss.sssZ เป็นรูปแบบที่ใช้ในการแสดงวันที่และเวลาในมาตรฐาน ISO 8601 ประกอบด้วยส่วนประกอบต่อไปนี้:
YYYY : สี่หลัก (0000 ถึง 9999) หรือเป็นปีที่ขยายด้วย + หรือ - ตามด้วยตัวเลขหกหลัก จำเป็นต้องมีสัญญาณสำหรับปีที่ขยายตัว -000000 ไม่ได้รับอนุญาตอย่างชัดเจนว่าเป็นปีที่ถูกต้องMM : เดือนสองหลัก (01 = มกราคม, 02 = กุมภาพันธ์และอื่น ๆ ) มันเริ่มต้นเป็น 01DD : วันสองหลักของเดือน (01 ถึง 31)T : ตัวคั่นที่ระบุจุดเริ่มต้นของส่วนประกอบเวลาHH : ชั่วโมงสองหลักของวันในรูปแบบ 24 ชั่วโมง (00 ถึง 23) เป็นกรณีพิเศษเวลา 24:00:00 น. และถูกตีความว่าเป็นเที่ยงคืนในช่วงต้นของวันถัดไป ค่าเริ่มต้นเป็น 00mm : นาทีสองหลักของชั่วโมง (00 ถึง 59) ค่าเริ่มต้นเป็น 00ss : สองหลักสองของนาที (00 ถึง 59) ค่าเริ่มต้นเป็น 00.sss : ส่วนประกอบมิลลิวินาที (000 ถึง 999) ค่าเริ่มต้นเป็น 000Z : คำต่อท้ายที่ระบุว่าเวลาอยู่ใน UTC (เวลาสากลที่ประสานงานกัน) โดยไม่มีการชดเชย มันอาจเป็นตัวอักษรตัวอักษร z (ระบุ UTC) หรือ + หรือ - ตามด้วย HH: mm, ออฟเซ็ตเป็นชั่วโมงและนาทีจาก UTC const date = new Date ( 'Mart 15, 1975 23:15:30' )
date . setMinutes ( 10 )
date . setUTCDate ( 5 )
console . log (
'Minutes:' + date . getMinutes ( ) + ',' ,
'' ,
'Year:' + date . getFullYear ( ) + ',' ,
'' ,
'UTCDate:' + date . getUTCDate ( ) ,
)เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
รหัสที่ให้ไว้สร้างวัตถุวันที่เริ่มต้นด้วยวันที่และเวลา "15 มีนาคม 1975 23:15:30"
จากนั้นจะแก้ไขวันที่นาทีและ UTC ของวัตถุวันที่โดยใช้วิธีการ setMinutes() และ setUTCDate() ตามลำดับ
ในที่สุดจะบันทึกค่าที่อัปเดตของนาทีปีและวันที่ UTC โดยใช้ console.log()
หลังจากแก้ไขนาทีเป็น 10 โดยใช้ setMinutes(10) วิธี getMinutes() จะส่งคืนค่าที่อัปเดต 10
หลังจากแก้ไขวันที่ UTC เป็น 5 โดยใช้ setUTCDate(5) วิธี getUTCDate() จะส่งคืนค่าที่อัปเดตเป็น 5
วิธีการ getFullYear() ส่งคืนปีที่ไม่เปลี่ยนแปลงซึ่งก็คือปี 1975
const date1 = new Date ( '2023-5-1' )
const next_us_election = new Date ( '2024-11-5' )
const difference_in_time = next_us_election . getTime ( ) - date1 . getTime ( )
const difference_in_days = difference_in_time / ( 1000 * 3600 * 24 )
console . log ( parseInt ( difference_in_days , 10 ) + ' Days' )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
รหัสคำนวณความแตกต่างในวันระหว่างวันที่ "2023-5-1" และวันเลือกตั้งครั้งต่อไปของสหรัฐอเมริกา "2024-11-5" มันใช้วัตถุ Date เพื่อสร้างสองวันที่: date1 หมายถึง 1 พฤษภาคม, 2023 และ next_us_election แสดงถึง 5 พฤศจิกายน 2024
วิธี getTime() ใช้เพื่อรับค่าเวลาเป็นมิลลิวินาทีสำหรับแต่ละวัน โดยการลบค่าเวลาของ date1 จาก next_us_election เราจะได้รับความแตกต่างของเวลาในมิลลิวินาที
ในการแปลงความแตกต่างของเวลาจากมิลลิวินาทีเป็นวันเราแบ่งออกเป็นจำนวนมิลลิวินาทีในหนึ่งวัน (1,000 _ 3600 _ 24) ผลลัพธ์จะถูกเก็บไว้ในตัวแปร difference_in_days
ในที่สุดฟังก์ชั่น parseInt() ใช้เพื่อแปลงค่า different_in_days เป็นจำนวนเต็มและผลลัพธ์จะถูกบันทึกไปยังคอนโซลพร้อมกับสตริง "วัน" ผลลัพธ์จะเป็น "554 วัน"
let person = {
name : 'John' ,
age : 30 ,
hobbies : [ 'reading' , 'traveling' , 'cooking' ] ,
address : {
street : '123 Main St' ,
city : 'New York' ,
state : 'NY' ,
} ,
sayHello : function ( ) {
console . log ( 'Hello, my name is ' + this . name )
} ,
}
console . log ( person . name )
console . log ( person . hobbies [ 1 ] )
console . log ( person . address . city )
person . sayHello ( )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
รหัสกำหนด person ที่เป็นตัวอักษรวัตถุที่มีคุณสมบัติเช่น name age hobbies และ address และวิธีการ sayHello
คำสั่ง console.log() พิมพ์ค่าของ name องค์ประกอบที่สองของอาร์เรย์ hobbies (ซึ่งเป็น "การเดินทาง") และมูลค่าของทรัพย์สิน city ในวัตถุ address (ซึ่งคือ "นิวยอร์ก")
ในที่สุดวิธีการ sayHello ถูกเรียกใช้วัตถุ person โดยใช้สัญลักษณ์ DOT ซึ่งส่งออกสตริง "สวัสดีชื่อของฉันคือ John" ไปยังคอนโซล
function User ( username ) {
this . username = username
this . updateUsername = newName => {
this . username = newName
}
}
const user1 = new User ( 'kirandash' )
const user2 = new User ( 'bgwebagency' )
user1 . updateUsername ( 'kirandash-website' )
user2 . updateUsername ( 'bgwebagency-app' )
console . log ( user1 . username , user2 . username )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
รหัสกำหนด User ฟังก์ชั่นคอนสตรัคเตอร์ที่สร้างวัตถุ user ด้วยคุณสมบัติชื่อ username และวิธีการ updateUsername วัตถุ user สองวัตถุคือ user1 และ user2 ถูกสร้างขึ้นด้วยชื่อผู้ใช้เริ่มต้น 'Kirandash' และ 'BgweBagency' ตามลำดับ
เมธอด updateUsername ถูกเรียกใช้ทั้งวัตถุ user1 และ user2 เพื่ออัปเดตชื่อผู้ใช้ ชื่อผู้ใช้ของ user1 ได้รับการอัปเดตเป็น 'Kirandash-Website' และชื่อผู้ใช้ของ user2 ได้รับการอัปเดตเป็น 'BgweBagency-App'
ในที่สุดรหัสจะบันทึกการเชื่อมต่อของ user1.username และ user2.username ซึ่งส่งผลให้ผลลัพธ์ 'kirandash-website bgweBagency-app'
function greet ( name ) {
console . log ( `Hello, ${ name } ! Welcome to ${ this . location } .` )
}
const person = {
location : 'New York' ,
}
greet . call ( person , 'John' )
greet . apply ( person , [ 'Alex' ] )
const greetPerson = greet . bind ( person )
greetPerson ( 'Thomas' )เอาต์พุตตัวอย่างโค้ดด้านบนทำอะไร?
The call function is used to invoke the greet function with the person object as the context (the value of this ) and 'John' as the argument.
The apply function is used to invoke the greet function with the person object as the context (the value of this ) and an array ['Alex'] as the arguments.
The bind function is used to create a new function greetPerson with the person object as the bound context (the value of this ).
In summary, the code demonstrates how call , apply , and bind can be used to invoke a function with a specific context and arguments
class Animal {
constructor ( name ) {
this . name = name
}
static makeSound ( ) {
console . log ( 'Generic animal sound' )
}
sayName ( ) {
console . log ( `My name is ${ this . name } ` )
}
}
const a1 = new Animal ( 'Lion' )
const a2 = new Animal ( 'Time' )
Animal . makeSound ( )
a1 . makeSound ( )
a2 . makeSound ( )What does the above code snippet output?
The static method makeSound() is defined on the Animal class, and is accessible directly through the class itself, ie, Animal.makeSound() . This will output "Generic animal sound" to the console.
However, when we try to call makeSound() on an instance of the Animal class (a1.makeSound() and a2.makeSound()) , we get a TypeError, because static methods can only be accessed through the class itself and not through its instances.
function Animal ( name ) {
this . name = name
}
Animal . prototype . eat = function ( ) {
console . log ( this . name + ' is eating.' )
}
function Dog ( name ) {
Animal . call ( this , name )
}
Dog . prototype = Object . create ( Animal . prototype )
Dog . prototype . constructor = Dog
Dog . prototype . bark = function ( ) {
console . log ( this . name + ' is barking.' )
}
function CustomArray ( ) {
Array . call ( this )
}
CustomArray . prototype = Object . create ( Array . prototype )
CustomArray . prototype . constructor = CustomArray
CustomArray . prototype . sum = function ( ) {
return this . reduce ( ( acc , val ) => acc + val , 0 )
}
var dog = new Dog ( 'Buddy' )
dog . eat ( )
dog . bark ( )
var numbers = new CustomArray ( )
numbers . push ( 1 , 2 , 3 , 4 , 5 )
console . log ( numbers . sum ( ) )What will be the output of the following code
Explanation: In this example, we have a base class called Animal that defines a constructor and an eat() method. The subclass Dog extends the Animal class and adds its own constructor, bark() method, and a specific property breed .
Furthermore, we extend the built-in Array class using the class syntax to create a CustomArray class. The CustomArray class adds a custom method called sum() that calculates the sum of the array elements.
In the usage section, we create an instance of Dog named dog with the name "Buddy" . We can call the inherited eat() method from the Animal class, the bark() method defined in the Dog class.
Additionally, we create an instance of CustomArray called numbers and add some numbers to it. We can call the custom sum() method, which is added to the built-in Array class through subclassing.
This example showcases inheritance, subclassing, and extending a built-in class in JavaScript, illustrating how classes can be extended and customized to add additional functionality.
const person = {
name : 'John' ,
age : 30 ,
city : 'New York' ,
}
const { name , age , city } = person
console . log ( name )
console . log ( age )
console . log ( city )What will be the output of the following code
In the code above, we have an object literal called person with properties name , age , and city . We then use object destructuring to extract those properties into separate variables ( name , age , and city ). After destructuring, we can use these variables to access the corresponding values from the object.
Consider the following code snippet:
// module.mjs
export const PI = 3.14159
export function calculateArea ( radius ) {
return PI * radius * radius
}
export default function calculateCircumference ( radius ) {
return 2 * PI * radius
}
// script.mjs
import calculateCircumference , { PI , calculateArea } from './module.mjs'
console . log ( PI ) // Output: ________
console . log ( calculateArea ( 5 ) ) // Output: ________
console . log ( calculateCircumference ( 5 ) ) // Output: ________What will be the output of the console.log statements in the code above?
Options:
3.14159 , 78.53975 , 31.41593.14159 , 78.53975 , 62.83183.14159 , 78.53975 , NaN3.14159 , NaN , 62.8318 The module.js file exports three entities:
PI is a named export, exported using the export keyword.calculateArea is a named export, exported using the export keyword.calculateCircumference is the default export, exported using the export default syntax. In the main.js file, we import PI and calculateArea as named exports using the destructuring assignment syntax. We also import calculateCircumference as the default export. The import statements reference the module.js file using the relative file path ./module.js .
The outputs of the console.log statements will be:
console.log(PI) will output 3.14159 since we imported the named export PI .console.log(calculateArea(5)) will output 78.53975 since we imported the named export calculateArea and called the function with a radius of 5.console.log(calculateCircumference(5)) will output 62.8318 since we imported the default export calculateCircumference and called the function with a radius of 5. Consider the following code snippet:
// foo.js
function foo ( ) {
console . log ( `Foo` )
}
export { foo } What is the correct Syntax to import the function foo ?
Options:
import foo from "./foo"import foo as FooFunction from "./foo"import { foo } from "./foo"import { foo } from "./bar" Named exports are imported into different files with braces and must be imported with the name of the object, function or variable that was exported. In this example, a function with the name foo is exported from the file foo.js . Accordingly, the correct expression is: import { foo } from "./foo" .
In JavaScript, when importing a default export from a module, which syntax correctly assigns an alias "myAlias" to the default import?
Explanation: Both option B and C are valid syntaxes for importing a default export from a module and assigning it an alias. The difference between the two syntaxes is that option B does not use the { default as myAlias } syntax. This means that the default export will be imported under the name myAlias, rather than the name default.
Here is an example of how to use the option B syntax:{import myAlias from 'module';},This will import the default export from the module module and assign it the name myAlias. You can then use the myAlias variable to access the default export from the module module. Here is an example of how to use the option C syntax:{import { default as myAlias } from 'module';},This will import the default export from the module module and assign it the alias myAlias. You can then use the myAlias alias to access the default export from the module module.
The choice of which syntax to use is up to you. The option B syntax is simpler, but it can lead to collisions if there is already a variable named myAlias in the current scope. The option C syntax is more verbose, but it avoids collisions.
Which method is used to convert a JavaScript object to a JSON string while preserving data types like Dates and RegEx?
JSON.stringify()JSON.stringify() with a custom replacer functionJSON.toTypedString()JSON.stringify()JSON.stringify() with a custom replacer function. Explanation: The JSON.stringify() method can be used to convert a JavaScript object to a JSON string. However, by default, it will not preserve data types like Dates and RegEx . To preserve these data types, you can use a custom replacer function. The replacer function takes an object as input and returns a new object with the modified values.
The code below would show you how to use a custom replacer function to preserve data types:
function replacer ( key , value ) {
if ( typeof value === 'Date' ) {
return value . toJSON ( )
} else if ( typeof value === 'RegExp' ) {
return value . toString ( )
} else {
return value
}
}
const object = {
date : new Date ( ) ,
regex : / some regex / ,
}
const jsonString = JSON . stringify ( object , replacer )
